/* ============================================================
   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 size is controlled by the theme: Customize > Site Identity > Logo Max Width.
   (Height is left auto so that width setting governs. Note: the crest is near-
   square, so a large Logo Max Width will grow the header height accordingly.) */

/* ---------- 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; }

/* ---------- Google Translate control in the utility line ----------
   The widget is initialised with InlineLayout.SIMPLE, which renders
   .goog-te-gadget-simple (globe image + value + arrow) rather than a
   <select class="goog-te-combo">. Both are styled below so the control
   stays on-brand if the layout is ever switched. */
.ccis-translate{ display:inline-flex; align-items:center; gap:6px; }
.ccis-translate-label{ white-space:nowrap; color:var(--ccis-gold); font-weight:600; }
#google_translate_element{ display:inline-flex; align-items:center; line-height:1; }
#google_translate_element .goog-te-gadget{
  font-size:0; color:transparent; font-family:inherit; line-height:1;
}
/* The theme's global reset (global.min.css: img{display:block}) breaks
   Google's markup, which uses 1x1 spacer <img> tags inline with text.
   Block-level images inside the <a> force line breaks around themselves,
   turning one line of text into five stacked ones. Undo the reset here only. */
#google_translate_element img{ display:inline !important; max-width:none !important; }

/* SIMPLE layout: the clickable pill */
#google_translate_element .goog-te-gadget-simple{
  display:inline-flex; align-items:center; gap:6px;
  margin:0; padding:3px 10px;
  font-family:inherit; font-size:.8rem; line-height:1.4;
  background:rgba(255,255,255,.08);
  border:1px solid var(--ccis-gold);
  border-radius:40px;
  color:#f3e4e8; cursor:pointer;
  transition:background .2s ease, border-color .2s ease, color .2s ease;
}
#google_translate_element .goog-te-gadget-simple:hover{
  background:var(--ccis-gold); border-color:var(--ccis-gold); color:var(--ccis-burgundy-deep);
}
/* Google's own globe bitmap cannot be recoloured - drop it and let the
   gold brand label beside the control carry the meaning. */
#google_translate_element .goog-te-gadget-icon{ display:none !important; }
/* The clickable link itself. Its class name (e.g. "VIpgJd-ZVi9od-...") is an
   obfuscated Google build hash, not a stable target, so this is structural:
   the sole <a> inside the pill. Its dropdown-arrow span carries a hardcoded
   inline color, which needs !important to beat. */
#google_translate_element .goog-te-gadget-simple a{
  color:inherit; text-decoration:none; margin:0;
}
#google_translate_element .goog-te-gadget-simple a span{ color:inherit !important; }
#google_translate_element .goog-te-gadget-simple a [style*="border-left"]{
  border-left-color:currentColor !important; opacity:.5;
}

/* Non-SIMPLE layouts: the native select */
#google_translate_element .goog-te-combo{
  margin:0; font-family:inherit; font-size:.8rem;
  color:#f3e4e8; background:var(--ccis-burgundy-deep);
  border:1px solid var(--ccis-gold); border-radius:40px;
  padding:3px 10px; cursor:pointer;
}
#google_translate_element .goog-te-combo:hover,
#google_translate_element .goog-te-combo:focus{
  background:var(--ccis-gold); color:var(--ccis-burgundy-deep);
  outline:none; box-shadow:0 0 0 2px rgba(180,146,71,.35);
}
#google_translate_element .goog-te-combo option{ color:#232323; background:#fff; }

/* "Powered by Google Translate" wordmark - not recolourable, so hidden */
#google_translate_element .goog-logo-link,
#google_translate_element .goog-te-gadget > span{ display:none !important; }

/* The language menu Google injects at the document root */
.goog-te-menu-frame{ box-shadow:0 8px 30px rgba(35,35,35,.24) !important; border-radius:8px; }

