/* =============================================================================
   Guitar Corner Academy — Component Styles
   -----------------------------------------------------------------------------
   The whole visual system, in one versioned file. Landing pages are pasted
   into WordPress as plain markup with no <style> block, so the design lives
   here rather than inside page content.

   Contents
     1. Brand tokens
     2. Landing template reset
     3. LANDING PAGE  (everything under .gcaf)
     4. Course and lesson pages (LearnDash)
     5. Upsell / membership card
     6. Branded login  ([gca_login])
     7. PDF download card  ([gca_pdf])
     8. Magic-link signup + set password  ([gca_signup], [gca_set_password])
     9. Plugin odds and ends

   Bump the Version in style.css after editing this file, or browsers will
   keep serving the old copy.
   ============================================================================= */


/* =============================================================================
   1. BRAND TOKENS  (sampled from GCA-Logo-Retina.png)
   -----------------------------------------------------------------------------
   The logo is two colours plus white: slate navy for the wordmark, orange for
   the emblem. They are used with a deliberate division of labour:

     NAVY       anything you click or read. Buttons, headings, strong text.
                White on navy is 8.5:1, comfortably accessible.
     ORANGE     the accent. Rules, number badges, card borders, icon wells,
                focus rings, the progress bar. Decorative, so its low contrast
                does not matter there.
     ORANGE-INK the darker orange, for orange TEXT only (eyebrows, links).
                #ef9a3d on white is 2.2:1 and fails; this one is 4.9:1.

   For orange buttons instead, point --gca-btn at var(--gca-orange) and
   --gca-btn-dark at var(--gca-orange-dark). Nothing else needs touching. Be
   aware white button text on that orange is below the contrast threshold.
   ============================================================================= */
:root {
  --gca-navy: #444d62;          /* logo wordmark */
  --gca-navy-dark: #333b4c;     /* hover / pressed */
  --gca-orange: #ef9a3d;        /* logo emblem, decorative accent */
  --gca-orange-dark: #d9821f;   /* accent hover */
  --gca-orange-ink: #a4620d;    /* accessible orange, for TEXT */
  --gca-orange-soft: rgba(239,154,61,.16);
  --gca-shadow: rgba(68,77,98,.28);

  --gca-ink: #2b3243;           /* headings */
  --gca-body: #444444;          /* body copy */
  --gca-muted: #6c727d;         /* captions, fine print */
  --gca-line: #e3e6ec;          /* hairline borders */
  --gca-bg-soft: #f7f8fa;       /* tinted section background */

  --gca-display: "Bebas Neue", "Oswald", "Arial Narrow", sans-serif;
  --gca-serif: "Shippori Mincho", Georgia, "Times New Roman", serif;
  --gca-sans: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;

  /* Primary button colour. See the note above before changing. */
  --gca-btn: var(--gca-navy);
  --gca-btn-dark: var(--gca-navy-dark);
}


/* =============================================================================
   2. LANDING TEMPLATE RESET
   The "GCA Landing (blank canvas)" page template prints no GeneratePress
   header, footer or container, so the page markup owns the full width. This
   clears any inherited padding GP might still apply to the body.
   ============================================================================= */
body.gca-landing-template {
  margin: 0;
  padding: 0;
  background: #fff;
}
body.gca-landing-template .gcaf { display: block; }


/* =============================================================================
   3. LANDING PAGE
   Everything below is scoped to the .gcaf wrapper, so it cannot leak into
   course pages, blog posts or the GeneratePress chrome. The prefix is
   deliberately different from the .gca- component classes further down.
   ============================================================================= */
.gcaf {
  color: var(--gca-body);
  font-family: var(--gca-sans);
  font-size: 18px;
  line-height: 1.65;
  background: #fff;
  -webkit-font-smoothing: antialiased;
}
.gcaf *, .gcaf *::before, .gcaf *::after { box-sizing: border-box; }
.gcaf .wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.gcaf .narrow { max-width: 720px; margin-left: auto; margin-right: auto; }
.gcaf section { padding: 84px 0; }
.gcaf .soft { background: var(--gca-bg-soft); }

.gcaf h1, .gcaf h2, .gcaf h3 { color: var(--gca-ink); margin: 0 0 .4em; }
.gcaf h1 { font-family: var(--gca-display); font-weight: 400; font-size: clamp(42px, 6vw, 76px); line-height: .98; letter-spacing: .5px; }
.gcaf h2 { font-family: var(--gca-display); font-weight: 400; font-size: clamp(30px, 4.5vw, 48px); line-height: 1.02; letter-spacing: .4px; }
.gcaf h3 { font-family: var(--gca-serif); font-weight: 600; font-size: 21px; line-height: 1.3; }
.gcaf p { margin: 0 0 1.1em; }
.gcaf p:last-child { margin-bottom: 0; }
.gcaf img { max-width: 100%; }
.gcaf .lead { font-size: clamp(19px, 2.4vw, 22px); color: var(--gca-body); }
.gcaf .eyebrow { text-transform: uppercase; letter-spacing: .22em; font-size: 13px; font-weight: 700; color: var(--gca-orange-ink); margin: 0 0 18px; }

