/*
Theme Name:   Kadence Grapple
Theme URI:    https://yodersgrapple.com
Description:  Child theme for Yoder's Grapple Service. Dark industrial treatment, deliberately distinct from Yoder's Tree & Land Services.
Author:       Adroited LLC
Author URI:   https://adroited.com
Template:     kadence
Version:      1.1.0
Text Domain:  kadence-grapple
*/

/* ==========================================================================
   1. Palette
   Tree site is light, blue (#2B6CB0), serif, soft-cornered.
   Grapple is dark, near-monochrome steel with a single equipment-yellow
   accent. The light/dark split is what keeps them from reading as siblings.
   ========================================================================== */
:root,
body {
  --global-palette1: #7ED321; /* truck lime - matches the vinyl on the grapple truck */
  --global-palette2: #6BB81C; /* hover */
  --global-palette3: #F2F5F7; /* headings (light, on dark) */
  --global-palette4: #C9D1D8; /* body text */
  --global-palette5: #94A0AA; /* muted */
  --global-palette6: #5C6873; /* borders, dividers */
  --global-palette7: #1C2227; /* raised surface */
  --global-palette8: #14191D; /* alt section */
  --global-palette9: #0E1215; /* page base */

  --global-palette-btn-bg: var(--global-palette1);
  --global-palette-btn-bg-hover: var(--global-palette2);
  --global-palette-btn: #0E1215;
  --global-palette-btn-hover: #0E1215;

  --global-body-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --global-heading-font-family: 'Oswald', 'Inter', sans-serif;

  --grapple-hazard: #7ED321;
  --grapple-rule: rgba(255, 255, 255, 0.10);

  /* Section gutter and text measure.
     Every ygs-* band is an alignfull block, so it is pulled out of
     .site-container's 24px padding by a negative margin and sits flush to the
     viewport. Nothing puts that gutter back, so these do it explicitly.
     Do NOT reach for --global-content-width here: Kadence sets it to 1700px,
     which is wider than any real viewport, so a max-width built on it never
     constrains and the auto margins never centre anything. */
  --ygs-gutter: clamp(1.5rem, 4vw, 3rem);
  --ygs-measure: 1200px;
}

/* ==========================================================================
   2. Base
   ========================================================================== */
body {
  background: var(--global-palette9);
  color: var(--global-palette4);
  font-family: var(--global-body-font-family);
  -webkit-font-smoothing: antialiased;
}

.content-bg,
body.content-style-boxed .content-area,
.entry-content-wrap,
.site-container,
.site-main {
  background: transparent;
}

/* ==========================================================================
   3. Headings - condensed uppercase. The single loudest difference from the
   tree site's Playfair Display serif.
   ========================================================================== */
h1, h2, h3, h4, h5, h6,
.entry-title,
.site-title {
  font-family: var(--global-heading-font-family);
  color: var(--global-palette3);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-weight: 600;
  line-height: 1.08;
}

h1, .entry-title { letter-spacing: -0.005em; }
h5, h6 { letter-spacing: 0.06em; }

/* ==========================================================================
   4. Square corners everywhere. Tree site is soft; this is not.
   ========================================================================== */
.wp-block-button__link,
.button,
button,
input[type="submit"],
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="number"],
select,
textarea,
.kb-button,
.wp-block-kadence-advancedbtn .kb-button,
.entry-content img,
.wp-block-image img,
.kadence-blocks-gallery-item img,
.kb-blocks-bg-video-container,
.wp-block-kadence-column,
.kt-blocks-accordion-header,
.kadence-info-box-wrap {
  border-radius: 0 !important;
}

/* ==========================================================================
   5. Buttons
   ========================================================================== */
.wp-block-button__link,
.button,
button,
input[type="submit"],
.kb-button {
  background: var(--grapple-hazard);
  color: #0E1215;
  font-family: var(--global-heading-font-family);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  border: 0;
  transition: background 0.15s ease;
}

.wp-block-button__link:hover,
.button:hover,
button:hover,
input[type="submit"]:hover,
.kb-button:hover {
  background: var(--global-palette2);
  color: #0E1215;
}

