/* ============================================================
   SOUTHWEST SYSTEMS — Shared theme
   Single source of truth for fonts, tokens, base styles, motion
   utilities, and print rules. Linked by index.html (single-page
   site) and index-print.html (stacked full-site PDF build).
   ============================================================ */

/* ---------- Fonts (self-hosted, paths relative to this file in /components) ---------- */
@font-face {
  font-family: "Exo 2";
  src: url("../fonts/exo2.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Rajdhani";
  src: url("../fonts/rajdhani.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gridink";
  src: url("../fonts/gridink.ttf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "M PLUS Code Latin";
  src: url("../fonts/mpluscodelatin.ttf") format("truetype");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}
/* Gridink is a DEMO font that stubs several punctuation glyphs with a "DEMO"
   .notdef box (', &, —, $, /, etc.). Re-route just those code points to Exo 2
   via unicode-range so headings keep the brand voice without tofu. Letters,
   digits, space, period, comma, hyphen and parentheses stay in Gridink. */
@font-face {
  font-family: "Gridink";
  src: url("../fonts/exo2.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0021, U+0023, U+0024, U+0025, U+0026, U+0027, U+002A,
                 U+002F, U+003A, U+003B, U+003F, U+0040, U+2013, U+2014,
                 U+2018, U+2019, U+201C, U+201D, U+2026;
}

:root {
  /* ---------- Brand colors (sampled from logo) ---------- */
  --navy-950: #071937;
  --navy-900: #0B2147;
  --navy-800: #0D2956;
  --navy-700: #143A6B;
  --navy-600: #1C4E8C;
  --navy-500: #2A66AE;

  --sky-700: #1E6E97;
  --sky-600: #2889B5;
  --sky-500: #4BA0CB;
  --sky-400: #87C0E5;
  --sky-300: #B2E4FF;
  --sky-200: #CEF2FF;

  --forest-900: #002317;
  --forest-800: #053018;
  --forest-700: #08522F;
  --forest-600: #0B6B3D;
  --forest-500: #1E8A57;

  --white:     #FFFFFF;
  --snow:      #F6F9FC;
  --mist:      #ECF1F7;
  --steel-100: #DCE4EE;
  --steel-200: #C2CEDD;
  --steel-300: #9AAABF;
  --steel-400: #6E8099;
  --steel-500: #4E5E74;
  --steel-600: #354456;
  --steel-700: #21303F;

  /* ---------- Semantic color tokens ---------- */
  --bg:            var(--snow);
  --bg-elevated:   var(--white);
  --bg-sunken:     var(--mist);
  --bg-inverse:    var(--navy-800);
  --bg-tint:       var(--sky-200);

  --fg1:           var(--navy-900);
  --fg2:           var(--steel-600);
  --fg3:           var(--steel-400);
  --fg-inverse:    var(--white);
  --fg-on-navy:    #DCE9F7;

  --accent:        #0063AF;
  --accent-hover:  #055496;
  --accent-soft:   var(--sky-200);
  --accent-2:      var(--forest-600);
  --accent-2-hover:var(--forest-700);

  --border:        var(--steel-100);
  --border-strong: var(--steel-200);
  --ring:          var(--sky-400);

  --success: #1E8A57;
  --warning: #C9821C;
  --danger:  #C0392B;
  --info:    var(--sky-600);

  /* ---------- Applied surface theme ----------
     Finalized values that give the site its look: navy sections,
     bright sky-blue tiles/buttons, light cards. Tokenized here so
     the whole system stays consistent and editable in one place.
     Primary actions (buttons, chips, active pills, avatars) read
     --accent / --accent-hover, which the app overrides from the
     Accent tweak; the defaults below set the resting brand blue. */
  --section-bg:    #0D4178;  /* every page section background (navy)        */
  --eyebrow:       #49A0F2;  /* eyebrow / kicker label color                */
  --on-navy-sub:   #73ABF6;  /* supporting copy on navy section intros      */
  --tile-bg:       #2180D1;  /* icon-tile background                        */
  --tile-fg:       #073A68;  /* glyph color inside an icon tile             */

  /* ---------- Typography ---------- */
  --font-display:  "Gridink", "Rajdhani", system-ui, sans-serif;
  --font-wordmark: "M PLUS Code Latin", "Gridink", system-ui, sans-serif;
  --font-label:    "Rajdhani", "Gridink", system-ui, sans-serif;
  --font-sans:     "Exo 2", system-ui, -apple-system, sans-serif;
  --font-mono:     "M PLUS Code Latin", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --text-xs:   0.78rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.375rem;
  --text-xl:   1.75rem;
  --text-2xl:  2.25rem;
  --text-3xl:  3rem;
  --text-4xl:  3.75rem;
  --text-5xl:  4.75rem;

  --leading-tight: 1.08;
  --leading-snug:  1.25;
  --leading-normal:1.55;
  --leading-relax: 1.7;

  --tracking-display: -0.005em;
  --tracking-eyebrow: 0.14em;
  --tracking-normal:  0;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;

  /* ---------- Spacing / radii / shadow ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10:128px;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(13,41,86,0.06), 0 1px 3px rgba(13,41,86,0.10);
  --shadow-md: 0 4px 10px rgba(13,41,86,0.08), 0 2px 4px rgba(13,41,86,0.06);
  --shadow-lg: 0 12px 28px rgba(13,41,86,0.12), 0 4px 10px rgba(13,41,86,0.08);
  --shadow-xl: 0 28px 60px rgba(13,41,86,0.18), 0 10px 24px rgba(13,41,86,0.10);
  --shadow-glow: 0 0 0 4px rgba(75,160,203,0.18);
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; overflow-x: hidden; }
body { background: var(--section-bg); font-family: var(--font-sans); color: var(--fg1); }
a { text-decoration: none; }
button { font-family: inherit; }

/* ---------- Accessibility ---------- */
/* visible keyboard focus ring on every interactive element */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--sky-400);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
/* skip link: hidden until focused, then pinned top-left */
.ss-skip-link {
  position: fixed; top: 10px; left: 10px; z-index: 200;
  transform: translateY(-160%);
  background: #fff; color: var(--navy-800);
  font-family: var(--font-sans); font-weight: 600; font-size: 15px;
  padding: 11px 18px; border-radius: var(--radius-pill);
  box-shadow: var(--shadow-lg); transition: transform 180ms ease;
}
.ss-skip-link:focus { transform: translateY(0); outline: 3px solid var(--sky-400); outline-offset: 2px; }

/* ---------- Responsive collapses ---------- */
@media (max-width: 880px) {
  .hero-grid { grid-template-columns: 1fr !important; }
  .hero-art { display: none !important; }
  .card-grid-3 { grid-template-columns: 1fr !important; }
  .contact-grid { grid-template-columns: 1fr !important; }
  .service-row { grid-template-columns: auto 1fr !important; }
  .service-price { grid-column: 1 / -1; text-align: left !important; }
  /* Page header (Services/Printing/Gallery/About/Contact): shrink the
     decorative ridge and add bottom room so peaks never sit behind the
     intro text on narrow screens. Desktop layout is unchanged. */
  .ss-pagehead { padding-bottom: 104px !important; }
  .ss-pagehead-ridge { height: 84px !important; bottom: 0 !important; }
}

/* ---------- Motion ---------- */
@keyframes ss-fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.ss-page { animation: ss-fade-up 360ms cubic-bezier(0.22,0.61,0.36,1) both; }

@keyframes ss-breathe { 0%,100% { opacity: 0.78; transform: var(--breathe-t, scale(1)); } 50% { opacity: 1; transform: var(--breathe-t, scale(1.06)); } }
.ss-breathe { animation: ss-breathe 7s ease-in-out infinite; }

@keyframes ss-arc-pulse { 0%,100% { opacity: var(--arc-o, 0.4); } 50% { opacity: calc(var(--arc-o, 0.4) + 0.22); } }
.ss-arc-pulse { animation: ss-arc-pulse 4.5s ease-in-out infinite; }

@keyframes swsFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes swsRise { from { opacity: 0; transform: translateY(14px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes ss-drawer-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* disable all keyframe animation & parallax when motion is off (also handled in JS) */
.ss-motion-off *, .ss-motion-off *::before, .ss-motion-off *::after { animation: none !important; }

/* respect the OS "reduce motion" setting site-wide */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Decorative ---------- */
.ss-grid {
  background-image:
    linear-gradient(rgba(135,192,229,0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(135,192,229,0.10) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(70% 70% at 70% 30%, #000, transparent 75%);
          mask-image: radial-gradient(70% 70% at 70% 30%, #000, transparent 75%);
}

/* keep mountain SVGs from showing seams at the bottom */
section svg { shape-rendering: geometricPrecision; }

/* ---------- Print / PDF — every site page stacked, one sheet each ---------- */
.site-page + .site-page { break-before: page; }

@media print {
  @page { size: landscape; margin: 0.5cm; }
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  html, body { background: #fff !important; }
  /* header is sticky on screen; pin it in normal flow for print */
  .site-page header { position: static !important; backdrop-filter: none !important; }
  /* collapse the full-viewport hero to its content so it doesn't leave a huge gap */
  .site-page > div > section:first-child { min-height: 0 !important; padding-top: 56px !important; padding-bottom: 64px !important; }
  /* don't split cards / steps across a page boundary */
  .card-grid-3 > *, .contact-grid > *, section [style*="border-radius"] { break-inside: avoid; }
}