/* =====================================================================
   HMMüller — Redesign 2026 (override-lag)
   Lastes ETTER assets/css/custom.css. Se README.md i pakken.
   Endrer: tokens (farger/fonter), logo/masthead, forside-nav,
   kort med bilder, footer. Alt annet arver fra custom.css.
   ===================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
    --bg:#fbfaf7; --surface:#ffffff; --ink:#111110; --body:#2a2926; --muted:#5a5854; --line:#e6e3dc;
    --band:#f0eee9;                 /* mykt bånd bak nav/pills (nytt) */
    --accent:#1d4ed8;               /* blå aksent */
    --fh:"Archivo",Helvetica,Arial,sans-serif; --fhw:900; --fhi:normal; --fht:-.03em;
    --fb:"Spectral",Georgia,serif;
    --fk:"Archivo",Helvetica,Arial,sans-serif;
    --flogo:"Anton",Impact,"Arial Narrow Bold",sans-serif;  /* logo/masthead (nytt) */
    --mono:ui-monospace,Menlo,monospace;
    --shell:1240px;
}
[data-bg="paper"] { --bg:#fbfaf7; --surface:#ffffff; --ink:#111110; --body:#2a2926; --muted:#5a5854; --line:#e6e3dc; --band:#f0eee9; }
[data-bg="night"] { --bg:#131312; --surface:#1d1b15; --ink:#f3f1ec; --body:#d9d6cf; --muted:#a5a29b; --line:#33322f; --band:#2a2926; }
[data-pal="press"] { --accent:#1d4ed8; }
[data-bg="night"][data-pal="press"] { --accent:#7ea2ff; }

/* Font-token-varianter i Customizer overstyres – designet bruker ett sett */
[data-font] { --fh:"Archivo",Helvetica,Arial,sans-serif; --fhw:900; --fhi:normal; --fht:-.03em; --fb:"Spectral",Georgia,serif; --fk:"Archivo",Helvetica,Arial,sans-serif; }

/* ---------- 2. Typehjelpere ---------- */
.h { line-height:1.05; }
.k { font-weight:700; letter-spacing:.14em; font-size:11px; }
.kicker { color:var(--muted); }               /* kategorimerker over saker er grå */
.archive .hm-section__head > .kicker { display:none; } /* «Section»-merke på arkivsider fjernet */
.archive .hm-section > .hm-crumb { display:none; }    /* brødsmuler på arkivsider fjernet */
.hm-foot__nav .k { display:none; }              /* «Sections»-merke i footer fjernet */

/* ---------- 3. Logo (utility bar + footer) ---------- */
.hm-brand, .hm-foot__mark {
    font-family:var(--flogo); font-weight:400; font-style:italic;
    text-transform:uppercase; letter-spacing:.02em; line-height:1;
    display:inline-block; transform:scaleY(.85); transform-origin:left center;
}
.hm-brand { font-size:30px; }
.hm-foot__mark { font-size:34px; }

/* ---------- 4. Utility bar ---------- */
.hm-util__inner { padding:12px 24px; gap:24px; }
.hm-nav { gap:18px; }
.hm-nav a { font-family:var(--fk); font-weight:700; font-size:12px; letter-spacing:.12em; text-transform:uppercase; }
.hm-yt { font-size:13px; letter-spacing:.02em; }
.hm-icon-btn { border-radius:8px; }
/* Dark-mode-bryter: helfarget pille (--ink), lys knott med halvmåne; i night-modus sol */
.dm-track { width:52px; height:28px; border-radius:14px; background:var(--ink); border:0; position:relative; }
.dm-knob { position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:var(--bg); transition:left .2s; display:flex; align-items:center; justify-content:center; }
.dm-knob::before { content:""; width:12px; height:12px; border-radius:50%; box-shadow:inset -4px -3px 0 0 var(--ink); transform:rotate(-20deg); }
[data-bg="night"] .dm-knob { left:27px; }
[data-bg="night"] .dm-knob::before { width:8px; height:8px; box-shadow:none; border:2px solid var(--ink); }

/* Forsiden: logo + lenker i toppbaren skjules (mastheaden tar jobben).
   Krever at body har klassen .home (WordPress setter den selv). */
body.home .hm-brand, body.home .hm-nav { display:none; }
body.home .hm-util__right { margin-left:auto; }

/* ---------- 5. Forside: masthead + seksjonsnav ---------- */
.hm-bs { max-width:var(--shell); padding:40px 24px 64px; }
.hm-bs__masthead { padding:0; }
.hm-bs__masthead h1 {
    font-family:var(--flogo); font-weight:400; font-style:italic; text-transform:uppercase;
    letter-spacing:.02em; line-height:1; font-size:clamp(56px,8.5vw,110px);
    transform:scaleY(.7); transform-origin:center; margin:0;
}
/* Fjern .com fra site title i WP (Innstillinger → Generelt) eller bruk filter i functions-snippet.php */

.hm-bs__nav {
    margin:26px auto 0; width:max-content; max-width:100%;
    border:0; background:var(--band); border-radius:999px; padding:12px 32px; gap:30px;
}
.hm-bs__nav a { font-family:var(--fk); font-weight:700; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); }

/* ---------- 6. Forside: lead / rail / grid ---------- */
.hm-broad { grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); gap:0 44px; padding:36px 0 0; }
.hm-broad__lead { padding-right:44px; }
.hm-broad__lead .hm-lead-title { font-size:clamp(34px,4.2vw,56px); letter-spacing:-.035em; line-height:1; margin:14px 0 28px; }
.hm-broad__lead .hm-lead-media { margin:0 0 24px; }
.hm-broad__lead .hm-lead-deck { font-size:19px; line-height:1.55; color:var(--body); }
.hm-broad__rail { padding-left:0; }

/* Rail-element med thumbnail til høyre (ny markup i front-page.php) */
.hm-rail-item { display:grid; grid-template-columns:minmax(0,1fr) 112px; gap:0 16px; align-items:start; padding:0 0 22px; margin-bottom:22px; }
.hm-rail-item .hm-rail-title { font-size:21px; letter-spacing:-.025em; line-height:1.1; margin:10px 0 0; }
.hm-rail-item .hm-rail-deck { font-size:15px; margin-top:10px; }
.hm-rail-item .hm-rail-thumb { width:112px; height:112px; margin-top:22px; overflow:hidden; background:var(--surface); }
.hm-rail-item .hm-rail-thumb img { width:100%; height:100%; object-fit:cover; }

.hm-grid3 { margin-top:36px; gap:0 36px; padding-top:30px; }
.hm-grid3 > * { padding:0 36px 0 0; border-left:0; border-right:1px solid var(--line); display:flex; flex-direction:column; }
.hm-grid3 > *:last-child { border-right:0; }
.hm-grid3 .hm-card__media { aspect-ratio:3/2; margin-bottom:16px; }
.hm-grid3 .hm-card__title { font-size:21px; letter-spacing:-.025em; }
.hm-grid3 .hm-card__deck { font-size:15px; flex:1; }

/* ---------- 7. Kort, arkiv, pills ---------- */
.hm-card__media { aspect-ratio:16/10; margin-bottom:14px; }
.hm-card__title { font-size:21px; letter-spacing:-.025em; }
.hm-card__deck { font-size:14.5px; }

.hm-toggle { border:0; background:var(--band); border-radius:999px; padding:3px; }
.hm-toggle a { border-radius:999px; padding:7px 16px; }
.hm-toggle a + a { border-left:0; }

.hm-pagination .page-numbers { border-radius:999px; }
.hm-tag { background:var(--band); border:0; border-radius:999px; padding:6px 12px; font-family:var(--fb); font-size:14px; }

/* Knapper (404, watch finder, søk) */
.hm-404__button, .hm-watchfinder__next, .hm-search-form button {
    font-family:var(--fk); font-weight:700; font-size:12px; letter-spacing:.1em; text-transform:uppercase;
    background:var(--ink); color:var(--bg); border:0; border-radius:999px; padding:14px 26px;
}
.hm-search-form input { border:1px solid var(--line); border-radius:999px; padding:12px 18px; font-family:var(--fb); font-size:17px; }

/* ---------- 8. Artikkel ---------- */
.hm-article__title { letter-spacing:-.035em; }
.hm-prose { color:var(--body); }
.hm-prose.lead-dropcap > p:first-child::first-letter { font-family:var(--fh); font-weight:900; }
.hm-prose blockquote { border-left:3px solid var(--accent); padding:6px 0 6px 22px; font-style:italic; font-size:21px; line-height:1.5; margin:0; }

/* ---------- 9. Footer ---------- */
.hm-foot { margin-top:0; }
.hm-foot__inner { padding:48px 24px 28px; }
.hm-foot__top { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) auto; gap:32px; }
.hm-foot__brand { max-width:400px; }
.hm-foot__brand p { font-size:15px; margin-top:18px; }
.hm-foot__nav { gap:9px; }
.hm-foot__nav a { font-size:16px; }
.hm-foot__bottom { margin-top:36px; }
.hm-foot__bottom .k { color:var(--muted); }
.hm-foot__bottom .dom { font-family:var(--mono); font-size:12px; letter-spacing:.08em; color:var(--muted); }

/* ---------- 10. Responsivt (se design/HMMuller Alle sider.dc.html → 2a nettbrett, 2b mobil) ---------- */
@media (max-width: 900px) {
    /* Nettbrett 768: rail blir 3-kolonners bilderad, grid blir liste med bilde til høyre */
    .hm-broad__rail { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 28px; border-top:2px solid var(--ink); padding-top:24px; }
    .hm-rail-item { grid-template-columns:1fr; border-bottom:0; border-right:1px solid var(--line); padding-right:28px; }
    .hm-rail-item .hm-rail-thumb { order:-1; width:100%; height:auto; aspect-ratio:3/2; margin:0 0 12px; }
    .hm-grid3 > * { display:grid; grid-template-columns:minmax(0,1fr) 200px; gap:0 24px; border-bottom:1px solid var(--line); padding-bottom:22px; }
    .hm-grid3 .hm-card__media { grid-column:2; grid-row:1 / span 4; width:200px; aspect-ratio:3/2; margin:0; }
    .hm-util__inner { padding:12px 24px; }
    .hm-foot__top { grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); }
    .hm-foot__nav { display:grid; grid-template-columns:1fr 1fr; }
    .hm-broad { grid-template-columns:1fr; }
    .hm-broad__lead { border-right:0; padding-right:0; margin-bottom:32px; }
    .hm-grid3 { grid-template-columns:1fr; gap:28px 0; }
    .hm-grid3 > * { border-right:0; padding-right:0; }
    .hm-foot__top { grid-template-columns:1fr; }
    .hm-bs__masthead h1 { font-size:80px; }
}
@media (max-width: 600px) {
    /* Mobil 390 */
    .hm-util__inner { padding:10px 16px; gap:12px; }   /* burger i høyre hjørne */
    .hm-util__inner .hm-yt span { display:none; }
    .hm-util__inner .hm-yt svg { width:36px; height:26px; }
    .hm-util__inner .hm-icon-btn { width:36px; height:36px; }
    .hm-bs { padding:24px 0 48px; }
    .hm-bs__masthead h1 { font-size:64px; }
    .hm-bs__nav { width:auto; margin:10px 16px 0; background:none; padding:0; gap:6px; flex-wrap:wrap; justify-content:center; }
    .hm-bs__nav a { background:var(--band); border-radius:999px; padding:8px 12px; font-size:11px; letter-spacing:.08em; }
    .hm-bs__nav a.is-active { background:var(--ink); color:var(--bg); }
    .hm-broad__lead .hm-lead-media { margin:0 -16px 18px; aspect-ratio:4/3; }
    .hm-broad__lead .kicker { display:none; }                 /* ingen kategori over hovedsaken */
    .hm-broad__lead { padding:0 16px; }
    .hm-broad__lead .hm-lead-title { font-size:32px; padding:0; }
    .hm-broad__rail { grid-template-columns:1fr; margin:0 16px; }
    .hm-rail-item { grid-template-columns:minmax(0,1fr) 96px; gap:0 14px; border-right:0; border-bottom:1px solid var(--line); padding:0 0 18px; }
    .hm-rail-item .hm-rail-thumb { order:0; width:96px; height:96px; margin-top:18px; }
    .hm-rail-item .hm-rail-deck { display:none; }
    .hm-grid3 { margin:10px 16px 0; gap:28px; }
    .hm-grid3 > * { display:flex; flex-direction:column; border:0; padding:0; }
    .hm-grid3 .hm-card__media { width:100%; margin:0 0 12px; }
    .hm-foot__top, .hm-foot__nav { grid-template-columns:1fr 1fr; }
    .hm-foot__top { grid-template-columns:1fr; }
}


