/* ============================================================
   Concord College International School (CCIS) — brand polish
   Layered on top of Kadence's global design system. Kadence owns
   the palette, typography, buttons, header & footer builder; this
   file carries the brand cues Kadence controls can't express plus
   the styling for the Kadence Header/Footer HTML elements.
   Brand source of truth: brand-spec.md
   ============================================================ */

:root{
  --ccis-burgundy:#7D253A;
  --ccis-burgundy-deep:#5e1b2c;
  --ccis-gold:#B49247;
  --ccis-gold-soft:#c9a85a;
  --ccis-ink:#232323;
  --ccis-muted:#7A7A7A;
  --ccis-surface:#F4F4F4;
  --ccis-band:#E3E3E3;
  --ccis-foot-text:rgba(243,228,232,.78);
}

html{ scroll-behavior:smooth; }

/* Ceremonial gold eyebrow + rule, reusable in content. */
.ccis-eyebrow{
  font-family:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ccis-gold); font-weight:600; display:inline-block;
}
.ccis-gold-rule{
  display:block; width:64px; height:3px; border:0; border-radius:2px;
  background:var(--ccis-gold); margin:18px 0;
}

/* ---------- Header: primary nav reads in the UI face (Inter) ---------- */
.site-header .header-navigation .menu-container > ul > li > a,
.header-navigation .menu > li > a,
#main-navigation .menu-item > a{
  font-family:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight:500;
  letter-spacing:.01em;
}

/* Logo crest sizing safety (square crest -> cap the height). */
.site-header .site-branding img.custom-logo{ height:54px; width:auto; }

