/*
  marketing_node.css — Country Detail / Curriculum Detail marketing template.
  Scoped entirely under .mkt so it never leaks into (or is overridden by)
  Bootstrap/main.css elsewhere on the site — same isolation approach as
  subject_minimalist.css's .subj-min. Tokens below are copied verbatim from
  the "Academic Precision" design system (DESIGN.md).
*/

.mkt{
  --mkt-primary:#1e3a65;
  --mkt-on-primary:#ffffff;
  --mkt-secondary:#006689;
  --mkt-secondary-container:#8dd5fd;
  --mkt-surface:#f9f9fb;
  --mkt-surface-lowest:#ffffff;
  --mkt-surface-low:#f3f3f5;
  --mkt-on-surface:#1a1c1d;
  --mkt-on-surface-variant:#44474f;
  --mkt-outline-variant:#c4c6d0;
  --mkt-shadow-soft:0 4px 24px -8px rgba(0,0,0,0.10);
  --mkt-max:1320px;

  --mkt-font-display:'Jost','Poppins',sans-serif;
  --mkt-font-body:'Open Sans','Segoe UI',sans-serif;
  --mkt-font-label:'Plus Jakarta Sans','Segoe UI',sans-serif;

  /* Aliases so existing ContentTemplate snippets (CKEditor "Templates"
     picker) — which reference the OLD Arsha theme's --heading-color/
     --accent-color/--surface-color/--default-color/--heading-font — pick up
     this theme's own palette automatically wherever they're inserted into a
     .mkt page's rich-text content, with zero changes to the snippets. */
  --heading-color:var(--mkt-primary);
  --accent-color:#1f9ed1; /* matches the CTA-button blue used elsewhere in this file */
  --surface-color:var(--mkt-surface-lowest);
  --default-color:var(--mkt-on-surface);
  --heading-font:var(--mkt-font-display);

  background:var(--mkt-surface);
  color:var(--mkt-on-surface);
  font-family:var(--mkt-font-body);
  font-size:16px;
  line-height:1.6;
}
.mkt *{box-sizing:border-box;}
.mkt h1,.mkt h2,.mkt h3,.mkt h4{
  font-family:var(--mkt-font-display); font-weight:700; color:var(--mkt-primary); margin:0;
}
.mkt p{margin:0;}
.mkt a{color:inherit;}

.mkt-wrap{max-width:var(--mkt-max); margin:0 auto; padding-inline:24px;}
.mkt-section{padding:44px 0;}
@media (min-width:900px){ .mkt-section{padding:60px 0;} }

.mkt-chapter{
  background:var(--mkt-surface-lowest); border-radius:2rem;
  box-shadow:var(--mkt-shadow-soft); border:1px solid var(--mkt-outline-variant);
}

/* ── Breadcrumb ─────────────────────────────────────────────────────────── */
.mkt-crumbbar{padding-top:20px;}
.mkt-crumbnav{
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  font-family:var(--mkt-font-label); font-size:13px; color:var(--mkt-on-surface-variant);
}
.mkt-crumbnav a{text-decoration:none;}
.mkt-crumbnav a:hover{color:var(--mkt-primary);}
.mkt-crumbnav .sep{opacity:.5;}
.mkt-crumbnav .current{color:var(--mkt-primary); font-weight:700;}

