/*
Theme Name: Zikhara
Theme URI: https://github.com/zikharaglobal-ops/zikhara-website
Author: Zikhara Global
Description: Custom WordPress block theme for Zikhara Global.
Version: 0.1.5
Requires at least: 6.6
Requires PHP: 8.1
Text Domain: zikhara
*/

:root {
  --zikhara-ink: #0E1315;
  --zikhara-ink-raised: #171C1F;
  --zikhara-steel-700: #20262A;
  --zikhara-steel-500: #3A4148;
  --zikhara-steel-300: #8A929A;
  --zikhara-paper: #F4F4F1;
  --zikhara-paper-dim: #E4E4DF;
  --zikhara-molten: #F2612F;
  --zikhara-molten-deep: #D74E20;
  --zikhara-success: #5B8A6B;
  --zikhara-error: #C0553F;
  /* Interaction tokens resolve per surface context. Dark surfaces keep the
     molten accent; the light-surface block below re-points them because molten
     only reaches 2.92:1 on paper, under the 3:1 non-text floor. */
  --zikhara-focus-ring: var(--zikhara-molten);
  --zikhara-eyebrow-color: var(--zikhara-steel-300);
  /*
   * Accessibility-only CTA label colour. Not a design token: it is scoped to
   * the text of CTA buttons (header CTA, primary block buttons, RFQ submit) and
   * must not be reused for body copy, headings, or any other text.
   *
   * Why pure black: the canonical Forge palette is unchanged — molten #F2612F,
   * molten-deep #D74E20 and ink #0E1315 all keep their approved values — but
   * ink on molten-deep measures 4.45:1 at the 13px uppercase label size, which
   * narrowly misses WCAG AA. Black on molten-deep clears it at 5.00:1, and is
   * visually indistinguishable from ink at this size against that fill.
   */
  --zikhara-cta-label: #000000;
  --zikhara-dur-fast: 150ms;
  --zikhara-dur-base: 300ms;
  --zikhara-dur-slow: 600ms;
  --zikhara-ease-reveal: cubic-bezier(0.16, 1, 0.3, 1);
  --zikhara-ease-molten: cubic-bezier(0.7, 0, 0.3, 1);
  --wp--style--global--content-size: 820px;
  --wp--style--global--wide-size: 1280px;
  /* Rendered height of the sticky global header. Route CSS uses it to clear
     content that is positioned against the viewport top rather than the flow,
     so it must be kept in step with .zikhara-site-header. */
  --zikhara-header-h: 78px;
  /* Deliberate gap held below the header when the browser scrolls a fragment
     target into view, and above the bottom edge so a focus ring is never left
     half outside the viewport. 24px clears the 5px the ring occupies beyond
     the control (2px outline at 3px offset) with room to read as a gap. */
  --zikhara-scroll-gap: 24px;
}

html {
  background: var(--zikhara-ink);
  color-scheme: dark;
  scroll-behavior: auto;
  /*
   * Fragment landings and keyboard focus share one defect: the scrollport
   * reserved nothing, so the browser aligned the target flush with a viewport
   * edge — behind the sticky/fixed header at the top, and with the focus ring
   * partly outside the port at the bottom. Reserving the header band plus a
   * gap is native, route-agnostic, and only changes where a scroll comes to
   * rest; it does not add smooth scrolling or move any element in the flow.
   */
  scroll-padding-top: calc(var(--zikhara-header-h) + var(--zikhara-scroll-gap));
  scroll-padding-bottom: var(--zikhara-scroll-gap);
}

body {
  background: var(--zikhara-ink);
  overflow-x: hidden;
}

img,
svg,
video {
  max-width: 100%;
}

a {
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--zikhara-focus-ring);
  outline-offset: 3px;
}

.wp-site-blocks {
  min-height: 100vh;
}

.wp-site-blocks > main {
  min-height: 40vh;
}

/* The template-part wrapper owns sticky positioning: it is constrained by
   .wp-site-blocks, so it can stay pinned for the whole page. A sticky child
   inside this wrapper has no scroll range of its own. */
.wp-site-blocks > header {
  position: sticky;
  top: 0;
  z-index: 20;
}

.zikhara-site-header {
  background: var(--zikhara-ink);
  border-bottom: 1px solid var(--zikhara-steel-700);
  position: relative;
  transition:
    background-color var(--zikhara-dur-base) ease,
    border-color var(--zikhara-dur-base) ease;
  z-index: 20;
}

body.home .zikhara-site-header:not(.is-scrolled),
body.front-page .zikhara-site-header:not(.is-scrolled) {
  background: transparent;
  border-bottom-color: transparent;
}

body.home .zikhara-site-header.is-scrolled,
body.front-page .zikhara-site-header.is-scrolled {
  background: var(--zikhara-ink);
  border-bottom-color: var(--zikhara-steel-700);
}

