/* register-theme.css - site-wide register skin for rto.caqa.com
   Loaded on EVERY page. Two jobs:
     1. Reskin the cqMega mega menu into the register palette. The component is
        entirely custom-property driven, so this is a variable override and not
        a fork. The menu keeps all of its behaviour and its course panels.
     2. Re-theme the existing interior pages (page-hero, section, container,
        headings, buttons) so about / contact / student information and the 35
        course pages match the new homepage without their markup being rebuilt.
   The homepage's bespoke sections live in register.css, scoped under .rg.
   The cqft / cqf3 footer is deliberately untouched. */

:root{
  --rg-paper:#fffefb; --rg-parch:#f7f4ed; --rg-parch-2:#f1ece1;
  --rg-ink:#14171f; --rg-ink-2:#3d434f;
  --rg-mute:#5c6170;      /* 5.6:1 on parchment; was #6d7382 at 4.32:1 */
  --rg-navy:#132a5e; --rg-navy-2:#1b3a7d;
  --rg-brass:#a8874a; --rg-brass-ink:#806738; --rg-brass-l:#c9ae74;
  --rg-red:#b3202a; --rg-line:#e0dacd; --rg-line-2:#ece7db;
  --rg-serif:"Cormorant Garamond",Garamond,Georgia,serif;
  --rg-sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --rg-mono:"JetBrains Mono",ui-monospace,monospace;
}

/* ============================ 1. mega menu ============================ */
#cqMega{
  --cqm-accent:#132a5e;
  --cqm-accent-ink:#132a5e;
  --cqm-ink:#14171f;
  --cqm-top-ink:#132a5e;
  --cqm-ink-2:#3d434f;
  --cqm-grey:#6d7382;
  --cqm-line:#e0dacd;
  --cqm-hair:#ece7db;
  --cqm-bg:rgba(255,254,251,.95);
  --cqm-strip-bg:#14171f;
  --cqm-tint:#f7f4ed;
  --cqm-tint10:rgba(168,135,74,.10);
  --cqm-tint16:rgba(168,135,74,.17);
  --cqm-display:"Cormorant Garamond",Garamond,Georgia,serif;
  --cqm-mono:"JetBrains Mono",ui-monospace,monospace;
  font-family:var(--rg-sans);
}
/* the utility strip reads as the register's rule-top */
#cqMega .cqm-strip,#cqMega .cqm-utility{letter-spacing:.14em;text-transform:uppercase;font-size:10px}
/* the strip ground is dark ink, so its text must not inherit the light-ground ink */
#cqMega .cqm-strip,#cqMega .cqm-strip *{color:#cfd3dc}
#cqMega .cqm-strip a,#cqMega .cqm-tagline{color:var(--rg-brass-l)}
#cqMega .cqm-cta{border-radius:0;letter-spacing:.03em;font-weight:500}
#cqMega .cqm-cta:hover{box-shadow:none;transform:none;background:var(--rg-navy-2)}
#cqMega .cqm-bar{border-bottom:1px solid var(--rg-line)}
#cqMega .cqm-coltitle,#cqMega .cqm-feat-title{font-family:var(--cqm-display);font-weight:500}
#cqMega .cqm-colhead,#cqMega .cqm-feat-eyebrow{font-family:var(--cqm-mono);letter-spacing:.13em;
  text-transform:uppercase;font-size:10px;color:var(--rg-brass-ink)}

/* --- typography carried over from the previous site, normalised ---
   The component arrived using eight weights and eight sizes. Two of those
   weights (450 and 800) are not in the loaded Inter set, so the browser was
   synthesising them, which is why the menu looked subtly off against the rest
   of the page. Mono was also being used at 15px/600 for a body CTA, where it
   belongs only on small uppercase labels. Everything below maps the menu onto
   the same scale and the same loaded weights {400,500,600,700} as the page. */
