/*
Theme Name: JGCC
Theme URI: https://johorgolfandcountryclub.com
Description: Johor Golf & Country Club — Kadence child theme.
Author: Deemples
Template: kadence
Version: 1.0.0
Text Domain: jgcc
*/

/* Ported from the approved mockup: docs/mockup/styles.css. Where a value here
   differs from that file it is because Kadence's markup differs from the
   mockup's hand-written HTML, and the difference is commented. Mockup selector
   names are given in the section headings so the two can be diffed by hand. */

/* --------------------------------------------------------------- tokens
   docs/mockup/styles.css `:root` verbatim. */
:root {
  --jgcc-paper: #FAF8F2;
  --jgcc-ivory: #F3EFE5;
  --jgcc-ink: #1B1F1C;
  --jgcc-muted: #5A605B;
  --jgcc-green: #1E4D3B;
  --jgcc-deep: #12342A;
  --jgcc-gold: #B4923F;
  /* The same gold, darkened to clear WCAG AA (4.56:1 on paper, 4.22:1 on ivory),
     for the one place the design sets gold as small text: the fixture dates. The
     mockup's #B4923F measures 2.77:1 at 12px bold and drops the site's Lighthouse
     accessibility score below its own 0.95 gate. Hairlines, rules and the nav
     underline keep the brand gold -- a 1px rule is not text. */
  --jgcc-gold-text: #8A6E23;
  --jgcc-hairline: #E3DED2;
  --jgcc-serif: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --jgcc-sans: "Mulish", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --jgcc-wrap: 1200px;
  --jgcc-pad: 28px;
  --jgcc-section: 120px;
  /* The inner measure is the wrap minus both pads; stated so the band rules
     below read like the mockup's `.wrap` maths. */
  --jgcc-measure: calc(var(--jgcc-wrap) - 2 * var(--jgcc-pad));
}
@media (max-width: 1024px) {
  :root { --jgcc-section: 88px; --jgcc-pad: 24px; }
}
@media (max-width: 768px) {
  :root { --jgcc-section: 68px; --jgcc-pad: 20px; }
}

body { background: var(--jgcc-paper); }

/* ---------------------------------------------------------- content measure

   Mockup `.wrap{max-width:1200px;margin:0 auto;padding:0 28px}`. Pages are
   seeded `_kad_post_layout: fullwidth` + `_kad_post_content_style: unboxed`, so
   Kadence hands the post content the entire viewport and only the deliberate
   `alignfull` bands are meant to use it. Core's constrained-layout rule reaches
   the children of those bands -- but only once `theme_json_mode` is on (see
   seed.php), and it never reaches the blocks that sit directly in
   `.entry-content` at all. State the measure here so the whole layout does not
   hang off one theme mod.                                                    */

/* `.wp-site-blocks` is only here for weight: Kadence ships
   `.single-content h1,...,h6{margin:1.5em 0 .5em}` at (0,1,1), which otherwise
   beats a bare `.entry-content > *` and pins every top-level heading to the
   left edge while its siblings centre. */
/* The measure is stated as a width rather than `max-width` + `padding-inline`:
   the mockup's gutter lives on a `.wrap` element we do not have, so paying it as
   padding on the block itself reported `padding:0 28px` on every top-level block
   where the mockup reports `0`. `min()` is the same arithmetic as
   `max-width:1200px;padding:0 28px` and leaves the padding at zero. */
.wp-site-blocks .entry-content > * {
  width: min(calc(100% - 2 * var(--jgcc-pad)), var(--jgcc-measure));
  max-width: none;
  margin-inline: auto;
}
/* Full-bleed bands keep the viewport... */
.wp-site-blocks .entry-content > .alignfull { width: 100%; max-width: none; padding-inline: 0; }
/* ...and cap their content at the measure. The bare `.jgcc-band` selectors are
   the defensive half: they hold the measure even if `theme_json_mode` is ever
   switched off and core stops emitting its constrained-layout rule at all. */
.wp-site-blocks .entry-content > .alignfull.wp-block-group > *,
.wp-site-blocks .entry-content > .alignfull.wp-block-group > .wp-block-group__inner-container > *,
.jgcc-band > *,
.jgcc-band > .wp-block-group__inner-container > * {
  max-width: min(var(--jgcc-measure), calc(100% - 2 * var(--jgcc-pad)));
  margin-inline: auto;
}
/* Mockup `section{padding:var(--section) 0}` and `.band{padding:72px 0}`. */
.jgcc-band { padding-block: var(--jgcc-section); }
/* The band's own padding is the whole gap under its last block; without this the
   trailing block's rhythm margin is added to it and the band runs tall. */
.jgcc-band > :last-child,
.jgcc-band > .wp-block-group__inner-container > :last-child { margin-bottom: 0; }
.jgcc-band--green { padding-block: 72px; }
/* Above 1430px Kadence pulls `.alignwide` out of the measure with negative
   margins and `max-width:unset` at (0,3,0). In this design a wide block is still
   a content-width block, so out-specify it. */
.wp-site-blocks .content-container .entry-content > .alignwide {
  max-width: none;
  width: min(calc(100% - 2 * var(--jgcc-pad)), var(--jgcc-measure));
  margin-inline: auto;
}
/* The page header carries no background, so rather than let each of its children
   centre itself (which pushes the short lede into the middle of the page) make
   the group itself the wrap and left-align everything inside it. */
.wp-site-blocks .entry-content > .jgcc-page-header {
  max-width: none;
  width: min(calc(100% - 2 * var(--jgcc-pad)), var(--jgcc-measure));
  margin-inline: auto;
  padding-inline: 0;
}
.jgcc-page-header > * { max-width: 100% !important; margin-inline: 0 !important; }

/* Vertical rhythm. The seeded pages are a flat run of blocks, so the section
   gap hangs off the two things that reliably open a section: an eyebrow, and a
   full-bleed band (its own padding supplies the inside half of the gap). */
.wp-site-blocks .entry-content > .jgcc-eyebrow,
.wp-site-blocks .entry-content > .alignfull,
.wp-site-blocks .entry-content > .alignfull + * { margin-top: var(--jgcc-section); }
.wp-site-blocks .entry-content > .wp-block-columns:not(.jgcc-cards) { margin-top: var(--jgcc-section); }
.wp-site-blocks .entry-content > :first-child { margin-top: 0; }
/* The mockup's `.pagehead` runs straight into the first section, so a card row
   directly after a page header does not open a new one. */
.wp-site-blocks .entry-content > .jgcc-page-header + .jgcc-cards { margin-top: 40px; }
/* Nor does a photo band: the mockup butts `.photoband` straight onto `.pagehead`,
   and opens the section under it at 80px rather than the full section gap. The
   Kadence row that follows brings 48px of its own `lg` padding, so 32px here.
   The section rhythm on this theme is expressed entirely as margin-top, so the
   32px Kadence hangs under the header itself is pure double-count. */
.wp-site-blocks .entry-content > .jgcc-page-header { margin-bottom: 0; }
.wp-site-blocks .entry-content > .jgcc-page-header + .jgcc-photo-band { margin-top: 0; }
.wp-site-blocks .entry-content > .jgcc-photo-band + * { margin-top: 32px; }
.wp-site-blocks .entry-content > .jgcc-cards + .jgcc-cards { margin-top: 26px; }

/* ------------------------------------------------------- type primitives
   Mockup: body 16.5/1.65; h1..h3 serif weight 400; .lede; .small; .eyebrow. */

body,
.entry-content { font-size: 16.5px; line-height: 1.65; }
@media (max-width: 768px) { body, .entry-content { font-size: 16px; } }

