/*
Theme Name: Wylde Systems
Theme URI: https://wyldesystems.com/
Author: Wylde Systems
Description: Lightweight theme carrying the Wylde Systems V5.3 design system. Header, footer, navigation, typography and components are built in; page content is added as HTML in the editor.
Version: 4.4
Requires at least: 6.0
Tested up to: 7.1
License: Proprietary
Text Domain: wylde-systems
*/

/* Design tokens and component CSS load from assets/css/ via functions.php.
   This file loads last and holds corrections plus anything added after V5.3. */


/* ---------------------------------------------------------------------------
   Correction to V5.3.

   wylde-systems.css line 37 sets `.hero__body a`, `.section--inverse a`,
   `.section--environmental a` and `.site-footer a` to the on-inverse text
   colour. That selector is a class plus an element, so it outranks the
   `.btn--on-inverse` rule at line 183, and the primary call to action renders
   cream on cream — invisible. Matching the specificity here restores it.

   This should also be fixed at source in wylde-systems.css.
   ------------------------------------------------------------------------- */

a.btn--on-inverse,
a.btn--on-inverse:visited {
  color: var(--color-action-on-inverse-text);
}

a.btn--on-inverse:hover {
  color: var(--color-action-on-inverse-text);
  background: var(--color-action-on-inverse-bg-hover);
}


/* ---------------------------------------------------------------------------
   Gallery grid.

   Styles the core WordPress Gallery block into a grid of photographs. Editors
   add pictures with the ordinary Gallery block; no markup is written by hand,
   and no JavaScript is involved.

   Note on specificity: core writes its gallery rules as
   `figure.wp-block-image:not(#individual-image)`. The :not() carries an ID,
   which lifts the selector's weight above anything a theme can reach with
   classes alone. Two consequences it is used for: each figure is pinned to
   50% width, and captions are absolutely positioned over the image with a
   gradient behind them. The rules below repeat the same :not(#individual-image)
   so they can win, rather than resorting to !important.
   ------------------------------------------------------------------------- */

.ws-gallery__body {
  margin-top: var(--space-lg);
}

/* Breathing room between the intro copy and the first row of photographs. */
.ws-gallery__body > .wp-block-gallery {
  margin-top: var(--space-2xl);
}

/* The photographs are given more width than the prose container allows. */
@media (min-width: 960px) {
  .ws-gallery .container {
    max-width: min(1440px, 100%);
  }
}

.ws-gallery .wp-block-gallery.has-nested-images {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xs);
  margin: 0;
}

@media (min-width: 720px) {
  .ws-gallery .wp-block-gallery.has-nested-images {
    grid-template-columns: repeat(2, 1fr);
  }
}

.ws-gallery .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
  display: block;
  width: auto;
  max-width: none;
  margin: 0;
  flex-grow: 0;
  flex-basis: auto;
}

.ws-gallery .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-none);
  flex: none;
}

/* Caption sits beneath the photograph, not over it. */
.ws-gallery .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) figcaption {
  position: static;
  max-height: none;
  margin: var(--space-2xs) 0 0;
  padding: 0;
  background: none;
  background-image: none;
  box-sizing: border-box;
  font-family: var(--type-family-label);
  font-size: var(--type-label-small-size);
  line-height: var(--type-label-small-line-height);
  letter-spacing: var(--type-label-small-tracking);
  color: var(--color-text-on-inverse-secondary);
  text-align: left;
  text-shadow: none;
  overflow: visible;
}

/* Give a photograph the full width by adding the class ws-wide to the image
   block: Block settings -> Advanced -> Additional CSS class. */
@media (min-width: 720px) {
  .ws-gallery .wp-block-gallery.has-nested-images figure.wp-block-image.ws-wide:not(#individual-image) {
    grid-column: 1 / -1;
  }
  .ws-gallery .wp-block-gallery.has-nested-images figure.wp-block-image.ws-wide:not(#individual-image) img {
    aspect-ratio: 16 / 9;
  }
}


/* ---------------------------------------------------------------------------
   Hero legibility.

   The eyebrow was unreadable against the photograph. Three changes: a solid
   background colour behind the image so there is never bare white while it
   loads, a stronger scrim gradient, and tighter tracking on the eyebrow.
   ------------------------------------------------------------------------- */

.hero {
  background-color: var(--color-background-inverse);
}

.hero__scrim {
  background: linear-gradient(
    to top,
    rgba(28, 26, 23, 0.88) 0%,
    rgba(28, 26, 23, 0.72) 38%,
    rgba(28, 26, 23, 0.38) 68%,
    rgba(28, 26, 23, 0.20) 100%
  );
}

