/*
Theme Name: beIT
Theme URI: https://be-it.no
Description: beIT child theme of Kadence. Crisp Nordic Clean design system. Light, minimal, editable — design system in theme.json + this stylesheet; all content lives in editable blocks/patterns.
Author: beIT
Template: kadence
Version: 1.0.0
Text Domain: beit
*/

/* =========================================================================
   beIT — Crisp Nordic Clean
   Ported from approved kickoff mockup 06-final-direction.html.
   Tokens are mirrored in theme.json (editor); bespoke layout lives here.
   Radius system: pill (999px) clickable / 58px card / 2px utility container.
   ========================================================================= */

:root{
  --bg:#FFFFFF;
  --bg-alt:#F5F7F9;
  --paper:#F4F1EA;
  --ink:#0E1116;
  --ink-soft:#2B323B;
  --line:#E4E8EC;
  --line-strong:#D2D8DE;
  --accent:#F4DE2E;
  --shield:#1B1D20;
  /* liquidweb-inspired muted card tints (Nordic, low-saturation) */
  --tint-blue:#C3DCF2;
  --tint-sand:#F0DDB4;
  --tint-green:#BFE3CC;
  --tint-rose:#F2CFD9;
  /* ultra-saturated vivid version of each tint (card numbers + bars) */
  --vivid-blue:#1773E8;
  --vivid-sand:#EA580C;
  --vivid-green:#16A34A;
  --vivid-rose:#DB2777;
  --maxw:1140px;
  /* unified notch: box size + inner-corner radius (used by every card) */
  --notch:44px;
  --notch-r:38px;
  /* the notch mask itself — two opaque strips + a radial corner disk leave a
     transparent top-right bite with a rounded inner corner. Single source of
     truth for every notched surface (cards' ::before, hero aside, arcade). */
  --notch-mask:
    linear-gradient(#000 0 0) left top/calc(100% - var(--notch)) 100% no-repeat,
    linear-gradient(#000 0 0) left bottom/100% calc(100% - var(--notch)) no-repeat,
    radial-gradient(var(--notch-r) at top right, #0000 98%, #000) right calc(var(--notch) - var(--notch-r)) top calc(var(--notch) - var(--notch-r))/var(--notch-r) var(--notch-r) no-repeat;
  /* Sage glass. Two tints because each composites over a DIFFERENT backdrop:
     the drawer sits over a dark dim overlay, the pill over the light hero — so
     identical rgba renders different. These are tuned to BOTH render ~#9dbdaa. */
  --header-glass-drawer:rgba(150,200,170,0.62); /* over dark overlay  -> #9dbdaa */
  --header-glass-pill:rgba(104,157,131,0.62);   /* over light hero    -> #9dbdaa */
  /* ▼ LOGO SIZE — single knob. Change this one value to resize the header logo. */
  --logo-h:50px;
  /* 8px spacing scale (suffix = step, 1 step = 8px). Section + card rhythm pulls from these. */
  --space-1:8px;  --space-2:16px;  --space-3:24px;  --space-4:32px;   --space-5:40px;
  --space-6:48px; --space-7:56px;  --space-8:64px;  --space-9:72px;   --space-10:80px;
  --space-11:88px; --space-12:96px; --space-13:104px; --space-14:112px; --space-15:120px;
  /* shadow tokens */
  --shadow-card:0 12px 16px rgba(21,24,28,.12);      /* card hover drop-shadow */
  --shadow-btn:0 10px 28px rgba(21,24,28,.28);       /* primary/accent/nav hover */
  --shadow-btn-soft:0 10px 28px rgba(21,24,28,.18);  /* ghost hover */
}

/* ---- base ---- */
body{font-family:'Geist',sans-serif;color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:'Figtree',sans-serif;font-weight:700;line-height:1.08;letter-spacing:-0.02em}

/* shared wrap = use core alignfull section + inner constrained group .beit-wrap */
.beit-wrap{max-width:var(--maxw);margin-left:auto;margin-right:auto;padding-left:32px;padding-right:32px;width:100%}

/* eyebrow label with yellow square */
.beit-label{font-size:18px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);font-weight:600;font-family:'Figtree',sans-serif;display:inline-flex;align-items:center;gap:10px}
.beit-label .beit-mk{width:10px;height:10px;background:var(--accent);display:inline-block;flex:none}

/* ---- buttons (pill = clickable) ----
   Core button block bridges. !important needed to beat Kadence's own button
   CSS (which otherwise paints buttons blue). Default = shield dark pill. */
.wp-block-button > .wp-block-button__link{border-radius:999px !important;font-family:'Figtree',sans-serif;font-weight:600;font-size:18px;padding:12px 24px;background:var(--shield) !important;color:#fff !important;border:none;transition:background .15s ease, color .15s ease, box-shadow .15s ease, border-color .15s ease}
/* default shield: hover = yellow text + blurry drop shadow (fill stays dark) */
.wp-block-button > .wp-block-button__link:hover{background:var(--shield) !important;color:var(--accent) !important;box-shadow:var(--shadow-btn) !important}
.wp-block-button.beit-accent > .wp-block-button__link{background:var(--accent) !important;color:var(--shield) !important}
/* accent: hover = yellow fill kept + inset ring + blurry drop shadow */
.wp-block-button.beit-accent > .wp-block-button__link:hover{background:var(--accent) !important;color:var(--shield) !important;box-shadow:inset 0 0 0 2px var(--shield), var(--shadow-btn) !important}
.wp-block-button.beit-ghost > .wp-block-button__link{background:transparent !important;color:var(--ink) !important;border:1px solid var(--line-strong)}
/* ghost: hover = border darken + blurry drop shadow */
.wp-block-button.beit-ghost > .wp-block-button__link:hover{border-color:var(--ink) !important;background:transparent !important;color:var(--ink) !important;box-shadow:var(--shadow-btn-soft) !important}

/* Links inside our components inherit ink, not Kadence blue. */
.beit-go a{color:var(--ink) !important;text-decoration:none}
.beit-app:hover .beit-go a{color:var(--ink) !important}

/* Kill Kadence's auto page-title banner on the front page (we control titles). */
.home .entry-hero-container,
.home .page-hero-section{display:none}

/* ---- hero ---- */
.beit-hero{padding:var(--space-8) 0 var(--space-12)}
.beit-hero-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:var(--space-9);align-items:center}
/* grid children default to min-width:auto, which lets an intrinsically wide child
   (e.g. the inline-flex .beit-tag eyebrow at its max-content width) blow the track
   past the viewport and clip on mobile. min-width:0 lets the tracks shrink to fit. */
.beit-hero-grid > *{min-width:0}
.beit-tag{display:inline-flex;align-items:center;gap:9px;font-family:'Figtree',sans-serif;font-size:18px;font-weight:600;letter-spacing:.04em;color:var(--ink);margin-bottom:28px}
.beit-tag .beit-mk{width:10px;height:10px;background:var(--accent);display:inline-block}
.beit-hero h1{font-size:clamp(44px,6.5vw,72px);margin-bottom:26px}
.beit-hero h1 .beit-u{box-shadow:inset 0 -0.18em 0 var(--accent)}
.beit-lede{font-size:20px;color:var(--ink-soft);max-width:48ch;margin-bottom:36px}
.beit-hero-cta{display:flex;gap:12px;flex-wrap:wrap}
/* homepage hero: tighter gap under the headline (eyebrow now follows in natural block order) */
.beit-hero-left h1{margin-bottom:14px}
.beit-aside{border:0;border-radius:58px 0 58px 58px;padding:var(--space-4);background:var(--tint-green);position:relative}

/* TRUE transparent top-right notch (rounded inner corner), gradient-proof.
   The mask recipe lives in --notch-mask (:root). The hero-stats card carries
   the mask on itself (it has no hover shadow). */
.beit-aside{-webkit-mask:var(--notch-mask);mask:var(--notch-mask)}

/* Tinted notch cards: the tint + transparent notch live on a masked ::before, so
   the card ELEMENT stays unmasked and can cast a hover drop-shadow (a mask would
   clip the shadow). drop-shadow then traces the notched shape. Per-card colour via
   --card-tint; hover flips it. */
.beit-svc,.beit-app,.beit-appc,.beit-article{background:transparent;isolation:isolate}
.beit-svc::before,.beit-app::before,.beit-appc::before,.beit-article::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:58px 0 58px 58px;
  background:var(--card-tint,var(--tint-blue));
  -webkit-mask:var(--notch-mask);mask:var(--notch-mask)}

/* Shared card mechanics: the signature radius + hover lift with a shadow that
   traces the notched silhouette. Per-card rules keep only their own layout,
   tint cycling and hover tint-flip (flips live AFTER the nth-child tints so
   the cascade favours them). */
.beit-svc,.beit-app,.beit-appc,.beit-article{border-radius:58px 0 58px 58px;position:relative;transition:transform .2s ease, filter .2s ease, background .2s ease}
.beit-svc:hover,.beit-app:hover,.beit-appc:hover,.beit-article:hover{transform:translateY(-4px);filter:drop-shadow(var(--shadow-card))}
.beit-stat{padding:14px 0;border-bottom:1px solid rgba(17,20,26,.10)}
.beit-stat:last-child{border-bottom:none}
.beit-stat .beit-n{font-family:'Figtree',sans-serif;font-size:56px;font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--vivid-green);word-break:normal;hyphens:none}
/* The widest stat ("Samme dag", ~290px at 56px) is wider than the card's
   interior on phones AND narrow desktops (~880-1080px), and the aside's notch
   MASK clips the overflowing ink mid-glyph. Scale the number to the CARD via
   container units (vw can't see the narrow desktop column). 18.5cqw ≈ exact-fit
   with a 4% margin; caps at the designed 56px on wide screens. Old browsers
   ignore the min() line and keep 56px. */