/* ── Hero ───────────────────────────────────────────────────────────────── */
.mkt-hero{
  padding:40px 28px; position:relative; overflow:hidden;
  display:grid; gap:32px; align-items:center;
  background:radial-gradient(120% 140% at 0% 0%, #dbeeff 0%, var(--mkt-surface-lowest) 55%);
}
@media (min-width:900px){
  .mkt-hero{padding:56px 40px; grid-template-columns:1.1fr 0.9fr; gap:48px;}
}
.mkt-hero-copy h1{font-size:28px; line-height:1.15; letter-spacing:-0.01em; margin-bottom:16px;}
@media (min-width:900px){ .mkt-hero-copy h1{font-size:48px; line-height:1.12; margin-bottom:18px;} }
.mkt-lede{font-size:17px; color:var(--mkt-on-surface-variant); max-width:46ch; margin-bottom:26px;}
@media (min-width:900px){ .mkt-lede{font-size:18px;} }

.mkt-btn{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  font-family:var(--mkt-font-label); font-size:15px; font-weight:600;
  padding:14px 28px; border-radius:999px; background:#1f9ed1;
  transition:transform .15s ease, box-shadow .15s ease;
  margin-top: 40px;
  /* <a> never has a native border, but a real <button> (e.g. the Tutor Jobs
     filter button) gets the browser's default one -- shows as a stray black
     outline around an otherwise borderless pill unless reset here. */
  border:none; cursor:pointer;
}
.mkt-btn:focus-visible{outline:2px solid #fff; outline-offset:2px;}
/* ".mkt a{color:inherit;}" above is a class+element selector, which outranks
   the single-class ".mkt-btn" — so the button color needs the same class+element
   specificity to actually win the cascade. button.mkt-btn isn't affected by
   that particular rule (it only targets <a>), but browsers give <button> its
   own default text color too, so it needs the same explicit color to match
   every <a class="mkt-btn"> CTA on the page instead of rendering as a
   mismatched, default-colored button (e.g. the Tutor Jobs filter button). */
.mkt a.mkt-btn, .mkt button.mkt-btn{color:#fff;}
.mkt-btn:hover{transform:translateY(-1px); box-shadow:0 10px 24px -10px rgba(1,36,78,0.4);}
.mkt-btn-inverse{background:var(--mkt-surface-lowest);}
.mkt a.mkt-btn-inverse{color:var(--mkt-primary);}
/* Feature/benefit card icons and the arrow glyphs are real Google Material
   Symbols (font icons, not SVGs) — see base_marketing_node.html's extra_head
   for the font <link>. Boilerplate settings per Google's usage guidance. */
.mkt .material-symbols-outlined{
  font-family:'Material Symbols Outlined';
  font-weight:normal; font-style:normal; font-size:inherit;
  line-height:1; letter-spacing:normal; text-transform:none;
  display:inline-block; white-space:nowrap; word-wrap:normal; direction:ltr;
  -webkit-font-smoothing:antialiased; vertical-align:middle;
}
.mkt-icon{font-size:16px;}

.mkt-hero-visual{position:relative; border-radius:1.5rem; overflow:hidden; aspect-ratio:16/9;}
@media (min-width:900px){ .mkt-hero-visual{aspect-ratio:4/3;} }
.mkt-hero-visual img{width:100%; height:100%; object-fit:cover; display:block;}
.mkt-hero-placeholder{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--mkt-primary), var(--mkt-secondary));
}
.mkt-hero-placeholder-icon{font-size:clamp(48px, 10vw, 96px); color:var(--mkt-on-primary); opacity:.85;}

/* ── Section heads ──────────────────────────────────────────────────────── */
.mkt-section-head{text-align:center; max-width:640px; margin:0 auto 32px;}
.mkt-section-head h2{font-size:24px;}
@media (min-width:900px){ .mkt-section-head h2{font-size:32px;} }
.mkt-section-head-left{text-align:left; margin:0 0 24px; max-width:none;}

/* ── Feature grid ────────────────────────────────────────────────────────── */
.mkt-card-grid{display:grid; grid-template-columns:1fr; gap:20px;}
@media (min-width:640px){ .mkt-card-grid{grid-template-columns:repeat(2,1fr);} }
@media (min-width:960px){ .mkt-card-grid{grid-template-columns:repeat(3,1fr); gap:24px;} }

.mkt-card{
  display:block; background:var(--mkt-surface-lowest); border:1px solid var(--mkt-outline-variant); border-radius:1rem;
  padding:24px; box-shadow:var(--mkt-shadow-soft); text-decoration:none; color:inherit;
  transition:border-color .15s ease, transform .15s ease;
}
.mkt-card:hover{border-color:var(--mkt-primary); transform:translateY(-2px);}
a.mkt-card:hover h3{color:var(--mkt-primary);}
.mkt-icon-box{
  width:48px; height:48px; border-radius:0.75rem; background:var(--mkt-surface-low);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px; color:var(--mkt-primary);
}
.mkt-icon-box .mkt-icon{font-size:24px;}
.mkt-icon-box .mkt-icon-svg{width:30px; height:30px; color:inherit;}
.mkt-card h3{font-size:19px; margin-bottom:6px;}
.mkt-card p{font-size:14.5px; color:var(--mkt-on-surface-variant);}
/* Only Grade's richer "Subjects Available" cards (children_card override) use
   this — margin-top (not margin-bottom on .mkt-card p) so the plain Popular
   Curricula/Popular Subjects feature cards, which have no view-link row, are
   unaffected. */
.mkt-view-link{
  display:inline-flex; align-items:center; gap:6px; margin-top:14px;
  font-family:var(--mkt-font-label); font-size:13.5px; font-weight:600; color:var(--mkt-primary);
}
.mkt-view-link .mkt-icon{font-size:16px;}

/* ── Timeline ────────────────────────────────────────────────────────────── */
.mkt-timeline{position:relative; max-width:900px; margin:0 auto;}
.mkt-timeline::before{
  content:""; position:absolute; left:27px; top:0; bottom:0; width:2px;
  background:var(--mkt-outline-variant);
}
@media (min-width:768px){ .mkt-timeline::before{left:50%; transform:translateX(-50%);} }

.mkt-tstep{
  position:relative; display:grid; grid-template-columns:56px 1fr; gap:20px; align-items:center; padding:16px 0;
}
@media (min-width:768px){
  .mkt-tstep{grid-template-columns:1fr 56px 1fr; gap:28px;}
}
.mkt-tstep-num{
  width:56px; height:56px; border-radius:50%; background:var(--mkt-surface-lowest);
  border:4px solid var(--mkt-primary); display:flex; align-items:center; justify-content:center;
  font-family:var(--mkt-font-display); font-weight:700; color:var(--mkt-primary); z-index:1;
  grid-column:1; grid-row:1;
}
@media (min-width:768px){ .mkt-tstep-num{grid-column:2; margin:0 auto;} }

.mkt-tstep-content{grid-column:2; grid-row:1; text-align:left;}
@media (min-width:768px){
  .mkt-tstep-content{grid-column:3; text-align:left;}
  .mkt-tstep-left .mkt-tstep-content{grid-column:1; grid-row:1; text-align:right;}
}
.mkt-tstep-content h4{font-size:17px; margin-bottom:4px;}
.mkt-tstep-content p{font-size:14px; color:var(--mkt-on-surface-variant);}

/* ── Benefits ────────────────────────────────────────────────────────────── */
.mkt-benefit-panel{background:var(--mkt-surface-low); border-radius:2rem; padding:36px 24px;}
@media (min-width:900px){ .mkt-benefit-panel{padding:48px 40px;} }
.mkt-benefit-grid{display:grid; grid-template-columns:1fr; gap:28px; text-align:center;}
@media (min-width:768px){ .mkt-benefit-grid{grid-template-columns:repeat(3,1fr); gap:40px;} }
.mkt-benefit-item .mkt-icon-box{
  width:64px; height:64px; border-radius:1rem; background:var(--mkt-surface-lowest); margin:0 auto 18px;
  color:var(--mkt-secondary); box-shadow:var(--mkt-shadow-soft);
}
.mkt-benefit-item .mkt-icon-box .mkt-icon{font-size:28px;}
.mkt-benefit-item h3{font-size:18px; margin-bottom:8px;}
.mkt-benefit-item p{font-size:14.5px; color:var(--mkt-on-surface-variant); max-width:30ch; margin:0 auto;}

/* ── Explore-other links ─────────────────────────────────────────────────── */
.mkt-link-grid{display:grid; grid-template-columns:1fr; gap:14px;}
@media (min-width:640px){ .mkt-link-grid{grid-template-columns:repeat(2,1fr);} }
@media (min-width:960px){ .mkt-link-grid{grid-template-columns:repeat(4,1fr);} }
.mkt-link-card{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  background:var(--mkt-surface-lowest); border:1px solid var(--mkt-outline-variant); border-radius:1rem;
  padding:16px 18px; text-decoration:none; font-family:var(--mkt-font-label); font-weight:600; font-size:14.5px;
  transition:border-color .15s ease, background .15s ease;
}
.mkt-link-card:hover{border-color:var(--mkt-primary); background:var(--mkt-surface-low); color:var(--mkt-primary);}
.mkt-link-card .mkt-icon{font-size:18px; opacity:.6; flex:none;}
/* Staff-only indicator -- shown when is_active=False but _published_qs's staff
   bypass still lists the item, so a deactivated child doesn't look identical
   to a live one when a staff member browses the parent page. */
.mkt-badge-hidden{
  font-family:var(--mkt-font-label); font-size:10.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
  background:var(--color-warning-bg); color:#856404; border:1px solid var(--color-warning);
  border-radius:20px; padding:2px 9px; flex:none;
}

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.mkt-faq-wrap{max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:14px;}
.mkt-faq-item{
  background:var(--mkt-surface-lowest); border:1px solid var(--mkt-outline-variant); border-radius:1rem;
  padding:20px 22px;
}
.mkt-faq-item h3{font-size:16.5px; margin-bottom:6px;}
.mkt-faq-body{font-size:14.5px; color:var(--mkt-on-surface-variant);}
.mkt-faq-body p{margin:0 0 8px;}
.mkt-faq-body p:last-child{margin-bottom:0;}

/* ── Additional content (non-FAQ PageSection / PageMedia) ───────────────── */
.mkt-richtext{font-size:15px; color:var(--mkt-on-surface-variant);}
.mkt-richtext p{margin:0 0 12px;}
.mkt-richtext p:last-child{margin-bottom:0;}

/* ── Typed PageSection layouts (see _typed_section_body.html) ───────────── */
/* Entry Requirements / Learning Outcomes checklists — paired 2-col when both exist */
.mkt-req-grid{display:grid; grid-template-columns:1fr; gap:32px;}
@media (min-width:760px){ .mkt-req-grid{grid-template-columns:1fr 1fr;} }
.mkt-req-col h3{margin-bottom:6px;}
.mkt-req-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px;}
.mkt-req-list li{display:flex; align-items:flex-start; gap:12px; font-size:15px; color:var(--mkt-on-surface-variant);}
.mkt-req-list .material-symbols-outlined{color:#1f9ed1; font-size:20px; margin-top:1px;}

/* Assessment & Exams — paper cards */
.mkt-paper-grid{display:grid; grid-template-columns:1fr; gap:20px;}
@media (min-width:640px){ .mkt-paper-grid{grid-template-columns:repeat(3,1fr);} }
.mkt-paper-card{
  background:var(--mkt-surface-lowest); border:1px solid var(--mkt-outline-variant); border-radius:1rem;
  box-shadow:var(--mkt-shadow-soft); padding:24px; text-align:center;
}
.mkt-paper-card h4{font-size:17px; margin-bottom:4px;}
.mkt-paper-card .mkt-paper-sub{font-size:13px; color:var(--mkt-on-surface-variant); margin:0 0 14px;}
.mkt-paper-card .mkt-paper-pct{font-family:var(--mkt-font-display); font-size:26px; font-weight:700; color:#1f9ed1;}
.mkt-paper-card .mkt-paper-detail{font-size:12px; color:var(--mkt-on-surface-variant); opacity:.75; margin-top:8px;}

/* Resources & Materials — icon grid (reuses .mkt-icon-box) */
.mkt-res-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px;}
@media (min-width:640px){ .mkt-res-grid{grid-template-columns:repeat(4,1fr);} }
.mkt-res-item{text-align:center; padding:8px;}
.mkt-res-item .mkt-icon-box{margin:0 auto 12px;}
.mkt-res-item span.lbl{font-family:var(--mkt-font-label); font-size:13.5px; font-weight:600; color:var(--mkt-primary);}

/* Tutors — mini profile cards */
.mkt-tutor-grid{display:grid; grid-template-columns:1fr; gap:20px;}
@media (min-width:640px){ .mkt-tutor-grid{grid-template-columns:repeat(3,1fr);} }
.mkt-tutor-card{text-align:center;}
.mkt-tutor-photo{
  width:88px; height:88px; border-radius:50%; margin:0 auto 14px; background:var(--mkt-surface-low);
  overflow:hidden; display:flex; align-items:center; justify-content:center; color:var(--mkt-primary);
}
.mkt-tutor-photo img{width:100%; height:100%; object-fit:cover; display:block;}
.mkt-tutor-photo .material-symbols-outlined{font-size:36px;}
.mkt-tutor-card h4{font-size:16.5px; margin-bottom:4px;}
.mkt-tutor-card p{font-size:13.5px; color:var(--mkt-on-surface-variant); margin:0;}

/* Custom Message — reuses the same primary-bg language as .mkt-cta-chapter */
.mkt-quote-panel{background:var(--mkt-primary); border-radius:2rem; padding:44px 40px; text-align:center; color:#fff;}
.mkt-quote-panel .material-symbols-outlined{font-size:32px; color:#fff; opacity:.9;}
.mkt-quote-panel h2{color:#fff; font-size:22px; margin:10px 0 18px;}
.mkt-quote-panel blockquote{margin:0 auto 14px; max-width:60ch; font-size:17px; font-style:italic; line-height:1.6; color:rgba(255,255,255,.92);}
.mkt-quote-panel .attrib{font-family:var(--mkt-font-label); font-size:13.5px; font-weight:600; color:rgba(255,255,255,.75);}

/* Expert Insights (testimonials) */
.mkt-insight-band{background:var(--mkt-secondary); border-radius:2rem; padding:36px 40px; display:flex; align-items:center; gap:28px; color:#fff;}
.mkt-insight-band .txt h2{color:#fff; font-size:22px; margin:0 0 8px;}
.mkt-insight-band .txt p{margin:0; font-size:14.5px; color:rgba(255,255,255,.9); max-width:60ch;}
.mkt-insight-band .material-symbols-outlined{font-size:56px; color:#fff; opacity:.5; flex-shrink:0;}
@media (max-width:639px){ .mkt-insight-band{flex-direction:column; text-align:center;} }

/* ── SEN accessibility commitment notice (fixed trust banner, not CMS-driven) ── */
.mkt-access-note{
  display:flex; gap:16px; align-items:flex-start; background:var(--mkt-surface-low);
  border-radius:1.25rem; padding:24px 28px;
}
.mkt-access-note .material-symbols-outlined{color:var(--mkt-secondary); font-size:28px; flex-shrink:0;}
.mkt-access-note strong{color:var(--mkt-primary); font-family:var(--mkt-font-display); display:block; margin-bottom:4px;}
.mkt-access-note p{font-size:14.5px; color:var(--mkt-on-surface-variant); margin:0;}

/* ── Final CTA ───────────────────────────────────────────────────────────── */
.mkt-cta-chapter{
  background:var(--mkt-primary); border-radius:2rem; padding:48px 28px; text-align:center;
  position:relative; overflow:hidden;
}
@media (min-width:900px){ .mkt-cta-chapter{padding:64px 40px;} }
.mkt-cta-chapter::before{
  content:""; position:absolute; width:280px; height:280px; border-radius:50%;
  background:rgba(255,255,255,0.06); top:-90px; right:-90px;
}
.mkt-cta-chapter::after{
  content:""; position:absolute; width:320px; height:320px; border-radius:50%;
  background:rgba(0,102,137,0.3); bottom:-110px; left:-90px;
}
.mkt-cta-chapter h2{color:var(--mkt-on-primary); font-size:26px; position:relative;}
@media (min-width:900px){ .mkt-cta-chapter h2{font-size:42px;} }
.mkt-cta-chapter p{
  color:rgba(255,255,255,0.9); font-size:16px; max-width:56ch; margin:16px auto 26px; position:relative;
}
@media (min-width:900px){ .mkt-cta-chapter p{font-size:17px;} }
.mkt-cta-chapter .mkt-btn{position:relative;}