/* ═══════════════════════════════════════════════════
   SAMRO STUDIOS · the one header and the one footer
   Markup: scripts/_chrome.mjs. Behaviour: /pages/chrome.js.
   Every selector starts with .sx- so this file can load on any page next to
   that page's own stylesheet. The look is the share image: black, big
   type, one gold accent, the blue of the orb for the button.
   Zero em dashes.
   ═══════════════════════════════════════════════════ */

.sx-top, .sx-foot, .sx-skip {
  --sx-ink: #0C0D10;
  --sx-ivory: #F5F3EE;
  --sx-dim: rgba(245, 243, 238, 0.72);
  --sx-faint: rgba(245, 243, 238, 0.5);
  --sx-hair: rgba(245, 243, 238, 0.14);
  --sx-gold: #C29C4B;
  --sx-blue: #0A6FE8;
  --sx-blue-hover: #0961CC;
  --sx-font: 'General Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-family: var(--sx-font);
  -webkit-font-smoothing: antialiased;
}
.sx-top *, .sx-foot * { box-sizing: border-box; }

.sx-skip {
  position: absolute; left: -9999px; top: 0; z-index: 1000;
  padding: 12px 18px; background: var(--sx-ivory); color: var(--sx-ink); font-weight: 600; text-decoration: none;
}
.sx-skip:focus { left: 8px; top: 8px; }

.sx-in { width: 100%; max-width: 1200px; margin: 0 auto; padding-inline: clamp(18px, 4vw, 48px); }

/* ── header ─────────────────────────────────────────── */
.sx-top { position: sticky; top: 0; z-index: 900; background: var(--sx-ink); color: var(--sx-ivory); }
.sx-nav { border-bottom: 1px solid var(--sx-hair); }
.sx-nav .sx-in { display: flex; align-items: center; gap: 20px; min-height: 68px; }

.sx-logo {
  display: inline-flex; align-items: baseline; gap: 0.3em; flex: none;
  font-size: 15px; letter-spacing: 0.22em; line-height: 1; text-transform: uppercase; text-decoration: none;
  color: var(--sx-ivory) !important;
}
.sx-logo b { font-weight: 700; }
.sx-logo i { font-style: normal; font-weight: 500; color: var(--sx-gold); }

