/**
 * The closing band, and buttons on a dark ground.
 *
 * WHY THIS FILE EXISTS
 *
 * The dark bands were being coloured from four files at once -- style.css and
 * refinements v44, v45, v47 and v48 -- with roughly seventy rules between them,
 * each build adding !important on top of the last. Two consequences:
 *
 *   1. The surface colour and the text colour lived in different files, keyed
 *      to different selectors. When one moved and the other did not, the band
 *      rendered cream with cream text on it.
 *   2. Nobody could say which rule won without measuring, so every fix broke
 *      something else.
 *
 * This file is the single authority for the closing band and for buttons on a
 * dark ground. It loads last, and its selectors are specific enough to win
 * outright, so the answer to "what colour is that band" is here and only here.
 *
 * The closing band itself is CREAM -- see section 1. It was briefly forest and
 * read as a detached slab, so it is continuous with the section above it again.
 *
 * ONE DARK TONE
 *
 * The page previously used two: espresso #32221A (a warm brown) for the bands
 * and forest #253C2D (the brand green) for the buttons. Two near-blacks that
 * are neither the same nor clearly different read as muddy. Forest is now the
 * only dark SURFACE -- see --anchor in style.css -- and it is used at the hero,
 * the proof band and the footer. Espresso stays as text ink on cream, which is
 * what a warm near-black is good for.
 *
 * Because the two can never sit together (forest on espresso is 1.28:1), and
 * because sage, sage-deep and moss cannot carry text on cream (1.82:1, 2.58:1,
 * 2.57:1), every colour choice below names its measured ratio.
 *
 * IDENTIFYING THE BAND
 *
 * The deadlines band appears on three pages and carries a different class on
 * each, so it cannot be addressed by class:
 *
 *   process page     .section.section--pale         > .container > .deadline-row
 *   home (English)   .section.trinity-deadlines-v18 > .container > .deadline-row
 *   home (Vietnamese) same, but nested inside .process-section
 *
 * What is constant is the shape: the band is the section that DIRECTLY holds a
 * .container holding the deadline row. The two child steps matter -- a plain
 * :has(.deadline-row) also matches the Vietnamese .process-section, which
 * wraps the band, and painted the whole process section green.
 */

/* ==========================================================================
   1. The deadlines band -- cream

   This band was briefly forest, to give the page a dark closing anchor. Seen
   in place it read as a separate slab rather than the end of the page, so it
   is cream again and continuous with the section above it. The dark anchor is
   still in use, at the hero, the proof band and the footer.

   The tightened rhythm from that revision is kept: this band had been running
   up to 84px of section padding plus a further 96px from a body.home rule plus
   a 182px internal separator, which is most of a screen of empty ground.
   ========================================================================== */

html body .site-main .wp-block-group.section:has(> .container > .deadline-row),
html body .site-main .wp-block-group.cta-band {
  /* Surface and type colour are set together, in one declaration block. They
     are never to be separated again: that separation is what produced a cream
     band with cream text. */
  background: var(--cream) !important;
  background-image: none !important;
  color: var(--espresso) !important;
  border: 0 !important;
  margin: 0 !important;
  padding: clamp(52px, 5vw, 72px) 0 !important;
}

html body .site-main .wp-block-group.section:has(> .container > .deadline-row) > .container,
html body .site-main .wp-block-group.cta-band > .container {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  background: transparent !important;
}

/* --- type ---------------------------------------------------------------- */

html body .site-main .section:has(> .container > .deadline-row) h1,
html body .site-main .section:has(> .container > .deadline-row) h2,
html body .site-main .section:has(> .container > .deadline-row) h3,
html body .site-main .section:has(> .container > .deadline-row) p,
html body .site-main .section:has(> .container > .deadline-row) li,
html body .site-main .section:has(> .container > .deadline-row) .deadline__date,
html body .site-main .wp-block-group.cta-band h1,
html body .site-main .wp-block-group.cta-band h2,
html body .site-main .wp-block-group.cta-band h3,
html body .site-main .wp-block-group.cta-band p {
  color: var(--espresso) !important;
}

/* Secondary text at reduced emphasis: 5.85:1 on cream, clear of 4.5:1. */
html body .site-main .section:has(> .container > .deadline-row) .deadline__label,
html body .site-main .wp-block-group.cta-band .deadline__label {
  color: rgba(50, 34, 26, 0.72) !important;
}

/* Inline links. "Book a discovery call" is an <a> inside the closing caption,
   and it has disappeared under both surfaces at different times -- once as a
   dark link on the dark band, once as cream on cream. It is set explicitly
   here, alongside the surface, for that reason. */