/* Kill the top banner iframe that otherwise pushes the whole page down */
.goog-te-banner-frame.skiptranslate,
.skiptranslate iframe.skiptranslate{ display:none !important; }
body{ top:0 !important; }
@media (max-width:760px){ .ccis-translate-label{ display:none; } }

/* ============================================================
   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-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;
}



/* ─── PROFILE MODAL — FULL-BLEED PORTRAIT ON MOBILE ─── */
/* omt/modal profile cards (staff "Read profile"). On desktop the portrait sits
   in the left column of a right-golden row and the container's 30px padding is
   the right gutter. On mobile the row stacks, and a portrait inset by 30px on
   each side reads as a thumbnail rather than a photograph — so the container
   padding is dropped and the text column supplies its own gutter instead.
   Scoped to .omt-block-pro-modal, so nothing outside a modal is affected. */

@media (max-width: 767px) {
  .omt-block-pro-modal .kt-modal-container {
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
  }

  /* Portrait runs edge to edge. max-width also has to be released on the
     figure, which is where the block's imgMaxWidthMobile lands. */
  .omt-block-pro-modal .kt-modal-content .kt-row-column-wrap > .wp-block-omt-column:first-child .wp-block-omt-image,
  .omt-block-pro-modal .kt-modal-content .kt-row-column-wrap > .wp-block-omt-column:first-child .wp-block-omt-image img {
    max-width: none;
    width: 100%;
    margin: 0;
    border-radius: 0;
  }

  /* Gutter moves onto the text column... */
  .omt-block-pro-modal .kt-modal-content .kt-row-column-wrap > .wp-block-omt-column:nth-child(2) .kt-inside-inner-col {
    padding: 20px 24px 0;
  }

  /* ...and onto profiles with no photo, which have no columns at all. */
  .omt-block-pro-modal .kt-modal-content > .wp-block-omt-advancedheading {
    padding-left: 24px;
    padding-right: 24px;
  }
  .omt-block-pro-modal .kt-modal-content > .wp-block-omt-advancedheading:first-child {
    padding-top: 24px;
  }

  /* The close button loses its padded corner, so give it a legible chip
     against whatever part of the photograph ends up behind it. */
  .omt-block-pro-modal .kt-close-position-inside .kt-modal-close {
    top: 8px;
    right: 8px;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 50%;
    padding: 6px;
  }
}


/* ─── PROFILE MODAL — CLOSE BUTTON AT THE FOOT ─── */
/* A long profile (Dr Outram's runs to five paragraphs) scrolls the x at the top
   out of view, so each modal ends with its own Close. It is a plain button
   carrying data-modal-close, which is the only thing MicroModal's close handler
   checks — no extra script. Appearance is the theme's: .button plus
   .button-style-outline on the element itself. This rule only places it —
   right-aligned on desktop and tablet, full width on mobile. */

.ccis-modal-close-end {
  display: block;
  width: auto;
  margin: 28px 0 0 auto;
  cursor: pointer;
}

@media (max-width: 767px) {
  /* the container's side padding is dropped on mobile for the full-bleed
     portrait, so the button supplies its own breathing room */
  .ccis-modal-close-end {
    width: calc(100% - 48px);
    margin: 24px 24px 0;
  }
}

/* Body copy is NOT justified. The school asked for left alignment and no
   end-of-line hyphenation (email, 2026-08-13): justify stretched short
   paragraphs — OMT writes job titles and eyebrows as <p>, so "Head of Primary"
   was spread across 345px on the SLT page — and hyphens:auto broke words
   mid-line.

   There is deliberately no `text-align: left` here. Paragraphs inherit their
   block's alignment, which is left unless the design centres it; forcing left
   would have overridden the centred CTA bands and the centred mobile slider.

   The rule that used to live here (justify + text-justify:inter-word +
   hyphens:auto, with a <600px override and a slider exception) is preserved in
   concord.css.bak-2026-08-13-justify on the server and in out/rollback/.
   scripts/cr_justify_to_left.py --rollback puts it back. */


