/* ============================================================
   Jääportit 2026 — token sheet (front-end + editor)
   Loaded by functions.php and add_editor_style().
   Pairs with theme.json — variables here mirror WP presets so
   custom HTML blocks and WooCommerce templates can both use them.
   ============================================================ */

:root {
  /* ---------- Color tokens (raw) ---------- */
  --color-electric-blue: #001FFF;
  --color-deep-navy:     #000B66;
  --color-void:          #000510;
  --color-frost-blue:    #4D6FFF;
  --color-ice:           #99AAFF;
  --color-white:         #FFFFFF;
  --color-mist:          #AAAAAA;
  --color-ember:         #FF2200;
  --color-void-2:        #020a1c;
  --color-void-3:        #050f2a;
  --color-hairline:        rgba(153, 170, 255, 0.12);
  --color-hairline-strong: rgba(153, 170, 255, 0.24);

  /* ---------- Semantic ---------- */
  --bg:           var(--color-void);
  --bg-elev-1:    var(--color-void-2);
  --bg-elev-2:    var(--color-void-3);
  --fg-1:         var(--color-white);
  --fg-2:         var(--color-mist);
  --fg-3:         #6E7A99;

  --accent:       var(--color-electric-blue);
  --accent-hover: var(--color-frost-blue);
  --accent-soft:  var(--color-ice);

  --border:        var(--color-hairline);
  --border-strong: var(--color-hairline-strong);
  --danger:        var(--color-ember);

  /* ---------- Type ---------- */
  --font-display: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'Fira Code', ui-monospace, 'SF Mono', Menlo, monospace;
  /* Special-case display face — used sparingly for posters, release titles,
     standout section headers. Reach for Manrope first; bring this in only
     when the moment calls for something more arcane / blackletter-ish. */
  --font-special: 'Germania One', 'Manrope', system-ui, serif;

  /* ---------- Motion ---------- */
  --ease-out:    cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast:    140ms;
  --dur-base:    240ms;

  /* ---------- Radii ---------- */
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 8px;
  --r-pill: 999px;

  /* ---------- Shadow / glow ---------- */
  --shadow-2:  0 8px 24px -8px rgba(0,5,16,0.6), 0 1px 0 rgba(153,170,255,0.04) inset;
  --glow-blue: 0 0 0 1px rgba(0,31,255,0.4), 0 0 24px -4px rgba(0,31,255,0.6);
}

/* ============================================================
   Body / global
   ============================================================ */
body.is-dark {
  background: var(--bg);
  color: var(--fg-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--accent);
  color: #fff;
}

/* Sentence-case headlines (overriding any TT5 styles that title-case) */
.wp-block-post-title,
.wp-block-heading {
  text-transform: none;
}

/* ============================================================
   Eyebrow utility — used in custom HTML / Group blocks
   Apply by adding the "is-style-eyebrow" class to a paragraph
   or by registering a block style.
   ============================================================ */
.is-style-eyebrow {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent-soft);
}

/* Italic display variant — useful for "northern twilight" treatments */
.is-style-display-italic {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  color: var(--accent-soft);
}

/* Special display variant — Germania One, used sparingly for release
   titles, posters, or rare standout headlines. Apply via the Site Editor
   block-style picker (registered in functions.php) or by adding the class
   manually to a Heading / Paragraph block. */
.is-style-display-special {
  font-family: var(--font-special);
  font-weight: 400;
  letter-spacing: 0;
}

/* Lead paragraph — 18px / 1.7 — used under hero headlines and as the
   intro paragraph on biography, release, and product detail pages.
   Apply via the block-style picker on a Paragraph block. */
.is-style-p-lead,
.p-lead {
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--fg-1);
}

/* ============================================================
   Header / nav
   Add the .jp-nav-blur class on the Group wrapping your header
   template part for translucent blur.
   ============================================================ */
.jp-nav-blur {
  background: rgba(0, 5, 16, 0.78) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}

/* Cart pill — apply class .jp-cart-pill to a button block */
.jp-cart-pill {
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--r-pill) !important;
  background: transparent !important;
  color: var(--accent-soft) !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0;
  transition: border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.jp-cart-pill:hover {
  border-color: var(--accent-soft) !important;
  color: #fff !important;
}