.wp-site-blocks .entry-content h1,
.wp-site-blocks .entry-content h2:not(.entry-title),
.wp-site-blocks .entry-content h3 {
  font-family: var(--jgcc-serif);
  font-weight: 400;
  color: var(--jgcc-ink);
  /* Mockup `h1,h2,h3{text-wrap:balance}`. Not cosmetic: it decides where a heading
     breaks, and without it the hero H1 broke after "since" rather than after
     "Johor," -- a 135px difference on both line boxes. */
  text-wrap: balance;
}
.wp-site-blocks .entry-content h1 { font-size: clamp(44px, 6vw, 72px); line-height: 1.02; letter-spacing: -0.01em; }
.wp-site-blocks .entry-content h2:not(.entry-title) { font-size: clamp(32px, 3.8vw, 50px); line-height: 1.08; letter-spacing: -0.005em; margin-bottom: 20px; }
.wp-site-blocks .entry-content h3 { font-size: 24px; line-height: 1.2; }

/* Mockup `p{margin:0 0 20px}` / `p:last-child{margin-bottom:0}`. Kadence pays out
   32px instead, which is the single biggest source of vertical drift on a page: every
   stack of paragraphs ran 12px long per gap, and a trailing paragraph pushed whatever
   followed it down again. */
.wp-site-blocks .entry-content p { margin-bottom: 20px; }
.wp-site-blocks .entry-content p:last-child { margin-bottom: 0; }

/* Mockup `.small` — the seeder marks these notes `has-small-font-size`.
   `!important` is not decoration: WordPress prints
   `.has-small-font-size{font-size:var(--wp--preset--font-size--small)!important}`
   in its global styles, which is a 0.8–0.9rem clamp (14.4px at 1440), and no
   amount of specificity answers an `!important` except another one. */
.wp-site-blocks .entry-content .has-small-font-size { font-size: 14px !important; line-height: 1.6; color: var(--jgcc-muted); }
/* Mockup `.lede`: the opening paragraph of the heritage split. */
.wp-site-blocks .entry-content .jgcc-lede { font-size: 19px; line-height: 1.7; color: var(--jgcc-muted); }
/* Mockup `#rates .small{max-width:84ch}`. A top-level block is centred in the
   measure by `margin-inline:auto`, so a deliberately narrower one has to be
   pinned to the measure's left edge instead of centred inside it. The start
   margin is the same arithmetic `.wrap` does: half the leftover, floored at the
   gutter. */
.wp-site-blocks .entry-content > .jgcc-note-84 {
  width: min(84ch, calc(100% - 2 * var(--jgcc-pad)), var(--jgcc-measure));
  margin-inline: max(var(--jgcc-pad), calc((100% - var(--jgcc-measure)) / 2)) auto;
}

/* Mockup `.eyebrow` */
.jgcc-eyebrow {
  font-family: var(--jgcc-sans);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--jgcc-green);
  margin: 0 0 20px;
}
.jgcc-eyebrow--gold { color: var(--jgcc-gold); }
/* Kadence's paragraph rhythm reaches `p.jgcc-eyebrow` at a specificity the bare class
   above cannot answer, and was paying out 32px instead of the mockup's 20px -- which
   in the bottom-anchored hero pushed the eyebrow 13px up off its mark.
   `margin-block`, not the `margin` shorthand: at this specificity the shorthand would
   also reset the `margin-inline:auto` that centres a top-level block in the measure,
   and drop every section eyebrow onto the left edge of the viewport. */
.wp-site-blocks .entry-content p.jgcc-eyebrow { margin-block: 0 20px; }
/* The eyebrow's own 20px bottom margin is the whole gap; drop the heading's. */
.entry-content .jgcc-eyebrow + h1,
.entry-content .jgcc-eyebrow + h2,
.entry-content .jgcc-eyebrow + h3 { margin-top: 0; }

/* Mockup `.contact-row dd{overflow-wrap:anywhere}` and `.sidecard dd` likewise:
   an email address is one unbreakable token, and the mockup lets it break
   wherever it stops fitting rather than at a marked point. */
a[href^="mailto:"] { overflow-wrap: anywhere; }

/* ------------------------------------------------------------------ buttons
   Mockup `.btn`: 14px/30px, 14px, 700, ls .04em, lh 1, gap 10px, radius 999px,
   1px transparent border. `.btn--primary` green/ivory, `.btn--secondary`
   transparent/ink/ink, `.btn-row{gap:16px}`.

   The outline selector is repeated at (0,3,0) on purpose: Kadence ships
   `.wp-block-button.is-style-outline .wp-block-button__link{padding:.4em 1em}`
   at (0,2,0) in an inline sheet printed *after* this file, so a plain
   `.jgcc-btn .wp-block-button__link` ties on specificity and loses on order --
   which is what left the outlined pill half the height of the filled one.     */
.jgcc-btn .wp-block-button__link,
.jgcc-btn.is-style-outline .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 999px;
  padding: 14px 30px;
  font-family: var(--jgcc-sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  border: 1px solid transparent;
}
.jgcc-btn:not(.is-style-outline) .wp-block-button__link,
.jgcc-btn:not(.is-style-outline) .wp-block-button__link:visited { color: var(--jgcc-ivory); border-color: var(--jgcc-green); }
.jgcc-btn:not(.is-style-outline) .wp-block-button__link:hover { background: var(--jgcc-deep); border-color: var(--jgcc-deep); }
.jgcc-btn.is-style-outline .wp-block-button__link,
.jgcc-btn.is-style-outline .wp-block-button__link:visited { border: 1px solid var(--jgcc-ink); color: var(--jgcc-ink); background: transparent; }
.jgcc-btn.is-style-outline .wp-block-button__link:hover { background: var(--jgcc-ink); color: var(--jgcc-paper); }
/* Mockup `.btn--ghost`: on the deep-green band the outline goes ivory. */
.has-theme-palette-2-background-color .jgcc-btn.is-style-outline .wp-block-button__link,
.jgcc-band--green .jgcc-btn.is-style-outline .wp-block-button__link,
.has-theme-palette-2-background-color .jgcc-btn.is-style-outline .wp-block-button__link:visited,
.jgcc-band--green .jgcc-btn.is-style-outline .wp-block-button__link:visited { border-color: rgba(243,239,229,0.6); color: var(--jgcc-ivory); }
.jgcc-band--green .jgcc-btn.is-style-outline .wp-block-button__link:hover { background: var(--jgcc-ivory); color: var(--jgcc-deep); border-color: var(--jgcc-ivory); }
/* Mockup `.btn-row{gap:16px}` */
.wp-block-buttons.jgcc-actions { gap: 16px; align-items: center; }
/* The mockup spaces the arrow with the button's flex `gap`, not a margin, and
   marks the glyph aria-hidden. jgcc_btn_label() emits that span. */
.jgcc-arrow { font-weight: inherit; }

/* --------------------------------------------------------------- text links
   Mockup `.textlink`: the design's secondary action is an underlined green
   inline link, never a pill. jgcc_textlink() emits it as a core/button so it can
   share the mockup's `.btn-row` with a real button; everything that makes a
   button a button is stripped back off here.

   Stated at (0,3,0) for the same reason the outline pill is: Kadence's button
   rules land at (0,2,0) in an inline sheet printed after this file, so a tie
   loses on order. `:visited` is stated on every colour declaration -- Kadence
   repaints visited button labels from its own palette. */