.zikhara-site-header__inner,
.zikhara-site-footer__inner {
  margin-inline: auto;
  max-width: 1280px;
}

.zikhara-wordmark {
  align-items: center;
  color: var(--zikhara-paper);
  display: inline-flex;
  gap: 12px;
  text-decoration: none;
}

.zikhara-wordmark__mark {
  color: var(--zikhara-paper);
  display: block;
  flex: 0 0 auto;
  height: 34px;
  width: 34px;
}

.zikhara-wordmark__name {
  display: block;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
}

.zikhara-wordmark__name-r {
  color: var(--zikhara-molten);
}

.zikhara-wordmark__meta {
  color: var(--zikhara-steel-300);
  display: block;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  line-height: 1.2;
  margin-top: 4px;
  text-transform: uppercase;
}

.zikhara-nav a {
  text-decoration: none;
}

.zikhara-nav a:hover,
.zikhara-nav a:focus-visible {
  color: var(--zikhara-molten);
}

/* Button sizing belongs to the clickable link. The navigation wrapper that
   carries .zikhara-cta stays an ordinary nav item. */
.zikhara-nav .zikhara-cta > a,
.wp-block-button.is-style-zikhara-primary .wp-block-button__link {
  align-items: center;
  background: var(--zikhara-molten);
  border: 1px solid var(--zikhara-molten);
  border-radius: 8px;
  color: var(--zikhara-ink);
  display: inline-flex;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.8125rem;
  font-weight: 500;
  justify-content: center;
  letter-spacing: 0.14em;
  line-height: 1;
  min-height: 44px;
  padding: 15px 18px;
  text-decoration: none;
  text-transform: uppercase;
  transition:
    background var(--zikhara-dur-fast) ease,
    border-color var(--zikhara-dur-fast) ease,
    color var(--zikhara-dur-fast) ease;
}

/*
 * min-height is a target-size floor, not an addition to the padding box. Core
 * already border-boxes .wp-block-button__link but not navigation links, so the
 * CTA needs it here or it measures 76px instead of 45px.
 */
.zikhara-nav .zikhara-cta > a {
  box-sizing: border-box;
}

/*
 * Core ships .wp-block-navigation-item__content twice in one selector, so its
 * `color: inherit` (0,3,0) outranked the CTA rule above (0,2,1) and the resting
 * label inherited nav paper — 2.92:1 on molten. Matching core's weight puts the
 * approved ink label back.
 */
.zikhara-nav .zikhara-cta > a.wp-block-navigation-item__content {
  color: var(--zikhara-ink);
}

.zikhara-nav .zikhara-cta > a:hover,
.zikhara-nav .zikhara-cta > a:focus-visible,
.wp-block-button.is-style-zikhara-primary .wp-block-button__link:hover,
.wp-block-button.is-style-zikhara-primary .wp-block-button__link:focus-visible {
  background: var(--zikhara-molten-deep);
  border-color: var(--zikhara-molten-deep);
  color: var(--zikhara-cta-label);
}

.zikhara-rfq-band {
  border-block: 1px solid var(--zikhara-steel-700);
  margin-block: clamp(64px, 10vw, 160px);
  padding-block: clamp(48px, 7vw, 96px);
}

.zikhara-rfq-band__inner {
  align-items: end;
  display: grid;
  gap: 32px;
  grid-template-columns: minmax(0, 1fr) auto;
  margin-inline: auto;
  max-width: 1280px;
}

.has-display-l-font-size {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.05;
}

.zikhara-eyebrow {
  color: var(--zikhara-eyebrow-color);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1.4;
  margin: 0 0 16px;
  text-transform: uppercase;
}

.zikhara-muted {
  color: var(--zikhara-steel-300);
}

.zikhara-site-footer {
  border-top: 1px solid var(--zikhara-steel-700);
}

.zikhara-site-footer__inner {
  gap: 32px;
}

.zikhara-footer-heading {
  color: var(--zikhara-steel-300);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  margin: 0 0 16px;
  text-transform: uppercase;
}

