/*
Theme Name: Byg & Bevaring V3
Theme URI: https://bygogbevaring.dk
Author: Byg & Bevaring ApS
Description: Tema til Byg & Bevaring ApS med animeret logo, lokale skrifttyper og flere billeder. Kontaktoplysninger redigeres under Udseende > Tilpas.
Version: 3.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietary
Text Domain: byg-og-bevaring
*/

@font-face{font-family:'League Gothic';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/league-gothic-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/newsreader-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/newsreader-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:400;font-display:swap;src:url(assets/fonts/newsreader-latin-400-italic.woff2) format('woff2')}

:root{
  --bg:#F6F1E8; --bg-alt:#EFE7DA; --ink:#231F1D; --red:#E33D49; --red-btn:#C9303C; --line:#D8CDBB;
  --gutter:clamp(20px,5vw,72px); --section:clamp(72px,9vw,128px);
  --display:'League Gothic','Arial Narrow',Impact,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Newsreader',Georgia,serif;font-size:19px;line-height:1.65}
img{max-width:100%;height:auto;display:block}
a{color:var(--ink);text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:5px}
a:hover{color:var(--red-btn)}
a:focus-visible{outline:3px solid var(--red);outline-offset:3px}
figure{margin:0}
p{margin:0}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:400;text-transform:uppercase}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link:focus{position:fixed;left:8px;top:8px;z-index:100;width:auto;height:auto;clip:auto;background:var(--bg);padding:12px 16px}

/* Titler */
.bb-h2{font-size:clamp(52px,6.4vw,96px);line-height:.92;text-wrap:balance}
.bb-cap{font-size:16px;line-height:1.5;font-style:italic}

/* Knapper */
.bb-btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 32px;border:1px solid var(--ink);text-decoration:none;font-size:19px}
.bb-btn--solid{background:var(--red-btn);border-color:var(--red-btn);color:#fff;font-weight:600}
.bb-btn--solid:hover{color:#fff;background:#B22833}
.bb-btns{display:flex;flex-wrap:wrap;align-items:center;gap:16px 20px}

/* Logo-animation */
.lg{--k:1;position:relative;display:block}
.lg svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;opacity:0}
.lg svg *{fill:none;stroke:#E33D49;stroke-width:15;stroke-linejoin:miter;stroke-dasharray:1;stroke-dashoffset:1}
.lg .lg-final{position:absolute;inset:0;width:100%;height:100%;display:block}
@keyframes lg-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes lg-in{from{opacity:0}to{opacity:1}}
@keyframes lg-out{from{opacity:1}to{opacity:0}}
.lg-play svg,.lg-hover:hover svg{opacity:1;animation:lg-out .4s ease calc(3.8s*var(--k)) both}
.lg-play svg *,.lg-hover:hover svg *{animation:lg-draw calc(var(--l)*var(--k)) ease-in-out calc(var(--d)*var(--k)) both}
.lg-play .lg-final,.lg-hover:hover .lg-final{animation:lg-in .5s ease calc(3.7s*var(--k)) both;opacity:0}
@media (prefers-reduced-motion:reduce){.lg svg{display:none}.lg .lg-final{animation:none!important;opacity:1!important}html{scroll-behavior:auto}}

/* Top */
.bb-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 32px;padding:16px var(--gutter)}
.bb-brand{display:flex;align-items:center;gap:14px;text-decoration:none;min-height:44px}
.bb-brand .lg{height:52px;aspect-ratio:1379/1112;--k:.65}
.bb-brand-name{font-family:var(--display);font-size:34px;line-height:1;letter-spacing:.02em;text-transform:uppercase;color:var(--red)}
.bb-nav{display:flex;flex-wrap:wrap;align-items:center;gap:0 28px}
.bb-nav a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;font-size:18px}
.bb-nav a.bb-nav-call{padding:0 20px;border:1px solid var(--ink)}

/* Hero */
.bb-hero{display:flex;flex-wrap:wrap;align-items:stretch}
.bb-hero-text{flex:1 1 480px;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:28px;padding:48px var(--gutter) 64px}
.bb-hero h1{font-size:clamp(60px,7.6vw,116px);line-height:.92;letter-spacing:.005em;text-wrap:balance}
.bb-trade{display:flex;flex-wrap:wrap;gap:0 18px;font-size:17px;letter-spacing:.42em;text-transform:uppercase}
.bb-trade i{font-style:normal;color:var(--red)}
.bb-lead{max-width:540px;font-size:21px;line-height:1.6}
.bb-hero-img{flex:1 1 440px;min-width:0;min-height:560px;display:flex}
.bb-hero-img img{width:100%;height:auto;min-height:560px;max-height:820px;object-fit:cover;object-position:50% 30%}

/* Tilgang */
.bb-about{padding:var(--section) var(--gutter);display:flex;flex-wrap:wrap;gap:56px 88px;align-items:flex-start}
.bb-about figure{flex:0 1 400px;min-width:0}
.bb-about figure img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 40%}
.bb-about-text{flex:1 1 420px;min-width:0;display:flex;flex-direction:column;gap:28px}
.bb-about-text p{max-width:62ch}

