/*
Theme Name: StyleGauge
Theme URI: https://stylegauge.com
Author: StyleGauge
Description: Fashion discovery and price comparison platform for men and boys. Block theme built on the StyleGauge Instrument design system.
Version: 0.1.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: stylegauge
*/

/* ---- base ------------------------------------------------ */
.sg-sr {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

:where(.sg-util__btn, .sg-btn, .sg-input):focus-visible {
  outline: 2px solid var(--sg-gold);
  outline-offset: 2px;
}

/* ---- logo lockup ----------------------------------------- */
.sg-lockup { display: inline-flex; flex-direction: column; gap: 3px; text-decoration: none; padding: 16px 0; }
.sg-lockup__word {
  font-size: 21px; font-weight: 900; letter-spacing: -0.01em;
  line-height: 1; text-transform: uppercase;
}
.sg-lockup__word--lg { font-size: 24px; }
.sg-lockup__a { color: #FFFFFF; }
.sg-lockup__b { color: var(--sg-gold); }
.sg-lockup__tag {
  font-size: 8.5px; font-weight: 600; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--sg-slate-light);
}

/* ---- header nav ------------------------------------------ */
header .wp-block-navigation {
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
}
header .wp-block-navigation a { color: #FFFFFF; text-decoration: none; }
header .wp-block-navigation a:hover { color: var(--sg-gold); }
header .wp-block-navigation .current-menu-item a {
  box-shadow: inset 0 -2px 0 0 var(--sg-gold);
  padding-bottom: 4px;
}

/* ---- header utilities ------------------------------------ */
.sg-util { display: flex; align-items: center; gap: 6px; }
.sg-util__btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: var(--sg-hit-min); height: var(--sg-hit-min);
  background: none; border: 0; border-radius: var(--sg-radius-full);
  color: #FFFFFF; cursor: pointer; text-decoration: none;
  transition: background var(--sg-dur-fast) var(--sg-ease);
}
.sg-util__btn:hover { background: rgba(255, 255, 255, 0.08); }
.sg-util__btn svg {
  width: 19px; height: 19px; fill: none;
  stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.sg-util__count {
  position: absolute; top: 7px; right: 6px;
  min-width: 16px; height: 16px; padding: 0 4px;
  display: flex; align-items: center; justify-content: center;
  background: var(--sg-gold); color: var(--sg-nav);
  border-radius: var(--sg-radius-full);
  font-size: 10px; font-weight: 700; line-height: 1;
}

/* ---- footer: price alert band ---------------------------- */
.sg-alertband {
  background: var(--sg-cream);
  border-top: var(--sg-border);
  padding: var(--sg-space-13) var(--sg-space-11) var(--sg-space-10);
}
.sg-alertband__inner {
  max-width: var(--sg-wide, 1440px); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sg-space-12); flex-wrap: wrap;
}
.sg-alertband__title {
  margin: 0 0 6px; font-size: var(--sg-display-lg); font-weight: 900;
  letter-spacing: -0.02em; line-height: 1.05; text-transform: uppercase; color: var(--sg-ink);
}
.sg-alertband__sub { margin: 0; font-size: var(--sg-body-size); color: var(--sg-body); }
.sg-alertband__form { display: flex; gap: var(--sg-space-3); flex-wrap: wrap; }
.sg-alertband__fine {
  max-width: var(--sg-wide, 1440px); margin: var(--sg-space-5) auto 0;
  font-size: var(--sg-body-sm); color: var(--sg-slate);
}
.sg-input {
  height: 48px; min-width: 260px; padding: 0 14px;
  border: var(--sg-border); border-radius: var(--sg-radius-md);
  background: var(--sg-white); color: var(--sg-ink);
  font-family: var(--sg-font); font-size: var(--sg-body-size);
}
.sg-input::placeholder { color: var(--sg-mute); }
.sg-btn {
  height: 48px; padding: 0 26px; border: 0; border-radius: var(--sg-radius-md);
  background: var(--sg-ink); color: var(--sg-white); cursor: pointer;
  font-family: var(--sg-font); font-size: var(--sg-button);
  font-weight: var(--sg-button-w); letter-spacing: var(--sg-button-ls); text-transform: uppercase;
}
.sg-btn:hover { background: #000000; }

/* ---- footer: dark body ----------------------------------- */
.sg-foot {
  background: var(--sg-nav); color: var(--sg-slate-light);
  padding: var(--sg-space-15) var(--sg-space-11) var(--sg-space-9);
  font-size: var(--sg-body-sm);
}
.sg-foot__cols {
  max-width: var(--sg-wide, 1440px); margin: 0 auto;
  display: grid; grid-template-columns: 1.6fr repeat(5, 1fr);
  gap: var(--sg-space-12) var(--sg-space-9);
}
.sg-foot__brand { display: flex; flex-direction: column; gap: 4px; }
.sg-foot__blurb { margin: var(--sg-space-5) 0 0; max-width: 34ch; line-height: 1.6; }
.sg-foot__col h3 {
  margin: 0 0 var(--sg-space-5); color: #FFFFFF;
  font-size: var(--sg-label); font-weight: 700;
  letter-spacing: var(--sg-label-ls); text-transform: uppercase;
}
.sg-foot__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.sg-foot__col a { color: var(--sg-slate-light); text-decoration: none; }
.sg-foot__col a:hover { color: var(--sg-gold); text-decoration: underline; }

.sg-swatches li a { display: flex; align-items: center; gap: 9px; }
.sg-swatches i {
  width: 15px; height: 15px; border-radius: var(--sg-radius-full);
  background: var(--sw); border: 1px solid rgba(255, 255, 255, 0.22); flex: 0 0 auto;
}

/* ---- footer: trust + disclosure -------------------------- */
.sg-foot__trust {
  max-width: var(--sg-wide, 1440px); margin: var(--sg-space-13) auto 0;
  padding-top: var(--sg-space-10); border-top: 1px solid var(--sg-line-dark);
}
.sg-foot__trustlabel {
  margin: 0 0 var(--sg-space-5); color: #FFFFFF;
  font-size: var(--sg-label); font-weight: 700;
  letter-spacing: var(--sg-label-ls); text-transform: uppercase;
}
.sg-foot__logos {
  list-style: none; margin: 0 0 var(--sg-space-9); padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--sg-space-3);
}
.sg-foot__logos li {
  height: 30px; padding: 0 13px; display: flex; align-items: center;
  border: 1px solid var(--sg-line-dark); border-radius: var(--sg-radius-xs);
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--sg-slate-light);
}
.sg-foot__disc { margin: 0 0 var(--sg-space-4); max-width: 78ch; line-height: 1.65; }
.sg-foot__assoc {
  margin: 0 0 var(--sg-space-4); color: #FFFFFF; font-weight: 600; max-width: 78ch;
}
.sg-foot__tm { margin: 0; font-size: 11.5px; color: var(--sg-slate-light); opacity: 0.85; max-width: 90ch; line-height: 1.6; }