.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--grapple-hazard);
  box-shadow: inset 0 0 0 2px var(--grapple-hazard);
}

/* ==========================================================================
   6. Header - dark, tight, with the 24/6 bar
   ========================================================================== */
.site-header-wrap,
.site-top-header-wrap,
.site-main-header-wrap {
  background: var(--global-palette9);
  border-bottom: 1px solid var(--grapple-rule);
}

.site-top-header-wrap {
  background: var(--global-palette8);
  font-family: var(--global-heading-font-family);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.78rem;
}

.header-navigation .header-menu-container > ul > li > a {
  font-family: var(--global-heading-font-family);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--global-palette3);
}

.header-navigation .header-menu-container > ul > li > a:hover {
  color: var(--grapple-hazard);
}

/* ==========================================================================
   7. Links and rules
   ========================================================================== */
a { color: var(--grapple-hazard); }
a:hover { color: var(--global-palette2); }

hr,
.wp-block-separator {
  border-color: var(--grapple-rule);
  background: var(--grapple-rule);
}

/* ==========================================================================
   8. Forms - dark fields. Kadence assumes light, so these need overriding
   explicitly or the text renders dark-on-dark and looks broken.
   ========================================================================== */
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="number"],
input[type="date"],
select,
textarea {
  background: var(--global-palette8);
  border: 1px solid var(--global-palette6);
  color: var(--global-palette3);
  padding: 0.7rem 0.85rem;
  width: 100%;
}

input::placeholder,
textarea::placeholder { color: var(--global-palette6); }

input:focus,
select:focus,
textarea:focus {
  border-color: var(--grapple-hazard);
  outline: none;
}

label {
  font-family: var(--global-heading-font-family);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.8rem;
  color: var(--global-palette5);
}