#cqMega .cqm-feat-more,#cqMega .cqm-feat-arr{
  font-family:var(--cqm-mono); font-size:10.5px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
}
#cqMega .cqm-link-lbl{font-weight:500; font-size:15px}          /* was 450, unloaded */
#cqMega .cq-rto-chip{font-weight:700; font-size:10px;            /* was 800, unloaded */
  font-family:var(--cqm-mono); letter-spacing:.1em}
#cqMega .cqm-top,#cqMega .cqm-lbl{                               /* was 14px/700 */
  font-weight:500; font-size:13px; letter-spacing:.02em;
}
#cqMega .cqm-sublink,#cqMega .cqm-desc,#cqMega .cqm-feat-sub{font-size:14px; font-weight:400}
#cqMega .cqm-coltitle{font-size:25px}
#cqMega .cqm-feat-title{font-size:30px}
#cqMega .cqm-tagline,#cqMega .cqm-contact,#cqMega .cqm-clbl{
  font-family:var(--cqm-mono); font-weight:400; font-size:10px; letter-spacing:.12em;
}

/* ===================== 2. interior page re-theme ====================== */
/* Opt-in: only pages carrying data-rg-theme are re-skinned, so nothing else
   in the fleet is affected if these files are ever copied elsewhere. */
body[data-rg-theme]{
  background:var(--rg-paper); color:var(--rg-ink);
  font-family:var(--rg-sans); -webkit-font-smoothing:antialiased;

  /* Legacy tokens from the dark-theme era, re-pointed for the light register.
     These are referenced by ~40 rules and by inline styles on the course
     pages, so overriding the tokens fixes every use at once rather than
     chasing selectors. Measured on parchment #f7f4ed:
       --gold  #F2929B  2.04:1  ->  brass  #806738  4.88:1
       --muted #8A91A8  2.86:1  ->         #5c6170  5.62:1
       --red   #E51B28  4.23:1  ->         #b3202a  5.62:1
     --line, --bg and --white are backgrounds and are left alone. */
  --gold:#806738;
  --gold-soft:#c9ae74;
  --muted:#5c6170;
  --red:#b3202a;
}
body[data-rg-theme] h1,body[data-rg-theme] h2,body[data-rg-theme] h3,
body[data-rg-theme] h4,body[data-rg-theme] .h-lg,body[data-rg-theme] .h-md{
  font-family:var(--rg-serif); font-weight:500; line-height:1.09;
  letter-spacing:-.02em; color:var(--rg-navy);
}
body[data-rg-theme] h1{font-size:clamp(38px,5vw,66px)}
body[data-rg-theme] h2,body[data-rg-theme] .h-lg{font-size:clamp(30px,3.8vw,48px)}
body[data-rg-theme] h3{font-size:clamp(21px,2vw,27px)}
body[data-rg-theme] p{color:var(--rg-ink-2)}
body[data-rg-theme] a{color:var(--rg-navy)}

/* page hero becomes the register plate */
body[data-rg-theme] .page-hero{
  position:relative; background:var(--rg-parch);
  border-bottom:1px solid var(--rg-line);
  padding:clamp(52px,7vw,96px) 0 clamp(44px,6vw,78px);
}
body[data-rg-theme] .page-hero .hex-pattern{
  position:absolute; inset:0; pointer-events:none; opacity:.16;
  background:url("../img/guilloche.svg") right -180px center/620px no-repeat;
}
body[data-rg-theme] .page-hero .lead{
  font-size:clamp(16px,1.35vw,19px); color:var(--rg-ink-2); max-width:31em; margin-top:20px;
}
body[data-rg-theme] .crumbs{
  font-family:var(--rg-mono); font-size:10.5px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--rg-mute); margin-bottom:22px;
}
body[data-rg-theme] .crumbs a{color:var(--rg-brass-ink); text-decoration:none}
body[data-rg-theme] .crumbs a:hover{text-decoration:underline; text-underline-offset:3px}