.zikhara-footer-list {
  color: var(--zikhara-paper-dim);
  font-size: 0.875rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.zikhara-footer-list li + li {
  margin-top: 8px;
}

.zikhara-footer-disclaimer {
  border-left: 1px solid var(--zikhara-steel-500);
  color: var(--zikhara-steel-300);
  font-size: 0.875rem;
  padding-left: 16px;
}

.zikhara-footer-copy {
  color: var(--zikhara-steel-300);
  font-size: 0.8125rem;
  margin: 0;
}

/*
 * Light-surface contexts.
 *
 * These are the paper-background sections of the site. Molten is an accent
 * tuned for ink: on paper it measures 2.92:1, which fails both the 3:1
 * non-text floor for focus indication and the 4.5:1 floor for link text.
 * Re-pointing the interaction tokens here keeps one contract for every light
 * section instead of a per-route override, and leaves dark sections — where
 * molten passes at 5.34:1 to 5.81:1 — untouched.
 */
.zikhara-home__model,
.zikhara-home__trust,
.zikhara-products__families,
.zikhara-sourcing__cluster,
.zikhara-markets__lanes,
.zikhara-markets__preference,
.zikhara-about__model,
.zikhara-about__background,
.zikhara-contact__rfq {
  --zikhara-eyebrow-color: var(--zikhara-steel-500);
  --zikhara-focus-ring: var(--zikhara-molten-deep);
}

/* Core paints the skip link as its own light chip (#EEE) on every route, and
   it is the first keyboard stop on the site, so it takes the light ring too. */
.skip-link {
  --zikhara-focus-ring: var(--zikhara-molten-deep);
}

/*
 * Core parks the focused chip 5px from the top-left corner, which is exactly
 * the room its focus ring needs (2px outline at a 3px offset), so the ring sat
 * flush with — and in practice a pixel outside — the viewport edge. A document
 * already at its scroll origin cannot scroll further, so this is the one edge
 * case scroll-padding structurally cannot reach: the chip moves instead of the
 * ring. Core declares this at (0,3,0), so the override has to match its weight.
 */
.skip-link.screen-reader-text:focus {
  inset-inline-start: 12px;
  top: 12px;
}

/*
 * Link interaction on those same surfaces. theme.json generates the global
 * hover colour at `:root :where(a:where(:not(.wp-element-button)):hover)`
 * (specificity 0,1,0), so this rule outranks it without editing the generated
 * cascade. Molten survives as the underline cue rather than the text colour.
 */
:is(
    .zikhara-home__model,
    .zikhara-home__trust,
    .zikhara-products__families,
    .zikhara-sourcing__cluster,
    .zikhara-markets__lanes,
    .zikhara-markets__preference,
    .zikhara-about__model,
    .zikhara-about__background,
    .zikhara-contact__rfq
  )
  a:not(.wp-element-button):is(:hover, :focus-visible) {
  color: var(--zikhara-ink);
  text-decoration-color: var(--zikhara-molten-deep);
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
}

/* Guardrails: molten is an accent only, never a section/background utility. */
.has-molten-background-color,
.has-molten-deep-background-color {
  background-color: var(--zikhara-ink-raised) !important;
  color: var(--zikhara-paper) !important;
}

.has-molten-color {
  color: var(--zikhara-paper) !important;
}

@media (max-width: 900px) {
  .zikhara-site-header__inner {
    gap: 24px;
  }

  .zikhara-rfq-band__inner {
    align-items: start;
    grid-template-columns: 1fr;
  }
}

/*
 * The header holds one row until the wordmark and navigation stop fitting
 * side by side, runs two rows down to the navigation overlay breakpoint core
 * sets at 600px, then shortens again once the links collapse behind the menu
 * button. Measured rendered heights are 77px / 135px / 115px; each token value
 * rounds up by a pixel, as the 78px desktop value already did.
 *
 * The wrap is content-driven: it happens once the header has 771px of layout
 * width, while a media query is answered by the viewport, which also counts
 * the classic scrollbar. 788px is 771px plus the widest scrollbar in play, so
 * the taller token is always in force by the time the header actually wraps.
 * The residual is a band a scrollbar wide where a scrollbar-less viewport
 * clears more than it needs: extra gap, never content behind the header. The
 * 600px step needs no such margin because core answers it the same way.
 *
 * Only the Sourcing cinematic scene reads this token and that rule is gated at
 * min-width: 901px, so neither override can reach it.
 */
@media (max-width: 788px) {
  :root {
    --zikhara-header-h: 136px;
  }
}

@media (max-width: 720px) {
  .zikhara-site-header__inner {
    align-items: start;
    flex-direction: column;
  }

  .zikhara-nav .wp-block-navigation__container {
    gap: 16px;
  }

  /* The mobile overlay palette is owned by the Navigation block itself:
     parts/header.html sets overlayBackgroundColor "ink" / overlayTextColor
     "paper", which core renders as has-ink-background-color /
     has-paper-color on the responsive container. Those preset classes carry
     !important, so they beat core's default
     .wp-block-navigation:not(.has-background) ...:not(.disable-default-overlay)
     {background-color:#fff} rule. A plain theme selector cannot: that core
     selector scores (0,5,0) because :not() contributes its argument, and the
     rule that used to live here scored only (0,3,0) and silently lost. */
}

@media (max-width: 599.98px) {
  :root {
    --zikhara-header-h: 116px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}