.beit-aside{container-type:inline-size}
.beit-aside .beit-stat .beit-n{font-size:min(56px,18.5cqw)}
.beit-stat .beit-t{font-size:18px;color:var(--ink-soft);margin-top:4px}

/* ---- generic section ---- */
.beit-section{padding:var(--space-15) 0}
.beit-section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-bottom:var(--space-8)}
.beit-section-head h2{font-size:clamp(28px,4vw,44px);max-width:16ch}
.beit-section-head p{color:var(--ink-soft);font-size:18px;max-width:38ch}

/* ---- services grid (large soft-tinted cards) ---- */
.beit-svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-3);align-items:stretch}
.beit-svc{padding:var(--space-6);height:100%}
.beit-svc:nth-child(1){--card-tint:var(--tint-blue)}
.beit-svc:nth-child(2){--card-tint:var(--tint-sand)}
.beit-svc:nth-child(3){--card-tint:var(--tint-green)}
.beit-svc:nth-child(4){--card-tint:var(--tint-rose)}
.beit-svc:hover{--card-tint:var(--accent)}
.beit-svc .beit-num{font-family:'Figtree',sans-serif;font-size:56px;font-weight:800;line-height:1;letter-spacing:-.02em;margin:2px 0 14px}
.beit-svc h3{font-size:26px;margin:14px 0 12px}
.beit-svc h3 a{color:inherit;text-decoration:none}
.beit-svc h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.beit-svc p{color:var(--ink-soft);font-size:18px}
/* bar above the number = CSS pseudo (no empty Group block); inherits the per-card number color */
.beit-svc .beit-num::before{content:"";display:block;width:28px;height:10px;background:currentColor;margin-bottom:24px}
/* per-card vivid number color (bar follows via currentColor) */
.beit-svc:nth-child(1) .beit-num{color:var(--vivid-blue)}
.beit-svc:nth-child(2) .beit-num{color:var(--vivid-sand)}
.beit-svc:nth-child(3) .beit-num{color:var(--vivid-green)}
.beit-svc:nth-child(4) .beit-num{color:var(--vivid-rose)}
/* hover AFTER nth-child so it wins the cascade — flips bar+number to dark */
.beit-svc:hover .beit-num{color:var(--shield)}
/* compact Tjenester nav cards: number + headline only, 4-up */
.beit-svc-grid.is-mini{grid-template-columns:repeat(4,1fr)}
.beit-svc-mini{padding:var(--space-4)}
.beit-svc-mini .beit-num{font-size:40px;margin:0 0 10px}
.beit-svc-mini .beit-num::before{margin-bottom:16px}
.beit-svc-mini h3{font-size:20px;margin:0}
@media(max-width:880px){.beit-svc-grid.is-mini{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.beit-svc-grid.is-mini{grid-template-columns:1fr}}

/* ---- Tjenester per-service detail sections (anchor targets) ---- */
.beit-svc-detail{padding:var(--space-9) 0;scroll-margin-top:96px}
.beit-svc-detail .beit-label{margin-bottom:14px}
.beit-svc-detail h2{font-size:clamp(28px,4vw,40px);margin:0 0 18px;max-width:20ch}
.beit-svc-detail p{color:var(--ink-soft);font-size:18px;max-width:62ch;margin-bottom:16px}
.beit-detail-list{list-style:none;padding:0;margin:var(--space-3) 0 0;display:grid;gap:12px;max-width:62ch}
.beit-detail-list li{position:relative;padding-left:30px;font-size:18px;color:var(--ink)}
.beit-detail-list li::before{content:"";position:absolute;left:0;top:10px;width:16px;height:6px;background:var(--accent)}

/* ---- human / trust ---- */
.beit-human{background:var(--bg-alt)}
.beit-human-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-7);align-items:center}
.beit-portrait{aspect-ratio:4/5;background:var(--bg-alt);border-radius:58px 0 58px 58px;position:relative;overflow:hidden;display:flex;align-items:flex-end;justify-content:center}
.beit-portrait::after{content:"";position:absolute;top:0;right:0;width:var(--notch);height:var(--notch);background:var(--bg-alt);z-index:2;border-radius:0 0 0 var(--notch-r)}
.beit-portrait .wp-block-image,.beit-portrait .beit-portrait-img{margin:0;width:100%;height:100%}
.beit-portrait img{width:100%;height:100%;object-fit:cover;display:block}
.beit-human h2{font-size:clamp(26px,3.6vw,40px);margin-bottom:20px;margin-top:18px}
.beit-human p{color:var(--ink-soft);font-size:18px;margin-bottom:16px}
.beit-human .beit-sig{font-family:'Figtree',sans-serif;font-weight:700;color:var(--ink);font-size:18px;margin-top:8px}