/* Course hero badge and meta chips.
   These were styled for a DARK hero (#F2C6CB text, #C3CCE6 chips, white-alpha
   fills). The page hero is parchment now, so those pale values were rendering
   at 1.39:1 and 2.04:1, effectively invisible. Restated for a light ground. */
body[data-rg-theme] .page-hero .hero-badge{
  background:var(--rg-paper); border:1px solid var(--rg-brass); border-radius:0;
  box-shadow:none; color:var(--rg-ink-2);            /* 8.9:1 on paper */
  font-family:var(--rg-mono); font-size:10.5px; font-weight:400;
  letter-spacing:.15em; padding:8px 16px;
}
body[data-rg-theme] .page-hero .hero-badge b{
  color:var(--rg-red); font-weight:700;              /* 5.9:1 on paper */
}
body[data-rg-theme] .page-hero .badge-row .hb{
  background:var(--rg-paper); border:1px solid var(--rg-line); border-radius:0;
  color:var(--rg-ink-2); letter-spacing:.02em;       /* 8.9:1 on paper */
  font-size:13px; padding:9px 16px;
}
body[data-rg-theme] .page-hero .badge-row .hb b{
  color:var(--rg-navy); font-weight:600;             /* 12.4:1 on paper */
}

/* sections */
body[data-rg-theme] .section{padding:clamp(58px,7vw,100px) 0; background:var(--rg-paper)}
body[data-rg-theme] .section.alt{background:var(--rg-parch)}
body[data-rg-theme] .kicker{
  font-family:var(--rg-mono); font-size:10.5px; letter-spacing:.17em;
  text-transform:uppercase; color:var(--rg-brass-ink); display:block; margin-bottom:16px;
}
body[data-rg-theme] .policy-body{font-size:16px; line-height:1.75; color:var(--rg-ink-2)}
body[data-rg-theme] .policy-body h2{margin-top:2em}
body[data-rg-theme] .policy-body li{margin-bottom:.5em}
body[data-rg-theme] .policy-body p,body[data-rg-theme] .policy-body li{max-width:34em}
/* these five policy pages previously rendered no h1 at all */
body[data-rg-theme] .policy-h1{
  font-size:clamp(32px,4vw,52px); margin:0 0 8px;
  padding-bottom:20px; border-bottom:1px solid var(--rg-line);
}
body[data-rg-theme] .policy-h1+*{margin-top:28px}

/* buttons, squared off to match the register */
body[data-rg-theme] .btn,body[data-rg-theme] .button,
body[data-rg-theme] .btn-primary,body[data-rg-theme] .hero-actions a{
  border-radius:0; font-family:var(--rg-sans); font-weight:500;
  letter-spacing:.03em; font-size:13px; padding:13px 24px;
  background:var(--rg-navy); border:1px solid var(--rg-navy); color:#fff;
  text-decoration:none; display:inline-flex; align-items:center; gap:9px;
  transition:background .25s,border-color .25s;
}
body[data-rg-theme] .btn:hover,body[data-rg-theme] .button:hover,
body[data-rg-theme] .btn-primary:hover,body[data-rg-theme] .hero-actions a:hover{
  background:var(--rg-navy-2); border-color:var(--rg-navy-2);
}
body[data-rg-theme] .btn-secondary,body[data-rg-theme] .btn-ghost,
body[data-rg-theme] .btn-outline{background:transparent; color:var(--rg-navy)}
body[data-rg-theme] .btn-secondary:hover,body[data-rg-theme] .btn-ghost:hover,
body[data-rg-theme] .btn-outline:hover{background:var(--rg-navy); color:#fff}

/* cards and panels pick up the parchment rule rather than shadow */
body[data-rg-theme] .card,body[data-rg-theme] .panel,body[data-rg-theme] .tile,
body[data-rg-theme] .course-card{
  border-radius:0; border:1px solid var(--rg-line);
  background:var(--rg-paper); box-shadow:none;
}
body[data-rg-theme] .card:hover,body[data-rg-theme] .course-card:hover{border-color:var(--rg-brass)}
body[data-rg-theme] table{border-collapse:collapse}
body[data-rg-theme] table th{
  font-family:var(--rg-mono); font-size:10px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--rg-mute); background:var(--rg-parch);
  text-align:left; border-bottom:1px solid var(--rg-line);
}
body[data-rg-theme] table td{border-bottom:1px solid var(--rg-line-2)}
body[data-rg-theme] code,body[data-rg-theme] .code{font-family:var(--rg-mono); color:var(--rg-brass-ink)}