.entry-content .wp-block-button.jgcc-textlink .wp-block-button__link,
.entry-content .wp-block-button.jgcc-textlink .wp-block-button__link:visited {
  display: inline-block;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(30, 77, 59, 0.35);
  border-radius: 0;
  padding: 0 0 2px;
  font-family: var(--jgcc-sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.65;
  color: var(--jgcc-green);
  text-decoration: none;
}
.entry-content .wp-block-button.jgcc-textlink .wp-block-button__link:hover,
.entry-content .wp-block-button.jgcc-textlink .wp-block-button__link:focus,
.entry-content .wp-block-button.jgcc-textlink .wp-block-button__link:focus-visible,
.entry-content .wp-block-button.jgcc-textlink .wp-block-button__link:active {
  background: transparent;
  color: var(--jgcc-deep);
  border-bottom-color: var(--jgcc-deep);
  border-width: 0 0 1px;
  text-decoration: none;
}

/* ----------------------------------------------------------------- header
   Mockup `.site-header .wrap{min-height:82px;gap:32px}`, `.brand{gap:13px}`,
   `.wordmark{21px}`, `.nav{gap:26px}` / `.nav a{13.5px,600,muted}`.          */

.site-header .site-main-header-inner-wrap {
  background: var(--jgcc-paper);
  border-bottom: 1px solid var(--jgcc-hairline);
  /* The mockup hangs its hairline on `.site-header` and the 82px on the `.wrap`
     inside it, so the bar measures 83px. Here both land on one border-box element and
     the border ate into the 82, leaving the bar 1px short -- and with it every element
     on every page 1px high. 82px of content plus the rule. */
  min-height: 83px;
}
/* Mockup `.wrap{padding:0 var(--pad)}` is one measure for the whole page. Kadence's
   header container ships 24px, which set the crest 4px left of the hero copy beneath
   it and the CTA 4px right of the chip row's right edge. */
#main-header .site-container { padding-inline: var(--jgcc-pad); }
/* Mockup `.site-header .wrap{gap:32px}`. Kadence spaces header items with a 10px
   right margin instead, which sat the nav 22px too close to the CTA. */
#main-header .site-header-section { gap: 32px; }
#main-header .site-header-section > .site-header-item { margin-inline: 0; }
/* The mockup shows no dropdown affordance. Kadence's caret is also its keyboard
   handle for the submenu, so hiding it comes with a :focus-within replacement or
   the submenu becomes mouse-only. Scoped to #main-header: the mobile drawer
   keeps its toggles. */
#main-header .dropdown-nav-toggle { display: none; }
#main-header .menu-item-has-children:focus-within > ul.sub-menu { display: block; opacity: 1; visibility: visible; }
/* ...and reclaim the 15px Kadence reserves for that caret, which otherwise
   leaves The Club and Golf further from their neighbours than the rest. */
#main-header .nav-drop-title-wrap { padding-right: 0; }

/* Mockup `.brand{gap:13px}`. At (0,2,0) Kadence's own 1em wins, so state it under
   the header id; the footer's column-stacked brand keeps its own gap below. */
.site-branding .brand { display: flex; align-items: center; gap: 13px; }
#main-header .site-branding .brand { gap: 13px; }
/* The Club's real crest, seeded as Kadence's custom_logo, in place of the
   mockup's CSS `.monogram` circle. Height, not width: the artwork is not square,
   so a width cap would leave it a different visual size from the wordmark. The
   mockup's monogram is a 38px circle; the crest carries more detail, so 44px. */
.site-branding .site-logo,
.site-branding .custom-logo-link { display: flex; align-items: center; }
.site-branding img.custom-logo { height: 44px; width: auto; max-width: none; }
.site-branding .site-title {
  font-family: var(--jgcc-serif);
  font-size: 21px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0.005em;
  text-transform: none;
  color: var(--jgcc-ink);
  white-space: nowrap;
}
/* Mockup `.nav a` — size, weight and colour come from the seeded Kadence mods
   (its inline sheet is printed after this file); only the tracking has no mod.
   The mockup separates the links with `.nav{gap:26px}` and gives the link itself
   `padding:4px 0`; Kadence instead pads each link 13px either side and leaves the
   list gapless, which made every nav link 26px wider than the mockup's. */
#main-header .primary-menu-container > ul > li > a { letter-spacing: 0.02em; padding-inline: 0; }
#main-header .primary-menu-container > ul { gap: 26px; }
/* Mockup `.nav a{border-bottom:1px solid transparent}` going gold on hover and on
   the current page. Kadence draws no rule at all, so the link sat 1px short of the
   mockup's and hover changed nothing but the colour. */
#main-header .primary-menu-container > ul > li > a { border-bottom: 1px solid transparent; }
#main-header .primary-menu-container > ul > li > a:hover,
#main-header .primary-menu-container > ul > li > a:focus-visible,
#main-header .primary-menu-container > ul > li.current-menu-item > a {
  border-bottom-color: var(--jgcc-gold);
}
/* Mockup `.header-cta .btn` is the same `.btn`: `inline-flex` with a 10px `gap`
   to an aria-hidden arrow span. Kadence renders the label as
   esc_html( do_shortcode( $label ) ), so no span can reach it -- the arrow is a
   `::after` instead and the seeded label carries no glyph, which buys the gap
   (a plain space is 4px, and the button ran 6px narrow of the mockup's). */
