/* Jung Neue-heron, porterad från jung.co (neue.css + @font-face ur main.css) till berntzonbylund.se.
   Startsidan: heron ligger stilla överst (sticky) och sajten rullar över den.
   Undersidor: en 54 px röd banner överst; vid hovring/tryck fälls hela heron ner som ett lager över sidan. */

@font-face { font-family: 'AM Kosmos'; font-weight: 500; font-display: swap;
  src: url("fonts/AMKosmos23-Medium.woff2") format("woff2"), url("fonts/AMKosmos23-Medium.woff") format("woff"); }
@font-face { font-family: 'Times New Roman MT Bold Condensed'; font-weight: 700; font-display: swap;
  src: url("fonts/Times New Roman MT Bold Condensed.woff2") format("woff2"), url("fonts/Times New Roman MT Bold Condensed.woff") format("woff"); }

:root { --neue-bar-h: 54px; }

/* Hero — flytande, skalad från skissen i Figma JUNG_BB_KICK_OFF node 80-2390 (Frame 16, 1680×1043; 1vw = 16.8px):
   rubrik PolySans Median 170/160 −3.86, brödtext Neue Haas Grotesk Display 40/53 på 1212 px bredd, knapp Times 46 px i krämvitt #EAE0CF,
   två svarta NEUE-märken (168 px) uppe till höger och nere till vänster (sätts av neue.js). svh-taket håller allt inom låga fönster. */
#neue-hero { position: sticky; top: 0; height: 100vh; height: 100svh; z-index: 0; background: #ff1100; color: #141414; display: flex; align-items: center; justify-content: center; padding: 4vw; text-align: center; box-sizing: border-box; overflow: hidden; margin: 0; }
#neue-hero .neue-inner { display: flex; flex-direction: column; align-items: center; width: min(86vw, 1560px); }
/* Rubriken i PolySans Median (sajtens egen rubrikfont, @font-face från sajtens typsnittsplugin, vikt 500 = Median) */
#neue-hero .neue-title { margin: 0 0 4.8vw; padding: 0; border: 0; text-transform: none; text-align: center; width: 100%; font: 500 min(10.1vw, 16svh)/.94 PolySans, 'Trebuchet MS', Helvetica, sans-serif; font-synthesis: none; letter-spacing: -.023em; color: #141414; }
/* Brödtexten i Neue Haas Grotesk Display: skissen har 55 Roman (400), Adobe Fonts-kitet har 300/500/600, därför 500 */
#neue-hero .neue-h { margin: 0; padding: 0; border: 0; text-transform: none; text-align: center; width: 72%; max-width: 1212px; font: 500 min(2.38vw, 3.8svh)/1.325 neue-haas-grotesk-display, 'Neue-Haas-Grotesk-Display', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-synthesis: none; letter-spacing: 0; color: #141414; }
.neue-rest { visibility: hidden; }
/* Markören: ett inline-block i textflödet (inte ett absolut pseudoelement i ett tomt span – Safari placerar det i radens
   början). Radens höjd: uppstapel .88em över baslinjen, nedstapel .22em under (Neue Haas Grotesk Display). Negativ högermarginal
   gör att den inte tar plats, så texten flyttar sig inte när den slocknar. Blinkar inte medan det skrivs, döljs när meningen är klar. */