.hero__body > .label {
  letter-spacing: 0.08em;
  text-shadow: 0 1px 3px rgba(28, 26, 23, 0.6);
}

.hero__body h1,
.hero__body .lede {
  text-shadow: 0 1px 4px rgba(28, 26, 23, 0.45);
}


/* Footer now carries four link groups plus the brand block. */
@media (min-width: 960px) {
  .site-footer__grid {
    grid-template-columns: 1.4fr 1fr 1fr 0.7fr 1fr;
    gap: var(--space-2xl);
  }
}


/* ---------------------------------------------------------------------------
   Numbered sequence steps.

   In V5.3 the four-column layout puts a hairline divider on the right of each
   step but no padding on the left, so the copy in columns two, three and four
   sits hard against the previous divider. Modest padding on both sides gives
   the text air without narrowing the column so far that the copy crowds.
   ------------------------------------------------------------------------- */

@media (min-width: 960px) {
  .sequence--cols .sequence__step,
  .sequence--cols4 .sequence__step {
    padding-right: var(--space-md);
    padding-left: var(--space-md);
  }
  .sequence--cols .sequence__step:first-child,
  .sequence--cols4 .sequence__step:first-child {
    padding-left: 0;
  }
  .sequence--cols .sequence__step:last-child,
  .sequence--cols4 .sequence__step:last-child {
    padding-right: 0;
  }
}

.sequence__step .card__body {
  margin-top: var(--space-xs);
}


/* ---------------------------------------------------------------------------
   Inset figure.

   figure--band is full-bleed and 460px tall, which is unforgiving of a soft
   frame. figure--inset holds the same image inside the page container at a
   more modest size, so a slightly out-of-focus photograph reads as intended
   rather than as a mistake.
   ------------------------------------------------------------------------- */

.figure--inset {
  max-width: 620px;
  margin-inline: 0;
  padding-inline: 0;
}

.figure--inset > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.figure--inset .figure__caption {
  position: static;
  margin-top: var(--space-2xs);
  padding: 0;
  background: none;
  color: var(--color-text-secondary);
}


/* ---------------------------------------------------------------------------
   Gallery blocks outside the Gallery template.

   Lets a WordPress Gallery block be dropped onto any page and inherit the same
   grid as the Gallery page, so photographs can be added and swapped from the
   Media Library rather than written into the page markup.
   ------------------------------------------------------------------------- */

main > .wp-block-gallery.has-nested-images {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xs);
  max-width: var(--grid-container-max);
  margin-inline: auto;
  padding: var(--space-2xl) var(--space-md);
}

@media (min-width: 720px) {
  main > .wp-block-gallery.has-nested-images {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  main > .wp-block-gallery.has-nested-images {
    padding-inline: var(--space-3xl);
  }
}

main > .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
  display: block;
  width: auto;
  max-width: none;
  margin: 0;
  flex-grow: 0;
  flex-basis: auto;
}

main > .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

main > .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) figcaption {
  position: static;
  max-height: none;
  margin: var(--space-2xs) 0 0;
  padding: 0;
  background: none;
  background-image: none;
  font-family: var(--type-family-label);
  font-size: var(--type-label-small-size);
  line-height: var(--type-label-small-line-height);
  letter-spacing: var(--type-label-small-tracking);
  color: var(--color-text-secondary);
  text-align: left;
  text-shadow: none;
  overflow: visible;
}


/* ---------------------------------------------------------------------------
   Inverse split.

   A split section whose copy half sits on the dark ground, so a photograph can
   run full-bleed beside inverse copy without the raw-image placement problems
   of dropping a picture into a plain grid cell.
   ------------------------------------------------------------------------- */

.split--inverse .split__body {
  background: var(--color-background-inverse);
  color: var(--color-text-on-inverse);
}

.split--inverse .split__body .label {
  color: var(--color-text-on-inverse-tertiary);
}

.split--inverse .split__body .lede,
.split--inverse .split__body .body-copy {
  color: var(--color-text-on-inverse-secondary);
}


/* ---------------------------------------------------------------------------
   Acknowledgement of Country.

   A dark band closing the home page, centred, between the cream sections
   above and the footer below. Tighter padding than a full section, since it
   is a closing note rather than a section of its own.
   ------------------------------------------------------------------------- */

.ws-ack {
  padding-block: var(--space-3xl);
}

.ws-ack .container {
  text-align: center;
}

/* Wider than the reading measure, so the acknowledgement runs across the band
   rather than sitting in a narrow centred column. */