/* ─── beta round 2 — 2026-08-06 ─────────────────────────────────── */

/* The hero breadcrumb needed a text-shadow while heroes had a weak overlay.
   Since the hero standardisation (row overlay #0f0c0e at 61%) the gradient
   carries it, so the shadow is gone — Jon, 2026-08-07. */

/* Headings broke mid-word because the theme sets word-break: break-word —
   "Understandin / g the World" in an Early Years infobox, and on mobile any
   long word in a section heading ("Governanc / e," on Policies at 375px).
   word-break: normal wraps at the space; overflow-wrap still lets a word that
   genuinely cannot fit break rather than overflow its box. */
.kt-blocks-info-box-title,
.wp-block-omt-advancedheading,
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4 {
  word-break: normal;
  overflow-wrap: break-word;
}

/* Futures — the journey row (change request 5, Ken, 7 Aug 2026).

   Progression arrows between the five steps. Pseudo-elements rather than four
   extra columns: `colLayout: equal` would give the arrows the same width as
   the steps, and a real column would still point sideways once the row stacks.

   These are CSS-only, so they do NOT appear in the block editor canvas — only
   on the front end. Adjust them here, not in the editor.

   Scoped by the row's className, not its uniqueID, which the editor renumbers
   on save. */

/* Side by side: anchored to .wp-block-omt-icon, which is full column width and
   exactly as tall as the icon, so the arrow stays on the icon's centre line at
   whatever size the icon is set to. */