/* Contact Form 7 layout - carried over from the tree build, restyled */
.cf7-field-group { margin-bottom: 1.1rem; }
.cf7-two-col { display: flex; gap: 1.1rem; flex-wrap: wrap; }
.cf7-two-col .cf7-col { flex: 1 1 240px; }
.wpcf7 abbr[title] { color: var(--grapple-hazard); text-decoration: none; }
.wpcf7-not-valid-tip { color: #FF6B6B; font-size: 0.82rem; }
.wpcf7 form .wpcf7-response-output {
  border-color: var(--grapple-hazard);
  color: var(--global-palette3);
  margin: 1.2rem 0 0;
}

/* ==========================================================================
   9. Footer
   ========================================================================== */
.site-footer,
.site-footer-wrap,
.footer-html,
.site-bottom-footer-wrap {
  background: var(--global-palette8);
  color: var(--global-palette5);
  border-top: 1px solid var(--grapple-rule);
}

.site-footer a { color: var(--global-palette4); }
.site-footer a:hover { color: var(--grapple-hazard); }

/* ==========================================================================
   10. Utility - the hazard rule used to open major sections
   ========================================================================== */
.grapple-rule {
  height: 4px;
  width: 64px;
  background: var(--grapple-hazard);
  display: block;
  margin-bottom: 1.25rem;
}

@media (max-width: 767px) {
  .cf7-two-col { gap: 0; }
}

/* ==========================================================================
   11. Page furniture
   The 26 pages are generated from PHP builders that emit semantic ygs-*
   classes and nothing else - no inline colours, no per-page overrides. Every
   visual decision for those pages is made here, so the palette stays in one
   file and a rebuild of the pages can never drift from the design.
   ========================================================================== */

/* --- Section shell --- */
/* The .alignfull compound is load-bearing, not decoration. Kadence's
   content.min.css ships `.alignfull { padding: 0 }` and is enqueued AFTER this
   sheet, so a bare .ygs-section (0,1,0) ties on specificity and loses on source
   order - the gutter silently computes to 0px. Every ygs band is an alignfull
   block, so matching both classes (0,2,0) wins regardless of enqueue order.
   Keep the compound on every rule below that sets horizontal padding. */
.ygs-section,
.alignfull.ygs-section {
  padding: 4.5rem var(--ygs-gutter);
  border-bottom: 1px solid var(--grapple-rule);
}
.ygs-section > .wp-block-group__inner-container,
.ygs-section > * {
  max-width: var(--ygs-measure);
  margin-left: auto;
  margin-right: auto;
}
.ygs-section:last-child { border-bottom: 0; }

/* Alternating band, one step lighter than the page base. */
.ygs-alt { background: var(--global-palette8); }

.ygs-section > .wp-block-group__inner-container > h2:first-child,
.ygs-section > h2:first-child { margin-top: 0; }

/* Hazard rule above every section heading - the one repeated motif. */
.ygs-section h2::before {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  background: var(--grapple-hazard);
  margin-bottom: 1.1rem;
}
.ygs-hero h2::before,
.ygs-card h3::before,
.ygs-cta h2::before { content: none; }

/* --- Hero --- */
.ygs-hero,
.alignfull.ygs-hero {
  /* Carries .ygs-section too, but this rule is later and the shorthand would
     wipe the gutter, so restate it. Same for .ygs-band below. */
  padding: 5.5rem var(--ygs-gutter) 4rem;
  /* The truck IS the brand here, so the masthead carries it on every page.
     Two layers: a left-weighted scrim so the headline keeps its contrast, and
     the photo behind it positioned low-right where the truck actually sits.
     background-color stays as the fallback - if the image 404s or is slow the
     band is still the page base, never a white flash against the dark shell. */
  background-color: var(--global-palette9);
  /* Three layers, and the last stop of the horizontal ramp deliberately sits at
     92% rather than 100%. Two reasons. The band is .alignfull, so it computes
     ~1432px inside a 1425px client area and its right 4px render off-screen -
     with the ramp ending at 100% the darkest-to-lightest fade never finished
     on screen. And the photo is at its BRIGHTEST exactly where the frame ends
     (sunlit dirt, lime trailer), so a monotonic fade-to-nothing reads as "the
     overlay stopped early and raw image is leaking out" - which is precisely
     how it was reported. Ending the ramp at 92% holds a floor across the last
     8%, and the 270deg layer closes the right edge with a short vignette so
     the frame terminates instead of trailing off. */
  background-image:
    linear-gradient(90deg,
      rgba(14, 18, 21, 0.97) 0%,
      rgba(14, 18, 21, 0.93) 34%,
      rgba(14, 18, 21, 0.62) 66%,
      rgba(14, 18, 21, 0.44) 92%),
    linear-gradient(270deg,
      rgba(14, 18, 21, 0.42) 0%,
      rgba(14, 18, 21, 0) 14%),
    url("https://yodersgrapple.com/wp-content/uploads/2026/08/grapple-truck-trailer-loading-brush-aerial-sarasota.webp");
  background-size: cover, cover, cover;
  background-position: center, center, 58% 62%;
  background-repeat: no-repeat;
}

/* The home page is the one that has to sell, so give it more room and let more
   of the photo through. Everywhere else the same band reads as a masthead. */
body.home .ygs-hero,
body.home .alignfull.ygs-hero {
  padding-block: 7.5rem 6rem;
  /* Layer count must stay at three - background-size/position are set once on
     the base rule above and are NOT restated here, so a two-layer image list
     would silently re-pair the photo with `center` instead of `58% 62%`. */
  background-image:
    linear-gradient(90deg,
      rgba(14, 18, 21, 0.95) 0%,
      rgba(14, 18, 21, 0.90) 26%,
      rgba(14, 18, 21, 0.70) 48%,
      rgba(14, 18, 21, 0.46) 74%,
      rgba(14, 18, 21, 0.38) 92%),
    linear-gradient(270deg,
      rgba(14, 18, 21, 0.38) 0%,
      rgba(14, 18, 21, 0) 12%),
    url("https://yodersgrapple.com/wp-content/uploads/2026/08/grapple-truck-trailer-loading-brush-aerial-sarasota.webp");
}
.ygs-hero h1 {
  font-size: clamp(2.1rem, 5.2vw, 3.6rem);
  margin: 0 0 1.1rem;
  max-width: 20ch;
}

.ygs-kicker {
  font-family: var(--global-heading-font-family);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  /* Not below 0.82rem. At the 16px root this lands on 13.12px; 0.78rem computed
     to 12.48px, and uppercase at wide tracking is already the hardest case to
     read small. 13px is the practical floor. */
  font-size: 0.82rem;
  color: var(--grapple-hazard);
  margin: 0 0 0.9rem;
}

.ygs-lede {
  font-size: clamp(1.05rem, 1.9vw, 1.3rem);
  line-height: 1.55;
  color: var(--global-palette4);
  max-width: 58ch;
  margin: 0 0 2rem;
}

/* --- Fact strip --- */
.ygs-band,
.alignfull.ygs-band {
  background: var(--global-palette7);
  padding: 1.6rem var(--ygs-gutter);
}
ul.ygs-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2rem;
}
ul.ygs-facts li {
  margin: 0;
  font-size: 0.92rem;
  color: var(--global-palette4);
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
}
ul.ygs-facts li::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  background: var(--grapple-hazard);
}
ul.ygs-facts strong { color: var(--global-palette3); }