/* Production integration: existing content, accessible controls and small screens. */
.hm-foot__brand .hm-foot__mark{font-family:var(--flogo);font-size:34px;font-weight:400;font-style:italic}
.hm-foot__brand p{font-size:15px;margin-top:18px}
.hm-foot__nav a{font-size:16px}
.hm-rail-item:not(:has(.hm-rail-thumb)){grid-template-columns:1fr}
.hm-bs__nav{flex-wrap:wrap;justify-content:center}
.hm-bs__nav a{white-space:nowrap}
.hm-card__media{display:block;overflow:hidden}
.hm-card__media img{width:100%;height:100%;object-fit:cover}
.hm-prose .wp-block-button__link{border-radius:999px;background:var(--ink);color:var(--bg);font-family:var(--fk);font-size:14px}
.hm-prose.entry-content .garmin-masterguide a.wp-block-button__link{background:var(--ink);color:var(--bg)!important}
.hm-prose.entry-content .garmin-masterguide a.wp-block-button__link:hover{background:var(--ink);opacity:.85}
.hm-prose .wp-block-table{overflow-x:auto;max-width:100%}
.hm-prose .wp-block-table table{min-width:480px}
.hm-prose :is(input,textarea,select){max-width:100%}
.hm-skip-link{position:absolute;left:20px;top:-100px;padding:14px 22px;background:var(--ink);color:var(--bg);z-index:10000;border-radius:999px}
.hm-skip-link:focus{top:12px}
:is(a,button,input,select,textarea,summary):focus-visible{outline:3px solid var(--accent);outline-offset:4px}
@media(min-width:901px) and (max-width:1120px){.hm-util__inner{gap:14px}.hm-nav{gap:12px}.hm-nav a{font-size:10px;letter-spacing:.08em}.hm-yt span{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}

/* V2 integration with the existing theme controls and responsive content. */
.dm-knob { transform:none; box-shadow:none; }
[data-bg="night"] .dm-track { background:var(--ink); }
[data-bg="night"] .dm-knob { transform:none; }
.hm-rail-item:last-child { border-right:0; padding-right:0; }
.hm-broad > *, .hm-grid3 > *, .hm-rail-body { min-width:0; }
.hm-article__title { overflow-wrap:break-word; }
@media (max-width:900px) {
    .hm-nav { display:none; }
    .hm-burger { display:inline-flex; }
    .hm-yt { display:inline-flex; }
    .hm-broad { row-gap:0; }
    .hm-grid3 > :not(:has(.hm-card__media)) { grid-template-columns:1fr; }
    .hm-foot__bottom { gap:14px; flex-wrap:wrap; }
}
@media (max-width:600px) {
    .hm-brand { font-size:24px; }
    .hm-util__right { gap:8px; }
    .hm-yt { display:inline-flex; }
    body.home .hm-util__right { width:100%; }
    body.home .hm-yt { margin-right:auto; }
    .hm-broad__lead .hm-lead-media { width:calc(100% + 32px); }
    .hm-bs__masthead h1 { font-size:clamp(48px,16.4vw,64px); }
    .hm-page { padding-top:32px; }
}
@media (max-width:360px) {
    .hm-util__inner { gap:8px; padding-left:12px; padding-right:12px; }
    .hm-util__right { gap:5px; }
    .hm-util__inner .hm-yt svg { width:28px; }
    .hm-brand { font-size:21px; }
}