@media (min-width: 768px) {
  .ccis-journey .kt-row-column-wrap > .wp-block-omt-column:not(:last-child) .wp-block-omt-icon {
    position: relative;
  }
  .ccis-journey .kt-row-column-wrap > .wp-block-omt-column:not(:last-child) .wp-block-omt-icon::after {
    content: "\2192";
    position: absolute;
    top: 50%;
    left: calc(100% + 16px);   /* centre of the 32px column gutter, which is
                                  also the midpoint between two icon discs */
    transform: translate(-50%, -50%);
    font-size: 28px;
    line-height: 1;
    color: var(--global-palette2, #B49247);
    pointer-events: none;
  }
}

/* Stacked: point down the list rather than off the side of it.

   The gap the arrow sits in is set here rather than inherited, because the
   step columns do not agree — the first has its padding zeroed in the editor
   while the rest carry `md`, so relying on it put the first arrow through the
   middle of the word "Discover". */
@media (max-width: 767px) {
  .ccis-journey .kt-row-column-wrap > .wp-block-omt-column {
    position: relative;
  }
  .ccis-journey .kt-row-column-wrap > .wp-block-omt-column:not(:last-child) > .kt-inside-inner-col {
    padding-bottom: 44px;
  }
  .ccis-journey .kt-row-column-wrap > .wp-block-omt-column:not(:last-child)::after {
    content: "\2192";
    position: absolute;
    left: 50%;
    bottom: 9px;
    transform: translateX(-50%) rotate(90deg);
    font-size: 26px;
    line-height: 1;
    color: var(--global-palette2, #B49247);
    pointer-events: none;
  }
}

/* Person cards: equal height whatever the job title does.
   Ken, 2026-08-08 (change request 21): "Rebecca's picture and timothy's
   picture box also seems to be longer". Measured at 1440px, their two cards
   were 770px against everyone else's 747 — exactly one extra line, because
   theirs are the only job titles that wrap. The grid already stretches the
   COLUMN to the tallest in the row; it is `.kt-inside-inner-col`, which
   carries the border and the radius, that sizes to its content and leaves the
   short cards ending 23px early.

   Scoped by :has() to columns holding a modal, which on this site means a
   person card and nothing else — Senior Leadership Team, Primary and
   Secondary Staff, Board of Governors. On a column that is not already
   stretched this is a no-op. Same fault, same fix, for change request 22. */
.wp-block-omt-column:has(> .kt-inside-inner-col > .wp-block-omt-modal)
  > .kt-inside-inner-col {
  height: 100%;
}

/* [98] ...and the column has to actually stretch for that to mean anything.
   Jon, 2026-08-20, on Secondary Staff: the gap between the job title and "Read
   profile" "changes and seems to be far apart at a smaller window before
   responsive breaks" — measured at 900px it ran 39px on one card against 126px
   on another.

   The note above assumes "the grid already stretches the COLUMN to the tallest
   in the row". It does not. The person-card columns set verticalAlignment
   "top", which is align-self:flex-start, and that opts a grid item out of
   stretching. What actually made them equal was a hard height on the column
   block ([740,630,650] on Secondary), so every card was frozen at one size
   however little was in it, and margin-top:auto turned the leftover into that
   gap — worst at narrow widths, where three columns leave ~274px and a job
   title wraps to five lines while its neighbour uses one.

   That hard height is now off the blocks, so the cards size to their content;
   this restores the stretch the two rules above were written for, height:100%
   resolves against the row again, and the buttons line up. Same shape as [97].

   Senior Leadership Team never carried the hard height, which is why it always
   looked right and was the reference for this fix. */
.wp-block-omt-column:has(> .kt-inside-inner-col > .wp-block-omt-modal) {
  align-self: stretch;
}

/* ---------- Academic calendar month grids ----------
   Jon, 2026-08-10, from a phone screenshot: "Smaller text and make sure the
   background fills the entire cell."

   A day's colour sits on the advancedheading inside the cell, because
   omt/table-data has no background attribute. That heading is a block in a
   table-cell: vertically centred, only as tall as its own text. So in a week
   where one day wraps to four lines, every other coloured day rendered as a
   band floating in a white box. height:100% on a block child of a table-cell
   resolves against the cell, which is what carries the colour to the borders;
   vertical-align:top stops the short cells centring their numbers.

   The font sizes are here rather than on the block because Kadence's smallest
   token is `sm` (clamp .8-.9rem), still too wide for seven columns on a phone.

   `height:1px` on the cell is what makes that percentage resolve. A table cell
   treats height as a minimum and always grows to its row, so the rendered
   height is unchanged — but it is now a *definite* value, and without it
   `height:100%` on the child falls back to auto and the colour stops short.
   Measured before: an 81px heading in a 99px cell.

   Scoped by :has() to a table with a seventh column — the month grid, matched as EXACTLY seven
   columns: the Steps for Enrolment assessment table has eight and was being
   caught by this rule, which is what made its type smaller than the table
   beside it, the same reasoning as the person-card rule above. */
.kb-table:has(td:nth-child(7)):not(:has(td:nth-child(8))) td { vertical-align: top; height: 1px; }
.kb-table:has(td:nth-child(7)):not(:has(td:nth-child(8))) td > .wp-block-omt-advancedheading,
.kb-table:has(td:nth-child(7)):not(:has(td:nth-child(8))) th > .wp-block-omt-advancedheading {
  box-sizing: border-box;
  margin: 0;
  font-size: .8rem;
  line-height: 1.3;
}
.kb-table:has(td:nth-child(7)):not(:has(td:nth-child(8))) td > .wp-block-omt-advancedheading { height: 100%; }

@media (max-width: 767px) {
  .kb-table:has(td:nth-child(7)):not(:has(td:nth-child(8))) td > .wp-block-omt-advancedheading,
  .kb-table:has(td:nth-child(7)):not(:has(td:nth-child(8))) th > .wp-block-omt-advancedheading {
    font-size: .6rem;
    line-height: 1.2;
    padding: .4rem .3rem;
  }
}

/* [91] Monitoring Progress hero row: hold the background photo's 3:2 shape on
   mobile. minHeight on 1738_bdd505-d2 is a flat 460, so a narrow screen gives a
   375x460 portrait window and background-size:cover crops the sides off a
   landscape photo. 66.7vw keeps the row at 3:2 at any mobile width; the copy in
   that row needs ~93px, so it never runs out of room. */
@media (max-width: 767px) {
  .kb-row-layout-id1738_bdd505-d2.kb-row-layout-id1738_bdd505-d2 > .kt-row-column-wrap { min-height: 66.7vw; }
}

/* [92] USP cards on the homepage and Why Us: reserve two lines for the card
   title so every paragraph in a row starts at the same y. The titles ran one or
   two lines depending on viewport width and had been shimmed into line with
   trailing (and one leading) <br>, which only holds at the width they were
   counted at — at 1280 and 1440 the first row's paragraphs sat 25px apart. The
   <br> are gone from the block content now. 2lh not a pixel value because the
   two pages compute different line-heights, 25px and 23.1px. */
.kb-row-layout-id1571_3ad39e-b0 .kt-blocks-info-box-title,
.kb-row-layout-id1290wu_3ad39e-b0 .kt-blocks-info-box-title {
  min-height: 2lh;
}

/* [93] Search results on mobile: the result title is 34px in a 294px column, so
   "International School in Kuala Lumpur, Selangor & Malaysia" ran to five lines
   (Eric 128). search_archive_columns is now 1, which fixes desktop, but mobile
   was always one column so the option does nothing there — only size does.
   Measured on that title at 390px: 34px = 5 lines, 28px = 4, 22px = 3, and it
   plateaus at 3 below 22px because "International" and "Kuala Lumpur" set the
   floor. 22px is the largest size that reaches it. Line-height is a ratio on
   this element, so it scales with the size and needs no rule of its own.
   Not set through search_archive_title_font: that option is a font array, and
   OMT attribute arrays replace their defaults wholesale. */
@media (max-width: 767px) {
  .search-archive .entry-title { font-size: 22px; }
}

/* [94] Staff cards: keep the Read profile button on the same line across a row.
   The button sits at the end of the card, under the name and the role, and both
   of those change line count with viewport width — at 1024px the Senior
   Leadership row spanned 69px between the highest and lowest button.

   A min-height on the role was the first attempt and it only held at wide
   widths: it fixes a two-line role next to a one-line role, but not a three-line
   role, and not a name that wraps. Bottom-aligning the button removes the whole
   class of problem, because the card columns in a row already stretch to a
   common height, so pushing the button to the bottom of one puts it level with
   the rest whatever the copy above does.

   The figure's margin-bottom is zeroed because flex stops margins collapsing:
   the image's 20px and the name's 29.5px collapsed to 29.5px in block layout and
   would otherwise sum to 49.5px, dropping everything below by 20px.

   Scoped by ":has(> .wp-block-omt-modal)", which is the staff card shape and
   nothing else on the site — only senior-leadership-team, primary-staff,
   secondary-staff and board-of-governors use omt/modal. */
.kt-inside-inner-col:has(> .wp-block-omt-modal) {
  display: flex;
  flex-direction: column;
}
.kt-inside-inner-col:has(> .wp-block-omt-modal) > figure.wp-block-omt-image {
  margin-bottom: 0;
}
.kt-inside-inner-col > .wp-block-omt-modal {
  margin-top: auto;
}

/* [95] Homepage USP cards: five of them in a two-column grid leaves the fifth
   stranded at the left of a row of its own. Jon, 2026-08-18: "move GLOBAL
   CONNECTIVITY, that column to the middle ... gotta be same size as the rest of
   the boxes." Spanning both tracks is what allows it to centre; the width calc
   hands back exactly one track (grid content box less the 32px gutter, halved)
   so it centres without stretching to double width. Gated above 768px because
   below that the row is a single column and the card is already full width. */
@media (min-width: 768px) {
  .kb-row-layout-id1571_3ad39e-b0 > .kt-row-column-wrap > .omt-column1571_usp5-c5 {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - 32px) / 2);
  }
}