#main-header .header-button,
.mobile-header-button-wrap .mobile-header-button-inner-wrap .mobile-header-button {
  font-family: var(--jgcc-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  padding: 11px 22px;
  color: var(--jgcc-ivory);
  border: 1px solid var(--jgcc-green);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
#main-header .header-button::after,
.mobile-header-button-wrap .mobile-header-button-inner-wrap .mobile-header-button::after {
  content: "\2192";
}
/* Mockup `.btn--primary:hover` takes the border to `--deep` with the fill. */
#main-header .header-button:hover,
#main-header .header-button:focus-visible { border-color: var(--jgcc-deep); }

/* ------------------------------------------------------------------- hero
   Mockup `.hero`: 88vh (820px on very tall viewports), content bottom-aligned,
   `.hero__inner{padding:150px 0 56px}`. Kadence hangs both the min-height and
   the padding off `.kb-row-layout-id<uid> > .kt-row-column-wrap` -- the *inner*
   wrap, not the outer one -- and Kadence Blocks' inline sheet is printed after
   this stylesheet, so a (0,2,0) tie loses. Hence the doubled class.           */
.jgcc-hero.kb-row-layout-wrap > .kt-row-column-wrap {
  min-height: 88vh;
  align-items: flex-end;
  padding-top: 150px;
  padding-bottom: 56px;
  padding-inline: var(--jgcc-pad);
}
@media (min-height: 1100px) {
  .jgcc-hero.kb-row-layout-wrap > .kt-row-column-wrap { min-height: 820px; }
}
@media (max-width: 768px) {
  .jgcc-hero.kb-row-layout-wrap > .kt-row-column-wrap { min-height: 82vh; padding: 96px var(--jgcc-pad) 40px; }
}
.wp-site-blocks .entry-content .jgcc-hero h1 {
  max-width: 15ch;
  color: #FFFDF7;
  margin: 0;
  text-shadow: 0 1px 26px rgba(8,18,13,0.35);
}
.jgcc-hero h1 em { font-style: italic; }
/* Mockup `.hero__sub` */
.jgcc-hero p:not(.jgcc-eyebrow) {
  color: rgba(255,253,247,0.92);
  font-size: 18.5px;
  font-weight: 400;
  line-height: 1.65;
  max-width: 56ch;
  margin: 26px 0 34px;
  text-shadow: 0 1px 18px rgba(8,18,13,0.4);
}
@media (max-width: 768px) {
  .jgcc-hero p:not(.jgcc-eyebrow) { font-size: 17px; }
}
/* Mockup `.hero .eyebrow` */
.jgcc-hero .jgcc-eyebrow {
  color: rgba(243,239,229,0.85);
  text-shadow: 0 1px 18px rgba(8,18,13,0.4);
}
.jgcc-hero .wp-block-buttons { margin-top: 0; }
/* Mockup `.hero .btn--secondary`: an ivory label on an ivory hairline, not the
   ink outline the same class carries on a light ground. */
/* Kadence ships `.wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color):visited{color:var(--global-palette-btn-out,var(--global-palette-btn-bg))}` -- the
   brand green. Once a visitor has opened the linked page the label flipped green
   and vanished against the photo. Every button colour rule below carries :visited. */
.jgcc-hero .jgcc-btn.is-style-outline .wp-block-button__link,
.jgcc-hero .jgcc-btn.is-style-outline .wp-block-button__link:visited {
  color: #FFFDF7;
  border-color: rgba(255,253,247,0.75);
  background: transparent;
}
.jgcc-hero .jgcc-btn.is-style-outline .wp-block-button__link:hover {
  background: #FFFDF7;
  color: var(--jgcc-ink);
  border-color: #FFFDF7;
}
/* Mockup `.chips` / `.chip` */
ul.jgcc-chips { list-style: none; padding: 0; margin: 52px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
ul.jgcc-chips li {
  font-family: var(--jgcc-sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 9px 20px;
  border-radius: 999px;
  border: 1px solid rgba(250,248,242,0.6);
  background: rgba(250,248,242,0.9);
  color: var(--jgcc-ink);
  white-space: nowrap;
}
@media (max-width: 768px) {
  ul.jgcc-chips { margin-top: 34px; gap: 8px; }
  ul.jgcc-chips li { font-size: 11.5px; padding: 8px 15px; white-space: normal; }
}

/* Bands. Mockup `.panel` (ivory) and `.band` (deep green). */
.jgcc-band--ivory { background: var(--jgcc-ivory); }
.jgcc-band--green { background: var(--jgcc-deep); color: var(--jgcc-ivory); }
/* (0,3,1): the generic `.wp-site-blocks .entry-content h2` colour rule above is
   (0,2,1) and would otherwise paint this heading ink on deep green. */
.wp-site-blocks .entry-content .jgcc-band--green h2 { color: #FFFDF7; }
.wp-site-blocks .entry-content .jgcc-band--green h3 { color: #FFFDF7; }
/* Mockup `.band p{max-width:62ch}` — which reaches the eyebrow too, it being a <p>. */
.jgcc-band--green p { color: rgba(243,239,229,0.82); max-width: 62ch; }
/* Mockup gives the band's heading a 16px gap to its copy, not the page's 20px. */
.wp-site-blocks .entry-content .jgcc-band--green h2 { margin-bottom: 16px; }
/* Mockup `.band__inner`: a flex row — copy left, the enquiry button right, both
   centred on the row. Kadence hands us a flat run of blocks inside one full-bleed
   group, so the row is a grid on the band itself: the band pays the `.wrap`
   gutter as padding, every child sits in column 1, and the button is lifted into
   column 2 spanning the whole block. `-1` needs an explicit row track count to
   count back from; rows past the content are auto and collapse to zero. */
@media (min-width: 1024px) {
  /* (0,4,0): `.wp-site-blocks .entry-content > .alignfull{padding-inline:0}` above
     is (0,3,0), and the band has to pay the `.wrap` gutter itself now that its
     children no longer centre themselves inside the measure. */
  .wp-site-blocks .entry-content > .jgcc-band--green.wp-block-group {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: repeat(8, auto);
    align-items: center;
    column-gap: 60px;
    padding-inline: max(var(--jgcc-pad), calc((100% - var(--jgcc-measure)) / 2));
  }
  /* `.wp-block-group` is in the selector for weight: the measure rule above is
     (0,4,0) and a (0,3,0) tie would lose. `margin-inline` is `!important` because
     core's constrained-layout rule declares `margin-left:auto!important`, and an
     auto margin on a grid item beats `justify-self` -- which is what shrank every
     child to its text width and centred it in the column. */
  .wp-site-blocks .entry-content > .jgcc-band--green.wp-block-group > * { grid-column: 1; max-width: none; margin-inline: 0 !important; }
  .wp-site-blocks .entry-content > .jgcc-band--green.wp-block-group > p { max-width: 62ch; }
  /* In the mockup the copy is the last thing in the band's text column and takes
     `p:last-child{margin-bottom:0}`. Here the button follows it in the markup (the
     grid only moves it to column 2), so its trailing 20px inflated the band. */
  .wp-site-blocks .entry-content > .jgcc-band--green.wp-block-group > p:last-of-type { margin-bottom: 0; }
  .wp-site-blocks .entry-content > .jgcc-band--green.wp-block-group > .wp-block-buttons {
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: center;
    justify-self: end;
  }
}
/* .82, not `.eyebrow--ivory`'s .72: in the mockup `.band p{color:rgba(243,239,229,.82)}`
   at (0,2,0) out-specifies it, and the eyebrow is a <p>. */
.jgcc-band--green .jgcc-eyebrow { color: rgba(243,239,229,0.82); }

/* ----------------------------------------------------------- page header
   Mockup `.pagehead{padding:76px 0 60px}`, `.pagehead__row` title left / CTA
   right, `h1 clamp(40px,5vw,62px)`, `.lede{max-width:60ch;margin-top:20px}`. */
.jgcc-page-header { padding: 76px 0 60px; }
.wp-site-blocks .entry-content .jgcc-page-header h1 { font-size: clamp(40px, 5vw, 62px); margin: 0; }
.jgcc-page-header p:not(.jgcc-eyebrow) {
  color: var(--jgcc-muted);
  max-width: 60ch !important;
  font-size: 19px;
  line-height: 1.7;
  margin-top: 20px;
}
/* In the mockup the lede is the last thing in the header's text column, so it takes
   `p:last-child{margin-bottom:0}`. Here the CTA follows it in the markup (it is only
   moved to column 2 by the grid), so name the intro directly or its trailing 20px
   inflates the whole header and pushes the bottom-aligned CTA down with it. */
.jgcc-page-header > p:last-of-type { margin-bottom: 0; }
@media (max-width: 768px) {
  .jgcc-page-header { padding: 52px 0 44px; }
}
/* `.pagehead__row`: grid rather than extra block nesting, so the markup stays a
   flat run and headers with no intro or no button still work.

   Two things the mockup's flex row gives for free and a grid has to be told:
   - its text column shrinks to its own content, which the 60ch lede caps at 684px,
     where `1fr` stretched ours to 891px. `max-content` reproduces the shrink.
   - `align-items:flex-end` sits the CTA on the bottom of the whole row. Pinning it
     to `grid-row:2` sat it on the bottom of the H1 instead, 73.6px high. Spanning
     to `-1` fixes that, and `-1` needs an explicit grid to count back from -- hence
     the declared rows. Any past the content are auto and collapse to zero. */
@media (min-width: 1024px) {
  .jgcc-page-header {
    display: grid;
    grid-template-columns: minmax(0, max-content) auto;
    grid-template-rows: repeat(8, auto);
    column-gap: 48px;
  }
  .jgcc-page-header > * { grid-column: 1; }
  .jgcc-page-header > .wp-block-buttons {
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: end;
    justify-self: end;
  }
}

/* ----------------------------------------------------------------- tables
   Mockup `.rates` / `.ratings`. core/table paints a 1px box on every cell and a
   3px rule under the thead, so the box has to be zeroed, not overpainted.     */
.jgcc-table table { border-collapse: collapse; width: 100%; font-family: var(--jgcc-sans); font-size: 15.5px; }
.jgcc-table td, .jgcc-table th {
  border: 0;
  border-bottom: 1px solid var(--jgcc-hairline);
  padding: 14px 16px;
  text-align: left;
  vertical-align: top;
}
.jgcc-table thead { border-bottom: 0; }
.jgcc-table thead th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--jgcc-muted);
  border-bottom: 1px solid var(--jgcc-ink);
}
.jgcc-table th:first-child, .jgcc-table td:first-child { padding-left: 0; }
/* `:not([colspan])`: a group row's cell is also a first-child td, and without the
   exclusion this rule cancelled the 700 the group-row rule below sets. */
.jgcc-table tbody td:not([colspan]):first-child { font-weight: 500; }
/* The mockup has only numeric tables, so its `th+th,td+td{text-align:right}` is
   unconditional. Ours also carry prose columns (milestones, champions, flag
   meanings), which read as broken hard-right, so right-alignment is opt-in. */
.jgcc-table--num td:not(:first-child), .jgcc-table--num th:not(:first-child) { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; width: 120px; }
/* Mockup `.rates .group th`: jgcc_table()'s "##" marker becomes a single colspan
   cell, the only hook core/table leaves us. */
.jgcc-table td[colspan] {
  background: var(--jgcc-ivory);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--jgcc-green);
  padding: 11px 16px 11px 14px;
  text-align: left;
}
/* The mockup has two table treatments and they contradict: `.rates` (rates page,
   14/16 cells at 15.5px, 120px numeric columns) and `.ratings` (the course/slope
   table, 12/0 cells at 15px, columns sized to their content, a 600 first column
   and .14em tracking on the head). `.jgcc-table` is the first; this is the second,
   so the one table that appears in both designs stops being an average of them.
   Carried by the ratings table wherever it appears -- the homepage band and
   /golf/course/ -- so the same figures read the same on both. */
/* The mockup declares `.rates{font-size:15.5px}` on the table but `.ratings` only
   on its cells, so the ratings table element itself stays on the body size. */
.jgcc-table--ratings table { font-size: inherit; }
.jgcc-table--ratings td, .jgcc-table--ratings th { padding: 12px 0; font-size: 15px; }
.jgcc-table--ratings thead th { letter-spacing: 0.14em; }
.jgcc-table--ratings tbody td:not([colspan]):first-child { font-weight: 600; }
.jgcc-table--ratings.jgcc-table--num td:not(:first-child),
.jgcc-table--ratings.jgcc-table--num th:not(:first-child) { width: auto; }
@media (max-width: 768px) {
  .jgcc-table--ratings td, .jgcc-table--ratings th { padding: 12px 0; }
}

/* Mockup `.table-block h2{font-size:32px;margin-bottom:22px}` and
   `.table-block{margin-bottom:64px}`. The mockup wraps each heading+table pair in a
   div; ours is a flat run, so a "table block" is named as an H2 that is immediately
   followed by a table. Without this the rates headings ran at the full 50px page
   scale and every table below the first one sat ~18px low. */
.wp-site-blocks .entry-content h2:not(.entry-title):has(+ .jgcc-table) { font-size: 32px; margin-bottom: 22px; }
.wp-site-blocks .entry-content .jgcc-table + h2 { margin-top: 64px; }

/* Mockup `.table-scroll` */
.jgcc-table { overflow-x: auto; }
@media (max-width: 768px) {
  .jgcc-table table { font-size: 14.5px; }
  .jgcc-table td, .jgcc-table th { padding: 12px 10px; }
  .jgcc-table--num td:not(:first-child), .jgcc-table--num th:not(:first-child) { white-space: normal; }
}

/* ------------------------------------------------------------------ cards
   Mockup `.card{padding:34px 30px}` on paper, `#FFFDF7` inside `.panel`;
   `.card__price` serif 38px green; `.facility` photo to the card edge.        */
.jgcc-cards .wp-block-column { background: var(--jgcc-paper); border: 1px solid var(--jgcc-hairline); padding: 34px 30px; }
.jgcc-band--ivory .jgcc-cards .wp-block-column { background: #FFFDF7; }
/* (0,3,1) to clear the site-wide `p.jgcc-eyebrow` rhythm rule: the mockup's
   `.card__label` sits 10px off its price, not the section eyebrow's 20px. */
.wp-site-blocks .entry-content .jgcc-cards p.jgcc-eyebrow { font-size: 13px; letter-spacing: 0.05em; color: var(--jgcc-muted); margin-bottom: 10px; }
/* (0,4,1): the site-wide `.wp-site-blocks .entry-content p{margin-bottom:20px}` is
   (0,2,1) and was paying 20px where the mockup's `.card{gap:10px}` pays 10. */
.wp-site-blocks .entry-content .jgcc-cards p.jgcc-price { font-family: var(--jgcc-serif); font-size: 38px; line-height: 1; color: var(--jgcc-green); margin: 0 0 10px; }
.jgcc-cards .wp-block-column > p:last-child,
.jgcc-cards .jgcc-card-body > p:last-child { font-size: 13.5px; color: var(--jgcc-muted); }
.jgcc-cards .wp-block-column > .wp-block-image:first-child,
.jgcc-cards .wp-block-column > .jgcc-swatch:first-child { margin: -34px -30px 22px; }
.jgcc-cards .wp-block-column > .wp-block-image:first-child img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* Mockup `.grid{gap:56px}` for the price row, overridden to 24 on the four-up
   facility row. core/columns ships 2em for both, which left every card 15px wide
   of the mockup's. `:has(> .wp-block-column:nth-child(4))` is how a four-up row
   names itself: the seeder gives both rows the same `jgcc-cards` class, and the
   facility row is the only one that ever carries four columns. */
.entry-content .wp-block-columns.jgcc-cards { gap: 56px; }
.entry-content .wp-block-columns.jgcc-cards:has(> .wp-block-column:nth-child(4)) { gap: 24px; }

/* Mockup `.facility`: a hairline card on #FFFDF7 whether or not it sits in a
   panel, photo to the card edge, `.facility__body{padding:22px 24px 26px}`, a
   21px heading and a 14px note — a tighter card than the price one above. */
.jgcc-cards:has(> .wp-block-column:nth-child(4)) > .wp-block-column { background: #FFFDF7; padding: 0; }
.jgcc-cards:has(> .wp-block-column:nth-child(4)) > .wp-block-column > .wp-block-image:first-child,
.jgcc-cards:has(> .wp-block-column:nth-child(4)) > .wp-block-column > .jgcc-swatch:first-child { margin: 0; }
/* Mockup `.facility__body`: the photo runs to the card edge, so the inset is the
   body's, not the card's. `jgcc-card-body` is the group the seeder wraps the
   title and note in. */
.jgcc-cards .jgcc-card-body { padding: 22px 24px 26px; }
.wp-site-blocks .entry-content .jgcc-cards:has(> .wp-block-column:nth-child(4)) h3 { font-size: 21px; line-height: 1.2; margin: 0 0 6px; }
.jgcc-cards:has(> .wp-block-column:nth-child(4)) .jgcc-card-body > p:last-child { font-size: 14px; line-height: 1.6; margin: 0; }

/* Mockup `#golf .grid--2`: the ratings table in the left half against a 4:5
   photograph in the right. Without the photo column the table ran the full
   1144px measure — 600px wider than the mockup's. */
.entry-content .wp-block-columns.jgcc-course-split { gap: 56px; }
.jgcc-course-split .wp-block-image { margin: 0; }
.jgcc-course-split .wp-block-image img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

/* Mockup `.sidecard` */
.jgcc-side-card { background: var(--jgcc-ivory); border: 1px solid var(--jgcc-hairline); padding: 32px 30px; }
.wp-site-blocks .entry-content .jgcc-side-card h3 { font-size: 26px; margin-bottom: 10px; }
.jgcc-side-card p:last-of-type { font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
/* Mockup `.sidecard .btn{width:100%;justify-content:center;margin-top:12px}`: in the
   card the buttons are full-bleed and stacked, not the auto-width row they are
   everywhere else. Never ported, so both pills sat short and left-aligned. */
.jgcc-side-card .wp-block-buttons { flex-direction: column; gap: 12px; }
.jgcc-side-card .wp-block-button { width: 100%; }
.jgcc-side-card .wp-block-button .wp-block-button__link { width: 100%; justify-content: center; }
/* Mockup marks the card's opening line `.small`. */
.jgcc-side-card > p:first-of-type { font-size: 14px; line-height: 1.6; color: var(--jgcc-muted); }

/* Mockup `.grid--split{grid-template-columns:minmax(0,4fr) minmax(0,7fr)}` under
   `.grid{gap:56px}`: a short heading column against a longer prose one. core/columns
   is flex and splits 50/50 on a 2em gap, so state the ratio as basis-0 + grow. */
.wp-block-columns.jgcc-split { gap: 56px; }
.jgcc-split > .wp-block-column:first-child { flex: 4 1 0; }
.jgcc-split > .wp-block-column:nth-child(2) { flex: 7 1 0; }

/* Mockup `.pfig figcaption` */
.jgcc-gallery figcaption { font-family: var(--jgcc-sans); font-size: 13.5px; line-height: 1.55; color: var(--jgcc-muted); margin-top: 13px; }

/* Mockup `.gallery`: a four-column mosaic on 172px rows — the first tile spans
   2×2, the second spans two rows, the last two span a pair of columns each.
   core/gallery is a flex row of percentage widths, so the grid is declared
   outright. The `!important` on the tile width is core's doing, not ours: it
   ships `.wp-block-gallery.has-nested-images.columns-3 figure.wp-block-image
   :not(#individual-image){width:calc(33.33% - …)}`, and the ID inside `:not()`
   puts that rule at (1,3,1) — unreachable without one. */
.jgcc-gallery--mosaic.wp-block-gallery.has-nested-images {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 172px;
  gap: 14px;
}
.jgcc-gallery--mosaic figure.wp-block-image { width: auto !important; margin: 0; }
.jgcc-gallery--mosaic figure.wp-block-image:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.jgcc-gallery--mosaic figure.wp-block-image:nth-child(2) { grid-row: span 2; }
.jgcc-gallery--mosaic figure.wp-block-image:nth-child(5),
.jgcc-gallery--mosaic figure.wp-block-image:nth-child(6) { grid-column: span 2; }
.jgcc-gallery--mosaic figure.wp-block-image > a,
.jgcc-gallery--mosaic figure.wp-block-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* The mockup's homepage strip carries no captions (the two renders wear a `.tag`
   instead); /gallery/ still captions every photograph. The alt text is untouched. */
.jgcc-gallery--mosaic figcaption { display: none; }
@media (max-width: 1024px) { .jgcc-gallery--mosaic.wp-block-gallery.has-nested-images { grid-auto-rows: 148px; } }
@media (max-width: 768px) {
  .jgcc-gallery--mosaic.wp-block-gallery.has-nested-images { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 132px; }
}

/* Mockup `.figure--wide img{aspect-ratio:21/8}` and `.figure figcaption`: a gold
   hairline over a 13.5px muted caption. */
.wp-site-blocks .entry-content > figure.wp-block-image.alignwide img { width: 100%; aspect-ratio: 21 / 8; object-fit: cover; }
.wp-site-blocks .entry-content > figure.wp-block-image.alignwide figcaption {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--jgcc-gold);
  font-family: var(--jgcc-sans);
  font-size: 13.5px;
  line-height: 1.65;
  letter-spacing: 0.02em;
  color: var(--jgcc-muted);
  text-align: left;
}

/* ------------------------------------------------------- fixtures + news row
   Mockup `#news .grid--2` under `.grid{gap:56px}`, `ul.fixtures` (a hairline per
   row, a short gold date against the fixture name) and `.newscard` (photo on
   top, serif title, one short muted line — no category, no byline, no more-link). */
.entry-content .wp-block-columns.jgcc-newsrow { gap: 56px; }

.entry-content ul.jgcc-fixtures { list-style: none; margin: 0; padding: 0; }
.entry-content ul.jgcc-fixtures li {
  display: flex;
  gap: 26px;
  margin: 0;
  padding: 17px 0;
  border-bottom: 1px solid var(--jgcc-hairline);
}
.entry-content ul.jgcc-fixtures li:first-child { border-top: 1px solid var(--jgcc-hairline); }
.jgcc-fx-date {
  flex: 0 0 108px;
  padding-top: 3px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--jgcc-gold-text);
}
.jgcc-fx-event { font-size: 16.5px; line-height: 1.65; }
@media (max-width: 768px) {
  .entry-content ul.jgcc-fixtures li { flex-direction: column; gap: 4px; }
  .jgcc-fx-date { flex: none; }
}

/* Mockup `.newscard`. Kadence renders this loop itself, so the card is styled on
   its markup; the block attributes in seed/content/home.php carry the structure
   (image above, no taxonomy, no meta, no read-more, capped excerpt). */
.entry-content ul.wp-block-kadence-posts { list-style: none; margin: 0; padding: 0; }
.entry-content .wp-block-kadence-posts .loop-entry {
  background: #FFFDF7;
  border: 1px solid var(--jgcc-hairline);
  border-radius: 0;
  box-shadow: none;
}
 /* Kadence sizes a thumbnail with the old padding-bottom ratio hack --
    `.post-thumbnail{height:0;padding-bottom:66.67%}` over an absolutely positioned
    `.post-thumbnail-inner` and an `img{height:100%}`. All three parts have to be
    unwound together: zeroing only the padding leaves the image 542x0. */
.entry-content .wp-block-kadence-posts .post-thumbnail { display: block; height: auto; padding: 0; margin: 0; overflow: hidden; }
.entry-content .wp-block-kadence-posts .post-thumbnail .post-thumbnail-inner { position: static; display: block; height: auto; padding: 0; }
.entry-content .wp-block-kadence-posts .post-thumbnail img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.entry-content .wp-block-kadence-posts .entry-content-wrap { padding: 26px 28px 30px; }
.entry-content .wp-block-kadence-posts .entry-header { margin: 0; }
.entry-content .wp-block-kadence-posts .entry-summary { margin-top: 10px; }
.entry-content .wp-block-kadence-posts .entry-summary p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--jgcc-muted); }
.entry-content .wp-block-kadence-posts .entry-title a,
.entry-content .wp-block-kadence-posts .entry-title a:visited { color: var(--jgcc-ink); text-decoration: none; }
.entry-content .wp-block-kadence-posts .entry-title a:hover { color: var(--jgcc-green); }

/* Mockup `.photoband{height:320px}`. The bare class ties with core's
   `.wp-block-image img{height:auto}` and loses on order, which left the band at its
   natural 3:2 height -- 959px instead of 320px, and everything below it 639px low. */
.wp-site-blocks .jgcc-photo-band img { height: 320px; object-fit: cover; width: 100%; }
@media (max-width: 768px) { .wp-site-blocks .jgcc-photo-band img { height: 210px; } }
/* Mockup `.facility__swatch`: a stand-in for a facility the club has no
   photograph of, never a course photo pretending to be the thing. */
.jgcc-swatch { background: var(--jgcc-ivory); aspect-ratio: 3 / 2; border-bottom: 1px solid var(--jgcc-hairline); }

/* ------------------------------------------------------------------- news
   Kadence renders the blog templates itself, so the mockup's `.pagehead`,
   `.newscard`, `.measure`, `.article` and `.backlink` are mapped onto its
   markup here. Theme mods in seed.php do the ground colour, alignment, the
   one-column loop, and the removal of the category tag and the byline.        */

.post-archive-hero-section .entry-hero-container-inner,
.single-post .entry-hero-container-inner { border-bottom: 1px solid var(--jgcc-hairline); }
.post-archive-hero-section .hero-container,
.single-post .entry-hero-container-inner .hero-container {
  max-width: var(--jgcc-wrap);
  margin-inline: auto;
  padding: 76px var(--jgcc-pad) 60px;
}
/* The archive header is title-only markup and there is no mod for a kicker, so
   the eyebrow is generated. `/ ""` keeps it out of the accessibility tree; the
   plain declaration before it is the fallback where that form is unsupported. */
.post-archive-title::before,
.single-post .entry-header .entry-title::before {
  content: "News";
  content: "News" / "";
  display: block;
  font-family: var(--jgcc-sans);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--jgcc-green);
  margin-bottom: 20px;
}
.post-archive-title .page-title,
.single-post .entry-header .entry-title {
  font-family: var(--jgcc-serif);
  font-size: clamp(40px, 5vw, 62px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin: 0;
}
/* Mockup `.article h1` is a touch smaller than a page head. */
.single-post .entry-header .entry-title { font-size: clamp(34px, 4.4vw, 52px); }
.single-post .entry-header .entry-meta,
.post-archive .loop-entry .entry-meta {
  font-family: var(--jgcc-sans);
  font-size: 13.5px;
  color: var(--jgcc-muted);
  margin-top: 14px;
}

/* Mockup `.newscard`: hairline card on #FFFDF7, no shadow. */
.post-archive.grid-cols { grid-template-columns: 1fr; }
.post-archive .loop-entry {
  background: #FFFDF7;
  border: 1px solid var(--jgcc-hairline);
  box-shadow: none;
}
.post-archive .loop-entry .entry-content-wrap { padding: 26px 28px 30px; }
.post-archive .loop-entry .entry-title { font-family: var(--jgcc-serif); font-size: 30px; line-height: 1.26; margin: 0; }
/* Mockup `.newscard h3` -- the in-page posts block on the homepage, whose title is
   an `h2.entry-title` and so escapes the section-heading rule above and rendered at
   the full 50px inside a 555px card. */
.entry-content .wp-block-kadence-posts .entry-title { font-family: var(--jgcc-serif); font-size: 24px; line-height: 1.2; }
.post-archive .loop-entry .entry-summary { color: var(--jgcc-muted); font-size: 16.5px; }
.post-archive .loop-entry .post-more-link .post-more-link-text {
  font-family: var(--jgcc-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--jgcc-green);
}
.post-archive .loop-entry .post-thumbnail img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }

