/* ============================================================
   PRODUCTION-MATCH SKIN  (subpages only)
   Re-skins + re-lays-out the staging redesign toward the live copp.edu.au
   (Eduma/Elementor) look: Open Sans, cyan #2AABE2 primary (uppercase square
   buttons), amber/green accents, a full-width hero TITLE BAND over a photo,
   two-tone (dark + cyan) headings, and cyan underline accents.
   Loaded AFTER styles.css so these win.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;0,800;1,400;1,600&display=swap');

:root{
  --display:'Open Sans','Segoe UI',Arial,Helvetica,sans-serif;
  --body:'Open Sans','Segoe UI',Arial,Helvetica,sans-serif;
  --radius:8px; --radius-sm:4px; --radius-lg:8px;
  --blue:#2AABE2; --blue-deep:#127FB0; --blue-tint:#E6F6FD;
  --cyan-bright:#43C0EF; --amber:#FFB606; --success:#5EBB3E;
}

body{font-family:var(--body);-webkit-font-smoothing:antialiased}
p{line-height:1.75}

/* Headings: Open Sans, heavy. Colour left to styles.css per section. */
h1,h2,h3,h4,h5,h6{font-family:var(--display);font-weight:800;letter-spacing:-.005em}

/* Two-tone heading accent (wrap part of a heading in <span class="c">) */
.c{color:var(--blue);font-style:normal}

/* Eyebrow / section index -> refined uppercase kicker, one aligned accent rule.
   Bigger + accessible deep-cyan on light; bright white on dark/coloured panels.
   The old stacked dashes (leading ::before + below ::after) are collapsed to a
   single, vertically-centred leading rule that reads as intentional. */
.eyebrow,.idx{color:var(--blue-deep);text-transform:uppercase;letter-spacing:.12em;font-weight:700;
  font-size:.82rem;line-height:1;display:inline-flex;align-items:center;gap:.6rem;vertical-align:middle}
.eyebrow::before,.idx::before{content:"";flex:none;width:24px;height:2px;border-radius:2px;
  background:currentColor;opacity:.85}