/* ---- software / app cards (large soft-tinted) ---- */
.beit-software{background:var(--bg)}
.beit-apps{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-3);align-items:stretch}
.beit-app{padding:var(--space-6);text-decoration:none;color:var(--ink);min-height:215px;height:100%;display:flex;flex-direction:column;justify-content:space-between}
.beit-app:nth-child(1){--card-tint:var(--tint-blue)}
.beit-app:nth-child(2){--card-tint:var(--tint-green)}
.beit-app:hover{--card-tint:var(--accent)}
/* bar above the app title = CSS pseudo (no empty Group block) */
.beit-app-body::before{content:"";display:block;width:28px;height:10px;margin-bottom:24px}
.beit-app:nth-child(1) .beit-app-body::before{background:var(--vivid-blue)}
.beit-app:nth-child(2) .beit-app-body::before{background:var(--vivid-green)}
.beit-app:hover .beit-app-body::before{background:var(--shield)}
/* whole app card clickable: stretch the visible link over the card */
.beit-app .beit-go a::after{content:"";position:absolute;inset:0;z-index:1}
.beit-app h3{font-size:28px;margin-bottom:10px}
.beit-app p{color:var(--ink-soft);font-size:18px;max-width:32ch}
.beit-app .beit-go{font-family:'Figtree',sans-serif;font-weight:600;font-size:18px;margin-top:24px;border-bottom:2px solid var(--ink);width:fit-content;padding-bottom:2px}

