/**
 * SOCKAKI ΜΙΤΑΠ SHOP — Typography System
 *
 * Core UI / Body:    Fira Sans
 * Display / Campaign: Play Bold
 *
 * Greek readability is mandatory.
 * Do not use Play for body, forms, or dense UI.
 *
 * Source: TYPOGRAPHY_SYSTEM_v1.md
 */

/* ────────────────────────────────────────────────
   WOODMART VARIABLE BRIDGE

   Woodmart drives its own typography through --wd-* custom
   properties (see woodmart/css/parts/base.css, which sets
   `body { font-family: var(--wd-text-font) }` and
   `h1..h6 { font-family: var(--wd-title-font) }`).

   Re-pointing those variables at the Sockaki tokens propagates the
   brand fonts through every Woodmart component — header, footer,
   widgets, product loops — without a single !important and without
   writing selectors that duplicate or fight the parent theme.

   IMPORTANT — why `html:root` and not plain `:root`:
   Woodmart prints its theme-settings variables in an INLINE
   <style id="wd-style-theme_settings_default-inline-css"> block in
   <head>, which lands AFTER this file's <link>. A plain `:root`
   selector has identical specificity (0,1,0) and would therefore LOSE
   on source order. `html:root` scores (0,1,1) and wins cleanly, so we
   still avoid !important entirely (MASTER.md §1.2).
──────────────────────────────────────────────── */
html:root {
  --wd-text-font:        var(--sk-font-body);
  --wd-title-font:       var(--sk-font-body);
  --wd-text-font-size:   var(--sk-fs-base);   /* 16px — 14px is small for Greek */
  --wd-text-font-weight: var(--sk-fw-regular);
  --wd-title-font-weight: var(--sk-fw-bold);
  --wd-text-color:       var(--sk-text);
  --wd-title-color:      var(--sk-text);

  /*
   * Keyboard focus ring.
   * Woodmart owns focus styling via
   *   :is(a,button,input[type=submit],...):focus-visible {
   *     outline: var(--wd-otl-width) var(--wd-otl-style) var(--wd-otl-color)
   *   }
   * which rendered a 2px DOTTED BLACK ring (verified with CDP
   * getMatchedStylesForNode). Because that rule is later in the cascade at
   * equal specificity, overriding it with our own selector would require
   * !important. Re-pointing its variables is the supported, conflict-free
   * fix and upgrades focus visibility site-wide, including Woodmart's own
   * header/menu/cart controls.
   */
  --wd-otl-width: 2px;
  --wd-otl-style: solid;
  --wd-otl-color: var(--sk-border-focus);
}

/* ────────────────────────────────────────────────
   Base body typography
──────────────────────────────────────────────── */
body {
  font-family: var(--sk-font-body);
  font-weight: var(--sk-fw-regular);
  font-size: var(--sk-fs-base);
  line-height: var(--sk-lh-normal);
  color: var(--sk-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ────────────────────────────────────────────────
   Headings — default Fira Sans
──────────────────────────────────────────────── */
/*
 * Headings use weight 700 (bold), not 800.
 * Weight 800 is NOT loaded (see functions.php): the creative handoff
 * permits 800 "only where actually used", and requesting an unloaded
 * weight forces the browser to synthesise a faux-bold, which degrades
 * Greek glyph shapes in particular.
 */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--sk-font-body);
  font-weight: var(--sk-fw-bold);
  line-height: var(--sk-lh-tight);
  color: var(--sk-text);
  margin-top: 0;
  margin-bottom: var(--sk-space-4);
}

h1 {
  font-size: var(--sk-fs-h1);
  font-weight: var(--sk-fw-bold);
  letter-spacing: -0.02em;
  line-height: 1.05;
}

h2 {
  font-size: var(--sk-fs-h2);
  font-weight: var(--sk-fw-bold);
  letter-spacing: -0.01em;
}

h3 {
  font-size: var(--sk-fs-h3);
  font-weight: var(--sk-fw-bold);
}

h4 {
  font-size: var(--sk-fs-h4);
  font-weight: var(--sk-fw-semibold);
}

h5, h6 {
  font-size: var(--sk-fs-base);
  font-weight: var(--sk-fw-semibold);
}

/* ────────────────────────────────────────────────
   Display / campaign typography — Play Bold
   Use selectively for hero/promo/short headings
──────────────────────────────────────────────── */
.sk-display,
.sk-hero-title,
.sk-campaign-heading {
  font-family: var(--sk-font-display);
  font-weight: var(--sk-fw-bold);
  line-height: var(--sk-lh-tight);
  letter-spacing: -0.01em;
}

.sk-hero-title {
  font-size: var(--sk-fs-hero);
  line-height: 1.0;
}