.eyebrow::after,.idx::after{display:none}
/* Dark / coloured panels: keep the kicker bright and legible (wins over styles.css) */
.eyebrow--light,.idx--light{color:#fff}

/* Centred section heads get a cyan underline under the H2 (Eduma divider) */
.section-head h2::after{content:"";display:block;width:64px;height:3px;border-radius:2px;
  background:var(--blue);margin-top:.85rem}
.section-head[style*="center"] h2::after{margin-left:auto;margin-right:auto}

/* ---------- PAGE HERO TITLE BAND (production signature) ---------- */
.page-hero{position:relative;min-height:330px;display:flex;align-items:center;overflow:hidden;
  background:#0f2a3a center/cover no-repeat;color:#fff;margin-bottom:0}
.page-hero::before{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(12,28,42,.42) 0%,rgba(12,28,42,.74) 100%)}
.page-hero > .wrap{position:relative;z-index:1;padding:62px 0;width:100%}
.page-hero .crumb{color:rgba(255,255,255,.88);text-transform:uppercase;letter-spacing:.09em;
  font-size:.76rem;font-weight:700;margin:0 0 .9rem}
.page-hero h1{color:#fff;font-weight:800;line-height:1.12;margin:0;
  font-size:clamp(2rem,1.4rem + 2.6vw,3.25rem);max-width:20ch}
.page-hero h1 .c{color:var(--cyan-bright)}
.page-hero p.sub{color:rgba(255,255,255,.92);margin:1rem 0 0;max-width:60ch;font-size:1.05rem}
.page-hero--center{justify-content:center;text-align:center}
.page-hero--center h1{margin-left:auto;margin-right:auto}
.page-hero--center p.sub{margin-left:auto;margin-right:auto}
.page-hero .hero-actions{margin-top:1.6rem}
.page-hero--center .hero-actions{justify-content:center}

/* Buttons -> production: cyan, white, UPPERCASE, bold, square */
.btn{border-radius:4px;text-transform:uppercase;font-weight:700;letter-spacing:.03em}
.btn--primary{background:var(--blue);border-color:var(--blue);color:#fff;
  box-shadow:0 4px 14px rgba(42,171,226,.28)}
.btn--primary:hover{background:#1f1f1f;border-color:#1f1f1f;color:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.22)}
.btn--ghost:hover{background:var(--blue);border-color:var(--blue);color:#fff}
.page-hero .btn--on-dark,.page-hero .btn--ghost{border-color:rgba(255,255,255,.7);color:#fff}
.page-hero .btn--on-dark:hover,.page-hero .btn--ghost:hover{background:#fff;color:var(--blue-deep);border-color:#fff}

/* Cards -> white, light borders, small radius */
.suite-card,figure.suite-card,.offer-card,.profile-card,.blog-card,.value-cell{
  border-radius:6px;border-color:#E9E9E9}
.suite-card,.offer-card,.profile-card,.blog-card{
  box-shadow:0 1px 4px rgba(0,0,0,.06);transition:box-shadow .25s ease,transform .25s ease}
.suite-card:hover,.offer-card:hover,.profile-card:hover,.blog-card:hover{
  box-shadow:0 8px 26px rgba(0,0,0,.10);transform:translateY(-3px)}
.suite-card h3,.offer-card h3{color:var(--blue-deep)}

/* Numbered component blocks (production "Program Components") */
.num-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.6rem;margin-top:1.8rem}
.num-card{padding:0 .4rem}
.num-card .n{display:inline-block;font-size:2.1rem;font-weight:800;color:var(--blue);line-height:1;margin-bottom:.4rem}
.num-card h3{margin:.2rem 0 .3rem}
.num-card h3 .c{color:var(--blue)}

/* Body-copy links -> cyan */
.section a:not(.btn):not(.tagchip):not([class*="card"]){color:var(--blue-deep)}

/* Accordion (FAQ) -> Eduma toggle feel */
.acc-item{border:1px solid #E9E9E9;border-radius:6px;margin-bottom:.6rem;overflow:hidden}
.acc-q{font-weight:700}
.acc-q[aria-expanded="true"]{color:var(--blue)}

.tagchip{background:var(--amber);color:#1f2937;font-weight:700;border-radius:3px}

@media(max-width:640px){ .page-hero{min-height:240px} .page-hero > .wrap{padding:44px 0} }

/* ============================================================
   PRODUCTION-ALIGN v3 — hero crop fix only (2026-06-24)
   Imagery and the original rich section design are RETAINED. The page
   focus is handled at the information-architecture level (each page
   keeps only its own topic; other topics link out to their dedicated
   page), not by stripping photos. The only style override kept here is
   a face-safe hero crop so people are never cut off in the title band.
   ============================================================ */
.page-hero{ min-height:clamp(380px,32vw,460px); background-position:center 25%; }
@media(max-width:640px){ .page-hero{ min-height:320px; background-position:center 28%; } }

/* ============================================================
   PRODUCTION-ALIGN v4 — compaction components (2026-06-24)
   Shared, consistent pieces used to simplify + de-clutter subpages:
   a single-row auto-rotating testimonials carousel, a compact 2-column
   bullet list (replaces heavy "Why choose" card grids), and a uniform
   stat treatment. Defined centrally so every page stays consistent.
   ============================================================ */

/* --- Testimonials carousel: one row, auto-rotating (built by main.js) --- */
.tcar{ position:relative; margin-top:1.8rem; }
.tcar-track{ display:flex !important; grid-template-columns:none !important; gap:1.5rem;
  overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  padding:.25rem; }
.tcar-track::-webkit-scrollbar{ display:none; }
.tcar-track > *{ flex:0 0 100%; scroll-snap-align:center; margin:0; box-sizing:border-box; }
@media(min-width:880px){ .tcar-track > *{ flex-basis:calc(50% - .75rem); } }
.tcar-btn{ position:absolute; top:42%; transform:translateY(-50%); width:46px; height:46px; border-radius:50%;
  border:1px solid var(--line); background:#fff; color:var(--blue-deep); font-size:1.7rem; line-height:1;
  cursor:pointer; box-shadow:var(--shadow-sm); z-index:3; display:grid; place-items:center; transition:.2s ease; }
.tcar-prev{ left:-12px; } .tcar-next{ right:-12px; }
.tcar-btn:hover{ background:var(--blue); color:#fff; border-color:var(--blue); }
.tcar-dots{ display:flex; gap:.5rem; justify-content:center; margin-top:1.3rem; }
.tcar-dot{ width:9px; height:9px; border-radius:50%; border:none; background:var(--line); cursor:pointer; padding:0; transition:.2s ease; }
.tcar-dot[aria-current="true"]{ background:var(--blue); width:26px; border-radius:5px; }
@media(max-width:880px){ .tcar-btn{ display:none; } }

/* Stylish testimonial cards inside the carousel */
.tcar-track figure.suite-card{ position:relative; padding:2.6rem 2rem 1.8rem; background:var(--paper);
  border:1px solid var(--line); border-radius:16px; box-shadow:0 12px 34px rgba(20,25,27,.07); overflow:hidden; }
.tcar-track figure.suite-card::before{ content:"\201C"; position:absolute; top:-.6rem; left:1rem;
  font-family:Georgia,'Times New Roman',serif; font-size:6rem; line-height:1; color:var(--blue); opacity:.14; pointer-events:none; }
.tcar-track figure.suite-card::after{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--blue); }
.tcar-track blockquote{ margin:0; position:relative; }
.tcar-track blockquote p{ font-size:1.04rem; line-height:1.72; color:var(--ink); font-style:italic; }
.tcar-track figcaption{ margin-top:1.3rem; padding-top:1rem; border-top:1px solid var(--line); }
.tcar figcaption strong{ display:block; margin-bottom:.1rem; color:var(--blue-deep); font-size:1rem; font-style:normal; }
.tcar figcaption span{ display:block; color:var(--ink-faint); font-size:.84rem; font-style:normal; }

/* --- Compact 2-column bullet list (replaces 6-card "Why choose" grids) --- */
.feature-list--2col{ display:grid; grid-template-columns:repeat(2,1fr); gap:.85rem 2.4rem; }
.feature-list--2col li strong{ color:var(--ink); }
@media(max-width:680px){ .feature-list--2col{ grid-template-columns:1fr; } }

/* --- Balanced 3-up grid (6 cards -> 3+3 instead of 4+2) --- */
.suite-grid--3{ grid-template-columns:repeat(3,1fr) !important; }
@media(max-width:860px){ .suite-grid--3{ grid-template-columns:repeat(2,1fr) !important; } }
@media(max-width:560px){ .suite-grid--3{ grid-template-columns:1fr !important; } }

/* ============================================================
   PEOPLE ACCORDION (2026-06-24) — leadership + supervisors
   Collapsible "click to expand bio" rows, reusing the site's
   existing .acc/.acc-item/.acc-q/.acc-a component (driven by
   main.js). Production presents these as people lists; here the
   bios are tucked into a clean toggle so the page stays scannable.
   ============================================================ */
.people-acc{ max-width:920px; margin:1.6rem auto 0; border-top:1px solid var(--line); }
.people-acc .acc-q{ font-size:1rem; align-items:center; gap:1rem; }
.people-acc .who{ display:flex; align-items:center; gap:1.05rem; min-width:0; text-align:left; }
.people-acc .avatar{ flex:none; width:58px; height:58px; border-radius:50%; object-fit:cover;
  object-position:center 22%; box-shadow:0 1px 5px rgba(0,0,0,.16); background:var(--mist); }
.people-acc .meta{ display:flex; flex-direction:column; min-width:0; }
.people-acc .nm{ font-family:var(--display); font-weight:800; font-size:1.12rem; color:var(--ink); line-height:1.22; }
.people-acc .rl{ font-weight:600; font-size:.82rem; color:var(--blue-deep); margin-top:.18rem; line-height:1.3; }
.people-acc .acc-q[aria-expanded="true"] .nm{ color:var(--blue-deep); }
.people-acc .acc-a-inner{ max-width:none; padding:0 0 1.5rem; }
.people-acc .acc-a-inner .creds{ font-size:.85rem; font-style:italic; color:var(--ink-faint); margin:0 0 .8rem; }
.people-acc .acc-a-inner p{ margin:0 0 .85rem; line-height:1.72; }
.people-acc .acc-a-inner p:last-child{ margin-bottom:0; }
/* indent the open bio to sit under the name, clear of the avatar */
@media(min-width:560px){ .people-acc--photo .acc-a-inner{ padding-left:74px; } }

/* ============================================================
   GOOGLE REVIEWS SECTION
   ============================================================ */
.reviews-band { background: var(--blue-tint, #E6F6FD); }
.reviews-intro { margin-bottom: 2.4rem; }
.reviews-aggregate {
  display: flex; align-items: center; gap: .75rem; margin-top: 1rem; flex-wrap: wrap;
}
.reviews-aggregate .reviews-stars { color: #FBBC04; font-size: 1.5rem; letter-spacing: .06em; }
.reviews-score { font-size: 2rem; font-weight: 800; color: var(--blue-deep); line-height: 1; }
.reviews-label { color: #555; font-size: .95rem; }
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2.4rem;
  min-height: 4rem;
}
.review-card {
  background: #fff;
  border: 1px solid #E9E9E9;
  border-radius: 6px;
  padding: 1.5rem;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  display: flex;
  flex-direction: column;
  gap: .85rem;
  transition: box-shadow .25s ease, transform .25s ease;
}
.review-card:hover { box-shadow: 0 8px 26px rgba(0,0,0,.10); transform: translateY(-3px); }
.review-card .review-stars { font-size: 1rem; color: #FBBC04; }
.review-text {
  color: #333; font-size: .95rem; line-height: 1.72; flex: 1; margin: 0;
}
.review-author { display: flex; align-items: center; gap: .75rem; margin-top: auto; }
.review-avatar {
  width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
}
.review-avatar--init {
  background: var(--blue); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .9rem; border-radius: 50%;
  width: 40px; height: 40px; flex-shrink: 0;
}
.review-meta { display: flex; flex-direction: column; gap: .15rem; }
.review-name { font-size: .88rem; color: #222; font-weight: 700; }
.review-time { font-size: .78rem; color: #888; }
.reviews-cta { text-align: center; }
@media(max-width:600px) {
  .reviews-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   LAYOUT BASE — needed when styles.css is absent
   Provides display:grid for .suite-grid so testimonial/card
   grids don't collapse and cards don't overlap.
   ============================================================ */
.suite-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.15rem;
}
.suite-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #E0E5EA;
  border-radius: 8px;
  padding: 1.6rem;
  box-sizing: border-box;
}