/* Page frame and prose for the static guide sites. Astryx (astryx.css + theme) owns every component's look;
   this file only lays out what Astryx has no component for (page frame, header, prose rhythm, native
   <details>) and uses Astryx tokens exclusively. Unlayered, so it sits above Astryx's @layer rules. */

/* Self-hosted fonts (no Google Fonts: an IP sent to Google without consent is a GDPR breach in the EU). */
@font-face{font-family:"DM Sans";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/dm-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/dm-sans-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/dm-sans-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/dm-sans-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/fraunces-latin-600-normal.woff2) format("woff2")}

/* Matcha ships a handwriting heading face; long Danish guide titles need an editorial serif instead. */
[data-astryx-theme="matcha"]{--font-family-heading:"Fraunces",Georgia,"Times New Roman",serif}

html{scroll-behavior:smooth;color-scheme:light}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--color-background-body);color:var(--color-text-primary);font-family:var(--font-family-body)}
:target{scroll-margin-top:var(--spacing-6)}
img{max-width:100%}

.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--color-accent);color:var(--color-on-accent);padding:var(--spacing-2) var(--spacing-4);border-radius:0 0 var(--radius-element) 0;font-weight:var(--font-weight-semibold);text-decoration:none}
.skip:focus{left:0}

/* Frame */
.frame{max-width:1120px;margin:0 auto;padding:var(--spacing-8) var(--spacing-5) var(--spacing-12)}
.frame-narrow{max-width:760px}
.site-header{background:var(--color-background-surface);border-bottom:1px solid var(--color-border);position:sticky;top:0;z-index:20}
.site-header .frame{padding-top:var(--spacing-3);padding-bottom:var(--spacing-3)}
.header-row{display:flex;align-items:center;gap:var(--spacing-4)}
.logo{display:inline-flex;flex-shrink:0}.logo img{display:block;height:32px;width:auto}

/* Header: logo, mega "Guides" menu (Astryx TopNavMegaMenuItem + FeaturedCard), two links, CTA. CSS-only. */
.site-header{position:sticky}
.nav-desktop{margin-left:auto}
.nav-top{list-style:none;display:flex;align-items:center;gap:var(--spacing-1);margin:0;padding:0}
.nav-link{display:inline-flex;align-items:center;gap:var(--spacing-1);padding:var(--spacing-2) var(--spacing-3);border-radius:var(--radius-full);color:var(--color-text-primary);text-decoration:none;transition:background var(--duration-fast) var(--ease-standard)}
.nav-link:hover,.nav-top>li:focus-within>.nav-link,.mega:hover>.nav-link{background:var(--color-overlay-hover)}
.nav-chev{transition:transform var(--duration-fast) var(--ease-standard)}
.mega:hover .nav-chev,.mega:focus-within .nav-chev{transform:rotate(180deg)}
.nav-cta{flex-shrink:0}
.mega-panel{position:absolute;left:0;right:0;top:100%;background:var(--color-background-surface);border-bottom:1px solid var(--color-border);box-shadow:var(--shadow-high);opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity var(--duration-fast) var(--ease-standard),transform var(--duration-fast) var(--ease-standard),visibility 0s linear var(--duration-fast);z-index:30}
.mega:hover .mega-panel,.mega:focus-within .mega-panel{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.mega-inner{display:grid;grid-template-columns:1fr 280px;gap:var(--spacing-8);padding-top:var(--spacing-6);padding-bottom:var(--spacing-8)}
.mega-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--spacing-1)}
.mega-thumb{display:inline-flex;width:44px;height:44px;border-radius:var(--radius-element);background:var(--color-background-body);overflow:hidden;flex-shrink:0}
.mega-thumb img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.mega-feat img{object-fit:contain;background:var(--color-background-body)}
.nav-mobile{display:none;margin-left:auto}
.nav-mobile>summary{list-style:none;cursor:pointer;padding:var(--spacing-2);border-radius:var(--radius-element);display:flex}
.nav-mobile>summary::-webkit-details-marker{display:none}
.nav-mobile-panel{position:absolute;left:0;right:0;top:100%;background:var(--color-background-surface);border-bottom:1px solid var(--color-border);box-shadow:var(--shadow-med);max-height:80vh;overflow:auto;padding:var(--spacing-4) var(--spacing-5)}
.nav-mobile-panel .mega-grid{grid-template-columns:1fr}
@media (max-width:1100px){.mega-inner{grid-template-columns:1fr}.mega-feat{display:none}}
@media (max-width:820px){.nav-desktop,.nav-cta{display:none}.nav-mobile{display:block}}

.site-footer{background:var(--color-background-surface);border-top:1px solid var(--color-border)}
.site-footer .frame{padding-top:var(--spacing-10);padding-bottom:var(--spacing-8)}
.footer-legal{margin-top:var(--spacing-8);display:grid;gap:var(--spacing-4)}

/* Hero */
.hero{padding:var(--spacing-8) 0 var(--spacing-2);max-width:760px}

