/*
Theme Name: Salon Barber
Description: Mørkt frisør/barber-tema med kundelogin (Min side). Alt indhold redigeres under Udseende → Tilpas.
Version: 3.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: salon-barber
*/
:root{--bg:#0F0F0F;--surface:#1A1A1A;--ink:#EDE6DA;--muted:#9A9288;--line:#2E2B27;--accent:#C8A25E;--box-w:1320px}
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font:17px/1.7 Inter,system-ui,sans-serif;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-underline-offset:4px}a:hover{color:var(--accent)}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{font-family:Oswald,Impact,sans-serif;font-weight:500;text-transform:uppercase;letter-spacing:.04em;line-height:1.1}
.box{max-width:var(--box-w);margin:0 auto;padding:0 48px}
.screen-reader-text{position:absolute;left:-9999px}
.eyebrow{letter-spacing:.3em;text-transform:uppercase;color:var(--accent);font-size:13px;margin-bottom:12px}
.btn{display:inline-block;background:var(--accent);color:var(--bg);padding:16px 32px;text-transform:uppercase;letter-spacing:.14em;font-size:14px;font-weight:600;text-decoration:none;border:1px solid var(--accent)}
.btn:hover{color:var(--bg);filter:brightness(1.1)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.ghost:hover{color:var(--accent);border-color:var(--accent)}
.btns{display:flex;gap:16px;flex-wrap:wrap;margin-top:32px}
/* Header */
.site-header{position:relative;z-index:10;border-bottom:1px solid var(--line)}
.has-hero .site-header{position:absolute;left:0;right:0;top:0;border-bottom:0}
.admin-bar .site-header{top:32px}
.bar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:24px;padding-bottom:24px}
.logo{font:500 24px/1 Oswald,sans-serif;letter-spacing:.14em;text-transform:uppercase;text-decoration:none}
.logo img{max-height:54px;width:auto}
.main-nav{display:flex;align-items:center;gap:32px}
.main-nav ul{display:flex;gap:32px;list-style:none;padding:0}
.main-nav a{text-decoration:none;text-transform:uppercase;letter-spacing:.12em;font-size:14px}
.main-nav .login-btn{border:1px solid var(--ink);padding:10px 20px}
.nav-toggle{display:none;background:none;border:1px solid var(--ink);width:44px;height:44px;color:var(--ink);cursor:pointer}
.nav-toggle .bars,.nav-toggle .bars:before,.nav-toggle .bars:after{display:block;width:20px;height:2px;background:currentColor;margin:0 auto;position:relative}
.nav-toggle .bars:before,.nav-toggle .bars:after{content:"";position:absolute;left:0}
.nav-toggle .bars:before{top:-6px}.nav-toggle .bars:after{top:6px}
/* Sektioner */
.sec{padding:96px 0}
.sec.alt{background:var(--surface)}
.sec h2{font-size:clamp(2rem,4vw,3rem);margin-bottom:48px}
.hero{position:relative;min-height:88vh;display:flex;align-items:center;background:var(--surface) center/cover no-repeat}
.hero-shade{position:absolute;inset:0;background:var(--bg)}
.hero-in{position:relative;width:100%;padding-top:120px;padding-bottom:80px}
.hero h1{font-size:clamp(3rem,8vw,6.5rem)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:40px}
.svc{border-bottom:1px solid var(--line);padding-bottom:20px}
.svc h3{font-size:20px;margin-bottom:6px}.svc p{color:var(--muted)}
.svc .price{color:var(--accent);font:500 22px Oswald,sans-serif;margin-top:10px}
.story{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.story .ph{min-height:460px;background:var(--bg) center/cover}
.story p{margin-bottom:16px;color:var(--muted)}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover}
.visit{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:48px}
.visit h3{font-size:18px;margin-bottom:8px}.visit p{margin-bottom:24px}
.hint{color:var(--muted);font-size:14px}
.site-footer{border-top:1px solid var(--line);padding:32px 0;font-size:14px;color:var(--muted)}
.site-footer .box{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
/* Sider */
.page-wrap{padding:72px 0 96px}
.page-wrap h1{font-size:clamp(2rem,5vw,3.5rem);margin-bottom:32px}
.entry>*+*{margin-top:1em}
/* Min side */
.salon-account{max-width:520px;margin:0 auto;background:var(--surface);border:1px solid var(--line);padding:40px}
.salon-account h2{margin:0 0 12px}
.salon-tabs{display:flex;gap:24px;border-bottom:1px solid var(--line);margin-bottom:24px;text-transform:uppercase;letter-spacing:.12em;font-size:14px}
.salon-tabs a{padding-bottom:12px;color:var(--muted);text-decoration:none}
.salon-tabs a.on{color:var(--accent);border-bottom:2px solid var(--accent)}
.salon-account label{display:block;font-size:14px;margin-bottom:6px}
.salon-account input[type=text],.salon-account input[type=email],.salon-account input[type=password]{width:100%;height:48px;border:1px solid #4A453E;padding:0 14px;font:inherit;margin-bottom:18px;background:var(--bg);color:var(--ink)}
.salon-account input:focus{outline:2px solid var(--accent);outline-offset:1px}
.salon-account input[type=submit],.salon-btn{display:inline-block;height:52px;line-height:52px;padding:0 32px;background:var(--accent);color:var(--bg);border:0;font:600 14px/52px Inter,sans-serif;text-transform:uppercase;letter-spacing:.14em;cursor:pointer;text-decoration:none}
.salon-account .login-remember label{display:flex;gap:8px;align-items:center}
.salon-msg{padding:12px 16px;background:#3A1F18;color:#F2C9BC;margin-bottom:20px;font-size:14px}
.salon-small{font-size:14px;margin-top:20px}
@media(max-width:860px){
 .box{padding:0 24px}.sec{padding:64px 0}.story{grid-template-columns:1fr;gap:32px}.story .ph{min-height:300px}
 .nav-toggle{display:block}
 .main-nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--bg);flex-direction:column;align-items:flex-start;gap:20px;padding:24px;border-bottom:1px solid var(--line)}
 .main-nav.open{display:flex}.main-nav ul{flex-direction:column;gap:20px}
 .site-header .box{position:relative}.admin-bar .site-header{top:46px}
}