/* ── Platform tag (squared, dark-blue, swallowtail/split-flag end) ────── */
.beit-platform{display:inline-block;font-family:'Figtree',sans-serif;font-size:18px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:#11356B;padding:2px 22px 2px 11px;border-radius:0;margin:6px 0 0;clip-path:polygon(0 0,100% 0,calc(100% - 10px) 50%,100% 100%,0 100%)}

/* ── App cards v2 — index grid with explicit action rows ─────────────── */
.beit-appc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-3);align-items:stretch}
.beit-appc{padding:var(--space-5);display:flex;flex-direction:column;gap:0}
/* Apper card colour follows the platform tag (not card order); no hover tint-flip */
.beit-appc:has(.beit-platform--windows){--card-tint:var(--tint-blue)}
.beit-appc:has(.beit-platform--android){--card-tint:var(--tint-green)}
.beit-appc:has(.beit-platform--chrome){--card-tint:var(--tint-sand)}
.beit-appc:has(.beit-platform--web){--card-tint:var(--tint-rose)}
.beit-appc-tag{margin:0 0 8px}
.beit-appc-header{display:flex;align-items:flex-start;gap:14px;margin-bottom:14px}
.beit-appc-icon,.beit-appc-icon img,.beit-app-landing-icon img{border-radius:14px;display:block}
.beit-appc-icon,.beit-appc-icon figure,.beit-appc-icon img{width:56px;height:56px;object-fit:cover;margin:0}
.beit-appc-meta{flex:1;min-width:0}
.beit-appc-meta h3{font-size:20px;margin:0 0 4px;line-height:1.2}
.beit-appc-meta p{margin:0}
.beit-appc-tagline{color:var(--ink-soft);font-size:18px;margin:0 0 20px;flex:1}
.beit-appc-actions{margin-top:auto;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.beit-appc-more,.beit-appc-more:visited{font-family:'Figtree',sans-serif;font-weight:600;font-size:18px;color:var(--ink) !important;text-decoration:none;border-bottom:2px solid var(--ink);padding-bottom:2px}

/* ── App landing page hero + footer links ─────────────────────────────── */
.beit-app-landing-head{display:flex;align-items:flex-start;gap:24px;flex-wrap:wrap;margin-bottom:8px}
.beit-app-landing-icon,.beit-app-landing-icon figure{width:80px;height:80px;margin:0}
.beit-app-landing-icon img{width:80px;height:80px;object-fit:cover;border-radius:18px}
.beit-app-landing-meta{flex:1;min-width:240px}
.beit-app-landing-meta h1{margin:6px 0 8px;line-height:1.1}
.beit-app-landing-meta p{margin:0}
.beit-app-links{display:flex;gap:20px;flex-wrap:wrap;margin-top:var(--space-6);padding-top:20px;border-top:1px solid rgba(14,17,22,.1)}
.beit-app-links a{color:var(--ink-soft);font-size:18px;text-decoration:underline}
.beit-app-links a:hover{color:var(--ink)}
/* Official store badges (self-hosted, equal visual height) */
.beit-store-badge{display:inline-block;line-height:0;margin:0}
.beit-store-badge img{height:52px;width:auto;display:block}

/* ── Innsikt: article cards (blog index) + single article ─────────────── */
/* Cards reuse the masked-::before notch + drop-shadow hover (added to the
   shared rules above). Tint cycles by position like .beit-svc; hover flips to
   accent. */
.beit-article-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-3);align-items:stretch}
.beit-article{padding:var(--space-5);display:flex;flex-direction:column}
.beit-article:nth-child(4n+1){--card-tint:var(--tint-blue)}
.beit-article:nth-child(4n+2){--card-tint:var(--tint-sand)}
.beit-article:nth-child(4n+3){--card-tint:var(--tint-green)}
.beit-article:nth-child(4n+4){--card-tint:var(--tint-rose)}
.beit-article:hover{--card-tint:var(--accent)}
.beit-article-eyebrow{font-family:'Figtree',sans-serif;font-weight:700;font-size:18px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 var(--space-2)}
.beit-article-title{font-size:24px;line-height:1.2;margin:0 0 var(--space-2)}
.beit-article-title a{color:var(--ink);text-decoration:none}
/* whole card clickable: stretch the title link across the card */
.beit-article-title a::after{content:"";position:absolute;inset:0;z-index:1}
.beit-article-ex{color:var(--ink-soft);font-size:18px;line-height:1.55;margin:0 0 var(--space-3);flex:1}
.beit-article-more{font-family:'Figtree',sans-serif;font-weight:600;font-size:18px;color:var(--ink);border-bottom:2px solid var(--ink);width:fit-content;padding-bottom:2px;margin-top:auto}

