/* ============================================================
   NiBow Theme 3 — custom styles (oven på theme.json)
   "Editorial brutalism, 2026". Bruger theme.json's preset-vars.
   ============================================================ */

:root{
  --nb-accent: var(--wp--preset--color--accent, #e84b1a);
  --nb-accent-d: var(--wp--preset--color--accent-dark, #c73d13);
  --nb-black: var(--wp--preset--color--contrast, #0a0a0a);
  --nb-white: var(--wp--preset--color--base, #fafaf8);
  --nb-off: var(--wp--preset--color--off, #f5f4f1);
  --nb-line: var(--wp--preset--color--line, #e5e7eb);
  --nb-muted: var(--wp--preset--color--muted, #6b7280);
}

html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
::selection { background: var(--nb-accent); color: #fff; }

/* Subtil grain-tekstur over hele siden — giver "print/craft"-følelse */
body::after{
  content:""; position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:.035; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Overskrifter: sikrer Bricolage + stram tracking selv hvor theme.json ikke rammer */
h1,h2,h3,h4,h5,h6{
  font-family: var(--wp--preset--font-family--display, 'Bricolage Grotesque', sans-serif);
  letter-spacing:-.03em;
}

/* Mikro-labels i mono (bruges via .is-style-mono-label på afsnit) */
.is-style-mono-label{
  font-family: var(--wp--preset--font-family--mono, 'JetBrains Mono', monospace);
  font-size:.75rem; letter-spacing:.18em; text-transform:uppercase; color:var(--nb-muted);
}

/* Nav-links med orange understregning på hover */
.nb-nav a{ position:relative; text-decoration:none; }
.nb-nav a::after{
  content:''; position:absolute; left:0; right:0; bottom:-4px; height:2px;
  background:var(--nb-accent); transform:scaleX(0); transform-origin:left; transition:transform .25s ease;
}
.nb-nav a:hover::after{ transform:scaleX(1); }

/* Logo Ni<accent>Bow */
.nb-logo{ font-family:var(--wp--preset--font-family--display); font-weight:800; letter-spacing:-.04em; text-decoration:none; color:var(--nb-black); }
.nb-logo span{ color:var(--nb-accent); }

/* Hero-baggrund (radial-gradients som forsiden) */
.nb-hero-bg{
  background:
    radial-gradient(ellipse 55% 50% at 85% 25%, rgba(232,75,26,.07) 0%, transparent 60%),
    radial-gradient(ellipse 40% 60% at 15% 80%, rgba(10,10,10,.04) 0%, transparent 50%),
    var(--nb-off);
}

/* Ticker / marquee */
@keyframes nb-ticker { to { transform: translateX(-50%); } }
.nb-ticker{ display:flex; gap:4rem; white-space:nowrap; width:max-content; animation:nb-ticker 28s linear infinite; }
.nb-marquee{ display:flex; gap:2.5rem; white-space:nowrap; width:max-content; animation:nb-ticker 22s linear infinite; }
.nb-marquee span{ font-family:var(--wp--preset--font-family--display); font-weight:800; line-height:1;
  font-size:clamp(2.5rem,6vw,5rem); color:var(--nb-line); }
.nb-marquee span.dash{ color:rgba(232,75,26,.25); }

/* Float-animation (til produkt/billede) */
@keyframes nb-float { 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-10px);} }
.nb-float{ animation:nb-float 5s ease-in-out infinite; }

/* Reveal on scroll — kun skjult når JS er til stede (robust uden JS) */
.nb-reveal{ transition:opacity .6s ease, transform .6s ease; }
.nb-js .nb-reveal{ opacity:0; transform:translateY(20px); }
.nb-js .nb-reveal.is-visible{ opacity:1; transform:translateY(0); }

/* Kort med accent-streg der vokser på hover (services, projekter) */
.nb-card{ position:relative; overflow:hidden; background:var(--nb-white); border:1px solid var(--nb-line); transition:border-color .2s ease; }
.nb-card:hover{ border-color:var(--nb-black); }
.nb-card::after{ content:''; position:absolute; left:0; bottom:0; height:3px; width:100%; background:var(--nb-accent); transform:scaleX(0); transform-origin:left; transition:transform .3s ease; }
.nb-card:hover::after{ transform:scaleX(1); }

/* Logo hvid i mørk baggrund */
.nb-invert{ filter:brightness(0) invert(1); }

/* ============================================================
   WooCommerce — samme sprog som resten af temaet
   ============================================================ */
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.woocommerce #respond input#submit,.woocommerce .button.alt,
.wc-block-components-button,.wp-block-button__link{
  background:var(--nb-black); color:var(--nb-white); border:0; border-radius:0;
  font-family:var(--wp--preset--font-family--display); font-weight:700; padding:.9rem 1.6rem; transition:background .2s ease;
}
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover,
.woocommerce .button.alt:hover,.woocommerce #respond input#submit:hover,
.wc-block-components-button:hover,.wp-block-button__link:hover{ background:var(--nb-accent); color:#fff; }

.woocommerce ul.products li.product{ background:var(--nb-white); border:1px solid var(--nb-line); padding:0 0 1.25rem; position:relative; overflow:hidden; transition:border-color .2s ease; }
.woocommerce ul.products li.product:hover{ border-color:var(--nb-black); }
.woocommerce ul.products li.product::after{ content:''; position:absolute; left:0; bottom:0; height:3px; width:100%; background:var(--nb-accent); transform:scaleX(0); transform-origin:left; transition:transform .3s ease; }
.woocommerce ul.products li.product:hover::after{ transform:scaleX(1); }
.woocommerce ul.products li.product .woocommerce-loop-product__title{ font-family:var(--wp--preset--font-family--display); font-weight:800; font-size:1.05rem; padding:.9rem 1rem .25rem; }
.woocommerce ul.products li.product .price{ color:var(--nb-black); font-family:var(--wp--preset--font-family--mono); font-weight:600; padding:0 1rem; }
.woocommerce ul.products li.product .button{ margin:.75rem 1rem 0; display:inline-block; }
.woocommerce span.onsale{ background:var(--nb-accent); color:#fff; border-radius:0; font-family:var(--wp--preset--font-family--mono); font-weight:700; min-height:auto; min-width:auto; padding:.35rem .6rem; top:0; right:0; left:auto; margin:0; }
.woocommerce div.product p.price,.woocommerce div.product span.price{ color:var(--nb-black); font-family:var(--wp--preset--font-family--mono); font-weight:600; }
.woocommerce .woocommerce-tabs ul.tabs li.active{ border-bottom:2px solid var(--nb-accent); }
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,
.woocommerce .select2-container .select2-selection,.wc-block-components-text-input input{
  border:1px solid var(--nb-line); border-radius:0; padding:.8rem 1rem; }
.woocommerce form .form-row input.input-text:focus,.wc-block-components-text-input input:focus{ border-color:var(--nb-accent); outline:none; box-shadow:0 0 0 2px rgba(232,75,26,.15); }
.woocommerce-message,.woocommerce-info,.woocommerce-error{ border-top:3px solid var(--nb-accent); background:var(--nb-off); border-radius:0; }
.woocommerce table.shop_table,.woocommerce .cart_totals table{ border:1px solid var(--nb-line); border-radius:0; }

/* ============================================================
   Header / Footer
   ============================================================ */
.nb-header{ position:sticky; top:0; z-index:50; background:rgba(250,250,248,.95);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-bottom:1px solid var(--nb-line); transition:box-shadow .3s ease; }
.nb-header.is-scrolled{ box-shadow:0 10px 30px rgba(10,10,10,.06); }
.nb-header .wp-block-navigation{ font-family:var(--wp--preset--font-family--display); font-weight:700; font-size:.9rem; }
.nb-burger{ display:none; flex-direction:column; gap:5px; background:none; border:0; padding:8px; cursor:pointer; }
.nb-burger span{ display:block; width:24px; height:2px; background:var(--nb-black); }
.nb-mobnav{ display:none; }
.nb-mobnav.is-open{ display:block; }
@media (max-width:781px){
  .nb-header .nb-desktop-nav{ display:none !important; }
  .nb-burger{ display:flex; }
}

/* CTA-knap i header */
.nb-btn{ display:inline-flex; align-items:center; gap:.5rem; background:var(--nb-black); color:var(--nb-white);
  font-family:var(--wp--preset--font-family--display); font-weight:700; font-size:.85rem; padding:.65rem 1.25rem; text-decoration:none; transition:background .2s ease; }
.nb-btn:hover{ background:var(--nb-accent); color:#fff; }
.nb-btn--ghost{ background:transparent; color:var(--nb-black); border:2px solid var(--nb-black); }
.nb-btn--ghost:hover{ background:var(--nb-black); color:#fff; }

/* Reducér motion for dem der ønsker det */
@media (prefers-reduced-motion: reduce){
  .nb-ticker,.nb-marquee,.nb-float{ animation:none; }
  .nb-reveal{ opacity:1; transform:none; }
}