.sx-links { display: none; align-items: center; gap: 4px; margin: 0 0 0 auto; padding: 0; list-style: none; }
.sx-links > li { position: relative; margin: 0; padding: 0; list-style: none; }
.sx-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 12px; border: 0; border-radius: 8px; background: none; cursor: pointer;
  font: 500 15px/1 var(--sx-font); color: var(--sx-dim) !important; text-decoration: none;
  transition: color 160ms, background 160ms;
}
.sx-link:hover, .sx-link[aria-expanded='true'] { color: var(--sx-ivory) !important; background: rgba(245, 243, 238, 0.06); }
.sx-link[aria-current='page'], .sx-drop__btn[data-in='1'] { color: var(--sx-ivory) !important; }
.sx-link:focus-visible, .sx-cta:focus-visible, .sx-burger:focus-visible, .sx-drop__a:focus-visible { outline: 2px solid #7CC4FF; outline-offset: 2px; }
.sx-lang { letter-spacing: 0.06em; font-size: 13px; }
.sx-chev { transition: transform 160ms; }
.sx-drop__btn[aria-expanded='true'] .sx-chev { transform: rotate(180deg); }

.sx-drop__panel {
  position: absolute; top: calc(100% + 8px); left: -8px; min-width: 240px;
  display: grid; gap: 2px; padding: 8px;
  background: #16171B; border: 1px solid var(--sx-hair); border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity 140ms, transform 140ms, visibility 140ms;
}
.sx-drop:focus-within .sx-drop__panel,
.sx-drop__btn[aria-expanded='true'] + .sx-drop__panel { opacity: 1; visibility: visible; transform: none; }
[data-sx-js] .sx-drop:focus-within .sx-drop__btn[aria-expanded='false'] + .sx-drop__panel { opacity: 0; visibility: hidden; }
.sx-drop__a {
  display: block; padding: 10px 12px; border-radius: 9px;
  font: 500 15px/1.2 var(--sx-font); color: var(--sx-dim) !important; text-decoration: none;
}
.sx-drop__a:hover, .sx-drop__a[aria-current='page'] { color: var(--sx-ivory) !important; background: rgba(245, 243, 238, 0.07); }

.sx-cta {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  min-height: 42px; padding: 0 18px; margin-left: auto; border-radius: 999px;
  background: var(--sx-blue); color: #fff !important; text-decoration: none;
  font: 600 14px/1 var(--sx-font); white-space: nowrap;
  transition: background 160ms;
}
.sx-cta:hover { background: var(--sx-blue-hover); }

.sx-burger {
  display: inline-grid; place-content: center; gap: 6px; flex: none;
  width: 44px; height: 44px; margin-right: -10px; padding: 0; border: 0; background: none; cursor: pointer;
}
.sx-burger span { display: block; width: 22px; height: 2px; border-radius: 2px; background: var(--sx-ivory); transition: transform 200ms; }
.sx-burger[aria-expanded='true'] span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.sx-burger[aria-expanded='true'] span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

.sx-menu { display: none; max-height: calc(100vh - 68px); max-height: calc(100dvh - 68px); overflow-y: auto; border-bottom: 1px solid var(--sx-hair); }
.sx-menu.is-open { display: block; }
.sx-menu__in { display: flex; flex-direction: column; gap: 4px; padding: 16px clamp(18px, 4vw, 48px) 28px; }
.sx-menu__big { padding: 12px 0; font: 600 22px/1.2 var(--sx-font); color: var(--sx-ivory) !important; text-decoration: none; letter-spacing: -0.01em; }
.sx-menu__h { margin: 12px 0 4px; font: 600 12px/1 var(--sx-font); letter-spacing: 0.14em; text-transform: uppercase; color: var(--sx-gold); }
.sx-menu__trades { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 16px; padding-bottom: 8px; }
.sx-menu__trades a { padding: 9px 0; font: 500 16px/1.25 var(--sx-font); color: var(--sx-dim) !important; text-decoration: none; }
.sx-menu__trades a[aria-current='page'] { color: var(--sx-ivory) !important; }
.sx-cta--menu { margin: 16px 0 0; min-height: 54px; font-size: 16px; }
.sx-menu__lang { margin-top: 14px; font: 500 15px/1 var(--sx-font); color: var(--sx-dim) !important; }

@media (max-width: 520px) {
  .sx-nav .sx-cta { display: none; }
  .sx-burger { margin-left: auto; }
}
@media (min-width: 1000px) {
  .sx-links { display: flex; }
  .sx-cta { margin-left: 12px; }
  .sx-burger, .sx-menu, .sx-menu.is-open { display: none; }
}

/* ── footer ─────────────────────────────────────────── */
.sx-foot { background: var(--sx-ink); color: var(--sx-dim); padding: clamp(48px, 7vw, 80px) 0 28px; font-size: 15px; line-height: 1.5; }
.sx-foot a { color: var(--sx-dim) !important; text-decoration: none; }
.sx-foot a:hover { color: var(--sx-ivory) !important; }
.sx-foot__brand { max-width: 380px; margin-bottom: 36px; }
.sx-foot__tag { margin: 18px 0 14px; color: var(--sx-dim); font-size: 15px; }
.sx-foot__serve { margin: 0; font: 600 13px/1.3 var(--sx-font); letter-spacing: 0.1em; text-transform: uppercase; color: var(--sx-gold); }
.sx-foot__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 24px; }
.sx-foot__col { display: flex; flex-direction: column; gap: 9px; }
.sx-foot__h { margin: 0 0 4px; font: 600 12px/1 var(--sx-font); letter-spacing: 0.14em; text-transform: uppercase; color: var(--sx-ivory); }
.sx-foot__bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px;
  margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--sx-hair); font-size: 13.5px; color: var(--sx-faint);
}
.sx-foot__legal { display: flex; flex-wrap: wrap; gap: 8px 18px; }
@media (min-width: 900px) {
  .sx-foot .sx-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); column-gap: 56px; }
  .sx-foot__brand { margin-bottom: 0; }
  .sx-foot__cols { grid-template-columns: repeat(3, 1fr); }
  .sx-foot__bottom { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .sx-drop__panel, .sx-chev, .sx-burger span, .sx-link, .sx-cta { transition: none; }
}