/* Guide prose: Astryx type, long-form rhythm. */
.guide p{margin:0 0 var(--spacing-4);line-height:1.65}
.guide p:last-child{margin-bottom:0}
.lede p{font-size:calc(var(--font-size-base) * 1.125);line-height:1.6;color:var(--color-text-secondary)}
.guide-sec{margin-top:var(--spacing-12)}
.guide-sec>h2{margin:0 0 var(--spacing-4)}
.doc h2{margin-top:var(--spacing-6)}
.doc-html h1{font-family:var(--font-family-heading);font-size:var(--text-heading-1-size);font-weight:var(--text-heading-1-weight);line-height:var(--text-heading-1-leading);margin:0 0 var(--spacing-4)}
.doc-html h2{font-family:var(--font-family-heading);font-size:var(--text-heading-2-size);font-weight:var(--text-heading-2-weight);margin:var(--spacing-8) 0 var(--spacing-3)}
.doc-html p{font-size:var(--font-size-lg);line-height:1.65;margin:0 0 var(--spacing-4)}
.doc-html a{color:var(--color-text-accent)}
.criteria{margin:0;padding-left:var(--spacing-5);display:grid;gap:var(--spacing-2)}
.criteria li{line-height:1.55;padding-left:var(--spacing-1)}
.criteria li::marker{color:var(--color-accent)}
.sec-comparison{padding-left:var(--spacing-5);border-left:3px solid var(--color-accent)}
.toc-list{margin:var(--spacing-3) 0 0;padding-left:var(--spacing-5);columns:2;column-gap:var(--spacing-8);font-size:var(--font-size-base)}
.toc-list li{break-inside:avoid;padding:var(--spacing-1) 0}
.toc-list li::marker{color:var(--color-text-secondary)}
@media (max-width:640px){.toc-list{columns:1}}

/* Recommendation card: image + content, stacks on narrow screens. */
.pick-grid{display:grid;grid-template-columns:180px 1fr;gap:var(--spacing-6);align-items:start}
.pick-media,.card-media,.deal-media,.cat-thumb{background:var(--color-background-surface);border-radius:var(--radius-element);overflow:hidden}
.pick-media img,.card-media img,.deal-media img,.cat-thumb img{width:100%;height:100%;object-fit:contain}
.card-media{border-bottom:1px solid var(--color-border);border-radius:var(--radius-container) var(--radius-container) 0 0;padding:var(--spacing-3)}
.procon{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-4)}
.offer-row{flex-wrap:wrap}
@media (max-width:640px){.pick-grid{grid-template-columns:1fr}.pick-media{max-width:220px}.procon{grid-template-columns:1fr}}

/* FAQ: native <details>, Astryx dividers and type. */
.faq{border-top:1px solid var(--color-border)}
.faq-item{border-bottom:1px solid var(--color-border)}
.faq-item>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-4);padding:var(--spacing-4) 0}
.faq-item>summary::-webkit-details-marker{display:none}
.faq-item>summary:hover{color:var(--color-text-accent)}
.faq-chev{transition:transform var(--duration-fast) var(--ease-standard);flex-shrink:0}
.faq-item[open] .faq-chev{transform:rotate(180deg)}
.faq-a{padding:0 0 var(--spacing-4)}

/* Native controls not covered by an Astryx component on a no-JS page. */
:where(summary,.consent-btn,.more-btn,select,input):focus-visible{outline:var(--focus-outline-width) solid var(--focus-outline-color);outline-offset:var(--focus-outline-offset);border-radius:var(--radius-inner)}
.consent-btn,.more-btn{font:inherit;font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);border-radius:var(--radius-element);padding:var(--spacing-2) var(--spacing-4);cursor:pointer;border:1px solid var(--color-border-emphasized);background:var(--color-background-surface);color:var(--color-text-primary)}
.consent-btn:hover,.more-btn:hover{background:var(--color-overlay-hover)}

/* Tilbud */
.filters{display:flex;flex-wrap:wrap;gap:var(--spacing-6);align-items:center}
.filter{display:flex;align-items:center;gap:var(--spacing-3)}
.filter select{font:inherit;font-size:var(--font-size-base);color:var(--color-text-primary);background:var(--color-background-surface);border:1px solid var(--color-border-emphasized);border-radius:var(--radius-element);padding:var(--spacing-2) var(--spacing-3)}
.filter input[type=range]{accent-color:var(--color-accent);width:180px}
.deals-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--spacing-4)}
.deal{height:100%}
.deal-badge{background:var(--color-success);color:var(--color-on-accent);border-radius:var(--radius-inner);padding:0 var(--spacing-2)}
.more-wrap{text-align:center}

/* Guide and hub titles: the Astryx default H1 is an app heading (2xl). Editorial pages take at least 3xl;
   themes with a larger H1 (matcha) keep theirs. */
.guide h1,.frame>.astryx-stack>.astryx-stack>h1{font-size:max(var(--text-heading-1-size),var(--font-size-3xl));line-height:1.24}