/* ---------- Header utility line (Kadence top-row HTML element) ---------- */
.ccis-utility{
  font-family:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:.8rem; display:flex; gap:12px; align-items:center;
  justify-content:flex-end; color:#f3e4e8; width:100%;
}
.ccis-utility a{ color:#f3e4e8; text-decoration:none; }
.ccis-utility a:hover{ color:var(--ccis-gold); }
.ccis-utility-sep{ opacity:.5; }

/* ============================================================
   Footer — content lives in the Kadence Footer HTML element
   (Customize -> Footer). Burgundy-deep band set via Kadence
   footer middle background; this styles the inner layout.
   ============================================================ */
.ccis-footer{
  width:100%;
  font-family:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  color:var(--ccis-foot-text); font-size:.88rem; text-align:left;
}
.ccis-foot-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:34px 26px; margin-bottom:36px;
}
.ccis-foot-brand{ grid-column:1 / -1; max-width:580px; }
.ccis-foot-crest{
  height:58px; width:auto; background:#fff; padding:8px;
  border-radius:12px; display:inline-block; box-shadow:0 2px 12px rgba(0,0,0,.22);
}
.ccis-foot-brand p{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:1.08rem; color:rgba(243,228,232,.72); margin:14px 0 0; line-height:1.5;
}
.ccis-foot-col h4{
  font-family:"Cinzel",Georgia,serif; color:#fff; font-size:.95rem;
  letter-spacing:.06em; text-transform:uppercase; margin:0 0 14px;
}
.ccis-foot-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.ccis-foot-col a{ color:rgba(243,228,232,.75); text-decoration:none; font-size:.86rem; }
.ccis-foot-col a:hover{ color:var(--ccis-gold); }
.ccis-foot-contact li{ color:rgba(243,228,232,.75); font-size:.84rem; line-height:1.45; margin-bottom:10px; }
.ccis-foot-contact a{ color:rgba(243,228,232,.75); text-decoration:none; }
.ccis-foot-contact a:hover{ color:var(--ccis-gold); }
.ccis-foot-bottom{
  border-top:1px solid rgba(255,255,255,.14); padding-top:20px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-size:.8rem; color:rgba(243,228,232,.6);
}
.ccis-foot-bottom a{ color:rgba(243,228,232,.6); text-decoration:none; }
.ccis-foot-bottom a:hover{ color:#fff; }

/* ============================================================
   Home (CCIS) — core-block brand layer
   The homepage is built from core WordPress blocks (editable in
   Gutenberg) and styled here: section bands, cards, eyebrows, etc.
   ============================================================ */
.ccis-band{ padding-top:clamp(56px,8vw,100px); padding-bottom:clamp(56px,8vw,100px); }
.ccis-band.ccis-tight-bottom{ padding-bottom:clamp(18px,2.5vw,28px); }
.ccis-band.ccis-tight-top{ padding-top:clamp(10px,1.5vw,18px); }
.ccis-band-surface{ background:#F4F4F4; }
.ccis-band-burgundy{ background:#5e1b2c; color:#f3e4e8; }
.ccis-band-center{ text-align:center; }
.ccis-band-center .wp-block-buttons{ justify-content:center; }
.ccis-band-burgundy :is(h1,h2,h3,h4){ color:#fff; }
.ccis-on-dark{ color:#fff !important; }

.ccis-lead{ font-size:clamp(1.05rem,1.5vw,1.3rem); color:#7A7A7A; line-height:1.6; }
.ccis-band-burgundy .ccis-lead, .ccis-lead.ccis-on-dark{ color:#f3e4e8; }
.ccis-hero-eyebrow{ color:#c9a85a !important; }
.ccis-rule{ width:64px; height:3px; background:#B49247; border:0; border-radius:2px; margin:14px auto 20px; }

/* Hero (core/cover) */
.ccis-hero .wp-block-cover__inner-container{ max-width:720px; margin-left:0; }
.ccis-hero h1{ color:#fff; font-size:clamp(2.4rem,5vw,3.6rem); }

/* Card grids (core/group inside core/column) */
.wp-block-columns{ align-items:stretch; }
.ccis-card, .ccis-card-burgundy, .ccis-card-left{
  border:1px solid #E3E3E3; background:#fff; border-radius:20px;
  padding:clamp(22px,2.4vw,30px); height:100%;
}
.ccis-card, .ccis-card-burgundy{ text-align:center; }
.ccis-card-left{ text-align:left; }
.ccis-card-burgundy{ background:#7D253A; border-color:#7D253A; color:#fff; }
.ccis-card h3, .ccis-card-left h3{ color:#7D253A; font-size:1.35rem; margin:.25em 0; }
.ccis-card-burgundy h3{ color:#fff; }
.ccis-card-burgundy .ccis-eyebrow{ color:#c9a85a; }
.ccis-age{ color:#7D253A; font-weight:600; font-size:.92rem; }
.ccis-card-burgundy .ccis-age{ color:#fff; }
.ccis-muted{ color:#7A7A7A; }
.ccis-dest-list{ color:#232323; line-height:1.9; font-size:1.05rem; }

/* Stats */
.ccis-stat-num{ font-family:"Cinzel",Georgia,serif; font-weight:600; font-size:clamp(2.6rem,5vw,3.6rem); line-height:1; color:#fff; margin:0; }
.ccis-stat-label{ color:#e7d3da; font-size:.9rem; margin:.55em 0 0; }

/* Accreditation cards */
.ccis-accr h4{ color:#7D253A; font-size:1.05rem; margin:0 0 .3em; }
.ccis-accr .ccis-muted{ font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; }

/* News cards */
.ccis-news{ padding:0; overflow:hidden; }
.ccis-news .wp-block-image{ margin:0; }
.ccis-news .wp-block-image img{ width:100%; aspect-ratio:16/10; object-fit:cover; display:block; }
.ccis-news-body{ padding:20px 22px 24px; text-align:left; }
.ccis-news-body h3{ color:#7D253A; font-size:1.2rem; }

/* Principal + video */
.ccis-prin-card{ text-align:left; }
.ccis-avatar img{ width:104px; height:104px; border-radius:50%; object-fit:cover; border:3px solid #B49247; }
.ccis-prin-quote{ color:#232323; font-size:1.18rem; line-height:1.5; border-left:3px solid #B49247; padding-left:18px; font-style:italic; }
.ccis-video img{ border-radius:20px; width:100%; object-fit:cover; }

/* Buttons: gold hover (global pill + burgundy already set by Kadence) */
.wp-block-button__link:hover{ background-color:#B49247 !important; border-color:#B49247 !important; color:#fff !important; }

/* ─── DARK GLASS (matches existing .glass-effect) ─── */
/* Use on dark-background sections */

.glass-dark {
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px); /* Safari — was blur(5px), corrected to match */
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  padding: 10px;
}


/* ─── LIGHT GLASS ─── */
/* Use on light/image backgrounds */

.glass-light {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);
  padding: 10px;
}