/* [96] Why Us: the same stranded fifth card as [95]. It used to be three
   two-column rows, the last holding GLOBAL CONNECTIVITY beside an empty
   column, and this rule keyed on that empty sibling. Eric item 133 (20 Aug)
   asked for the home page layout instead, so the homepage row was copied over
   with its uniqueIDs re-namespaced to 1290wu_ and the old 1290 rows were
   deleted. Same shape as the homepage now, so [95]'s treatment applies
   verbatim but for the id. */
@media (min-width: 768px) {
  .kb-row-layout-id1290wu_3ad39e-b0 > .kt-row-column-wrap > .omt-column1290wu_usp5-c5 {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - 32px) / 2);
  }
}

/* [98] Visit Us, the "Take the Next Step" card on mobile. Eric item 136, Jon
   pointed at the gap between the International Families photo and "WE LOOK
   FORWARD TO WELCOMING YOU". Most of it was column 1303_f25c00-8a's 5xl top
   padding and its flat 1350px height, both now given mobile slots in the block.
   What is left is the row's minHeight:1077, which OMT rowlayout offers no
   responsive slot for - same limitation rule [91] works around. Dropped below
   768px only; the desktop composition against the drone photograph is
   unchanged. */
@media (max-width: 767px) {
  .kb-row-layout-id1303_9dd932-b0.kb-row-layout-id1303_9dd932-b0 > .kt-row-column-wrap { min-height: 0; }
}