.ws-ack .measure {
  max-width: min(88ch, 100%);
  margin-inline: auto;
}

.section--inverse.ws-ack .lede {
  font-size: var(--type-body-medium-size);
  line-height: var(--type-body-medium-line-height);
  color: var(--color-text-on-inverse-secondary);
}

.section--inverse.ws-ack .label {
  color: var(--color-text-on-inverse-tertiary);
}


/* ---------------------------------------------------------------------------
   Line breaking.

   Stops single words dropping onto a line of their own. `balance` distributes
   words evenly across the lines of a heading; `pretty` keeps body copy from
   ending on an orphan. Browsers without support simply wrap as before, so
   there is nothing to fall back to.
   ------------------------------------------------------------------------- */

h1, h2, h3, h4,
.lede,
.quote__text,
.card h3,
.sequence__step h3 {
  text-wrap: balance;
}

p,
li,
dd,
figcaption,
.card__body {
  text-wrap: pretty;
}


/* ---------------------------------------------------------------------------
   Split order on small screens.

   Splits stack in source order on a phone, so a section that leads with copy
   puts its photograph immediately above the next section's photograph. Below
   the two-column breakpoint the image is moved above its own copy, giving a
   consistent picture-then-text rhythm and keeping two photographs from
   landing back to back.
   ------------------------------------------------------------------------- */

@media (max-width: 959px) {
  .split--wide-copy .split__media {
    order: -1;
  }
  .split--wide-copy .split__body {
    order: 0;
  }
}


/* ---------------------------------------------------------------------------
   Header overflow on small screens.

   Brand lockup, the Private enquiry button and the menu toggle together are
   wider than a phone viewport, which pushed the whole document sideways and
   left the toggle off-screen. Below the breakpoint the button is dropped from
   the header and the same link is carried inside the menu instead.
   ------------------------------------------------------------------------- */

.site-nav__cta {
  display: none;
}

@media (max-width: 959px) {
  .site-header__actions .btn {
    display: none;
  }
  .site-nav__cta {
    display: block;
  }
}

/* Nothing should be able to widen the document beyond the viewport. */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}


/* ---------------------------------------------------------------------------
   Menu toggle visibility.

   V5.3 draws the toggle as three 1px lines inside a hairline border, both in
   low-contrast tones against the dark header. On a phone it reads as an empty
   square or disappears entirely. Thicker bars and a stronger border.
   ------------------------------------------------------------------------- */

.nav-toggle {
  border-color: var(--color-border-on-inverse-strong);
  gap: 4px;
}

.nav-toggle__bar {
  display: block;
  width: 100%;
  height: 2px;
  flex: none;
  background: var(--color-text-on-inverse);
  border-radius: 0;
}

.nav-toggle:hover {
  border-color: var(--color-text-on-inverse);
}


/* ---------------------------------------------------------------------------
   Brand lockup size.

   V5.3 sets the mark at 32px and the wordmark at 15px, rising to 38px and 18px
   above 1280px. The mark is enlarged well beyond that so it carries the header;
   the wordmark is raised only slightly, keeping the mark clearly dominant in
   the lockup. The header row grows with the mark, since the lockup sets the
   minimum height.
   ------------------------------------------------------------------------- */

.brand-lockup__mark {
  width: 52px;
  height: 52px;
}

.brand-lockup .wordmark {
  font-size: 18px;
}

@media (min-width: 1280px) {
  .brand-lockup__mark {
    width: 60px;
    height: 60px;
  }
  .brand-lockup .wordmark {
    font-size: 22px;
  }
}


/* ---------------------------------------------------------------------------
   Tinted split.

   A split has no ground of its own, so where one follows a plain section the
   photograph runs straight into the same background and reads as floating.
   split--secondary gives the copy half the stone tone and draws a hairline
   above, so the band reads as its own unit.
   ------------------------------------------------------------------------- */

.split--secondary {
  border-top: var(--border-hairline) solid var(--color-border-subtle);
}

.split--secondary .split__body {
  background: var(--color-background-secondary);
}


/* ---------------------------------------------------------------------------
   Quotes inside a split.

   A quote set at display size sits too close in weight to the heading above it
   when both share a narrow column, so the two run together. Inside a split the
   quote is stepped down and given more room above.
   ------------------------------------------------------------------------- */

.split__body .quote__text {
  font-size: clamp(1.15rem, 1.5vw, 1.4rem);
  line-height: 1.42;
}

.split__body .quote {
  margin-top: var(--space-lg);
}