/* --- Card grid --- */
/* The grid has to land on whichever element actually holds the cards.
   core/group renders its children inside a .wp-block-group__inner-container,
   so putting display:grid on .ygs-cards alone gave a grid with exactly ONE
   child - the wrapper - and every card stacked full width. Target both shapes
   so this survives whether or not the wrapper is emitted. The hairline
   separators are the 1px gaps showing the rule-coloured background on
   .ygs-cards, so the wrapper must stay transparent. */
.ygs-cards,
.ygs-cards > .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px;
}
.ygs-cards { margin-top: 2rem; }

.ygs-card {
  background: var(--global-palette9);
  /* Hairlines are drawn per-card, NOT as a rule-coloured container background
     showing through 1px gaps. The container trick paints every empty cell too,
     so a 5-card set in a 4-up grid left a large grey slab beside the orphan.
     Each card's 1px outward shadow lands in the gap and overlaps its
     neighbour's exactly, giving the same crisp grid with nothing drawn where
     there is no card. */
  box-shadow: 0 0 0 1px var(--grapple-rule);
  padding: 1.75rem 1.6rem;
  transition: background 0.15s ease;
}
.ygs-alt .ygs-card { background: var(--global-palette8); }
.ygs-card:hover { background: var(--global-palette7); }

.ygs-card h3 {
  font-size: 1.06rem;
  letter-spacing: 0.03em;
  margin: 0 0 0.65rem;
}
.ygs-card h3 a { color: var(--global-palette3); text-decoration: none; }
.ygs-card:hover h3 a { color: var(--grapple-hazard); }
.ygs-card p {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--global-palette5);
}

/* --- Buttons row --- */
.ygs-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}
.ygs-btns .wp-block-button__link {
  padding: 0.85rem 1.6rem;
  font-size: 0.9rem;
}

/* --- Closing CTA --- */
.ygs-cta {
  background:
    linear-gradient(180deg, rgba(255, 196, 0, 0.07) 0%, transparent 70%),
    var(--global-palette7);
  border-top: 3px solid var(--grapple-hazard);
  border-bottom: 0;
}
.ygs-cta h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); }
.ygs-cta p { max-width: 60ch; }

/* --- Body copy inside sections --- */
.ygs-section p { max-width: 68ch; line-height: 1.7; }
.ygs-section h2 { font-size: clamp(1.45rem, 2.8vw, 2rem); margin: 0 0 1rem; }
.ygs-section h3 { font-size: 1.12rem; margin: 2rem 0 0.5rem; }

.ygs-section ul:not(.ygs-facts):not(.wp-block-buttons) {
  max-width: 68ch;
  padding-left: 0;
  list-style: none;
}
.ygs-section ul:not(.ygs-facts):not(.wp-block-buttons) li {
  position: relative;
  padding-left: 1.35rem;
  margin-bottom: 0.5rem;
  line-height: 1.65;
}
.ygs-section ul:not(.ygs-facts):not(.wp-block-buttons) li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 2px;
  background: var(--grapple-hazard);
}
.ygs-section li strong { color: var(--global-palette3); }