/* [99] Visit Us, "Take the Next Step" on mobile. Eric item 152: "Text cannot
   be seen against the background on mobile." The row lays its copy over a drone
   photograph with a white-to-transparent wash, which works on desktop where the
   text occupies the top third. On a phone the copy is 695px of a 759px row, so
   most of it sits where the wash has already faded to nothing. Tightening the
   row for item 136 made that worse, not better - the shorter the row, the
   faster the gradient runs out.
   The row already declares bgColor #f2f0f0, so below 768px the photograph and
   its overlay are dropped and the flat colour shows through. Legibility beats
   the photograph on a screen too small to hold both. Desktop is unchanged. */
@media (max-width: 767px) {
  .kb-row-layout-id1303_9dd932-b0.kb-row-layout-id1303_9dd932-b0 {
    background-image: none;
  }
  .kb-row-layout-id1303_9dd932-b0 > .kt-row-layout-overlay {
    display: none;
  }
}

/* [100] Open Days, the All / News / Events filter bar. Eric item 163 asked for
   the space below the buttons to go. It is not a block attribute: the query
   plugin's own button container carries a flat 100px margin-bottom, which on a
   phone leaves 131px between the bar and the first card. Cut to 32px below
   768px only - at the desktop rhythm the 100px reads as deliberate, and this is
   plugin markup shared by every query block on the site, so the narrower the
   The 100px is a margin attribute on the filter block inside query index 3000,
   not on the page, and the plugin prints it inline as
   `body .wp-block-omt-query .wp-block-omt-query-filter-buttons3000_... .buttons-options`.
   Matching that specificity from a stylesheet is a coin toss on source order, so
   this one carries !important - the alternative is editing the shared query index
   and changing every page that uses it. */
@media (max-width: 767px) {
  body .wp-block-omt-query .buttons-options.filter-refresh-container {
    margin-bottom: 32px !important;
  }
}

/* [97] Admissions Overview, the three "Before You Arrive / Your School Tour /
   Settling In" cards. Ken, fc4: "Align Book your visit link placement to match
   the link placement in the other two boxes." The columns are verticalAlignment
   "middle" with height 400, so each card centres its own contents and the row
   centres the cards against each other too — the middle card holds one line more
   than its neighbours, so nothing in it sits level with anything. Stretching the
   columns to a common height and pushing the last block down with margin-top
   auto lines up the titles at the top and the links at the bottom in one move,
   and it survives a link wrapping to two lines because what is aligned is the
   block's bottom edge, not its first line. height:auto is needed because the
   block writes a flat 400px height that would otherwise beat the stretch.
   Above 1024px only: below that each card is alone on its row and centred
   contents are correct. */