html body .site-main .section:has(> .container > .deadline-row) a:not(.wp-block-button__link),
html body .site-main .wp-block-group.cta-band a:not(.wp-block-button__link) {
  color: var(--forest) !important;
  text-decoration-line: underline !important;
  text-decoration-thickness: 1px !important;
  text-decoration-color: rgba(37, 60, 45, 0.62) !important;
  text-underline-offset: 3px !important;
}

html body .site-main .section:has(> .container > .deadline-row) a:not(.wp-block-button__link):hover,
html body .site-main .wp-block-group.cta-band a:not(.wp-block-button__link):hover {
  color: var(--espresso) !important;
  text-decoration-color: var(--espresso) !important;
}

/* The section label: forest on cream, 11.03:1. Not sage, sage-deep or moss --
   those measure 1.82:1, 2.58:1 and 2.57:1 on cream and cannot carry text. */
html body .site-main .section:has(> .container > .deadline-row) .eyebrow,
html body .site-main .wp-block-group.cta-band .eyebrow {
  color: var(--forest) !important;
}

/* --- the date panels -----------------------------------------------------
   A hairline box with a forest top edge. The edge is forest rather than sage
   because sage on cream is 1.82:1, below the 3:1 a meaningful non-text edge
   needs. No fill: cream-deep against cream is a 4% difference, which reads as
   a printing error rather than a card. */

html body .site-main .section:has(> .container > .deadline-row) .deadline,
html body .site-main .wp-block-group.cta-band .deadline {
  border: 1px solid rgba(50, 34, 26, 0.12) !important;
  border-top: 2px solid var(--forest) !important;
  border-radius: 2px !important;
  background: transparent !important;
  padding: 20px 18px !important;
}

/* The blocks carry has-text-align-center on the label and the heading, but a
   (0,5,2) rule forced the heading left with a 760px measure and no auto
   margins -- so the label centred and the heading did not. The measure is
   kept; the alignment follows the content. Sections whose markup does not ask
   to be centred, such as the process page, are untouched. */
html body .site-main .section:has(> .container > .deadline-row) h2.has-text-align-center,
html body .site-main .section:has(> .container > .deadline-row) h3.has-text-align-center,
html body .site-main .wp-block-group.cta-band h2.has-text-align-center,
html body .site-main .trinity-deadlines-v18__cta h2.has-text-align-center,
html body .site-main .trinity-deadlines-v18__cta h3.has-text-align-center {
  text-align: center !important;
  margin-inline: auto !important;
}

html body .site-main .section:has(> .container > .deadline-row) p.has-text-align-center,
html body .site-main .wp-block-group.cta-band p.has-text-align-center,
html body .site-main .trinity-deadlines-v18__cta p.has-text-align-center {
  text-align: center !important;
  /* Auto side margins too: these paragraphs carry a measure, so centring the
     text inside a box that is itself flush left leaves the line off the axis
     the label, heading and button share. The label sets its own auto margins
     a few rules above, so this no longer collides with it. */
  margin-inline: auto !important;
}

/* --- interior rhythm ----------------------------------------------------- */

html body .site-main .section:has(> .container > .deadline-row) .eyebrow {
  /* auto side margins, not 0: the label carries a max-width, so with margin 0
     the box cannot centre even when its text-align says centre. */
  margin: 0 auto 12px !important;
}

html body .site-main .section:has(> .container > .deadline-row) .eyebrow + h2,
html body .site-main .section:has(> .container > .deadline-row) h2.wp-block-heading {
  /* auto side margins: the heading carries a 760px measure, and margin-left: 0
     here pinned that box flush left while its own text-align said centre --
     the label centred and the heading did not. */
  margin: 0 auto clamp(28px, 2.6vw, 36px) !important;
}

html body .site-main .section:has(> .container > .deadline-row) .deadline-row {
  margin: 0 !important;
  gap: 18px !important;
}

/* The closing line under the dates sat clamp(70px,8vw,104px) away plus its own
   padding. It is a caption to the dates, not a new section. */
html body .site-main .section:has(> .container > .deadline-row) .deadline-row ~ p,
html body .site-main .section:has(> .container > .deadline-row) .deadline-row ~ h2,
html body .site-main .section:has(> .container > .deadline-row) .deadline-row ~ h3 {
  margin-top: clamp(28px, 2.8vw, 38px) !important;
  padding-top: 0 !important;
  /* Earlier builds centred this and pushed it to auto margins, so it floated
     off the axis the label and heading share. It is a caption to the dates. */
  margin-right: 0 !important;
  margin-left: 0 !important;
  max-width: 62ch !important;
  text-align: left !important;
}