/* Mockup `.article__hero` then `.measure{max-width:680px}` for the body. The
   narrow container already carries its own edge padding, so the site-wide pad
   on .entry-content children would push the body in from its own H1. */
.single-post .post-thumbnail { margin-bottom: 44px; }
.single-post .post-thumbnail img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.single-post .wp-site-blocks .entry-content > * { padding-inline: 0; }
.single-post .entry-header { margin-bottom: 2rem; }
/* Mockup `.article__body` */
.single-post .entry-content { font-size: 17.5px; line-height: 1.78; }
.single-post .entry-content p { margin-bottom: 24px; }
/* Mockup `.article__foot` */
.single-post .entry-content .wp-block-buttons { margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--jgcc-hairline); }

/* ----------------------------------------------------------------- contact row
   Mockup `.contact-row`: five equal tracks 34px apart, 44px of air between a
   pair of hairlines, no heading and no button above them.

   Declared as the mockup's grid rather than left as `.wp-block-columns`: that
   block is flex with a percentage `flex-basis` per column, which cannot express
   "five equal tracks minus four 34px gaps" without hard-coding the arithmetic.
   The selector repeats `.entry-content` to clear core's `.wp-container-*` layout
   rule, which carries its own `gap` at (0,1,0) and is printed after this file. */
