/*
Theme Name: Ansley Jaye (AJ) Theme
Description: Minimal, fast, accessible personal brand theme for Ansley Jaye.
Version: 2.0
*/

:root{
  --rj-bg: #f5f7fb;
  --rj-surface: #ffffff;
  --rj-text: #0f172a;
  --rj-muted: #475569;
  --rj-border: rgba(15, 23, 42, .10);

  /* Ansley brand */
  --rj-primary: #4D1979; /* purple */
  --rj-accent:  #C3A768; /* gold */

  --rj-radius-lg: 22px;
  --rj-radius-md: 16px;

  --rj-shadow: 0 18px 40px rgba(15, 23, 42, .08);
  --rj-shadow-soft: 0 10px 26px rgba(15, 23, 42, .06);

  --rj-max: 1120px;
  --rj-pad: 24px;
  --rj-nav-h: 72px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  line-height:1.6;
  background: var(--rj-bg);
  color: var(--rj-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img{ max-width:100%; height:auto; display:block; border-radius: 14px; }

a{ color: inherit; text-decoration:none; }
a:hover{ color: var(--rj-primary); }

:focus-visible{
  outline: 3px solid rgba(77, 25, 121, .35);
  outline-offset: 3px;
  border-radius: 10px;
}

.rj-wrap{ min-height: 100vh; display:flex; flex-direction:column; }

/* Container */
.rj-container{
  width: 100%;
  max-width: var(--rj-max);
  margin: 0 auto;
  padding: 0 var(--rj-pad);
}

/* Header / Nav */
.rj-header{
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--rj-nav-h);
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rj-border);
}

.rj-header__inner{
  height: 100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
}

.rj-brand{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 180px;
}

.rj-mark{
  width: 36px;
  height: 36px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--rj-primary), #2a0d44);
  color: #fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 750;
  letter-spacing: .02em;
  box-shadow: 0 14px 26px rgba(77, 25, 121, .22);
}

.rj-brand__name{
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .86rem;
}

.rj-nav{
  display:flex;
  align-items:center;
  gap: 18px;
  flex-wrap: wrap;
}

.rj-nav a{
  font-size: .86rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, .88);
  position: relative;
}

.rj-nav a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  height:2px;
  width:0;
  background: linear-gradient(90deg, var(--rj-primary), var(--rj-accent));
  transition: width .16s ease;
}
.rj-nav a:hover::after{ width: 100%; }

.rj-cta{
  border: 1px solid var(--rj-border);
  background: #f4ecff;
  padding: 10px 14px;
  border-radius: 999px;
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  display:inline-flex;
  align-items:center;
  gap: 8px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
}
.rj-cta__dot{
  width: 7px; height:7px; border-radius: 999px;
  background: #22c55e;
}