@media (min-width: 1025px) {
  .kb-row-layout-id1301_36616d-11 > .kt-row-column-wrap > .wp-block-omt-column {
    align-self: stretch;
    height: auto;
    min-height: 400px;
  }
  .kb-row-layout-id1301_36616d-11 .kt-inside-inner-col {
    justify-content: flex-start;
  }
  .kb-row-layout-id1301_36616d-11
    .kt-inside-inner-col
    > .wp-block-omt-advancedheading:last-child {
    margin-top: auto;
  }
}

/* [101] Mobile language chooser, the [ccis_translate] shortcode sitting in the
   drawer's mobile-html slot below the menu (Jon, 2026-08-20). The desktop
   header — translate gadget included — is display:none at 1024px and below, so
   this is the only language control a phone visitor has. Pills rather than full
   -width rows: five more stacked rows under the nav read as six more menu
   items, and the drawer would need scrolling to reach them. Colours are the
   drawer's own — white on burgundy, and the gold the nav uses for the current
   page marks the current language. No border-top: the menu's last item already
   draws one, and a second rule 12px under it read as a mistake. Font-family is
   set on both the label and the buttons because the drawer's html slot
   inherits the theme's serif body face, not the nav's sans. */
.ccis-mlang {
  padding: 18px 8px 8px;
}
.ccis-mlang-label {
  display: block;
  margin-bottom: 12px;
  color: rgba(255, 255, 255, 0.55);
  font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial,
    sans-serif;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ccis-mlang-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ccis-mlang-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 3px;
  background: transparent;
  color: #fff;
  font-family: -apple-system, "system-ui", "Segoe UI", "PingFang SC",
    "Hiragino Sans", "Noto Sans CJK", "Malgun Gothic", sans-serif;
  font-size: 14px;
  line-height: 1.2;
  cursor: pointer;
}
.ccis-mlang-btn:hover {
  border-color: rgba(255, 255, 255, 0.6);
}
/* Same five flags as the desktop popup — one PHP source, ccis_translate_flags().
   flex:none keeps the 21x14 from being squeezed by a long label like Bahasa
   Melayu, and the hairline stops a white flag (Japan, Korea) dissolving into
   the burgundy. The explicit 21x14 beats the theme's global img{height:auto},
   which left the 2:1 flags (UK, Malaysia) 3px shorter than the 3:2 ones; it is
   the same box, and the same slight squeeze, the desktop popup applies via
   background-size. */
.ccis-mlang-flag {
  flex: none;
  width: 21px;
  height: 14px;
  border-radius: 1px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
}
.ccis-mlang-btn.is-current {
  border-color: #b49247;
  color: #b49247;
}

/* [102] Headings must never split a word, and must never hyphenate either
   (Jon, 2026-08-21). That leaves only one lever: no heading may be bigger than
   its column can hold. The theme's global overflow-wrap:break-word is right for
   a stray URL and wrong for display type, but it only ever fires on a word that
   does not fit, so the fix is the size, per block, not a CSS override.

   Measured breakpoints, because both obvious guesses are wrong: OMT does not
   collapse a two-column row until about 780px, not 1024, and the block's tablet
   font-size slot covers 768-1024 and does reach that band. Above ~1025 there is
   only the one desktop value.

   DO NOT reach for container queries. `container-type: inline-size` on
   .kt-inside-inner-col does size headings against their own column, and it also
   stops that column's contents contributing to its intrinsic width - the columns
   are flex items, so they collapse to min-content. It shrank the Concord UK
   values column from 945px to 96px and threw its six cards outside the column.
   Shipped and reverted the same day, 2026-08-21.

   Nothing is declared here on purpose. Verify with the iframe sweep in
   ccis-headings-break-midword-in-narrow-columns after any heading edit. */