html body .site-main .section:has(> .container > .deadline-row) .deadline-row ~ .wp-block-buttons {
  margin-top: clamp(22px, 2.2vw, 30px) !important;
  padding-bottom: 0 !important;
}

/* ==========================================================================
   1b. The Services & process gateway -- the page's dark band

   This is where the dark ground now sits. The gateway carries the campus
   image, the strongest claim on the lower page and the route into Services,
   so it is the section that should stop the eye.

   Targeting note: the outer .trinity-services-gateway-v18 wrapper exists on
   the English homepage only. On the Vietnamese homepage the gateway's grid is
   saved inside .process-section, alongside the timeline -- so painting that
   wrapper would turn the process timeline dark too. The grid and copy classes
   are present in both languages, which makes them the safe targets.
   ========================================================================== */

html body .site-main .wp-block-group.trinity-services-gateway-v18,
html body .site-main .wp-block-columns.trinity-services-gateway-v18__grid,
html body .site-main .wp-block-column.trinity-services-gateway-v18__copy {
  /* Surface with type, as everywhere in this file. */
  background: var(--anchor) !important;
  background-image: none !important;
  color: var(--cream) !important;
}

html body .site-main .trinity-services-gateway-v18__copy h2,
html body .site-main .trinity-services-gateway-v18__copy h3,
html body .site-main .trinity-services-gateway-v18__copy p,
html body .site-main .trinity-services-gateway-v18__copy li,
html body .site-main .trinity-services-gateway-v18__copy .trinity-lead {
  color: var(--cream) !important;
}

/* Sage on the anchor, 6.07:1. Forest would be 1.28:1 here. */
html body .site-main .trinity-services-gateway-v18__copy .eyebrow {
  color: var(--sage) !important;
}

html body .site-main .trinity-services-gateway-v18__copy a:not(.wp-block-button__link) {
  color: var(--cream) !important;
  text-decoration-color: rgba(253, 245, 235, 0.55) !important;
  text-underline-offset: 3px !important;
}

/* The gateway button is .trinity-button-light, which is forest on light ground.
   On the anchor that measures 1.28:1, so it inverts. */
html body .site-main .wp-block-column.trinity-services-gateway-v18__copy .wp-block-button__link {
  background: var(--cream) !important;
  border: 1px solid var(--cream) !important;
  color: var(--anchor) !important;
}

html body .site-main .wp-block-column.trinity-services-gateway-v18__copy .wp-block-button__link:hover,
html body .site-main .wp-block-column.trinity-services-gateway-v18__copy .wp-block-button__link:focus-visible {
  background: var(--sage) !important;
  border-color: var(--sage) !important;
  color: var(--anchor) !important;
}

/* ==========================================================================
   1c. The journey block, promoted to top level

   On the Vietnamese homepage the journey is saved as a bare .container that is
   a DIRECT child of .site-main, rather than wrapped in a section. A container
   carries no section padding, so its "Xem toàn bộ quy trình" button ended flush
   against the dark gateway below it -- a measured gap of 0px.

   The gateway itself cannot supply that space: it is full-bleed and its image
   runs to the section edge, so its padding-top is deliberately 0. The space has
   to come from above.

   The child combinator keeps this to the Vietnamese shape. On the English
   homepage .trinity-timeline-width sits inside .process-section, which already
   supplies 89.6px here, and would double up if this rule reached it.
   ========================================================================== */

html body .site-main > .wp-block-group.container.trinity-timeline-width {
  padding-bottom: var(--trinity-home-section) !important;
}

/* The closing ask is a centred block: heading, copy and button share one
   axis. Its button used to be centred only by accident -- a rule keyed to
   "the group containing the deadline row" matched the Vietnamese
   .process-section, which happens to contain the ask. That is now stated. */
html body .site-main .trinity-deadlines-v18__cta .wp-block-buttons,
html body .site-main .wp-block-group.cta-band .wp-block-buttons {
  display: flex !important;
  justify-content: center !important;
  margin-inline: auto !important;
}

/* ==========================================================================
   2. Buttons on the anchor

   With one dark tone, a forest button on a forest band measures 1:1 against
   its own ground -- it is a rectangle you cannot see. Every anchor surface is
   listed here, so a button on any of them inverts to cream.
   ========================================================================== */