/* Buttons */
.gcaf .btn { display: inline-block; font-family: var(--gca-display); font-size: 22px; letter-spacing: .6px; line-height: 1; text-decoration: none; padding: 18px 38px; border-radius: 4px; border: 0; cursor: pointer; transition: background-color .18s ease, transform .18s ease; }
.gcaf .btn-primary { background: var(--gca-btn); color: #fff; box-shadow: 0 6px 18px var(--gca-shadow); }
.gcaf .btn-primary:hover,
.gcaf .btn-primary:focus { background: var(--gca-btn-dark); color: #fff; transform: translateY(-1px); }
.gcaf .btn-block { display: block; width: 100%; text-align: center; }
.gcaf .micro { font-size: 14px; color: var(--gca-muted); margin-top: 14px; }
.gcaf a.quietlink { color: var(--gca-orange-ink); font-weight: 700; text-decoration: none; border-bottom: 1px solid var(--gca-orange); padding-bottom: 1px; }
.gcaf a.quietlink:hover { color: var(--gca-navy); border-bottom-color: var(--gca-navy); }

/* Header */
.gcaf .site-head { border-bottom: 1px solid var(--gca-line); }
.gcaf .site-head .wrap { display: flex; align-items: center; justify-content: space-between; padding-top: 16px; padding-bottom: 16px; }
.gcaf .site-head img { height: 46px; width: auto; display: block; }
.gcaf .site-head .head-nav { display: flex; align-items: center; }
.gcaf .site-head .head-cta { font-family: var(--gca-display); font-size: 18px; letter-spacing: .5px; color: var(--gca-orange-ink); text-decoration: none; padding-right: 20px; }
.gcaf .site-head .head-cta:hover { color: var(--gca-navy); }
.gcaf .site-head .head-login { position: relative; font-family: var(--gca-display); font-size: 18px; letter-spacing: .5px; color: var(--gca-orange-ink); text-decoration: none; padding-left: 20px; }
.gcaf .site-head .head-login:hover { color: var(--gca-navy); }
.gcaf .site-head .head-login::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 18px; background: rgba(43,50,67,.25); }

/* Hero */
.gcaf .hero { padding: 72px 0 76px; }
.gcaf .hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 54px; align-items: center; }
.gcaf .hero .accent-rule { width: 58px; height: 4px; background: var(--gca-orange); margin: 0 0 24px; border-radius: 2px; }
.gcaf .hero p.lead { margin-top: 20px; }
.gcaf .hero .cta-row { margin-top: 32px; }
.gcaf .hero-media img { width: 100%; height: auto; display: block; }