/* Empty state (no posts yet) */
.beit-article-empty{max-width:52ch}
.beit-article-empty h2{font-size:clamp(26px,3.6vw,40px);margin:var(--space-2) 0 var(--space-3)}
.beit-article-empty p{color:var(--ink-soft);font-size:19px;margin:0 0 var(--space-4)}

/* Pagination (light) */
.beit-blog .pagination{margin-top:var(--space-8);display:flex;justify-content:center}
.beit-blog .nav-links{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.beit-blog .page-numbers{font-family:'Figtree',sans-serif;font-weight:600;font-size:18px;color:var(--ink-soft);text-decoration:none;padding:6px 14px;border:1px solid var(--line-strong);border-radius:999px}
.beit-blog .page-numbers.current{background:var(--shield);color:#fff;border-color:var(--shield)}
.beit-blog .page-numbers:hover{color:var(--ink)}

/* ── Single article ──────────────────────────────────────────────────── */
.beit-measure{max-width:760px}
.beit-article-headsec{padding:var(--space-8) 0 var(--space-3)}
.beit-article-headsec h1{font-size:clamp(32px,5vw,52px);line-height:1.1;margin:var(--space-2) 0 var(--space-3)}
.beit-article-meta{font-family:'Figtree',sans-serif;font-size:18px;letter-spacing:.02em;color:var(--ink-soft);margin:0}
.beit-article-content{padding-bottom:var(--space-6)}
.beit-article-content p{font-size:19px;line-height:1.7;color:var(--ink-soft)}
.beit-article-content h2{font-size:clamp(24px,3vw,32px);margin:var(--space-6) 0 var(--space-2)}
.beit-article-content h3{font-size:22px;margin:var(--space-5) 0 var(--space-2)}
.beit-article-content :is(h2,h3){color:var(--ink)}
.beit-article-content > .beit-wrap > *:first-child{margin-top:0}
.beit-article-foot{padding-bottom:var(--space-8)}
.beit-back{font-family:'Figtree',sans-serif;font-weight:600;font-size:18px;color:var(--ink);text-decoration:none;border-bottom:2px solid var(--accent);padding-bottom:2px}
.beit-back:hover{border-bottom-color:var(--ink)}

/* ---- contact CTA ---- */
.beit-cta{padding:var(--space-14) 0;text-align:center}
.beit-cta h2::before{content:"";display:block;width:40px;height:14px;background:var(--accent);margin:0 auto 26px}
.beit-cta h2{font-size:clamp(30px,4.5vw,52px);margin-bottom:18px}
.beit-cta p{color:var(--ink-soft);font-size:19px;max-width:48ch;margin:0 auto 34px}
.beit-cta .beit-hero-cta{justify-content:center}

/* header logo size is controlled in ONE place: the --logo-h token (see :root)
   applied by the rule in the floating-island block below. */
/* align header content to the body column (1140) with equal side gutters */
.site-header .site-main-header-inner-wrap{max-width:var(--maxw);margin-left:auto;margin-right:auto;padding-left:32px !important;padding-right:32px !important}

/* min readable text: nothing below 18px (Kadence nav + footer) */
.site-header .menu-item a{font-size:18px}
.site-footer, .site-footer .site-info{font-size:18px}

/* ---- desktop full menu: drawer-flavored (Figtree, ink) + reserved yellow square cue ----
   .main-navigation = desktop nav only (drawer is .mobile-navigation). Square sits in
   reserved left padding so it appears on hover / current page WITHOUT shifting text.
   CTA (.beit-nav-cta) excluded — it stays the dark pill. */
.main-navigation .menu-item:not(.beit-nav-cta) > a{
  font-family:'Figtree',sans-serif;font-weight:600;color:var(--ink) !important;
  position:relative;
  /* symmetric padding (total matches Kadence's ~21.6px so the pill width holds) */
  padding-left:11px !important;padding-right:11px !important;
}
/* current/hover cue: thick yellow underline (same 7px fatness as the drawer dash);
   the items sit too tight in the pill for the old floating square to read */
.main-navigation .menu-item:not(.beit-nav-cta) > a::before{
  content:"";position:absolute;left:11px;right:11px;bottom:1px;
  height:7px;background:transparent;transition:background .15s ease;
}
.main-navigation .menu-item:not(.beit-nav-cta) > a:hover{color:var(--ink) !important;}
.main-navigation .menu-item:not(.beit-nav-cta) > a:hover::before,
.main-navigation .menu-item.current-menu-item > a::before,
.main-navigation .menu-item.current_page_item > a::before{background:var(--accent);}

/* ---- header nav CTA (Kontakt) styled as a shield pill ---- */
/* margin-left compensates: regular items use 10.8px padding each side (21.6px gap);
   pill's background starts at the a edge so only Spill's 10.8px right-pad is perceived */
.beit-nav-cta{margin-left:11px}
.beit-nav-cta > a,
header .beit-nav-cta a{
  background:var(--shield) !important;color:#fff !important;
  border-radius:999px !important;padding:9px 20px !important;
  font-family:'Figtree',sans-serif;font-weight:600;
}
.beit-nav-cta > a:hover,
header .beit-nav-cta a:hover{background:var(--shield) !important;color:var(--accent) !important;box-shadow:var(--shadow-btn) !important;transition:background .15s ease, color .15s ease, box-shadow .15s ease}

/* ========================================================================
   Floating island header — OVERLAY (true floating)
   Kadence transparent-header OFF and JS sticky-header OFF. We pin the whole
   #masthead as position:fixed OURSELVES, so it is fixed in EVERY state — there
   is no in-flow<->fixed swap, so the document never resizes and the sticky
   jitter is structurally impossible. The pill IS the inner wrap; all Kadence
   header chrome is transparent so only the pill shows. Content (#inner-wrap)
   gets top padding to clear the floating pill at rest.
   ======================================================================== */
/* 0) pin the header as a permanent overlay + reserve space for it below */
#masthead{position:fixed !important;top:0;left:0;right:0;z-index:100;}
#inner-wrap{padding-top:96px;}
/* 1) strip every Kadence header background/shadow — incl. the sticky fixed state
      (high-specificity Kadence selectors need matching specificity + !important) */
#masthead,
.site-header-wrap,
.site-main-header-wrap,
.site-main-header-wrap .site-header-row-container-inner,
.kadence-sticky-header.item-is-fixed > .site-header-row-container-inner,
#masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start):not(.site-header-row-container):not(.site-main-header-wrap){
  background:transparent !important;
  box-shadow:none !important;
}
/* 2) the pill */
.site-header .site-main-header-inner-wrap{
  max-width:860px !important;
  margin:16px auto 0 !important;
  /* equal inset around the logo (L = T = B) so it nestles in the pill's round cap */
  padding:8px 14px 8px 8px !important;
  min-height:0 !important;
  border-radius:999px;
  background:var(--header-glass-pill);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  box-shadow:0 10px 30px rgba(14,40,25,.18);
  border:1px solid rgba(255,255,255,.20);
}
/* 3) logo size — SINGLE SOURCE OF TRUTH = the --logo-h token in :root.
      width:auto keeps aspect ratio; height drives the size. Edit --logo-h only. */
.site-header img.custom-logo{width:auto !important;height:var(--logo-h) !important;max-height:none !important}
/* 4) nav text already 18px dark ink; CTA already a dark pill (.beit-nav-cta) */
/* 5) MOBILE pill: separate Kadence wrap (.site-mobile-header-wrap). Compact pill —
      logo + hamburger only, taller, shrink-to-content, right-aligned with a right gap.
      The inner-wrap is a 2-col grid (logo | toggle); fit-content + margin-left:auto
      pushes the whole pill to the right edge. Shows only at Kadence's mobile breakpoint. */
.site-header .site-mobile-header-wrap .site-main-header-inner-wrap{
  width:fit-content !important;
  max-width:none !important;
  margin:16px 16px 0 auto !important;
  /* equal inset (L=R=T=B=7px): 7 + logo 50 + 7 = 64, so logo & hamburger nestle
     evenly in the round caps, matching the desktop pill treatment */
  padding:7px !important;
  min-height:64px !important;
  align-items:center;
  column-gap:18px;
}

/* ========================================================================
   Mobile slide-out drawer — "frosted sage glass" (extends the pill).
   Kadence markup: #mobile-drawer.popup-drawer (side-right) > .drawer-overlay
   + .drawer-inner > .drawer-header (.menu-toggle-close) + .drawer-content
   > nav#mobile-site-navigation > ul#mobile-menu > li.menu-item > a.
   Open state = #mobile-drawer.show-drawer.
   ======================================================================== */
/* dim the page behind */
#mobile-drawer .drawer-overlay{background:rgba(10,14,20,.34) !important;}
/* full dynamic-viewport coverage — kill Kadence's top:32px gap and the fixed
   pixel height that leaves an uncovered strip when Android Chrome's toolbar
   shows/hides. 100dvh tracks the live viewport; 100vh is the fallback. */
#mobile-drawer,
#mobile-drawer .drawer-overlay,
#mobile-drawer.popup-drawer-layout-sidepanel .drawer-inner{
  top:0 !important;bottom:0 !important;
  height:100vh !important;height:100dvh !important;
}
/* lock the page behind the open drawer (no scroll-through) */
body.showing-popup-drawer-from-right,
html:has(body.showing-popup-drawer-from-right){overflow:hidden !important;}
/* the frosted sage panel — rounded left edge echoes the cards */
#mobile-drawer.popup-drawer-layout-sidepanel .drawer-inner{
  width:min(86%,400px) !important;
  background:var(--header-glass-drawer) !important;
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  border-radius:46px 0 0 46px;
  border-left:1px solid rgba(255,255,255,.35);
  box-shadow:-18px 0 50px rgba(10,20,14,.28);
  padding:22px 26px 26px;
  display:flex;flex-direction:column;
}
#mobile-drawer .drawer-content{flex:1;display:flex;flex-direction:column;}
/* header: just the close X, top-right (minimal — no eyebrow) */
#mobile-drawer .drawer-header{display:flex;align-items:center;justify-content:flex-end;padding:4px 2px 2px;}
#mobile-drawer .menu-toggle-close .toggle-close-bar{background:var(--ink) !important;}
/* hamburger bars match the Ta kontakt pill background */
.site-header .menu-toggle-open .toggle-bar{background:var(--shield) !important;}
.site-header .menu-toggle-open{color:var(--shield) !important;}
/* menu list fills height so the CTA can sit toward the bottom */
#mobile-drawer #mobile-menu{display:flex;flex-direction:column;margin-top:18px;flex:1;}
/* big Figtree rows with hairline dividers + a yellow dash that grows on hover/current */
#mobile-drawer #mobile-menu .menu-item > a{
  font-family:'Figtree',sans-serif;font-weight:700;font-size:26px;letter-spacing:-.02em;
  color:var(--ink) !important;text-decoration:none;
  display:flex;align-items:center;gap:12px;padding:13px 0;
  border-bottom:1px solid rgba(14,40,25,.14);
}
#mobile-drawer #mobile-menu .menu-item > a::before{
  content:"";flex:none;width:0;height:7px;background:var(--accent);transition:width .2s ease;
}
#mobile-drawer #mobile-menu .menu-item.current-menu-item > a::before,
#mobile-drawer #mobile-menu .menu-item > a:hover::before{width:22px;}
/* "Ta kontakt" = dark shield pill, pushed to the bottom */
#mobile-drawer #mobile-menu .beit-nav-cta{margin-top:auto;padding-top:22px;}
#mobile-drawer #mobile-menu .beit-nav-cta > a{
  justify-content:center;border-bottom:none;
  background:var(--shield) !important;color:#fff !important;
  border-radius:999px !important;padding:15px 22px !important;font-size:18px;
}
#mobile-drawer #mobile-menu .beit-nav-cta > a::before{display:none;}
/* staggered entrance on open */
@keyframes beitDrawerIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
#mobile-drawer.show-drawer #mobile-menu .menu-item{animation:beitDrawerIn .38s cubic-bezier(.2,.7,.2,1) both;}
#mobile-drawer.show-drawer #mobile-menu .menu-item:nth-child(1){animation-delay:.04s}
#mobile-drawer.show-drawer #mobile-menu .menu-item:nth-child(2){animation-delay:.09s}
#mobile-drawer.show-drawer #mobile-menu .menu-item:nth-child(3){animation-delay:.14s}
#mobile-drawer.show-drawer #mobile-menu .menu-item:nth-child(4){animation-delay:.19s}
#mobile-drawer.show-drawer #mobile-menu .menu-item:nth-child(5){animation-delay:.24s}
#mobile-drawer.show-drawer #mobile-menu .menu-item:nth-child(6){animation-delay:.29s}