.entry-content .wp-block-columns.jgcc-contact-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 34px;
  margin-bottom: 0;
  padding: 44px 0;
  border-top: 1px solid var(--jgcc-hairline);
  border-bottom: 1px solid var(--jgcc-hairline);
}
/* Mockup `.contact-row dd` */
.entry-content .jgcc-contact-row p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
/* Mockup `.contact-row dt` -- 11px, not the 11.5px green `.eyebrow`: the strip's
   labels are the quieter, muted variant of that treatment. */
.entry-content .jgcc-contact-row p.jgcc-contact-label {
  font-family: var(--jgcc-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--jgcc-muted);
  line-height: 1.65;
  margin: 0 0 8px;
}
/* The mockup's row is plain text, ours is real `tel:` / `wa.me` / `mailto:`
   links, so they take the row's ink rather than the site link green and drop the
   underline. `:visited` is stated because Kadence repaints visited links from
   its own palette; hover borrows the footer's green, the one link-state the
   mockup does define. Focus keeps the theme outline -- nothing here removes it. */
.jgcc-contact-row a,
.jgcc-contact-row a:visited {
  color: var(--jgcc-ink);
  text-decoration: none;
}
.jgcc-contact-row a:hover,
.jgcc-contact-row a:focus,
.jgcc-contact-row a:focus-visible {
  color: var(--jgcc-green);
  text-decoration: none;
}