/* Billedbånd */
.bb-band{margin:0 0 var(--section)}
.bb-band img{width:100%;aspect-ratio:21/9;object-fit:cover;object-position:50% 35%}

/* Ydelser */
.bb-services{padding:0 var(--gutter) var(--section);display:flex;flex-wrap:wrap;gap:40px 88px;align-items:flex-start}
.bb-services-intro{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:20px}
.bb-services-intro p{max-width:40ch;font-size:20px}
.bb-list{flex:1.5 1 440px;min-width:0;list-style:none;margin:0;padding:0;border-top:4px solid var(--red)}
.bb-list li{padding:20px 0;border-bottom:1px solid var(--line)}
.bb-list h3{font-size:38px;line-height:1.05}

/* Detaljer */
.bb-details{padding:0 var(--gutter) var(--section);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:20px}
.bb-details img{width:100%;aspect-ratio:4/5;object-fit:cover}

/* Projekter */
.bb-projects{background:var(--bg-alt);padding:var(--section) var(--gutter);display:flex;flex-direction:column;gap:72px}
.bb-row{display:flex;flex-wrap:wrap;align-items:flex-start;gap:40px 48px}
.bb-fig{min-width:0;display:flex;flex-direction:column;gap:14px}
.bb-fig img{width:100%}
.bb-fig--wardrobe{flex:0 1 520px}
.bb-fig--drawers{flex:0 1 420px;margin-top:130px}
.bb-fig--wardrobe img,.bb-fig--drawers img{aspect-ratio:3/4;object-fit:cover}
.bb-projects-text{flex:1 1 280px;min-width:0;align-self:flex-end;display:flex;flex-direction:column;gap:20px}
.bb-projects-text .bb-big{font-size:24px;line-height:1.45}
.bb-wide img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:50% 45%}
.bb-fig--veranda{flex:0 1 480px}
.bb-fig--veranda img{aspect-ratio:3/4;object-fit:cover}
.bb-col{flex:1 1 420px;min-width:0;display:flex;flex-direction:column;gap:40px}
.bb-col img,.bb-fig--roof img{aspect-ratio:3/2;object-fit:cover}
.bb-fig--roof{flex:1.5 1 480px}
.bb-fig--roof img{object-position:60% 50%}
.bb-fig--roofp{flex:1 1 320px}
.bb-fig--roofp img{aspect-ratio:2/3;object-fit:cover;object-position:50% 30%}
.bb-row--end{align-items:flex-end}

/* Referencer */
.bb-refs{padding:var(--section) var(--gutter);display:flex;flex-direction:column;gap:56px}
.bb-refs ul{list-style:none;margin:0;padding:0;border-top:4px solid var(--red);display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));column-gap:56px}
.bb-refs li{padding:24px 0;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.bb-refs h3{font-size:34px;line-height:1}
.bb-refs li p{font-size:18px;line-height:1.55}

/* Kontakt */
.bb-contact{background:url(assets/img/trae.jpg) center/cover;padding:clamp(56px,8vw,112px) var(--gutter);display:flex;flex-wrap:wrap;align-items:stretch;gap:32px}
.bb-card{flex:1 1 420px;max-width:680px;background:var(--bg);padding:clamp(28px,5vw,56px);display:flex;flex-direction:column;gap:24px}
.bb-card h2{font-size:clamp(48px,5.6vw,80px);line-height:.92}
.bb-reach{display:flex;flex-direction:column;gap:8px;border-top:4px solid var(--red);padding-top:24px}
.bb-reach .bb-tel{font-family:var(--display);font-size:clamp(48px,5vw,68px);line-height:1;letter-spacing:.02em;text-decoration:none}
.bb-reach .bb-mail{font-size:21px}
.bb-van{flex:1 1 360px;min-width:0;display:flex}
.bb-van img{width:100%;min-height:320px;object-fit:cover;object-position:40% 50%}

/* Bund */
.bb-foot{border-top:2px solid var(--red)}
.bb-foot-in{padding:56px var(--gutter) 40px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:32px}
.bb-foot-logo{width:220px;max-width:100%;display:flex;flex-direction:column;gap:2.6%}
.bb-foot-logo .lg{width:100%;aspect-ratio:1379/1112}
.bb-foot address{font-style:normal;font-size:17px;line-height:1.7}

/* Almindelige sider */
.bb-page{max-width:820px;margin:0 auto;padding:64px var(--gutter) var(--section)}
.bb-page h1{font-size:clamp(52px,6vw,88px);line-height:.95;margin-bottom:32px}
.bb-page .entry>*+*{margin-top:1.2em}
.bb-page .entry h2,.bb-page .entry h3{font-size:44px;line-height:1;margin-top:1.6em}
.bb-page .entry img{height:auto}