/* ---- page hero (no stats aside) ---- */
.beit-pagehero{padding:var(--space-5) 0 var(--space-4)}
.beit-pagehero .beit-tag{margin-bottom:12px}
.beit-pagehero h1{margin-top:0}
.beit-pagehero .beit-lede{max-width:60ch}
/* Tjenester nav-card section: tight space above the cards */
.beit-section:has(.beit-svc-grid.is-mini){padding-top:var(--space-3)}

/* trim Kadence's default top padding on our block pages (safe no-op if absent) */
body.home .content-container,
body.page .content-container{padding-top:0 !important}

/* ---- kontakt ---- */
.beit-kontakt-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-7);align-items:start}
.beit-kontakt-intro h2{font-size:clamp(24px,3vw,34px);margin:14px 0 16px}
.beit-kontakt-intro p{color:var(--ink-soft);font-size:18px;margin-bottom:14px}
/* on-brand styling for the Kadence form fields */
.beit-kontakt-form input[type=text],
.beit-kontakt-form input[type=email],
.beit-kontakt-form textarea,
.beit-kontakt-form .kb-field input,
.beit-kontakt-form .kb-field textarea{width:100%;border:1px solid var(--line-strong) !important;border-radius:2px !important;padding:12px 14px;font-family:'Geist',sans-serif;font-size:18px;margin-bottom:14px;background:#fff}
.beit-kontakt-form button,
.beit-kontakt-form .kb-forms-submit,
.beit-kontakt-form .kadence-blocks-form-field button{background:var(--shield) !important;color:#fff !important;border-radius:999px !important;padding:12px 24px;border:none;font-family:'Figtree',sans-serif;font-weight:600}

/* ========================================================================
   Core editor blocks (Style Book defaults)
   On-brand defaults for core Gutenberg blocks Kjell may add in the editor, so
   articles/added content inherit the language. Loaded front + editor (Style
   Book) via add_editor_style('style.css'). Tokens + 18px floor throughout.
   ======================================================================== */
/* Quote — left yellow accent bar */
.wp-block-quote{border-left:4px solid var(--accent);border-radius:0;padding:var(--space-1) 0 var(--space-1) var(--space-3);margin:var(--space-4) 0;font-family:'Geist',sans-serif;font-size:20px;line-height:1.5;color:var(--ink)}
.wp-block-quote p{margin:0 0 var(--space-2);font-size:20px}
.wp-block-quote cite,.wp-block-quote .wp-block-quote__citation{display:block;font-family:'Figtree',sans-serif;font-style:normal;font-weight:600;font-size:18px;color:var(--ink-soft);margin-top:var(--space-2)}

/* Pullquote — yellow top + bottom rules, large Figtree, centered */
.wp-block-pullquote{border-top:4px solid var(--accent);border-bottom:4px solid var(--accent);border-left:0;border-right:0;padding:var(--space-5) 0;margin:var(--space-6) 0;text-align:center;color:var(--ink)}
.wp-block-pullquote blockquote::before,.wp-block-pullquote blockquote::after{content:none} /* kill core open-quote/close-quote glyphs */
.wp-block-pullquote blockquote,.wp-block-pullquote blockquote p,.wp-block-pullquote p{font-family:'Figtree',sans-serif;font-weight:700;font-style:normal !important;font-size:clamp(24px,3.5vw,32px);line-height:1.2;letter-spacing:-0.02em;color:var(--ink)}
.wp-block-pullquote cite{display:block;font-family:'Figtree',sans-serif;font-style:normal;font-weight:600;font-size:18px;color:var(--ink-soft);text-transform:none !important;letter-spacing:0;margin-top:var(--space-2)}

/* Table — hairline grid, tinted header with shield bottom rule */
.wp-block-table{margin:var(--space-4) 0;font-size:18px}
/* Multi-column tables (e.g. the app personvern permission tables) are wider than
   a phone. Scroll the TABLE inside its own box instead of letting it overflow the
   page, which body{overflow-x:hidden} would silently clip. */
.wp-block-table{overflow-x:auto;-webkit-overflow-scrolling:touch}
.wp-block-table table{border-collapse:collapse;width:100%}
.wp-block-table th,.wp-block-table td{border:1px solid var(--line);padding:var(--space-2) var(--space-3);text-align:left;font-size:18px}
.wp-block-table thead th{background:var(--bg-alt);font-family:'Figtree',sans-serif;font-weight:700;color:var(--ink);border-bottom:2px solid var(--ink)}
.wp-block-table figcaption{font-size:18px;color:var(--ink-soft);margin-top:var(--space-2);text-align:left}

/* Generic list — yellow-bar motif (custom .beit-detail-list keeps its own look) */
.wp-block-list:not(.beit-detail-list){font-size:18px;line-height:1.6;margin:var(--space-3) 0}
ul.wp-block-list:not(.beit-detail-list){list-style:none;padding-left:var(--space-3)}
ul.wp-block-list:not(.beit-detail-list) > li{position:relative;padding-left:var(--space-3);margin:var(--space-1) 0}
ul.wp-block-list:not(.beit-detail-list) > li::before{content:"";position:absolute;left:0;top:.7em;width:14px;height:5px;background:var(--accent)}
ol.wp-block-list:not(.beit-detail-list){padding-left:var(--space-4)}
ol.wp-block-list:not(.beit-detail-list) > li{margin:var(--space-1) 0}
ol.wp-block-list:not(.beit-detail-list) > li::marker{color:var(--ink-soft);font-family:'Figtree',sans-serif;font-weight:700}

/* Code / preformatted — tinted panel, utility radius, mono (18px floor) */
.wp-block-code,.wp-block-preformatted{background:var(--bg-alt);border:1px solid var(--line);border-radius:2px;padding:var(--space-3);margin:var(--space-4) 0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:18px;line-height:1.5;overflow:auto}

/* Separator — short centered yellow bar (default); wide = full hairline */
.wp-block-separator{border:0;height:6px;width:48px;background:var(--accent);margin:var(--space-6) auto;opacity:1}
.wp-block-separator.is-style-wide{height:0;width:auto;background:none;border-top:1px solid var(--line);margin:var(--space-6) 0}

/* Image caption */
.wp-block-image figcaption{font-family:'Figtree',sans-serif;font-size:18px;color:var(--ink-soft);margin-top:var(--space-2);text-align:left}

/* ---- responsive ---- */
@media(max-width:880px){.beit-hero-grid{grid-template-columns:1fr;gap:var(--space-5)}}
@media(max-width:760px){.beit-kontakt-grid{grid-template-columns:1fr;gap:32px}}

/* NOTE: front-only layout (full-bleed bands, Kadence boxed-chrome reset,
   body background) lives in assets/css/frontend.css — it must NOT load in
   the block editor (100vw breaks the narrow editor canvas). This style.css
   is shared front + editor (design system, components, section visuals). */
@media(max-width:760px){
  .beit-svc-grid{grid-template-columns:1fr}
  .beit-human-grid{grid-template-columns:1fr;gap:var(--space-4)}
  .beit-apps{grid-template-columns:1fr}
  .beit-appc-grid{grid-template-columns:1fr}
  .beit-article-grid{grid-template-columns:1fr}
  .beit-app-landing-head{flex-direction:column}
}