/* ────────────────────────────────────────────────
   Text modifiers
──────────────────────────────────────────────── */
.sk-text-sm {
  font-size: var(--sk-fs-sm);
}

.sk-text-xs {
  font-size: var(--sk-fs-xs);
}

.sk-text-lg {
  font-size: var(--sk-fs-lg);
}

.sk-text-muted {
  color: var(--sk-text-muted);
}

.sk-text-subtle {
  color: var(--sk-text-subtle);
}

.sk-fw-medium {
  font-weight: var(--sk-fw-medium);
}

.sk-fw-semibold {
  font-weight: var(--sk-fw-semibold);
}

.sk-fw-bold {
  font-weight: var(--sk-fw-bold);
}

/* ────────────────────────────────────────────────
   Links
──────────────────────────────────────────────── */
/* ────────────────────────────────────────────────
   Links

   Link COLOUR is deliberately scoped to editorial/content areas.
   A global `a { color }` rule would repaint every Woodmart header
   icon, menu item, breadcrumb and mini-cart link, which fights the
   theme and invites !important escalation (MASTER.md §1.2).

   Hover previously used --sk-brand-aqua (#8ad3d4) at 1.7:1, which
   failed WCAG AA. It now uses --sk-aqua-interactive (6.82:1).
──────────────────────────────────────────────── */
.sk-prose a,
.entry-content a,
.woocommerce-store-notice a {
  color: var(--sk-extended-purple);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  transition: color var(--sk-transition-fast);
}

.sk-prose a:hover,
.entry-content a:hover,
.woocommerce-store-notice a:hover {
  color: var(--sk-aqua-interactive);
}

/*
 * Focus-visible IS global and intentionally so: keyboard operability is
 * an accessibility baseline that must never depend on context.
 * It only paints on keyboard focus, so it does not fight mouse styling.
 */
/*
 * Woodmart's base.css contains `a:is(:hover,:focus,:active){outline:none}`
 * at specificity (0,2,0). The doubled `:focus-visible:focus-visible`
 * raises these rules to (0,2,0)+ and, being later in the cascade, wins —
 * restoring a visible keyboard focus ring with no !important.
 */
a:focus-visible:focus-visible,
button:focus-visible:focus-visible,
[tabindex]:focus-visible:focus-visible,
summary:focus-visible:focus-visible {
  outline: 2px solid var(--sk-border-focus);
  outline-offset: 2px;
  border-radius: var(--sk-radius-sm);
}

/* ────────────────────────────────────────────────
   Lists — scoped to prose only.
   Global ul/ol/li rules would indent and space Woodmart's
   navigation menus, which are built from <ul> elements.
──────────────────────────────────────────────── */
.sk-prose ul,
.sk-prose ol,
.entry-content ul,
.entry-content ol {
  margin: 0 0 var(--sk-space-4);
  padding-left: var(--sk-space-6);
}

.sk-prose li,
.entry-content li {
  margin-bottom: var(--sk-space-2);
}

/* ────────────────────────────────────────────────
   Paragraphs
──────────────────────────────────────────────── */
p {
  margin: 0 0 var(--sk-space-4);
  line-height: var(--sk-lh-normal);
}

p.lead {
  font-size: var(--sk-fs-lg);
  line-height: var(--sk-lh-relaxed);
}

/* ────────────────────────────────────────────────
   Strong / Emphasis
──────────────────────────────────────────────── */
strong, b {
  font-weight: var(--sk-fw-bold);
}

em, i {
  font-style: italic;
}

/* ────────────────────────────────────────────────
   Small / Legal text
──────────────────────────────────────────────── */
small,
.sk-legal {
  font-size: var(--sk-fs-sm);
  color: var(--sk-text-muted);
}

/* ────────────────────────────────────────────────
   Blockquote
──────────────────────────────────────────────── */
blockquote {
  margin: var(--sk-space-6) 0;
  padding: var(--sk-space-4) var(--sk-space-6);
  border-left: var(--sk-border-width-lg) solid var(--sk-brand-aqua);
  font-style: italic;
  color: var(--sk-text-muted);
}

/* ────────────────────────────────────────────────
   Code / Pre
──────────────────────────────────────────────── */
code, kbd, samp {
  font-family: "SF Mono", "Monaco", "Consolas", monospace;
  font-size: 0.9em;
  background: var(--sk-surface-alt);
  padding: 0.125em 0.375em;
  border-radius: var(--sk-radius-sm);
}

pre {
  font-family: "SF Mono", "Monaco", "Consolas", monospace;
  background: var(--sk-surface-alt);
  padding: var(--sk-space-4);
  border-radius: var(--sk-radius);
  overflow-x: auto;
  margin: var(--sk-space-6) 0;
}

pre code {
  background: none;
  padding: 0;
}