/* ==================== 3. footer, restored and retuned ====================
   The generic heading / link / paragraph rules above are element selectors and
   were leaking into the dark footer, painting navy text on a navy ground at
   1.21:1. Everything below re-asserts the footer's own palette at higher
   specificity, and retunes it from the old royal-blue identity to the register
   one: brass for headings, warm off-white for links. Every pair is stated with
   its measured contrast ratio against the footer ground #0E1B42. */
body[data-rg-theme] footer.cqf3{color:#E9ECF3}                       /* 14.2:1 */
body[data-rg-theme] footer.cqf3 p,
body[data-rg-theme] footer.cqf3 .cqf3-blurb{color:#C6CFE0}           /* 10.4:1 */
body[data-rg-theme] footer.cqf3 h4,
body[data-rg-theme] footer.cqf3 h2,
body[data-rg-theme] footer.cqf3 .cqf3-h,
body[data-rg-theme] footer.cqf3 .cqf3-col h4,
body[data-rg-theme] footer.cqf3 .cqf3-band h4{
  font-family:var(--rg-mono); font-size:10.5px; font-weight:400;
  letter-spacing:.15em; text-transform:uppercase; color:var(--rg-brass-l); /* 7.1:1 */
  margin:0 0 14px; line-height:1.4;
}
body[data-rg-theme] footer.cqf3 a{color:#DCE3F0; text-decoration:none}  /* 12.1:1 */
body[data-rg-theme] footer.cqf3 a:hover{
  color:#fff; text-decoration:underline; text-decoration-color:var(--rg-brass-l);
  text-underline-offset:3px;
}
body[data-rg-theme] footer.cqf3 .cqf3-info b{color:var(--rg-brass-l); font-weight:500}
body[data-rg-theme] footer.cqf3 .cqf3-bottom{color:#AEB5C2}          /* 8.1:1 */
body[data-rg-theme] footer.cqf3 .cqf3-socials a{color:#E9ECF3}

/* newsletter band above the footer.
   The card was royal blue #1558C1 on a cool grey ground, the last survivor of
   the previous identity and the only place the palette broke between a
   parchment page and the navy footer. Retuned to the register navy with a
   brass hairline, and the ground to parchment so it reads as one system. */
body[data-rg-theme] .cqft{background:var(--rg-parch)}
body[data-rg-theme] .cqft-card{
  background:var(--rg-navy); border-radius:0;
  box-shadow:inset 0 0 0 1px rgba(201,174,116,.34);
}
body[data-rg-theme] .cqft-card form input[type=email]{border-radius:0}
body[data-rg-theme] .cqft-card form button{
  border-radius:0; background:var(--rg-red); letter-spacing:.06em; font-weight:600;
}
body[data-rg-theme] .cqft h2,body[data-rg-theme] .cqft-copy h2{color:#fff}
body[data-rg-theme] .cqft p,body[data-rg-theme] .cqft-copy p{color:#DFE8F6}
body[data-rg-theme] .cqft-consent,
body[data-rg-theme] .cqft-card .cqft-consent{color:rgba(255,255,255,.9)}
body[data-rg-theme] .cqft-consent a,
body[data-rg-theme] .cqft-card .cqft-consent a{color:#fff; text-decoration:underline}
body[data-rg-theme] .cqft-form input[type=email]{color:#202233}
body[data-rg-theme] .cqft-card form input[type=email]{color:#202233}

@media(prefers-reduced-motion:reduce){body[data-rg-theme] *{transition:none!important;animation:none!important}}