/* Mobile nav */
.rj-burger{
  display:none;
  border: 1px solid var(--rj-border);
  background: #fff;
  border-radius: 999px;
  padding: 10px 12px;
  box-shadow: var(--rj-shadow-soft);
  cursor:pointer;
}
.rj-burger span{ display:block; width: 18px; height:2px; background:#0f172a; margin:4px 0; opacity:.86; }

@media (max-width: 980px){
  .rj-nav{ display:none; }
  .rj-burger{ display:block; }
  .rj-nav.rj-nav--open{
    display:flex;
    position:absolute;
    top: calc(var(--rj-nav-h) + 10px);
    left: 24px;
    right: 24px;
    background: #fff;
    border: 1px solid var(--rj-border);
    border-radius: var(--rj-radius-lg);
    padding: 14px 14px;
    box-shadow: var(--rj-shadow);
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

/* Sections */
.rj-section{ padding: 56px 0; }
.rj-section--alt{ background: #fff; }

.rj-hero{
  padding: 56px 0 44px;
  background: radial-gradient(circle at top left, #f4ecff 0, #ffffff 45%, var(--rj-bg) 100%);
}

.rj-grid-hero{
  display:grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 34px;
  align-items:center;
}
@media (max-width: 980px){
  .rj-grid-hero{ grid-template-columns: minmax(0,1fr); }
}

.rj-eyebrow{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--rj-border);
  background: #f4ecff;
  font-size: .76rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rj-primary);
  margin-bottom: 16px;
}

.rj-h1{
  font-size: clamp(2.2rem, 4vw, 3.1rem);
  line-height: 1.08;
  margin: 0 0 12px;
  letter-spacing: .01em;
}

.rj-lead{
  margin: 0 0 18px;
  font-size: 1.05rem;
  color: var(--rj-muted);
  max-width: 44rem;
}

.rj-badges{ display:flex; flex-wrap:wrap; gap: 10px; margin: 18px 0 22px; }
.rj-badge{
  border: 1px solid var(--rj-border);
  background: #fff;
  padding: 9px 12px;
  border-radius: 999px;
  font-size: .86rem;
  color: rgba(15,23,42,.80);
}
.rj-badge--good{
  background: #ecfdf5;
  border-color: rgba(5,150,105,.18);
  color: rgba(5, 80, 60, .95);
}

.rj-actions{ display:flex; flex-wrap:wrap; gap: 12px; }
.rj-btn{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 999px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .88rem;
  border: 1px solid var(--rj-border);
  background: #fff;
  cursor:pointer;
}
.rj-btn--primary{
  border: none;
  background: linear-gradient(135deg, var(--rj-primary), #2a0d44);
  color: #fff;
  box-shadow: 0 16px 32px rgba(77, 25, 121, .22);
}

.rj-card{
  background: var(--rj-surface);
  border: 1px solid var(--rj-border);
  border-radius: var(--rj-radius-lg);
  padding: 18px 18px;
  box-shadow: var(--rj-shadow);
}

.rj-card h3{
  margin: 0 0 8px;
  font-size: 1.05rem;
}
.rj-card p{ margin: 0 0 10px; color: rgba(15,23,42,.80); }
.rj-card p:last-child{ margin-bottom:0; }

.rj-kicker{
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(15,23,42,.52);
  margin: 0 0 10px;
}

.rj-grid{
  display:grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
}
.rj-col-7{ grid-column: span 7; }
.rj-col-5{ grid-column: span 5; }
.rj-col-6{ grid-column: span 6; }
.rj-col-4{ grid-column: span 4; }
.rj-col-12{ grid-column: span 12; }
@media (max-width: 980px){
  .rj-col-7,.rj-col-5,.rj-col-6,.rj-col-4{ grid-column: span 12; }
}

.rj-section-head{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.rj-h2{
  margin: 0;
  font-size: 1.35rem;
  letter-spacing: .10em;
  text-transform: uppercase;
}
.rj-sub{
  margin: 0;
  color: rgba(15,23,42,.70);
  max-width: 44rem;
}

/* Lists, pills, tags */
.rj-pills{ display:flex; flex-wrap:wrap; gap: 8px; }
.rj-pill{
  border: 1px solid var(--rj-border);
  background: #f8fafc;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: .86rem;
}

.rj-meta{
  font-size: .90rem;
  color: rgba(15,23,42,.62);
}

.rj-hr{
  border: 0;
  border-top: 1px solid var(--rj-border);
  margin: 18px 0;
}

/* Basic prose defaults for post/page content */
.rj-prose > *{ max-width: 75ch; }
.rj-prose p{ margin: 0 0 14px; }
.rj-prose ul, .rj-prose ol{ margin: 0 0 14px 18px; }
.rj-prose h2, .rj-prose h3{ margin: 18px 0 10px; }
.rj-prose a{ color: var(--rj-primary); text-decoration: underline; text-underline-offset: 3px; }

/* Footer */
.rj-footer{
  background:#fff;
  border-top: 1px solid var(--rj-border);
  padding: 26px 0;
  margin-top:auto;
  color: rgba(15,23,42,.62);
  font-size: .86rem;
}
.rj-footer__inner{
  display:flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

@media (max-width: 640px){
  .rj-footer__inner{ gap: 8px; }
}