html body .site-main .wp-block-group.split-hero .wp-block-button__link,
html body .site-main .section--ink .wp-block-button__link,
html body .site-main .results-section .wp-block-button__link,
html body .site-main .trinity-home-results-v4 .wp-block-button__link,
/* .trinity-deadlines-v18 and __cta are NOT in this list: that band is cream,
   and its button is handled in 2b. Listing them here put a cream fill on a
   cream ground. */
html body .site-main .trinity-services-page-v34__cta .wp-block-button__link,
html body .footer .wp-block-button__link {
  background: var(--cream) !important;
  border: 1px solid var(--cream) !important;
  color: var(--anchor) !important;
}

html body .site-main .wp-block-group.split-hero .wp-block-button__link:hover,
html body .site-main .section--ink .wp-block-button__link:hover,
html body .site-main .results-section .wp-block-button__link:hover,
html body .site-main .trinity-home-results-v4 .wp-block-button__link:hover,

html body .site-main .trinity-services-page-v34__cta .wp-block-button__link:hover,
html body .footer .wp-block-button__link:hover {
  background: var(--sage) !important;
  border-color: var(--sage) !important;
  color: var(--anchor) !important;
}

/* ==========================================================================
   2b. The button on the cream band

   This band is light, so its button is the standard forest fill rather than
   the cream inversion the dark grounds use. Listed after the inversion rules
   and at higher specificity, so a button here cannot pick up the cream fill
   and end up cream-on-cream.
   ========================================================================== */

html body .site-main .wp-block-group.section:has(> .container > .deadline-row) .wp-block-button__link,
html body .site-main .wp-block-group.cta-band .wp-block-button__link,
/* The Vietnamese ask is saved in a classless top-level div, so it is addressed
   by its own class rather than through the band. */
html body .site-main .trinity-deadlines-v18__cta .wp-block-button__link {
  background: var(--forest) !important;
  border: 1px solid var(--forest) !important;
  color: var(--cream) !important;
}

html body .site-main .wp-block-group.section:has(> .container > .deadline-row) .wp-block-button__link:hover,
html body .site-main .wp-block-group.section:has(> .container > .deadline-row) .wp-block-button__link:focus-visible,
html body .site-main .wp-block-group.cta-band .wp-block-button__link:hover,
html body .site-main .wp-block-group.cta-band .wp-block-button__link:focus-visible,
html body .site-main .trinity-deadlines-v18__cta .wp-block-button__link:hover,
html body .site-main .trinity-deadlines-v18__cta .wp-block-button__link:focus-visible {
  background: var(--anchor-deep) !important;
  border-color: var(--anchor-deep) !important;
  color: var(--cream) !important;
}

/* The divider between the dates and the closing ask: a dark hairline, since
   the band is light. It was a translucent cream line for the dark revision. */
html body .site-main .wp-block-group.section .trinity-deadlines-v18__cta,
html body .site-main .wp-block-group.cta-band .trinity-deadlines-v18__cta {
  border-top: 1px solid rgba(50, 34, 26, 0.14) !important;
  background: transparent !important;
}

/* ==========================================================================
   3. The reveal gate -- removed

   Measured on the live homepage: 26 of 28 .reveal elements computed to
   opacity 0, every one of them already carrying .is-visible. The label
   "University destinations", the university names, and the "Read all student
   stories" button were all present in the DOM, occupying their full height,
   and invisible -- which is what read as a gap in the page.

   The gate is declared twice in style.css (lines 298-301 and 2217-2225), and
   the cascade favours the .is-visible rule, so the elements should have been
   revealed. They were not, and removing the .js class did not restore them
   either. Rather than keep patching a mechanism that has now hidden real
   content twice, the opacity gate goes.

   The principle: nothing a reader is meant to read may depend on JavaScript
   to become visible. A fade may animate FROM a visible resting state, but the
   resting state is visible. This is deliberately blunt and deliberately last,
   so no later layer can re-gate the content.
   ========================================================================== */

html .reveal,
html body .reveal,
html.js .reveal,
html.js body .reveal,
html body .js .reveal {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

/* ==========================================================================
   4. Seams

   The anchor bands sit directly against cream. Nothing decorative straddles
   the join: earlier builds painted a cream gradient "ripple" over the band's
   lower edge, which on a dark ground reads as fog.
   ========================================================================== */

html body .site-main .wp-block-group.section:has(> .container > .deadline-row)::before,
html body .site-main .wp-block-group.section:has(> .container > .deadline-row)::after,
html body .site-main .wp-block-group.cta-band::before,
html body .site-main .wp-block-group.cta-band::after {
  content: none !important;
  display: none !important;
}