.neue-caret { display: inline-block; width: .06em; height: 1.1em; margin: 0 -.09em 0 .03em; vertical-align: -.22em; background: currentColor; animation: neue-blink 1s steps(1) infinite; }
.neue-typing .neue-caret { animation: none; }
.neue-done .neue-caret { display: none; }
@keyframes neue-blink { 50% { opacity: 0; } }
.neue-actions { display: flex; flex-direction: column; align-items: center; gap: 1.8vw; margin-top: 5.4vw; opacity: 0; transform: translateY(10px); transition: opacity .6s, transform .6s; }
.neue-actions.in { opacity: 1; transform: none; }
#neue-hero .neue-btn { font: 700 max(22px, 2.75vw)/1.1 'Times New Roman MT Bold Condensed', serif; letter-spacing: 0; text-decoration: none; background: #141414; color: #eae0cf; border-radius: 999px; padding: .4em .55em .46em; transition: background .2s, color .2s; }
#neue-hero .neue-btn:hover { background: #f5f5f5; color: #141414; }
.neue-hero-layer { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
@media (max-width: 900px) { #neue-hero .neue-title { font-size: min(12vw, 14svh); } #neue-hero .neue-h { font-size: min(3.2vw, 3.6svh); width: 80%; } }
@media (max-width: 640px) { #neue-hero .neue-inner { width: 92vw; } #neue-hero .neue-title { font-size: min(17vw, 11svh); margin-bottom: 7vw; } #neue-hero .neue-h { font-size: min(4.7vw, 3svh); line-height: 1.3; width: 92%; } #neue-hero .neue-actions { margin-top: 8vw; } #neue-hero .neue-btn { font-size: max(22px, 5.5vw); } #neue-hero { padding: 12vw 4vw; } }

/* Startsidan: sajten rullar över heron */
.neue-site { position: relative; z-index: 1; background: #f4f4f4; }

/* Studsen när man drar förbi sidans början eller slut (rubber band) visade html-bakgrunden som en ljus glipa.
   html-bakgrunden sätts röd, och två fasta lager strax utanför fönstret följer med i studsen: rött ovanför (som heron
   och bannern), svart nedanför (som sidfoten). Syns bara under studsen, ligger bakom allt annat. */
html { background: #ff1100; }
body::before, body::after { content: ""; position: fixed; left: 0; right: 0; height: 100vh; z-index: -1; pointer-events: none; }
body::before { top: -100vh; background: #ff1100; }
body::after { bottom: -100vh; background: #000; }

/* Klistermärken */
.neue-sticker { position: absolute; left: 0; top: 0; will-change: transform; }
.neue-sticker svg { display: block; width: 100%; height: 100%; }
.peel-f, .peel-b { position: absolute; inset: 0; }
.peel-b { transform-origin: 0 0; filter: drop-shadow(0 0 6px rgba(0,0,0,.3)); }
.neue-hero-layer .neue-sticker.grab { pointer-events: auto; touch-action: none; cursor: grab; }
.neue-hero-layer .neue-sticker.held { filter: drop-shadow(0 12px 18px rgba(0,0,0,.3)); }

/* Undersidor: bannern (Figma JUNG_BB_KICK_OFF, 1680×54) */
.neue-bar { position: fixed; top: var(--wp-admin--admin-bar--height, 0px); left: 0; right: 0; z-index: 100002; height: var(--neue-bar-h); box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 44px; background: #ff1100; color: #141414; font: 500 18px/1.2 neue-haas-grotesk-display, 'Neue-Haas-Grotesk-Display', 'Helvetica Neue', Helvetica, Arial, sans-serif; letter-spacing: 0; cursor: pointer; }
.neue-bar p { margin: 0; font: inherit; color: inherit; letter-spacing: inherit; }
.neue-bar a { color: inherit; text-decoration: none; white-space: nowrap; }
.neue-bar a u { text-decoration: underline; text-underline-offset: .12em; }
.neue-bar a:hover u { text-decoration: none; }
.neue-bar-close { flex: none; margin-left: 4px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: none; color: #141414; font: 400 26px/32px 'Helvetica Neue', Helvetica, Arial, sans-serif; text-align: center; cursor: pointer; padding: 0; -webkit-appearance: none; appearance: none; }
.neue-bar-close:hover { background: #141414; color: #fff; }
.neue-bar.closed { display: none; }
/* Startsidan: listen glider ner när heron skrollats förbi (klassen show sätts i neue.js) och trycker ner Astras klistrade header */
.neue-bar--home { cursor: default; transform: translateY(-100%); visibility: hidden; transition: transform .35s cubic-bezier(.65, 0, .35, 1), visibility 0s .35s; }
.neue-bar--home.show { transform: none; visibility: visible; transition: transform .35s cubic-bezier(.65, 0, .35, 1), visibility 0s; }
body.neue-bar-visible #ast-fixed-header { top: var(--neue-bar-h); }
body.admin-bar.neue-bar-visible #ast-fixed-header { top: calc(var(--neue-bar-h) + var(--wp-admin--admin-bar--height, 32px)); }
body.neue-has-bar.neue-bar-closed { padding-top: 0; }
body.neue-has-bar.neue-bar-closed #ast-fixed-header { top: 0; }
body.admin-bar.neue-has-bar.neue-bar-closed #ast-fixed-header { top: var(--wp-admin--admin-bar--height, 32px); }
body.neue-has-bar { padding-top: var(--neue-bar-h); }
body.neue-has-bar #ast-fixed-header { top: var(--neue-bar-h); }
body.admin-bar.neue-has-bar #ast-fixed-header { top: calc(var(--neue-bar-h) + var(--wp-admin--admin-bar--height, 32px)); }

/* Undersidor: heron som ett nedfällbart lager under bannern */
#neue-hero.neue-hero--overlay { position: fixed; top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--neue-bar-h)); left: 0; width: 100%; height: calc(100vh - var(--neue-bar-h)); height: calc(100svh - var(--neue-bar-h)); z-index: 100001; transform: translateY(-100%); visibility: hidden; transition: transform .55s cubic-bezier(.65, 0, .35, 1), visibility 0s .55s; }
#neue-hero.neue-hero--overlay.open { transform: none; visibility: visible; transition: transform .55s cubic-bezier(.65, 0, .35, 1), visibility 0s; }
@media (prefers-reduced-motion: reduce) { #neue-hero.neue-hero--overlay { transition: none; } .neue-caret { animation: none; } }

@media (max-width: 767px) {
  :root { --neue-bar-h: 64px; }
  .neue-bar { padding: 0 12px 0 20px; font-size: 14px; line-height: 1.25; gap: 12px; }
}
@media (max-width: 420px) { .neue-bar { font-size: 13px; } }