/* Home category tiles: image stage, title, chips. Equal heights per row. */
.cat-tile{height:100%;display:flex;flex-direction:column;overflow:hidden;transition:box-shadow var(--duration-fast) var(--ease-standard),transform var(--duration-fast) var(--ease-standard)}
.cat-tile:hover{box-shadow:var(--shadow-med);transform:translateY(-2px)}
.cat-stage{display:block;background:var(--color-background-body);padding:var(--spacing-5)}
.cat-stage img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;transition:transform var(--duration-medium) var(--ease-standard)}
.cat-tile:hover .cat-stage img{transform:scale(1.04)}
.chips{display:flex;flex-wrap:wrap;gap:var(--spacing-1)}
.chip{display:inline-flex;padding:var(--spacing-1) var(--spacing-3);border-radius:var(--radius-full);background:var(--color-background-muted);color:var(--color-text-primary);text-decoration:none;transition:background var(--duration-fast) var(--ease-standard)}
.chip:hover{background:var(--color-accent-muted);color:var(--color-text-accent)}
@media (prefers-reduced-motion:reduce){.cat-tile,.cat-tile:hover,.cat-stage img,.cat-tile:hover .cat-stage img,.mega-panel{transition:none;transform:none}}

/* Clickable cards without client JS. Astryx ClickableCard renders a 1px overlay anchor and expects its runtime
   to handle the click; on a static page we stretch that anchor over the card instead. Category tiles use the
   same pattern with their own overlay, and keep chips and the title link above it so they stay clickable. */
.guide-card,.cat-tile{position:relative;cursor:pointer}
.guide-card>a[aria-label],.tile-link{position:absolute!important;inset:0!important;width:auto!important;height:auto!important;margin:0!important;clip:auto!important;clip-path:none!important;overflow:visible!important;opacity:1!important;z-index:1;border-radius:inherit}
.guide-card>a[aria-label]:focus-visible{outline:var(--focus-outline-width) solid var(--focus-outline-color);outline-offset:var(--focus-outline-offset)}
.guide-card:hover{box-shadow:var(--shadow-med)}
.cat-tile .chips{position:relative;z-index:2;pointer-events:none}.cat-tile .chip,.cat-tile .astryx-link{position:relative;z-index:2;pointer-events:auto}

/* In-page anchors (TOC, Læs mere) land below the sticky header instead of under it. */
html{scroll-padding-top:calc(var(--site-header-h,72px) + var(--spacing-4))}
[id]{scroll-margin-top:calc(var(--site-header-h,72px) + var(--spacing-4))}
.changelog summary{cursor:pointer;list-style:revert}.changelog ul{margin:var(--spacing-2) 0 0;padding-left:var(--spacing-5);display:grid;gap:var(--spacing-1)}
.tile-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:var(--spacing-4)}
.product-tile{height:100%}.product-tile .tile-media img{object-fit:contain}
.quick-picks{padding-top:var(--spacing-2)}
.price-tag{display:inline-flex;align-items:center;gap:var(--spacing-1)}
.price-info{position:relative;display:inline-flex;color:var(--color-text-secondary);cursor:help;border-radius:var(--radius-full)}
.price-info:focus-visible{outline:var(--focus-outline-width) solid var(--focus-outline-color);outline-offset:2px}
.price-info::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + var(--spacing-2));transform:translateX(-50%);width:max-content;max-width:260px;padding:var(--spacing-2) var(--spacing-3);border-radius:var(--radius-element);background:var(--color-background-popover);color:var(--color-text-primary);border:1px solid var(--color-border);box-shadow:var(--shadow-med);font-size:var(--font-size-sm,0.8125rem);font-weight:400;line-height:1.4;white-space:normal;opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--duration-fast) var(--ease-standard);z-index:30}
.price-info:hover::after,.price-info:focus::after{opacity:1;visibility:visible}

/* Product tiles and deal cards: equal height in a row, fixed name height, CTA pinned to the bottom. */
.product-tile,.deal{height:100%}
.tile-body{display:flex;flex-direction:column;gap:var(--spacing-3);height:100%}
.tile-label{display:block;min-height:1.4em}
.tile-name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;min-height:calc(3 * 1.45em);line-height:1.45}
.deal .tile-name{-webkit-line-clamp:2;min-height:calc(2 * 1.3em);line-height:1.3}
.tile-cta{margin-top:auto;display:flex;flex-direction:column;gap:var(--spacing-2)}
/* Shop buttons in tiles: full width and never truncated ("Shop hos Friluftsla..."); long shop names wrap. */
.tile-cta .astryx-button{width:100%;height:auto;min-height:44px;white-space:normal}
.tile-cta .astryx-button span{white-space:normal!important;text-overflow:clip!important;overflow:visible!important;text-align:center}
.tile-cta .offer-row{width:100%}
.price-info{margin-left:var(--spacing-1)}
.price-tag{gap:var(--spacing-2)}
.deal-media{position:relative}
.deal-media .deal-badge{position:absolute;top:var(--spacing-2);left:var(--spacing-2);z-index:1}
.quick-picks.guide-sec{margin-top:var(--spacing-2)}