/* ----------------------------------------------------------------- footer
   Mockup `.site-footer{padding:78px 0 44px}` over `.footer-grid` (2fr 1fr 1fr 1fr,
   48px gap) and `.footer-bottom` (56px above a hairline, 26px below it, 13.5px
   muted). No rule above the footer: in the mockup the only hairline near it is
   the contact row's own bottom border.

   Kadence splits the mockup's one `.site-footer` into two rows, so the 78/44
   padding pair is split with them and the `.footer-bottom` hairline hangs off
   the bottom row's container.                                                 */
.site-footer { font-family: var(--jgcc-sans); background: var(--jgcc-paper); }
/* Kadence's footer container is 1200px with a 24px gutter (1152 of content), four
   pixels wider each side than the mockup's `.wrap`; without this the footer columns
   sit out of line with every content block above them. */
.site-footer .site-container { max-width: var(--jgcc-wrap); padding-inline: var(--jgcc-pad); }
.site-footer .site-top-footer-wrap .site-container { padding-top: 78px; padding-bottom: 56px; }
/* Kadence hangs 30px of its own padding on the row; the mockup's rhythm is the
   78/56 above, so clear it rather than adding to it. */
.site-footer .site-top-footer-inner-wrap { gap: 48px; padding-block: 0; }
.site-footer .site-bottom-footer-wrap .site-container { padding-top: 0; padding-bottom: 44px; }
/* Kadence's footer row ships 30px of its own padding-block and the html item
   another 13.5px of margin. Stacked on the 56/26 above and the 44 below they put
   the bottom bar 70px lower than the mockup's and the footer 87px taller. */
.site-footer .site-bottom-footer-inner-wrap { padding-block: 0; }
.site-footer .footer-html { margin-block: 0; }
/* Mockup `.footer-grid h4` */
.site-footer .widget-title {
  font-family: var(--jgcc-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--jgcc-muted);
  line-height: 1.65;
  margin-bottom: 16px;
}
/* Mockup `.footer-grid ul{gap:10px}` + `.footer-grid a{color:ink;font-size:15px}` */
.site-footer .widget_nav_menu ul.menu { display: flex; flex-direction: column; gap: 10px; }
/* the mockup's list rows sit on the 16.5px body strut, not Kadence's larger footer one */
.site-footer .widget_nav_menu ul.menu li { margin: 0; font-size: 16.5px; line-height: 1.65; }
/* inline, not Kadence's block: the mockup's footer links are inline, which puts
   each row on the list's own 16.5px strut (27.8px) and keeps the link box the
   width of its label rather than the full column. */