/* --- Big tap-to-call --- */
.ygs-bigtel {
  font-family: var(--global-heading-font-family);
  font-size: clamp(1.9rem, 5vw, 2.8rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  display: inline-block;
}

/* --- Footer NAP block (emitted by the grapple-schema mu-plugin) --- */
.ygs-nap {
  text-align: center;
  padding: 1.5rem 1rem;
  font-size: 0.88rem;
  color: var(--global-palette5);
  border-top: 1px solid var(--grapple-rule);
}
.ygs-nap-name {
  font-family: var(--global-heading-font-family);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--global-palette3);
}
/* The footer phone number is a standalone control, not a link sitting inside a
   sentence, so WCAG 2.5.8's line-height exception does not cover it - it has to
   clear 24x24 on its own. As plain inline text the box was 103x17. Padding it
   out gets the hit area to ~27px tall; the negative block margin gives that
   height back to the layout so the footer line spacing does not move. On a site
   whose entire job is making this number get tapped, it is worth the four lines. */
.ygs-nap-tel {
  color: var(--grapple-hazard);
  text-decoration: none;
  font-weight: 600;
  display: inline-block;
  padding: 0.3rem 0.5rem;
  margin: -0.3rem 0;
}
.ygs-nap-sep,
.ygs-nap-dot { color: var(--global-palette6); margin: 0 0.5rem; }

/* --- Mobile --- */
@media (max-width: 767px) {
  /* padding-block, not the shorthand - the shorthand would zero the gutter.
     Compound selector for the same .alignfull reason as above. */
  .ygs-section, .alignfull.ygs-section { padding-block: 3rem; }
  .ygs-hero, .alignfull.ygs-hero { padding-block: 3.25rem 2.5rem; }
  .ygs-cards,
  .ygs-cards > .wp-block-group__inner-container { grid-template-columns: 1fr; }
  .ygs-cards { margin-top: 1.5rem; }
  .ygs-btns .wp-block-button { flex: 1 1 100%; }
  .ygs-btns .wp-block-button__link { display: block; text-align: center; }
  ul.ygs-facts { flex-direction: column; gap: 0.5rem; }
  .ygs-nap-sep { display: block; visibility: hidden; height: 0.35rem; }
}

/* ── Posts index ─────────────────────────────────────────────────────────────
   The Blog page's own copy, surfaced under the title (WordPress drops
   post_content for page_for_posts), and the holding block shown while there
   are no posts yet. Both reuse the existing type scale.
   ────────────────────────────────────────────────────────────────────────── */
.ygs-blog-intro {
  max-width: 46rem;
  margin: 0.75rem auto 0;
}

.ygs-blog-intro p {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--global-palette4, #4a5257);
  margin: 0;
}

.ygs-blog-empty {
  max-width: 44rem;
  margin: 2.5rem auto 3rem;
  padding: 2.25rem 2rem;
  background: var(--global-palette8, #f6f7f8);
  border-left: 4px solid var(--grapple-hazard);
  text-align: left;
}

.ygs-blog-empty h2 {
  margin: 0 0 0.75rem;
  font-size: 1.5rem;
  line-height: 1.25;
}

.ygs-blog-empty p {
  margin: 0 0 0.85rem;
}

.ygs-blog-empty .ygs-btns {
  margin-top: 1.5rem;
}

.ygs-admin-note {
  max-width: 44rem;
  margin: 1.5rem auto 0;
  padding: 0.65rem 0.9rem;
  background: #fff8e1;
  border: 1px dashed #d9b400;
  font-size: 0.9rem;
}

@media (max-width: 767px) {
  .ygs-blog-empty { padding: 1.5rem 1.25rem; margin: 1.75rem auto 2rem; }
  .ygs-blog-empty .ygs-btns .wp-block-button { flex: 1 1 100%; }
  .ygs-blog-empty .ygs-btns .wp-block-button__link { display: block; text-align: center; }
}

/* ==========================================================================
   14. Logo, photography and the gallery grid
   ========================================================================== */

/* --- Header logo ---
   The mark is 900x313 (2.88:1), so a width cap is the only control needed -
   height follows. Kadence keeps the <p class="site-title"> in the DOM for
   screen readers once a custom_logo is set, so nothing here should hide it
   with display:none. */
.site-branding a.brand img,
.site-branding .custom-logo-link img {
  max-width: 200px;
  width: 100%;
  height: auto;
}
.site-header-inner-wrap .site-branding {
  padding-block: 0.35rem;
}
@media (max-width: 767px) {
  .site-branding a.brand img,
  .site-branding .custom-logo-link img { max-width: 158px; }
}

/* --- A single photo dropped into a content band --- */
.ygs-photo,
.ygs-photo.wp-block-image {
  margin: 2rem 0 0;
}
/* Cap the height, never the ratio. The imported set mixes 16:9 drone frames
   with 1:1 and 4:5 phone shots, and at the 1313px content measure a square one
   renders as a 1313px tall slab. Forcing them all to a 16:9 band fixes that but
   crops, and these are documentary photos where the crop throws away the
   subject - the owner-operator shot lost the operator and kept the boom mount,
   directly under a caption about who runs the truck. So: natural ratio, capped
   height, centred. A tall photo gets narrow instead of getting cut. */
.ygs-photo img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 34rem;
  margin-inline: auto;
  border-radius: 0;
  box-shadow: 0 0 0 1px var(--grapple-rule);
}
.ygs-photo figcaption { text-align: center; }
.ygs-photo figcaption {
  margin-top: 0.6rem;
  font-size: 0.86rem;
  color: var(--global-palette5);
  text-align: left;
}