/* What's inside */
.gcaf .inside-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 44px; margin-top: 38px; }
.gcaf .inside-item { display: flex; gap: 16px; align-items: flex-start; }
.gcaf .inside-item .mark { flex: 0 0 auto; width: 32px; height: 32px; margin-top: 2px; border-radius: 50%; background: var(--gca-orange-soft); display: flex; align-items: center; justify-content: center; color: var(--gca-orange-ink); font-family: var(--gca-display); font-size: 18px; }
.gcaf .inside-item h3 { margin-bottom: .2em; font-size: 20px; }
.gcaf .inside-item p { font-size: 16px; margin: 0; color: var(--gca-body); }
.gcaf .reading-note { margin-top: 40px; background: #fff; border: 1px solid var(--gca-line); border-left: 4px solid var(--gca-orange); border-radius: 6px; padding: 22px 26px; font-family: var(--gca-serif); font-size: 18px; color: var(--gca-ink); }

/* Who it's for */
.gcaf .seg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
.gcaf .seg { background: #fff; border: 1px solid var(--gca-line); border-top: 3px solid var(--gca-orange); border-radius: 8px; padding: 30px 26px; }
.gcaf .seg .seg-label { font-family: var(--gca-display); font-size: 24px; letter-spacing: .5px; color: var(--gca-ink); margin-bottom: 10px; }
.gcaf .seg p { font-size: 16px; margin: 0; }

/* Teacher */
.gcaf .teacher { display: grid; grid-template-columns: 220px 1fr; gap: 48px; align-items: center; }
.gcaf .teacher .portrait { width: 220px; height: 220px; border-radius: 50%; overflow: hidden; border: 1px solid var(--gca-line); background: var(--gca-bg-soft); }
.gcaf .teacher .portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gcaf .teacher .sig { font-family: var(--gca-serif); font-weight: 600; font-size: 21px; color: var(--gca-ink); margin-top: 6px; }

/* Proof */
.gcaf .longevity { text-align: center; font-family: var(--gca-serif); font-weight: 500; font-size: clamp(20px, 2.6vw, 25px); color: var(--gca-ink); margin-bottom: 44px; }
.gcaf .quotes { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.gcaf blockquote { margin: 0; background: #fff; border: 1px solid var(--gca-line); border-left: 4px solid var(--gca-orange); border-radius: 6px; padding: 28px 30px; }
.gcaf blockquote p { font-family: var(--gca-serif); font-size: 19px; color: var(--gca-ink); margin: 0 0 14px; }
.gcaf blockquote cite { font-style: normal; font-size: 14px; font-weight: 700; color: var(--gca-muted); letter-spacing: .03em; }

/* Signup card */
.gcaf .signup-card { background: #fff; border: 1px solid var(--gca-line); border-radius: 12px; padding: 44px 40px; box-shadow: 0 14px 40px rgba(43,50,67,.07); text-align: center; }
.gcaf .signup-card h2 { margin-bottom: .25em; }
.gcaf .signup-card .lead { margin-bottom: 26px; }
.gcaf .gcaf-form { max-width: 440px; margin: 0 auto; text-align: left; }
.gcaf .gcaf-field { margin-bottom: 16px; }
.gcaf .gcaf-field label { display: block; font-size: 14px; font-weight: 700; color: var(--gca-ink); margin-bottom: 6px; letter-spacing: .02em; }
.gcaf .gcaf-form input[type="text"],
.gcaf .gcaf-form input[type="email"],
.gcaf .gcaf-form input[type="password"] { width: 100%; padding: 14px 16px; font-size: 16px; font-family: var(--gca-sans); color: var(--gca-ink); background: #fff; border: 1px solid var(--gca-line); border-radius: 6px; }
.gcaf .gcaf-form input:focus { outline: none; border-color: var(--gca-orange); box-shadow: 0 0 0 3px var(--gca-orange-soft); }
.gcaf .gcaf-form .btn { margin-top: 8px; }
.gcaf .gcaf-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.gcaf .gcaf-formnote { display: none; margin: 0 auto 18px; max-width: 440px; background: #fdecec; border: 1px solid #f3c6c6; color: #9b2c2c; border-radius: 6px; padding: 12px 16px; font-size: 15px; }
.gcaf .gcaf-sent { display: none; background: var(--gca-bg-soft); border: 1px solid var(--gca-line); border-left: 4px solid var(--gca-orange); border-radius: 10px; padding: 28px 26px; text-align: center; max-width: 440px; margin: 0 auto; }
.gcaf .gcaf-sent h3 { font-family: var(--gca-display); font-weight: 400; font-size: 30px; letter-spacing: .5px; color: var(--gca-ink); margin: 0 0 6px; }
.gcaf .gcaf-sent p { font-size: 16px; color: var(--gca-body); margin: 0; }

/* Membership mention + close */
.gcaf .academy { text-align: center; }
.gcaf .academy .lead { max-width: 640px; margin-left: auto; margin-right: auto; }
.gcaf .academy .next { margin-top: 22px; }
.gcaf .close-note { text-align: center; }
.gcaf .close-note .sig { font-family: var(--gca-serif); font-weight: 600; font-size: 22px; color: var(--gca-ink); margin-top: 4px; }

/* Footer */
.gcaf .pagefoot { padding: 40px 0; border-top: 1px solid var(--gca-line); text-align: center; }
.gcaf .pagefoot img { height: 56px; width: auto; margin: 0 auto 16px; display: block; }
.gcaf .pagefoot p { font-size: 13px; color: var(--gca-muted); margin: 0; }

/* Motion + focus */
.gcaf .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.gcaf .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .gcaf .reveal { opacity: 1; transform: none; transition: none; }
  .gcaf .btn { transition: none; }
}
.gcaf a:focus-visible, .gcaf button:focus-visible, .gcaf input:focus-visible { outline: 3px solid var(--gca-orange); outline-offset: 3px; border-radius: 3px; }

/* Responsive */
@media (max-width: 900px) {
  .gcaf .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .gcaf .hero-media { order: -1; }
}
@media (max-width: 860px) {
  .gcaf section { padding: 56px 0; }
  .gcaf .inside-grid { grid-template-columns: 1fr; gap: 22px; }
  .gcaf .seg-grid { grid-template-columns: 1fr; }
  .gcaf .quotes { grid-template-columns: 1fr; }
  .gcaf .teacher { grid-template-columns: 1fr; gap: 26px; text-align: center; }
  .gcaf .teacher .portrait { margin: 0 auto; }
  .gcaf .signup-card { padding: 34px 22px; }
  .gcaf .site-head .head-cta { display: none; }
  .gcaf .site-head .head-login { padding-left: 0; }
  .gcaf .site-head .head-login::before { display: none; }
}


/* =============================================================================
   3b. HOME PAGE
   Extra components for the Guitar Corner Academy hub page. Same .gcaf wrapper
   as the landing pages, so it inherits all the type and spacing above and the
   blank-canvas template still applies itself automatically.

   Deliberately image-light. Every block below looks finished with no photos
   uploaded, so the page can go live before the art does. Add imagery later
   without touching the layout.
   ============================================================================= */

/* --- Dark hero ------------------------------------------------------------
   Navy ground, white type. On navy, the logo orange finally gets to be a
   button: #2b3243 text on #ef9a3d is 5.7:1, which passes comfortably. That is
   the one place orange should carry a call to action. */
.gcaf .hero-dark { background: var(--gca-navy); color: #fff; padding: 96px 0 104px; }
.gcaf .hero-dark h1 { color: #fff; }
.gcaf .hero-dark .eyebrow { color: var(--gca-orange); }
.gcaf .hero-dark .lead { color: rgba(255,255,255,.88); }
.gcaf .hero-dark .accent-rule { width: 58px; height: 4px; background: var(--gca-orange); margin: 0 0 24px; border-radius: 2px; }
.gcaf .hero-dark .micro { color: rgba(255,255,255,.62); }
.gcaf .hero-dark .hero-inner { max-width: 780px; }

.gcaf .btn-row { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 34px; }
.gcaf .btn-accent { background: var(--gca-orange); color: #2b3243; box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.gcaf .btn-accent:hover, .gcaf .btn-accent:focus { background: #f7b163; color: #2b3243; transform: translateY(-1px); }
.gcaf .btn-ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.45); }
.gcaf .btn-ghost:hover, .gcaf .btn-ghost:focus { background: rgba(255,255,255,.12); color: #fff; transform: translateY(-1px); }

/* --- The two corners ------------------------------------------------------ */
.gcaf .corner-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 44px; }
.gcaf .corner { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--gca-line); border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(43,50,67,.06); }
.gcaf .corner-band { padding: 32px; color: #fff; }
.gcaf .corner--classical .corner-band { background: var(--gca-navy); }
.gcaf .corner--ukulele .corner-band { background: var(--gca-orange-ink); }
.gcaf .corner-band .kicker { font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.78); margin: 0; }
.gcaf .corner-band h3 { font-family: var(--gca-display); font-weight: 400; font-size: clamp(30px, 3.4vw, 40px); line-height: 1.02; letter-spacing: .4px; color: #fff; margin: 10px 0 0; }
.gcaf .corner-body { flex: 1; display: flex; flex-direction: column; padding: 30px 32px 34px; }
.gcaf .corner-body > p { font-size: 17px; }
.gcaf .corner-list { list-style: none; margin: 20px 0 28px; padding: 0; }
.gcaf .corner-list li { position: relative; padding-left: 26px; font-size: 16px; margin-bottom: 10px; }
.gcaf .corner-list li:last-child { margin-bottom: 0; }
.gcaf .corner-list li::before { content: ""; position: absolute; left: 0; top: .58em; width: 9px; height: 9px; border-radius: 50%; background: var(--gca-orange); }
.gcaf .corner-body .btn { margin-top: auto; align-self: flex-start; }

/* --- "Also here" strip under the two corners ------------------------------ */
.gcaf .alsohere { margin-top: 32px; background: #fff; border: 1px solid var(--gca-line); border-left: 4px solid var(--gca-orange); border-radius: 8px; padding: 20px 26px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.gcaf .alsohere p { flex: 1 1 460px; font-size: 16px; margin: 0; }
.gcaf .alsohere .quietlink { flex: 0 0 auto; white-space: nowrap; }
.gcaf .alsohere strong { color: var(--gca-ink); }

/* --- Pillars -------------------------------------------------------------- */
.gcaf .pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 44px; }
.gcaf .pillar .pnum { font-family: var(--gca-display); font-size: 44px; line-height: 1; color: var(--gca-orange); display: block; margin-bottom: 12px; }
.gcaf .pillar h3 { font-size: 20px; margin-bottom: .35em; }
.gcaf .pillar p { font-size: 16px; margin: 0; }

/* --- Book shelf ----------------------------------------------------------- */
.gcaf .shelf { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 40px; }
.gcaf .book { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--gca-line); border-top: 3px solid var(--gca-orange); border-radius: 10px; padding: 24px 22px 26px; }
.gcaf .book .tag { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gca-orange-ink); margin: 0 0 10px; }
.gcaf .book .btitle { font-family: var(--gca-serif); font-weight: 600; font-size: 17px; line-height: 1.3; color: var(--gca-ink); margin: 0; }
.gcaf .book p.blurb { font-size: 14px; line-height: 1.5; color: var(--gca-body); margin: 10px 0 0; }
.gcaf .shelf-note { margin-top: 30px; text-align: center; }

/* --- Events --------------------------------------------------------------- */
.gcaf .events { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 44px; }
.gcaf .event { background: #fff; border: 1px solid var(--gca-line); border-radius: 10px; padding: 28px 28px 30px; }
.gcaf .event .when { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gca-orange-ink); margin: 0 0 10px; }
.gcaf .event h3 { font-family: var(--gca-display); font-weight: 400; font-size: 28px; letter-spacing: .4px; margin: 0 0 .3em; }
.gcaf .event p { font-size: 16px; margin: 0; }

/* --- Faculty -------------------------------------------------------------- */
.gcaf .faculty { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; margin-top: 44px; }
.gcaf .face { display: flex; gap: 24px; align-items: flex-start; }
.gcaf .face .portrait { flex: 0 0 auto; width: 132px; height: 132px; border-radius: 50%; overflow: hidden; border: 1px solid var(--gca-line); background: var(--gca-bg-soft); }
.gcaf .face .portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gcaf .face h3 { font-size: 20px; margin: 0 0 .15em; }
.gcaf .face .role { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gca-orange-ink); margin: 0 0 12px; }
.gcaf .face p { font-size: 16px; margin: 0; }
.gcaf .faculty-note { margin-top: 40px; background: #fff; border: 1px solid var(--gca-line); border-left: 4px solid var(--gca-orange); border-radius: 6px; padding: 22px 26px; font-family: var(--gca-serif); font-size: 18px; color: var(--gca-ink); }

/* --- Closing band --------------------------------------------------------- */
.gcaf .band { background: var(--gca-navy); color: #fff; text-align: center; }
.gcaf .band h2 { color: #fff; }
.gcaf .band .lead { color: rgba(255,255,255,.88); max-width: 640px; margin-left: auto; margin-right: auto; }
.gcaf .band .btn-row { justify-content: center; }

/* --- Home responsive ------------------------------------------------------ */
@media (max-width: 1000px) {
  .gcaf .shelf { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .gcaf .hero-dark { padding: 64px 0 68px; }
  .gcaf .corner-grid { grid-template-columns: 1fr; gap: 24px; }
  .gcaf .pillars { grid-template-columns: 1fr; gap: 30px; }
  .gcaf .events { grid-template-columns: 1fr; }
  .gcaf .faculty { grid-template-columns: 1fr; gap: 30px; }
  .gcaf .alsohere { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 520px) {
  .gcaf .shelf { grid-template-columns: 1fr; }
  .gcaf .face { flex-direction: column; }
  .gcaf .btn-row .btn { width: 100%; text-align: center; }
}


/* =============================================================================
   4. COURSE AND LESSON PAGES  (LearnDash on GeneratePress)
   -----------------------------------------------------------------------------
   LearnDash on a stock theme prints a bare title, a grey status box and a plain
   list of lessons. This section brings those pages into the same visual system
   as the landing pages and the home page: the same display type, the same
   navy-and-orange division of labour, the same card treatment.

   Everything here is scoped to either .learndash-wrapper (LearnDash's own
   container) or .gca-course-page (a body class the child theme adds on course,
   lesson and topic pages), so nothing leaks onto ordinary pages.

   Written against LearnDash's standard markup. If one piece does not take, it
   is because that install renders a different template, and the selector needs
   a look at the real markup. Nothing here breaks if a selector finds nothing.
   ============================================================================= */

/* --- Page frame ----------------------------------------------------------- */

/* The hero prints the course title, so hide the theme's duplicate. */
.gca-course-page .entry-header .entry-title,
.gca-course-page .page-header .entry-title { display: none; }

.gca-course-page .entry-content { font-family: var(--gca-sans); color: var(--gca-body); font-size: 17px; line-height: 1.65; }
.gca-course-page .entry-content h2,
.gca-course-page .entry-content h3 { color: var(--gca-ink); }
.gca-course-page .entry-content h2 { font-family: var(--gca-display); font-weight: 400; font-size: 34px; letter-spacing: .4px; }
.gca-course-page .entry-content h3 { font-family: var(--gca-serif); font-weight: 600; font-size: 21px; }

/* Video embeds: keep 16:9 and give them the same rounded, settled look as the
   cards, instead of a raw iframe floating in the content. */
.gca-course-page .entry-content iframe,
.learndash-wrapper iframe { max-width: 100%; border-radius: 10px; display: block; }
.gca-course-page .wp-block-embed__wrapper,
.gca-course-page .fluid-width-video-wrapper { border-radius: 10px; overflow: hidden; box-shadow: 0 10px 30px rgba(43,50,67,.10); }

/* --- Course hero (printed by inc/gca-course-page.php) --------------------- */
/* Note the doubled class on every selector. The hero carries both .gcaf and
   .gca-coursehero so it can reuse the button styles, which means the generic
   `.gcaf h1` rule would otherwise out-specify a single-class title rule and
   paint the title navy on navy. `.gcaf.gca-coursehero` settles it. */
.gcaf.gca-coursehero { margin: 0 0 40px; padding: 38px 40px 40px; background: var(--gca-navy); border-radius: 12px; color: #fff; font-size: 17px; }
.gcaf.gca-coursehero .gca-coursehero__eyebrow { text-transform: uppercase; letter-spacing: .22em; font-size: 12px; font-weight: 700; color: var(--gca-orange); margin: 0 0 16px; font-family: var(--gca-sans); }
.gcaf.gca-coursehero .gca-coursehero__rule { width: 52px; height: 4px; background: var(--gca-orange); border-radius: 2px; margin: 0 0 20px; }
.gcaf.gca-coursehero h1.gca-coursehero__title { font-family: var(--gca-display); font-weight: 400; font-size: clamp(34px, 5vw, 56px); line-height: 1; letter-spacing: .5px; color: #fff; margin: 0; }
.gcaf.gca-coursehero .gca-coursehero__standfirst { font-family: var(--gca-sans); font-size: 19px; line-height: 1.55; color: rgba(255,255,255,.88); margin: 18px 0 0; max-width: 640px; }
.gcaf.gca-coursehero .gca-coursehero__cta { margin: 28px 0 0; }
.gcaf.gca-coursehero .btn { font-family: var(--gca-display); font-size: 21px; letter-spacing: .6px; line-height: 1; text-decoration: none; padding: 16px 34px; border-radius: 4px; display: inline-block; }
@media (max-width: 700px) {
  .gcaf.gca-coursehero { padding: 30px 24px 32px; border-radius: 10px; }
}

/* --- Enrolment / status box ----------------------------------------------- */
.learndash-wrapper .ld-course-status {
  background: #fff;
  border: 1px solid var(--gca-line);
  border-top: 3px solid var(--gca-orange);
  border-radius: 10px;
  padding: 26px 28px;
  box-shadow: 0 8px 24px rgba(43,50,67,.06);
}
.learndash-wrapper .ld-course-status .ld-course-status-segment { padding: 0 22px 0 0; }
.learndash-wrapper .ld-course-status .ld-status-label,
.learndash-wrapper .ld-course-status-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gca-muted);
}
.learndash-wrapper .ld-course-status .ld-course-status-content,
.learndash-wrapper .ld-course-status-price-value,
.learndash-wrapper .ld-course-status .ld-status {
  font-family: var(--gca-serif);
  font-weight: 600;
  font-size: 18px;
  color: var(--gca-ink);
}
/* LearnDash's own status pills. Keep the shape, swap the palette. */
.learndash-wrapper .ld-status.ld-status-unlocked,
.learndash-wrapper .ld-status.ld-status-progress { background: var(--gca-orange-soft); color: var(--gca-orange-ink); }
.learndash-wrapper .ld-status.ld-status-complete { background: rgba(68,77,98,.10); color: var(--gca-navy); }

/* --- Buttons -------------------------------------------------------------- */
.learndash-wrapper .ld-button,
.learndash-wrapper .btn-join,
.learndash-wrapper #btn-join,
.learndash-wrapper .learndash_mark_complete_button,
.learndash-wrapper input.learndash_mark_complete_button,
.learndash-wrapper input[type="submit"].btn-join {
  background-color: var(--gca-btn);
  border: 0;
  border-radius: 4px;
  color: #fff;
  font-family: var(--gca-display);
  font-weight: 400;
  font-size: 19px;
  letter-spacing: .5px;
  line-height: 1;
  padding: 15px 32px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: background-color .18s ease, transform .18s ease;
}
.learndash-wrapper .ld-button:hover,
.learndash-wrapper .btn-join:hover,
.learndash-wrapper #btn-join:hover,
.learndash-wrapper .learndash_mark_complete_button:hover,
.learndash-wrapper input.learndash_mark_complete_button:hover {
  background-color: var(--gca-btn-dark);
  color: #fff;
  transform: translateY(-1px);
}
.learndash-wrapper .ld-button.ld-button-transparent,
.learndash-wrapper .ld-button.ld-button-reverse {
  color: var(--gca-navy);
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--gca-navy);
  border: 0;
}
.learndash-wrapper .ld-button.ld-button-transparent:hover,
.learndash-wrapper .ld-button.ld-button-reverse:hover {
  background: var(--gca-navy);
  color: #fff;
}
a.learndash-resume-button input[type="submit"] {
  color: #fff;
  font-size: 16px;
  background-color: var(--gca-btn);
  font-weight: bold;
  width: 100%;
  border: 1px solid #fff;
  padding: 15px 32px;
  text-align: center;
}

/* --- Progress ------------------------------------------------------------- */
.learndash-wrapper .ld-progress-bar { background-color: rgba(68,77,98,.12); border-radius: 999px; overflow: hidden; }
.learndash-wrapper .ld-progress-bar .ld-progress-bar-percentage { background-color: var(--gca-orange); }
.learndash-wrapper .ld-progress-heading,
.learndash-wrapper .ld-progress-stats { font-size: 13px; color: var(--gca-muted); }

/* --- "Course Content" heading --------------------------------------------- */
.learndash-wrapper .ld-item-list .ld-section-heading h2,
.learndash-wrapper .ld-item-list-section-heading h2 {
  font-family: var(--gca-display);
  font-weight: 400;
  font-size: 32px;
  letter-spacing: .4px;
  color: var(--gca-ink);
}
.learndash-wrapper .ld-item-list-item-expanded .ld-item-list-item-preview { border: 0; }

/* --- The lesson list ------------------------------------------------------
   Rows become cards, numbered with a CSS counter so the sequence reads at a
   glance without touching LearnDash's markup. */
.learndash-wrapper .ld-item-list .ld-item-list-items { counter-reset: gcalesson; }

.learndash-wrapper .ld-item-list-item {
  background: #fff;
  border: 1px solid var(--gca-line);
  border-left: 3px solid transparent;
  border-radius: 8px;
  margin-bottom: 12px;
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.learndash-wrapper .ld-item-list-item:hover {
  border-left-color: var(--gca-orange);
  box-shadow: 0 8px 22px rgba(43,50,67,.08);
  transform: translateY(-1px);
}
.learndash-wrapper .ld-item-list-item .ld-item-name,
.learndash-wrapper .ld-item-list-item a.ld-item-name { padding: 20px 24px; }
.learndash-wrapper .ld-item-list-item .ld-item-title {
  font-family: var(--gca-serif);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.35;
  color: var(--gca-ink);
}
.learndash-wrapper .ld-item-list-item .ld-item-title::before {
  counter-increment: gcalesson;
  content: counter(gcalesson) ".";
  font-family: var(--gca-display);
  font-size: 18px;
  color: var(--gca-orange-ink);
  margin-right: 10px;
  letter-spacing: .5px;
}
.learndash-wrapper .ld-item-list-item .ld-item-details,
.learndash-wrapper .ld-item-list-item .ld-item-component { font-size: 13px; color: var(--gca-muted); }
.learndash-wrapper .ld-status-icon { color: var(--gca-orange-ink); }
.learndash-wrapper .ld-status-icon.ld-status-complete { background-color: var(--gca-navy); border-color: var(--gca-navy); }

/* --- Notices --------------------------------------------------------------
   A logged-out visitor sees "You don't currently have access to this content"
   repeated on every lesson. Kept, because it is true, but made quiet: the lock
   icon and the enrolment box already carry the message loudly enough.
   To remove them entirely, add:  .learndash-wrapper .ld-alert { display: none; } */
.learndash-wrapper .ld-alert,
.learndash-wrapper .ld-alert-warning {
  background: var(--gca-bg-soft);
  border: 1px solid var(--gca-line);
  border-left: 3px solid var(--gca-orange);
  border-radius: 6px;
  color: var(--gca-muted);
  font-size: 14px;
  padding: 12px 16px;
  margin: 0 24px 18px;
}
.learndash-wrapper .ld-alert .ld-alert-icon { color: var(--gca-orange-ink); background: none; }

/* --- Tabs (LearnDash 4.x) ------------------------------------------------- */
.learndash-wrapper .ld-tabs .ld-tabs-navigation .ld-tab {
  font-family: var(--gca-display);
  font-size: 19px;
  letter-spacing: .5px;
  color: var(--gca-muted);
  border-bottom: 3px solid transparent;
}
.learndash-wrapper .ld-tabs .ld-tabs-navigation .ld-tab.ld-active {
  color: var(--gca-ink);
  border-bottom-color: var(--gca-orange);
}

/* --- Lesson navigation ---------------------------------------------------- */
.learndash-wrapper .ld-content-actions { border-top: 1px solid var(--gca-line); padding-top: 24px; }
.learndash-wrapper .ld-content-action a { color: var(--gca-orange-ink); font-weight: 700; text-decoration: none; }
.learndash-wrapper .ld-content-action a:hover { color: var(--gca-navy); }


/* =============================================================================
   5. UPSELL / MEMBERSHIP CARD
   Drop the matching HTML into a widget or block in the course sidebar.
   ============================================================================= */
.gca-upgrade { background: var(--gca-navy); color: #fff; border-radius: 10px; padding: 26px 22px; text-align: center; }
.gca-upgrade h4 { font-family: var(--gca-display); font-weight: 400; font-size: 25px; letter-spacing: .5px; line-height: 1.05; margin: 0 0 10px; color: #fff; }
.gca-upgrade p { font-size: 14px; line-height: 1.55; margin: 0 0 18px; color: rgba(255,255,255,.92); }
.gca-upgrade .gca-upgrade-btn { display: inline-block; background: var(--gca-orange); color: #2b3243; font-family: var(--gca-display); font-size: 19px; letter-spacing: .5px; text-decoration: none; padding: 12px 28px; border-radius: 4px; transition: background-color .18s ease; }
.gca-upgrade .gca-upgrade-btn:hover { background: #f7b163; color: #2b3243; }


/* =============================================================================
   6. BRANDED LOGIN  ([gca_login] on the /login/ page)
   ============================================================================= */
.gca-login { max-width: 460px; margin: 60px auto; padding: 0 20px; font-family: var(--gca-sans); }
.gca-login-card { background: #fff; border: 1px solid var(--gca-line); border-radius: 12px; padding: 40px 34px; box-shadow: 0 14px 40px rgba(68,77,98,.08); text-align: center; }
.gca-login-logo { height: 42px; width: auto; margin: 0 auto 22px; display: block; }
.gca-login-card h2 { font-family: var(--gca-display); font-weight: 400; font-size: 38px; letter-spacing: .5px; color: var(--gca-ink); margin: 0 0 6px; }
.gca-login-sub { font-size: 16px; color: var(--gca-muted); margin: 0 0 24px; }
.gca-login #loginform { text-align: left; }
.gca-login #loginform p { margin: 0 0 16px; }
.gca-login #loginform label { display: block; font-size: 14px; font-weight: 700; color: var(--gca-ink); margin-bottom: 6px; }
.gca-login #loginform input[type="text"],
.gca-login #loginform input[type="password"] { width: 100%; padding: 14px 16px; font-size: 16px; color: var(--gca-ink); border: 1px solid var(--gca-line); border-radius: 6px; background: #fff; box-sizing: border-box; }
.gca-login #loginform input[type="text"]:focus,
.gca-login #loginform input[type="password"]:focus { outline: none; border-color: var(--gca-orange); box-shadow: 0 0 0 3px var(--gca-orange-soft); }
.gca-login .login-remember { font-size: 14px; color: var(--gca-body); }
.gca-login .login-remember label { display: inline-flex; align-items: center; gap: 8px; font-weight: 400; }
.gca-login #wp-submit { width: 100%; background: var(--gca-btn); color: #fff; font-family: var(--gca-display); font-size: 22px; letter-spacing: .6px; border: 0; border-radius: 4px; padding: 16px; cursor: pointer; margin-top: 4px; transition: background-color .18s ease; }
.gca-login #wp-submit:hover { background: var(--gca-btn-dark); }
.gca-login-links { margin-top: 18px; }
.gca-login-links a, .gca-login-new a { color: var(--gca-orange-ink); font-weight: 700; text-decoration: none; }
.gca-login-links a:hover, .gca-login-new a:hover { text-decoration: underline; }
.gca-login-new { font-size: 14px; color: var(--gca-muted); margin-top: 14px; }
.gca-login-go { display: inline-block; background: var(--gca-btn); color: #fff; font-family: var(--gca-display); font-size: 20px; letter-spacing: .5px; text-decoration: none; padding: 13px 30px; border-radius: 4px; }
.gca-login-go:hover { background: var(--gca-btn-dark); color: #fff; }
.gca-login-alt { margin-top: 24px; border-top: 1px solid #eef0f3; padding-top: 18px; text-align: left; }
.gca-login-alt summary { cursor: pointer; font-size: 14px; font-weight: 700; color: var(--gca-orange-ink); list-style: none; }
.gca-login-alt summary::-webkit-details-marker { display: none; }
.gca-login-alt[open] summary { margin-bottom: 14px; }


/* =============================================================================
   7. PDF DOWNLOAD CARD  ([gca_pdf url="..." title="..."])
   ============================================================================= */
.gca-pdfcard { display: flex; align-items: center; gap: 22px; max-width: 680px; margin: 30px 0; padding: 22px 24px; background: #fff; border: 1px solid var(--gca-line); border-radius: 12px; box-shadow: 0 6px 20px rgba(68,77,98,.08); font-family: var(--gca-sans); transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease; }
.gca-pdfcard:hover { box-shadow: 0 12px 30px rgba(68,77,98,.16); border-color: #cfd4de; transform: translateY(-2px); }
.gca-pdfcard__icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 10px; background: var(--gca-orange-soft); color: var(--gca-orange-ink); }
.gca-pdfcard__icon svg { width: 28px; height: 28px; display: block; }
.gca-pdfcard__body { flex: 1 1 auto; min-width: 0; }
.gca-pdfcard__title { display: block; font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--gca-ink); }
.gca-pdfcard__meta { display: block; margin-top: 8px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; color: #9aa1ad; }
.gca-pdfcard__btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 9px; text-decoration: none !important; background: var(--gca-btn); color: #fff !important; font-family: var(--gca-display); font-size: 20px; letter-spacing: .5px; line-height: 1; padding: 14px 26px; border-radius: 6px; box-shadow: 0 6px 16px var(--gca-shadow); transition: background-color .18s ease, transform .18s ease; white-space: nowrap; }
.gca-pdfcard__btn:hover { background: var(--gca-btn-dark); color: #fff !important; text-decoration: none !important; transform: translateY(-1px); }
.gca-pdfcard__btn svg { width: 18px; height: 18px; display: block; }
@media (max-width: 540px) {
  .gca-pdfcard { flex-direction: column; align-items: flex-start; gap: 16px; padding: 20px; }
  .gca-pdfcard__btn { width: 100%; justify-content: center; }
}


/* =============================================================================
   8. MAGIC-LINK SIGNUP + SET PASSWORD
   Styles the [gca_signup] and [gca_set_password] shortcodes. The landing page
   uses its own form markup (section 3); these apply where the shortcode is
   dropped into an ordinary page, such as the login card.
   ============================================================================= */
.gca-signup, .gca-setpw { max-width: 460px; font-family: var(--gca-sans); }
.gca-signup form, .gca-setpw form { display: flex; flex-direction: column; gap: 14px; }
.gca-signup-heading { font-family: var(--gca-display); font-weight: 400; font-size: 30px; letter-spacing: .5px; color: var(--gca-ink); margin: 0 0 12px; }
.gca-field label { display: block; font-size: 14px; font-weight: 700; color: var(--gca-ink); margin-bottom: 6px; }
.gca-field input { width: 100%; padding: 14px 16px; font-size: 16px; color: var(--gca-ink); border: 1px solid var(--gca-line); border-radius: 6px; background: #fff; box-sizing: border-box; }
.gca-field input:focus { outline: none; border-color: var(--gca-orange); box-shadow: 0 0 0 3px var(--gca-orange-soft); }
.gca-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.gca-submit { background: var(--gca-btn); color: #fff; font-family: var(--gca-display); font-size: 22px; letter-spacing: .6px; border: 0; border-radius: 4px; padding: 16px; cursor: pointer; transition: background-color .18s ease; }
.gca-submit:hover { background: var(--gca-btn-dark); }
.gca-note { font-size: 14px; color: var(--gca-muted); margin: 10px 0 0; }
.gca-alert { background: #fff4f4; border: 1px solid #f3c9c9; color: #a23b3b; border-radius: 6px; padding: 12px 14px; font-size: 14px; margin-bottom: 14px; }
.gca-ok { background: #f0fbf4; border: 1px solid #c7e8d2; color: #2f7a4a; border-radius: 6px; padding: 12px 14px; font-size: 14px; margin-bottom: 14px; }
.gca-signup--sent { background: var(--gca-bg-soft); border: 1px solid var(--gca-line); border-left: 4px solid var(--gca-orange); border-radius: 10px; padding: 28px 26px; text-align: center; }
.gca-signup--sent h3 { font-family: var(--gca-display); font-weight: 400; font-size: 30px; letter-spacing: .5px; color: var(--gca-ink); margin: 0 0 6px; }
.gca-signup--sent p { font-size: 16px; color: var(--gca-body); margin: 0; }


/* =============================================================================
   9. PLUGIN ODDS AND ENDS
   ============================================================================= */

/* Hide the reCAPTCHA v3 badge. Keep the required attribution text somewhere on
   the site (the landing page footer carries it) if you hide the badge. */
.grecaptcha-badge { visibility: hidden; }