/* ============================================================
   Hero / cover overrides
   The Cover block is used for the front-page hero.
   ============================================================ */
.wp-block-cover.jp-hero {
  min-height: 720px;
}
.wp-block-cover.jp-hero .wp-block-cover__inner-container {
  max-width: 720px;
  text-align: center;
}
.wp-block-cover.jp-hero .wp-block-cover__background {
  background: linear-gradient(180deg,
    rgba(0,5,16,0.35) 0%,
    rgba(0,5,16,0.55) 50%,
    rgba(0,5,16,0.95) 100%) !important;
  opacity: 1 !important;
}

/* ============================================================
   WooCommerce — bring it into the void
   ============================================================ */

/* Prices */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce-Price-amount {
  font-family: var(--font-mono);
  color: var(--accent-soft);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}

/* Buttons */
.woocommerce ul.products li.product .button,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce button.button.alt,
.woocommerce-page button.button.alt {
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
  border-radius: var(--r-2);
  padding: 14px 26px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  text-transform: none;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: #fff;
}

/* Product cards */
.woocommerce ul.products li.product {
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  overflow: hidden;
  padding: 0 !important;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.woocommerce ul.products li.product:hover {
  border-color: var(--border-strong);
}
.woocommerce ul.products li.product a img {
  margin: 0 !important;
  border-radius: 0 !important;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product h3 {
  font-family: var(--font-body) !important;
  font-weight: 600;
  font-size: 1rem !important;
  color: #fff;
  padding: 14px 16px 4px !important;
  margin: 0 !important;
  line-height: 1.3;
}
.woocommerce ul.products li.product .price {
  display: block;
  padding: 0 16px 16px;
}

/* Cart + checkout tables */
.woocommerce-cart table.cart,
.woocommerce-checkout table.shop_table,
.woocommerce table.shop_table {
  background: transparent;
  color: var(--fg-1);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  border-collapse: separate;
}
.woocommerce table.shop_table th {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent-soft);
  border-color: var(--border);
}
.woocommerce table.shop_table td {
  border-color: var(--border);
  color: var(--fg-1);
}

/* Form inputs */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="tel"], input[type="url"],
input[type="number"], textarea, select {
  background: var(--bg-elev-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-2);
  color: var(--fg-1);
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 1rem;
  transition: border-color var(--dur-fast) var(--ease-out);
}
input:focus, textarea:focus, select:focus,
.woocommerce form .form-row input.input-text:focus {
  outline: none;
  border-color: var(--accent-soft);
}

/* Sale / out-of-stock badges */
.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale {
  background: transparent;
  border: 1px solid var(--accent-soft);
  color: var(--accent-soft);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 0;
  padding: 4px 8px;
  min-height: 0;
  min-width: 0;
  line-height: 1.4;
}
.out-of-stock,
.stock.out-of-stock {
  color: var(--danger) !important;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Notices */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  background: var(--bg-elev-2);
  border-top: 1px solid var(--accent);
  color: var(--fg-1);
  border-radius: var(--r-2);
}
.woocommerce-error {
  border-top-color: var(--danger);
}

/* Tabs (PDP) */
.woocommerce div.product .woocommerce-tabs ul.tabs {
  border-bottom: 1px solid var(--border);
  padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: transparent;
  border: none;
  border-radius: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  color: var(--fg-2);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  padding: 14px 0;
  margin-right: 32px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--accent-soft);
  border-bottom: 1px solid var(--accent-soft);
}

/* Quantity stepper */
.woocommerce .quantity .qty {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--fg-1);
  border-radius: var(--r-2);
  padding: 10px 12px;
  width: 80px;
}

/* Pagination */
.woocommerce nav.woocommerce-pagination ul {
  border: 1px solid var(--border);
  border-radius: var(--r-2);
}
.woocommerce nav.woocommerce-pagination ul li {
  border-color: var(--border);
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  color: var(--fg-2);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--accent);
  color: #fff;
}

/* ============================================================
   Editor-only refinements (Site Editor canvas)
   ============================================================ */
.editor-styles-wrapper {
  background: var(--bg);
  color: var(--fg-1);
}