/* ---- footer: legal bar ----------------------------------- */
.sg-foot__legal {
  max-width: var(--sg-wide, 1440px); margin: var(--sg-space-10) auto 0;
  padding-top: var(--sg-space-8); border-top: 1px solid var(--sg-line-dark);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sg-space-9); flex-wrap: wrap;
}
.sg-foot__copy { margin: 0; font-size: 12px; }
.sg-foot__legallinks {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--sg-space-9); font-size: 12px;
}
.sg-foot__legallinks a { color: var(--sg-slate-light); text-decoration: none; }
.sg-foot__legallinks a:hover { color: var(--sg-gold); text-decoration: underline; }
.sg-foot__legallinks a.is-key { color: #FFFFFF; font-weight: 600; text-decoration: underline; }

/* ---- responsive ------------------------------------------ */
@media (max-width: 1279px) {
  .sg-foot__cols { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 767px) {
  .sg-foot__cols { grid-template-columns: 1fr 1fr; gap: var(--sg-space-10) var(--sg-space-8); }
  .sg-foot, .sg-alertband { padding-left: var(--sg-space-8); padding-right: var(--sg-space-8); }
  .sg-alertband__inner { gap: var(--sg-space-9); }
  .sg-input { min-width: 0; flex: 1 1 200px; }
  .sg-foot__legal { flex-direction: column; align-items: flex-start; gap: var(--sg-space-5); }
}