/* Sextant Consulting Group — bespoke layout/interaction CSS
   Colors and fonts reference the theme.json tokens (--wp--preset--color--sx-*,
   --wp--preset--font-family--*) rather than duplicating hex values, so theme.json
   stays the single source of truth. */

:root { --sx-pad-x: clamp(24px, 7vw, 96px); }
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* Twenty Twenty-Five sets overflow-x:clip on .wp-site-blocks to stop alignfull
   bleed, but per the CSS spec that silently forces overflow-y:auto too — which
   turns it into a scroll container and breaks position:sticky everywhere inside.
   Declaring overflow-y explicitly prevents that auto-substitution. */
.wp-site-blocks { overflow-x: clip; overflow-y: visible; }

/* --- self-hosted fonts (no external request to fonts.googleapis.com) --- */
@font-face {
  font-family: 'Antonio';
  src: url('fonts/Antonio-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Antonio';
  src: url('fonts/Antonio-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Antonio';
  src: url('fonts/Antonio-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Antonio';
  src: url('fonts/Antonio-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* --- sticky header --- */
.sx-nav {
  position: fixed !important; top: 0 !important; left: 0; right: 0; z-index: 10;
  background: rgba(250, 248, 244, 0.92);
  border-bottom: 1px solid var(--wp--preset--color--sx-border);
  padding-left: var(--sx-pad-x) !important; padding-right: var(--sx-pad-x) !important;
  margin-top: 0 !important; margin-bottom: 0 !important;
  width: 100%;
}
.sx-nav::before {
  content: "";
  position: absolute; inset: 0;
  backdrop-filter: blur(6px);
  z-index: -1;
}
main { padding-top: 70px; }
.sx-nav .wp-block-navigation__submenu-icon { display: none; }
.sx-nav-brand h2 { font-size: 20px; margin: 0; }
.sx-nav .wp-block-navigation-item a,
.sx-nav .wp-block-navigation-item__content {
  color: var(--wp--preset--color--sx-ink) !important;
  text-decoration: none !important;
  font-size: 13px !important; letter-spacing: 0.06em; font-weight: 500;
}
.sx-nav-links .wp-block-navigation__container { gap: 28px !important; }
.sx-nav .wp-block-navigation-item a:hover,
.sx-nav .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--sx-gold) !important; }
.sx-nav-cta a, .sx-nav-cta .wp-block-navigation-item__content {
  color: var(--wp--preset--color--sx-bg) !important;
  background: var(--wp--preset--color--sx-navy);
  padding: 8px 18px; border-radius: 3px; transition: background 0.2s ease;
  font-size: 13px !important; letter-spacing: 0.06em; font-weight: 500;
}
.sx-nav-cta a:hover, .sx-nav-cta .wp-block-navigation-item__content:hover { background: var(--wp--preset--color--sx-navy-dark) !important; color: var(--wp--preset--color--sx-bg) !important; }
.sx-nav-cta .wp-block-navigation-item__label { color: var(--wp--preset--color--sx-bg) !important; }

/* --- hero --- */
.sx-hero {
  display: grid !important; grid-template-columns: 1fr auto; align-items: center;
  gap: clamp(32px, 5vw, 72px);
  padding: clamp(56px, 9vw, 104px) var(--sx-pad-x) clamp(48px, 8vw, 96px) !important;
  margin-top: 0 !important; margin-bottom: 0 !important;
}
.sx-hero__kicker { letter-spacing: 0.32em; color: var(--wp--preset--color--sx-gold); margin: 0 0 18px !important; }
.sx-hero__title { letter-spacing: 0.01em; line-height: 1.02; margin: 0 !important; }
.sx-hero__rule { width: 64px; height: 3px; background: var(--wp--preset--color--sx-gold); margin: clamp(20px, 3vw, 30px) 0; }
.sx-hero__emblem img { width: clamp(200px, 24vw, 320px); height: auto; }

/* --- divider --- */
.sx-divider { padding: 0 var(--sx-pad-x) !important; margin-top: 0 !important; margin-bottom: 0 !important; }
.sx-divider__row { display: flex; align-items: center; gap: 14px; }
.sx-divider__line { flex: 1; height: 1px; background: var(--wp--preset--color--sx-border); }

/* --- sections --- */
.sx-section {
  scroll-margin-top: 88px;
  display: grid !important; grid-template-columns: 260px 1fr; gap: 48px;
  align-items: baseline;
  padding: clamp(48px, 8vw, 92px) var(--sx-pad-x) !important;
  margin-top: 0 !important; margin-bottom: 0 !important;
}
.sx-section__label { display: flex; align-items: center; gap: 12px; }
.sx-section__label svg { flex-shrink: 0; display: block; }
.sx-section__label p { margin: 0; font-size: 16px; letter-spacing: 0.14em; color: var(--wp--preset--color--sx-gold); }
.sx-section__label--navy p { color: var(--wp--preset--color--sx-navy); }
.sx-section__body { min-width: 0; }
.sx-section__heading { line-height: 1.2; max-width: 640px; margin: 0 0 20px !important; }
.sx-section__copy { line-height: 1.75; max-width: 640px; margin: 0 !important; }

/* --- brand tiles --- */
.sx-tiles {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  gap: 20px; width: 100%; max-width: 820px; min-width: 0;
  align-items: stretch; margin-top: 36px !important;
}
.sx-tiles > * { margin-block-start: 0 !important; }
.sx-tile {
  border: 1px solid var(--wp--preset--color--sx-border); border-radius: 4px;
  background: var(--wp--preset--color--sx-surface); padding: 26px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 8px;
}
.sx-tile__name { font-family: var(--wp--preset--font-family--antonio); font-size: 20px; letter-spacing: 0.03em; line-height: 1.25; margin-bottom: 17px; color: var(--wp--preset--color--sx-ink); }
.sx-tile--soon { background: var(--wp--preset--color--sx-bg); }
.sx-tile--soon .sx-tile__name, .sx-tile--soon .sx-tile__foot { color: var(--wp--preset--color--sx-muted); }
.sx-tile__foot { color: var(--wp--preset--color--sx-navy); font-size: 13px; letter-spacing: 0.04em; }

/* Plutonic wipe tile */
.sx-tile--link {
  border: 1px solid var(--wp--preset--color--sx-border); border-radius: 4px;
  background: var(--wp--preset--color--sx-surface);
  text-decoration: none; position: relative; overflow: hidden; padding: 0; display: block;
  min-height: 150px;
}
.sx-tile__face, .sx-tile__reveal {
  position: absolute; inset: 0; box-sizing: border-box;
  padding: 26px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 8px;
}
.sx-tile__reveal {
  background: var(--wp--preset--color--sx-plutonic);
  transition: clip-path 0.35s ease; clip-path: inset(0 100% 0 0);
}
.sx-tile__reveal .sx-tile__name, .sx-tile__reveal .sx-tile__foot { color: #FFFFFF; }
.sx-tile__foot svg { fill: currentColor; vertical-align: -1px; margin-left: 2px; }
.sx-tile--link:hover .sx-tile__reveal, .sx-tile--link:focus-visible .sx-tile__reveal { clip-path: inset(0 0% 0 0); }

/* Full-page fade while a brand tile is hovered */
.sx-fade { transition: opacity 0.2s ease; margin-top: 0 !important; margin-bottom: 0 !important; }
body.sx-tile-hover .sx-fade { opacity: 0.32; }

/* --- contact --- */
.sx-contact {
  scroll-margin-top: 88px;
  padding: clamp(48px, 8vw, 88px) var(--sx-pad-x) !important;
  align-items: center !important; gap: 28px !important;
  margin-top: 0 !important; margin-bottom: 0 !important;
}
.sx-contact__title { font-size: clamp(28px, 4vw, 36px); margin: 0 0 8px !important; }
.sx-contact__note { font-size: 15px !important; color: var(--wp--preset--color--sx-mid-blue); }
.sx-contact__btn .wp-block-button__link {
  background: var(--wp--preset--color--sx-gold) !important;
  color: var(--wp--preset--color--sx-ink) !important;
  font-size: 16px !important;
  letter-spacing: 0.03em;
  padding: 16px clamp(20px, 4vw, 40px) !important;
  border-radius: 3px;
  font-weight: 600;
  white-space: nowrap;
}
.sx-contact__btn .wp-block-button__link:hover {
  background: var(--wp--preset--color--sx-gold-light) !important;
  color: var(--wp--preset--color--sx-ink) !important;
}

/* --- footer --- */
.sx-footer {
  padding-left: var(--sx-pad-x) !important; padding-right: var(--sx-pad-x) !important;
  align-items: center !important; gap: 12px !important;
  margin-top: 0 !important; margin-bottom: 0 !important;
}
.sx-footer-text {
  font-family: var(--wp--preset--font-family--inter) !important;
  font-size: 14px !important;
  color: var(--wp--preset--color--sx-muted) !important;
  margin: 0 !important;
}
.sx-footer img { width: 16px; height: 16px; opacity: 0.7; }

/* --- breakpoints --- */
@media (max-width: 900px) {
  .sx-hero { grid-template-columns: 1fr !important; }
  .sx-hero__emblem img { display: none; }
  .sx-section { grid-template-columns: 1fr !important; gap: 22px; }
}

/* Placeholder copy styling — remove once real copy is in */
.sx-placeholder { font-style: italic; }