/* --- Gallery ---
   Core's gallery block is flex, which leaves a ragged last row and lets a
   portrait frame tower over the landscapes beside it. Overriding to grid with
   a fixed cell ratio makes every tile identical regardless of what the source
   photo was shot at, which is the only way a mixed set of phone, DSLR and
   drone frames reads as one set. display:grid also parks core's inline
   flex-basis/flex-grow, so there is nothing to fight. */
.ygs-gallery.wp-block-gallery.has-nested-images,
.ygs-gallery.wp-block-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 2.25rem 0 0;
}
/* Core sizes gallery tiles with
   `.wp-block-gallery.has-nested-images.columns-3 figure.wp-block-image:not(#individual-image)
    { width: calc(33.33% - ...) }`.
   The #individual-image inside :not() is never going to match anything - it is
   there purely to buy an ID's worth of specificity (1,3,2). Against a plain
   class selector core wins, and its 33.33% then resolves against the grid
   COLUMN we already divided by three, so every tile came out a third of a
   third. Borrowing the same :not() puts us at (1,4,2) and the override lands
   without !important. */
.ygs-gallery.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image),
.ygs-gallery.wp-block-gallery figure.wp-block-image:not(#individual-image) {
  width: 100%;
  max-width: none;
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--grapple-rule);
  background: var(--global-palette8);
}
.ygs-gallery figure.wp-block-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  transition: filter 0.18s ease, transform 0.18s ease;
}
.ygs-gallery figure.wp-block-image:hover img {
  filter: brightness(1.08) saturate(1.05);
}
/* Core paints a gradient plate behind captions; on a dark page it just muddies
   the bottom of the frame, and these tiles carry their alt text instead. */
.ygs-gallery figure.wp-block-image figcaption { display: none; }

@media (max-width: 1024px) {
  .ygs-gallery.wp-block-gallery.has-nested-images,
  .ygs-gallery.wp-block-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .ygs-gallery.wp-block-gallery.has-nested-images,
  .ygs-gallery.wp-block-gallery { grid-template-columns: 1fr; gap: 10px; }
}

/* --- Close the gap between the header and the hero band ---
   Kadence gives #primary an 80px top margin and .entry-content-wrap another
   32px, which is right for a normal page but leaves a dead black strip above a
   full-bleed masthead. :has() scopes the reset to pages that actually open with
   a hero, so the blog index and single posts keep their breathing room. */
.content-area:has(.entry-content > .ygs-hero:first-child) { margin-top: 0; }
.entry-content-wrap:has(> .entry-content > .ygs-hero:first-child) { padding-top: 0; }

/* --- Site title beside the logo ---
   The logo already spells the company out, so the text repeat is noise. Kept in
   the accessibility tree rather than display:none so the <h1>/<p> that names
   the site is still announced. */
.site-branding a.brand.has-logo-image .site-title-wrap {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}