/* ============================================================
   SKS Size Guide — shared stylesheet for all size/measurement
   guide pages (kilt, jacket, waistcoat, trousers, etc.).

   Load path: sections/main-page.liquid detects `class="sks-guide"`
   anywhere in `page.content` and conditionally injects this file's
   stylesheet_tag. Guide HTML in page bodies is now pure markup —
   no <style> blocks, no @import fonts, no duplication across 37
   pages.

   All font-sizes use px (not rem) because Dawn sets
   html { font-size: 62.5% } → 1rem = 10px, which would render
   every rem-based size at 62.5% of intended. px values are
   theme-independent.

   Note the scope selector is `.sks-guide` (NOT `.sks-guide-page`,
   which belongs to the separate clan-guides stylesheet).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Inter:wght@400;500;600&display=swap');

.sks-guide {
  --green: #14342a;
  --green-2: #1d4a3a;
  --parch: #f5f3ed;
  --parch-2: #ece7d8;
  --ink: #23231f;
  --muted: #5f5e55;
  --gold: #b08842;
  --thistle: #6f5d80;
  --hair: #d8d2c2;
  --c-waist: #2f6fb0;
  --c-hip: #c0392b;
  --c-chest: #2e8b57;
  --c-len: #b08842;
  --c-aux: #6f5d80;
  --display: "Marcellus", Georgia, serif;
  --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  color: var(--ink);
  font-family: var(--body);
  background: var(--parch);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  margin: 0 auto;
  max-width: 1080px;
  padding: clamp(20px, 4vw, 48px) clamp(16px, 4vw, 40px) 56px;
  box-sizing: border-box;
}
.sks-guide * { box-sizing: border-box; }

.sks-guide__eyebrow {
  font-size: 12px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin: 0 0 10px;
}
.sks-guide h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(32px, 5vw, 48px);
  line-height: 1.08;
  margin: 0 0 14px;
  color: var(--green);
}
.sks-guide__lede {
  max-width: 62ch;
  margin: 0;
  color: var(--muted);
  font-size: 16px;
}

/* Tartan sett divider. Dawn has a global `div:empty { display:none }`
   rule that would hide the empty divider — we defeat it with
   display:block!important + &nbsp; child (hidden via text-indent). */
.sks-guide__sett {
  display: block !important;
  height: 8px;
  min-height: 8px;
  margin: 24px 0 30px;
  border-radius: 2px;
  background:
    repeating-linear-gradient(90deg, var(--green) 0 22px, transparent 22px 30px),
    repeating-linear-gradient(90deg, transparent 0 26px, var(--gold) 26px 28px, transparent 28px 52px),
    var(--green-2);
  opacity: .95;
  text-indent: -9999px;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
}

.sks-guide__rules {
  display: grid;
  gap: 1px;
  background: var(--hair);
  border: 1px solid var(--hair);
  border-radius: 10px;
  overflow: hidden;
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: 34px;
}
.sks-guide__rule { background: #fbfaf6; padding: 15px 16px; }
.sks-guide__rule b {
  display: block;
  font-family: var(--display);
  color: var(--green);
  font-size: 16px;
  margin-bottom: 3px;
  font-weight: 400;
}
.sks-guide__rule span { font-size: 14px; color: var(--muted); }
@media (max-width: 720px) { .sks-guide__rules { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 430px) { .sks-guide__rules { grid-template-columns: 1fr; } }

.sks-guide__grid {
  display: grid;
  grid-template-columns: minmax(0, 400px) 1fr;
  gap: clamp(24px, 4vw, 46px);
  align-items: start;
}
@media (max-width: 820px) { .sks-guide__grid { grid-template-columns: 1fr; } }

.sks-guide__figwrap {
  position: sticky;
  top: 16px;
  background: #fff;
  border: 1px solid var(--parch-2);
  border-radius: 12px;
  padding: 18px;
}
@media (max-width: 820px) { .sks-guide__figwrap { position: static; } }
.sks-guide__figwrap svg { width: 100%; height: auto; display: block; }
.sks-guide__figcap { font-size: 13px; color: var(--muted); text-align: center; margin: 10px 4px 0; }

.sks-guide h2 {
  font-family: var(--display);
  font-weight: 400;
  color: var(--green);
  font-size: 25px;
  margin: 0 0 4px;
}
.sks-guide__intro {
  color: var(--muted);
  margin: 0 0 22px;
  font-size: 15px;
  max-width: 58ch;
}
.sks-guide__steps { list-style: none; margin: 0; padding: 0; }
.sks-guide__step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--parch-2);
}
.sks-guide__step:first-child { border-top: 0; }
.sks-guide__badge {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 15px;
  color: #fff;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35);
}
.sks-guide__step h3 {
  margin: 2px 0 3px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.sks-guide__tag {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--hair);
  border-radius: 4px;
  padding: 1px 6px;
  font-weight: 500;
}
.sks-guide__step p { margin: 0; color: var(--muted); font-size: 15px; }