.site-footer .widget_nav_menu a,
.site-footer .widget_nav_menu a:visited { display: inline; color: var(--jgcc-ink); font-size: 15px; line-height: 1.65; padding: 0; }
.site-footer .widget_nav_menu a:hover,
.site-footer .widget_nav_menu a:focus-visible { color: var(--jgcc-green); }

/* Mockup `.footer-grid > div:first-child`: `.brand` (13px gap) over a `.small`
   tagline 20px below it, capped at 36ch. The seeded crest replaces the mockup's
   CSS `.monogram` circle and is sized like the header's -- 44px, not the
   monogram's 38px, because the artwork carries far more detail than three
   letters. */
.jgcc-footer-brand { display: flex; align-items: center; gap: 13px; text-decoration: none; font-size: 15px; line-height: 1.65; }
.jgcc-footer-brand img { height: 44px; width: auto; }
.jgcc-footer-wordmark {
  font-family: var(--jgcc-serif);
  font-size: 21px;
  line-height: 1.1;
  letter-spacing: 0.005em;
  color: var(--jgcc-ink);
}
.site-footer .jgcc-footer-tagline {
  margin: 20px 0 0;
  max-width: 36ch;
  font-size: 14px;
  line-height: 1.6;
  color: var(--jgcc-muted);
}

/* Mockup `.footer-bottom`: policy nav left, credit centre, copyright right, all
   13.5px muted. Kadence wraps the three in `.footer-html-inner`. */
.site-footer .footer-html { font-size: 13.5px; color: var(--jgcc-muted); }
.site-footer .footer-html-inner {
  padding-top: 26px;
  border-top: 1px solid var(--jgcc-hairline);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 34px;
}
.site-footer .footer-html-inner p { margin: 0; }
.jgcc-footer-policies { display: flex; flex-wrap: wrap; gap: 22px; }
.site-footer .footer-html a,
.site-footer .footer-html a:visited { color: var(--jgcc-muted); text-decoration: none; }
.site-footer .footer-html a:hover,
.site-footer .footer-html a:focus-visible { color: var(--jgcc-green); }

/* ------------------------------------------------------------ breakpoints
   Mockup `@media (max-width:1024px)` and `(max-width:768px)`. */
@media (max-width: 1024px) {
  /* Mockup `.contact-row{grid-template-columns:repeat(2,...);gap:28px}` */
  .entry-content .wp-block-columns.jgcc-contact-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
}
@media (max-width: 768px) {
  /* Mockup `.contact-row{grid-template-columns:1fr;gap:22px}`. The footer columns
     are Kadence's own collapse (`footer_top_layout` mobile `row`), which already
     stacks them the way `.footer-grid{grid-template-columns:1fr}` does. */
  .entry-content .wp-block-columns.jgcc-contact-row { grid-template-columns: 1fr; gap: 22px; }
  .site-footer .footer-html-inner { justify-content: flex-start; }
  .site-branding .brand { gap: 9px; }
  .site-branding img.custom-logo { height: 36px; }
  .site-branding .site-title { font-size: 15px; line-height: 1.15; white-space: normal; max-width: 150px; }
  #main-header .header-button,
  .mobile-header-button-wrap .mobile-header-button-inner-wrap .mobile-header-button { font-size: 11.5px; padding: 10px 15px; gap: 6px; white-space: nowrap; }
}

/* Kadence thickens button borders to 2px on hover/focus, which grows the pill by
   2px in each axis and nudges the whole button row. The mockup's `.btn` keeps a
   1px border in every state (`border:1px solid transparent` + colour-only hover),
   so pin the width. Selectors repeat the class to clear Kadence's (0,3,0) rules,
   the same trick documented above for the outline padding. */
.jgcc-btn .wp-block-button__link:hover,
.jgcc-btn .wp-block-button__link:focus,
.jgcc-btn .wp-block-button__link:focus-visible,
.jgcc-btn .wp-block-button__link:active,
.jgcc-btn.is-style-outline .wp-block-button__link:hover,
.jgcc-btn.is-style-outline .wp-block-button__link:focus,
.jgcc-btn.is-style-outline .wp-block-button__link:focus-visible,
.jgcc-btn.is-style-outline .wp-block-button__link:active,
.jgcc-hero .jgcc-btn.is-style-outline .wp-block-button__link:hover,
.jgcc-hero .jgcc-btn.is-style-outline .wp-block-button__link:focus,
.jgcc-hero .jgcc-btn.is-style-outline .wp-block-button__link:active {
  border-width: 1px;
}

/* /news/ archive cards. Kadence's loop entry renders the featured image at full
   card width with no height cap, so a single post filled the viewport and the
   archive read like a landing page instead of a list. Cap the image, bring the
   title down from the single-post scale, and tighten the body. */
/* Kadence sizes the loop thumbnail with the padding-bottom ratio trick
   (`kadence-thumbnail-ratio-2-3` -> padding-bottom:66.7%, measured 766px at
   1200px wide), so capping the <img> alone left a 500px hole. Kill the padding
   and give the box a real height. */
.loop-entry a.post-thumbnail[class*="kadence-thumbnail-ratio"],
.loop-entry a.post-thumbnail {
  padding-bottom: 0;
  height: 260px;
  overflow: hidden;
  display: block;
}
.loop-entry a.post-thumbnail .post-thumbnail-inner {
  position: static;
  height: 100%;
}
.post-archive .loop-entry .post-thumbnail img,
.loop-entry .post-thumbnail img {
  height: 260px;
  width: 100%;
  object-fit: cover;
  aspect-ratio: auto;
}
.loop-entry .entry-title { font-size: 28px; line-height: 1.2; }
.loop-entry .entry-title a { font-family: var(--jgcc-serif); }
.loop-entry .entry-content-wrap { padding: 26px 30px 30px; }
.loop-entry .entry-summary p { margin-bottom: 14px; }

/* Single post. Kadence's narrow content container caps the whole article at 680px,
   which left the featured image and headline in a column narrower than every other
   page on the site. Widen the article to the site's content width and keep only the
   running prose on a comfortable measure. */
body.single-post .content-container.site-container { max-width: var(--jgcc-wrap, 1200px); }
body.single-post .entry-content > p,
body.single-post .entry-content > ul,
body.single-post .entry-content > ol,
body.single-post .entry-content > blockquote,
body.single-post .entry-content > h2,
body.single-post .entry-content > h3 {
  max-width: none;
  margin-inline: 0;
}

/* Footer contact block. Moved out of the homepage's own five-column band at the
   client's request: it now shows on every page and the homepage loses a section.
   Two columns inside the footer's brand column so it stays compact. */
.jgcc-footer-contact {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 28px;
  margin-top: 28px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--jgcc-ink);
}
.jgcc-footer-contact-label {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--jgcc-muted);
}
.jgcc-footer-contact a { color: var(--jgcc-ink); text-decoration: none; }
.jgcc-footer-contact a:hover,
.jgcc-footer-contact a:focus-visible { color: var(--jgcc-green); text-decoration: underline; }
.jgcc-footer-contact a:visited { color: var(--jgcc-ink); }
@media (max-width: 767px) {
  .jgcc-footer-contact { grid-template-columns: 1fr; gap: 16px; }
}