.b-waist { background: var(--c-waist); }
.b-hip   { background: var(--c-hip); }
.b-chest { background: var(--c-chest); }
.b-len   { background: var(--c-len); }
.b-aux   { background: var(--c-aux); }

.sks-guide__note {
  margin-top: 22px;
  border-left: 3px solid var(--gold);
  background: #fff;
  padding: 14px 18px;
  border-radius: 0 8px 8px 0;
  font-size: 14px;
}
.sks-guide__note strong { color: var(--green); }

.sks-guide__tablewrap { margin-top: 24px; overflow-x: auto; }
.sks-guide table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 380px;
}
.sks-guide caption {
  font-family: var(--display);
  color: var(--green);
  font-size: 18px;
  text-align: left;
  margin-bottom: 10px;
}
.sks-guide th,
.sks-guide td {
  text-align: left;
  padding: 9px 12px;
  border-bottom: 1px solid var(--parch-2);
}
.sks-guide thead th {
  background: var(--green);
  color: #fff;
  font-weight: 500;
  border-bottom: 0;
  font-size: 13px;
}
.sks-guide tbody tr:nth-child(even) { background: #faf8f2; }

.sks-guide__cta {
  margin-top: 30px;
  padding: 24px;
  background: var(--green);
  border-radius: 12px;
  text-align: center;
}
.sks-guide__cta p { margin: 0 0 12px; color: #d9d3c4; font-size: 15px; }
.sks-guide__cta a {
  display: inline-block;
  background: var(--gold);
  color: #23231f;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
  padding: 13px 30px;
  border-radius: 8px;
  transition: transform .15s ease;
}
.sks-guide__cta a:hover { transform: translateY(-1px); }
.sks-guide__cta a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.sks-guide__block {
  margin-top: 34px;
  padding-top: 6px;
  border-top: 1px solid var(--parch-2);
}
.sks-guide__block:first-of-type {
  margin-top: 22px;
  border-top: 0;
  padding-top: 0;
}

/* Long-form article styling (for the style / how-to-wear guides). */
.sks-article { max-width: 66ch; }
.sks-article p { color: var(--muted); font-size: 16px; margin: 0 0 16px; }
.sks-article h2 {
  font-family: var(--display);
  color: var(--green);
  font-size: 24px;
  font-weight: 400;
  margin: 30px 0 10px;
}
.sks-article h3 {
  font-family: var(--display);
  color: var(--green);
  font-size: 20px;
  font-weight: 400;
  margin: 24px 0 8px;
}
.sks-article h4 {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  margin: 18px 0 6px;
}
.sks-article b,
.sks-article strong { color: var(--ink); }
.sks-article ul,
.sks-article ol {
  color: var(--muted);
  font-size: 16px;
  margin: 0 0 16px;
  padding-left: 22px;
}
.sks-article li { margin: 0 0 7px; }
.sks-article img {
  display: block;
  max-width: 320px;
  width: 100%;
  height: auto;
  margin: 22px auto;
  border-radius: 12px;
  border: 1px solid var(--parch-2);
}

@media (prefers-reduced-motion: reduce) {
  .sks-guide * { transition: none !important; }
}

/* ============================================================
   Mobile refinements — kick in below 720px.
   Fixes two loud problems on phones:
   1. Tall SVGs (viewBox 360×520 for trousers etc.) rendering
      at ~half viewport height because width:100% + auto height
      preserves aspect ratio. Capped via max-height + width:auto.
   2. Sizing tables extending beyond viewport width. Made compact
      (smaller font/padding) so most tables fit without scrolling,
      and added a subtle visual cue when scroll is still needed.
   ============================================================ */
@media (max-width: 720px) {
  .sks-guide { padding: clamp(16px, 4vw, 28px) clamp(12px, 4vw, 20px) 40px; }
  .sks-guide__figwrap { padding: 12px; }
  .sks-guide__figwrap svg {
    width: auto;
    max-width: 100%;
    max-height: 380px;
    height: auto;
    margin: 0 auto;
  }
  .sks-guide__figcap { font-size: 12px; }
  .sks-guide table {
    font-size: 12.5px;
    min-width: 0;
  }
  .sks-guide caption { font-size: 16px; }
  .sks-guide th,
  .sks-guide td { padding: 7px 8px; }
  .sks-guide thead th { font-size: 11.5px; }
  /* Smooth momentum-scroll on iOS if a table still overflows.
     Previously had a right-edge gradient here as a "swipe to see more"
     cue, but it also faded across the dark green header when the table
     already fit — visible white smudge with no purpose. Removed. */
  .sks-guide__tablewrap { -webkit-overflow-scrolling: touch; }
}

/* Extra-narrow phones (≤ 430px): shrink SVG height further and
   make table cells minimal so they fit in the viewport. */
@media (max-width: 430px) {
  .sks-guide__figwrap svg { max-height: 320px; }
  .sks-guide table { font-size: 12px; }
  .sks-guide th,
  .sks-guide td { padding: 6px 6px; }
}