/* =========================================================
   WALID FRISØR — STYLE.CSS (Black & White Theme)
   Bygger på Poppins / Open Sans, med rene linjer og fokus på typografi.
   ========================================================= */

/* ===== RESET ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
img { max-width: 100%; display: block; height: auto; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
button { border: 0; background: none; cursor: pointer; }
input, textarea, select, button { font: inherit; }

/* ===== THEME TOKENS ===== */
:root{
  /* Colors (B/W) */
  --primary-color:#000;            /* Primær – svart */
  --secondary-color:#222;          /* Mørk grå */
  --accent-color:#fff;             /* Aksent – hvit */
  --text-color:#111;               /* Primær tekst */
  --text-light:#777;               /* Sekundær tekst */
  --white-color:#fff;
  --light-gray:#f5f5f5;
  --dark-gray:#444;

  /* Gradients */
  --gradient-primary:linear-gradient(135deg,#000 0%,#222 100%);
  --gradient-secondary:linear-gradient(135deg,#111 0%,#333 100%);

  /* Typography */
  --font-heading:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  --font-body:'Open Sans',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;

  /* Font sizes */
  --h1-font-size:3.25rem;
  --h2-font-size:2.25rem;
  --h3-font-size:1.5rem;
  --h4-font-size:1.125rem;
  --normal-font-size:1rem;
  --small-font-size:.875rem;

  /* Weights */
  --font-light:300; --font-regular:400; --font-medium:600; --font-bold:700;

  /* Layout */
  --header-height:4.25rem;
  --section-padding:6rem 0;
  --container-gap:1.5rem;

  /* Radius & Shadows */
  --radius-sm:.5rem; --radius-md:1rem; --radius-lg:1.25rem;
  --shadow-1:0 2px 8px rgba(0,0,0,.08);
  --shadow-2:0 6px 20px rgba(0,0,0,.12);
  --shadow-3:0 12px 36px rgba(0,0,0,.16);

  /* Motion */
  --t-fast:.25s ease; --t-med:.4s ease; --t-slow:.7s ease;

  /* Z */
  --z-tooltip:10; --z-fixed:100; --z-modal:1000;
}

/* Responsive type */
@media (max-width: 992px){
  :root{
    --h1-font-size:2.4rem; --h2-font-size:1.9rem; --h3-font-size:1.35rem; --h4-font-size:1.05rem;
  }
}

/* ===== BASE ===== */
body{
  font-family:var(--font-body);
  font-size:var(--normal-font-size);
  color:var(--text-color);
  line-height:1.65;
  background:#fff;
}
h1,h2,h3,h4{
  font-family:var(--font-heading);
  font-weight:var(--font-medium);
  line-height:1.15;
}
.container{
  max-width:1200px;
  margin-inline:auto;
  padding-inline:var(--container-gap);
}
.section{
  padding:var(--section-padding);
  scroll-margin-top:calc(var(--header-height) + 1rem);
}
.section__header{ text-align:center; margin-bottom:3rem; }
.section__subtitle{
  font-size:var(--small-font-size);
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--text-light);
  display:inline-block;
  margin-bottom:.4rem;
}
.section__title{
  font-size:var(--h2-font-size);
  color:var(--primary-color);
}
.section__title-accent{
  background:linear-gradient(90deg,#0b0a0a,#9a9a9a,#000);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.section__description{
  max-width:65ch; margin:.75rem auto 0; color:var(--text-light);
}

/* Skip link (a11y) */
.skip-to-content{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-to-content:focus{
  position:fixed; left:1rem; top:1rem; width:auto; height:auto;
  background:#000; color:#fff; padding:.5rem .75rem; border-radius:.5rem; z-index:var(--z-modal);
}

/* Focus */
:where(a,button,input,textarea,select):focus-visible{
  outline:3px solid #111; outline-offset:2px; border-radius:6px;
}

/* ===== BUTTONS ===== */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.875rem 1.4rem; border-radius:var(--radius-sm);
  font-weight:var(--font-medium); transition:transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast), color var(--t-fast);
  min-height:44px; white-space:nowrap;
}
.btn--small{ padding:.55rem .9rem; font-size:.92rem; min-height:38px; }
.btn--large{ padding:1rem 1.8rem; font-size:var(--h4-font-size); }
.btn--primary{ background:var(--gradient-primary); color:#fff; box-shadow:var(--shadow-1); }
.btn--primary:hover{ transform:translateY(-2px); box-shadow:var(--shadow-2); }
.btn--secondary{ background:transparent; border:2px solid var(--primary-color); color:var(--primary-color); }
.btn--secondary:hover{ background:var(--primary-color); color:#fff; }

/* ===== HEADER / NAV ===== */
.header{
  position:fixed; inset:0 0 auto 0; height:var(--header-height);
  background:rgba(255,255,255,.96); backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(0,0,0,.06);
  box-shadow:var(--shadow-1); z-index:var(--z-fixed);
  transition:transform 220ms ease, box-shadow 220ms ease, background 220ms ease;
}
.header.header--hide{ transform:translateY(-100%); }
.nav{
  height:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem;
}

/* Logo (bilde eller ikon + tekst) */
.nav__logo{
  display:inline-flex; align-items:center; gap:.5rem; padding:2px 4px;
  border-radius:10px; transition:transform .25s ease, box-shadow .25s ease, filter .25s ease;
  color:var(--primary-color); font-weight:var(--font-bold);
}
.nav__logo-img{ height:100px; width:auto; object-fit:contain; display:block; }
.nav__logo:hover{ transform:translateY(-1px); box-shadow:0 8px 20px rgba(0,0,0,.10); }
.nav__logo:hover .nav__logo-img{ transform:scale(1.04); filter:drop-shadow(0 4px 10px rgba(0,0,0,.22)); }
@media (max-width:768px){ .nav__logo-img{ height:100px; } }

/* Menu */
.nav__menu{ display:flex; align-items:center; gap:2rem; }
.nav__list{ display:flex; gap:2rem; }
.nav__link{
  position:relative; color:var(--text-color); font-weight:var(--font-medium);
}
.nav__link:hover, .nav__link.active-link{ color:var(--secondary-color); }
.nav__link::after{
  content:""; position:absolute; left:0; bottom:-.45rem; height:2px; width:0;
  background:linear-gradient(90deg,#111,#333); transition:width var(--t-fast);
}
.nav__link:hover::after, .nav__link.active-link::after{ width:100%; }
.nav__actions{ display:flex; align-items:center; gap:1rem; }

.nav__toggle, .nav__close{
  display:none; font-size:1.25rem; color:var(--primary-color);
}

/* Mobile menu */
@media (max-width:768px){
  .nav__menu{
    position:fixed; top:0; right:-100%; width:min(100%,420px); height:100vh;
    background:#fff; padding:6rem 2rem 2rem; box-shadow:-8px 0 24px rgba(0,0,0,.12);
    transition:right var(--t-med); z-index:var(--z-modal);
    display:flex; flex-direction:column; align-items:flex-start; gap:2rem;
  }
  .nav__menu.show-menu{ right:0; }
  .nav__list{ flex-direction:column; gap:1.25rem; }
  .nav__link{ font-size:1.15rem; display:block; min-height:44px; }
  .nav__toggle, .nav__close{ display:block; }
  .nav__close{ position:absolute; right:1.25rem; top:1rem; font-size:1.75rem; }
}

/* ===== HERO ===== */
.hero{
  padding-top:calc(var(--header-height) + 2rem);
  min-height:100vh; display:flex; align-items:center;
  background:linear-gradient(135deg,#000 0%, #111 100%);
}
.hero__container{
  display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:3rem;
}
.hero__title{ font-size:var(--h1-font-size); color:#fff; margin-bottom:.75rem; }
.hero__title-accent{
  background:linear-gradient(90deg,#fff,#bbb,#fff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero__description{ color:#f1f1f1; font-size:1.125rem; margin-bottom:1.25rem; }
.hero__actions{ display:flex; gap:.85rem; flex-wrap:wrap; margin-bottom:1.5rem; }

/* Hero stats */
.hero__stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; color:#fff; font-variant-numeric:tabular-nums;
}
.hero__stat{ text-align:center; }
.hero__stat-number{ display:block; font-size:1.6rem; font-weight:var(--font-bold); color:#fff; }
.hero__stat-text{ font-size:.9rem; color:#ddd; }

/* Hero image (grayscale) */
.hero__image{ position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-3); }
.hero__img{ width:100%; height:500px; object-fit:cover; filter:grayscale(100%) contrast(1.05); }

/* Hero secondary button: hvit outline på mørk bakgrunn */
.hero .btn--secondary{ border-color:#fff; color:#fff; }
.hero .btn--secondary:hover{ background:#fff; color:#000; }

@media (max-width:1024px){
  .hero__container{ grid-template-columns:1fr; gap:2rem; }
  .hero__image{ order:-1; }
}
@media (max-width:768px){
  .hero__img{ height:360px; }
  .hero__stats{ grid-template-columns:1fr; text-align:left; }
}
@media (max-width:480px){
  .hero__img{ height:280px; }
}

/* ===== ABOUT ===== */
.about__container{
  display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center;
}
.about__description{ color:var(--text-light); margin-bottom:1rem; }
.about__features{ display:flex; flex-direction:column; gap:1rem; margin-top:.25rem; }
.about__feature{ display:flex; align-items:flex-start; gap:1rem; }
.about__feature-icon{
  width:3rem; height:3rem; display:grid; place-items:center; color:#fff;
  background:var(--gradient-secondary); border-radius:var(--radius-sm);
  font-size:1.25rem;
}
.about__feature-title{ font-size:var(--h4-font-size); color:var(--primary-color); margin-bottom:.25rem; }
.about__feature-description{ color:var(--text-light); }
.about__image{ border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-2); }
.about__img{ width:100%; height:420px; object-fit:cover; filter:grayscale(100%) contrast(1.04); }
@media (max-width:1024px){
  .about__container{ grid-template-columns:1fr; }
}

/* ===== SERVICES ===== */
.services{ background:var(--light-gray); }
.services__container{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:2rem; margin-top:2rem;
}
.service__card{
  background:#fff; padding:2rem; border-radius:var(--radius-lg);
  box-shadow:var(--shadow-1); transition:transform var(--t-med), box-shadow var(--t-med);
  position:relative; overflow:hidden;
}
.service__card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-3); }
.service__card--featured{
  background:var(--gradient-primary); color:#fff;
}
.service__badge{
  position:absolute; top:1rem; right:1rem; background:#111; color:#fff;
  padding:.4rem .75rem; border-radius:999px; font-size:.8rem; font-weight:var(--font-medium);
}
.service__icon{
  width:4rem; height:4rem; display:grid; place-items:center; color:#fff;
  background:var(--gradient-secondary); border-radius:var(--radius-md); font-size:1.6rem; margin-bottom:1rem;
}
.service__card--featured .service__icon{ background:rgba(255,255,255,.18); }
.service__title{ font-size:var(--h3-font-size); color:var(--primary-color); margin-bottom:.35rem; }
.service__card--featured .service__title{ color:#fff; }
.service__description{ color:var(--text-light); margin-bottom:1rem; }
.service__features{ display:flex; flex-direction:column; gap:.55rem; }
.service__features li{ display:flex; align-items:center; gap:.5rem; font-size:.95rem; }
.service__features i{ color:#27ae60; }

/* ===== PRICES (Projects grid) ===== */
.projects__container{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.5rem;
}
.project__card{
  background:#fff; border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow-1); transition:transform var(--t-med), box-shadow var(--t-med);
}
.project__card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-2); }
.project__image{ position:relative; overflow:hidden; }
.project__img{ width:100%; height:240px; object-fit:cover; filter:grayscale(100%) contrast(1.06); transition:transform var(--t-med); }
.project__card:hover .project__img{ transform:scale(1.04); }
.project__content{ padding:1.2rem 1.25rem 1.35rem; }
.project__title{ font-size:1.1rem; color:var(--primary-color); margin-bottom:.25rem; }
.project__description{ color:var(--text-light); margin-bottom:.6rem; }
.project__price{ border-top:1px solid #eee; padding-top:.6rem; }
.project__price-amount{ font-size:1.35rem; font-weight:var(--font-bold); color:#111; }

/* ===== BOOKING (Setmore embed) ===== */
.booking-embed{
  background:var(--light-gray);
  border-radius:12px; box-shadow:0 4px 20px rgba(0,0,0,.08); padding:24px;
}
.embed-wrap{
  border:1px solid #e5e5e5; border-radius:12px; overflow:hidden; background:#fff;
}
#setmore-embed{ width:100%; min-height:900px; border:0; display:block; }
.embed-fallback{ display:none; margin-top:12px; }
.btn-inline{ display:inline-block; padding:12px 18px; border-radius:10px; text-decoration:none; }

/* Samtykke-hint (kan skjules) */
.consent-tip{
  position:sticky; bottom:0; margin-top:12px;
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  background:#111; color:#fff; padding:.5rem .75rem; border-radius:10px;
}
.consent-tip .tip-scroll,.consent-tip .tip-close{
  background:#fff; color:#000; border-radius:8px; padding:.25rem .5rem;
}

/* ===== CONTACT ===== */
.contact__container{
  display:grid; grid-template-columns:1fr 2fr; gap:2rem; margin-bottom:2rem;
}
.contact__info{ display:flex; flex-direction:column; gap:1rem; }
.contact__card{
  display:flex; gap:1rem; align-items:flex-start;
  background:#fff; padding:1.25rem; border-radius:var(--radius-lg); box-shadow:var(--shadow-1);
  transition:box-shadow var(--t-fast);
}
.contact__card:hover{ box-shadow:var(--shadow-2); }
.contact__card-icon{
  width:3rem; height:3rem; display:grid; place-items:center; color:#fff;
  background:var(--gradient-secondary); border-radius:var(--radius-sm); font-size:1.1rem;
}
.contact__card-title{ font-size:var(--h4-font-size); color:var(--primary-color); margin-bottom:.25rem; }
.contact__card-text{ color:var(--text-color); word-break:break-word; }
.contact__card-note{ font-size:.85rem; color:var(--text-light); }

.contact__form{
  background:#fff; padding:1.75rem; border-radius:var(--radius-lg); box-shadow:var(--shadow-1);
  display:grid; grid-template-columns:1fr 1fr; gap:1rem;
}
.form__group{ display:flex; flex-direction:column; gap:.4rem; }
.form__group--full{ grid-column:1 / -1; }
.form__label{ font-weight:var(--font-medium); color:var(--primary-color); }
.form__input,.form__select,.form__textarea{
  background:var(--light-gray); border-radius:var(--radius-sm); padding:.9rem 1rem; color:var(--text-color);
  transition:box-shadow var(--t-fast), background var(--t-fast);
}
.form__input:focus,.form__select:focus,.form__textarea:focus{
  background:#fff; box-shadow:0 0 0 2px #222;
}
.form__textarea{ resize:vertical; min-height:120px; }
.form__submit{ grid-column:1/-1; justify-self:start; margin-top:.25rem; }

.contact__map{ margin-top:2rem; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-2); }
.contact__map-iframe{ width:100%; height:400px; border:0; }

/* ===== FOOTER ===== */
.footer{ background:var(--primary-color); color:#fff; padding:3rem 0 1rem; }
.footer__container{ display:grid; gap:2rem; }
.footer__content{
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:2rem;
}
.footer__logo{ display:flex; align-items:center; gap:.5rem; font-weight:var(--font-bold); font-size:1.1rem; margin-bottom:.5rem; }
.footer__description{ color:rgba(255,255,255,.85); margin:.5rem 0 1rem; }
.footer__social{ display:flex; gap:.6rem; }
.footer__social-link{
  width:2.35rem; height:2.35rem; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.08); color:#fff; transition:transform var(--t-fast), background var(--t-fast);
}
.footer__social-link:hover{ transform:translateY(-2px); background:rgba(255,255,255,.18); }
.footer__title{ font-size:var(--h4-font-size); margin-bottom:.75rem; }
.footer__list{ display:flex; flex-direction:column; gap:.35rem; }
.footer__link{ color:rgba(255,255,255,.85); }
.footer__link:hover{ color:#fff; text-decoration:underline; }
.footer__contact{ display:flex; align-items:center; gap:.5rem; color:rgba(255,255,255,.85); }
.footer__bottom{ border-top:1px solid rgba(255,255,255,.12); margin-top:1.25rem; padding-top:1rem; }
.footer__bottom-content{ display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; }
.footer__copyright{ color:rgba(255,255,255,.7); font-size:.9rem; }
.footer__legal{ display:flex; gap:1rem; }
.footer__legal-link{ color:rgba(255,255,255,.7); font-size:.9rem; }
.footer__legal-link:hover{ color:#fff; text-decoration:underline; }
.footer-credit{ font-size:.85rem; color:#bdbdbd; text-align:center; margin-top:.75rem; }

/* ===== SCROLL TO TOP ===== */
.scroll-top{
  position:fixed; right:1rem; bottom:5.25rem;
  width:3rem; height:3rem; border-radius:50%; display:grid; place-items:center;
  background:var(--gradient-primary); color:#fff; box-shadow:var(--shadow-2);
  transition:transform var(--t-fast), box-shadow var(--t-fast), opacity var(--t-fast);
  opacity:0; visibility:hidden; z-index:var(--z-tooltip);
}
.scroll-top.show{ opacity:1; visibility:visible; }
.scroll-top:hover{ transform:translateY(-2px); box-shadow:var(--shadow-3); }

@media (min-width:769px){ .scroll-top{ bottom:2rem; } }

/* ===== ANIMATIONS ===== */
@keyframes fadeInUp{ from{opacity:0; transform:translateY(24px)} to{opacity:1; transform:translateY(0)} }
@keyframes fadeInLeft{ from{opacity:0; transform:translateX(-24px)} to{opacity:1; transform:translateX(0)} }
@keyframes fadeInRight{ from{opacity:0; transform:translateX(24px)} to{opacity:1; transform:translateX(0)} }
.animate-fade-up{ animation:fadeInUp .8s ease forwards; }
.animate-fade-left{ animation:fadeInLeft .8s ease forwards; }
.animate-fade-right{ animation:fadeInRight .8s ease forwards; }

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  html:focus-within{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001s !important; animation-iteration-count:1 !important; transition-duration:.001s !important; }
}

/* ===== RESPONSIVE TWEAKS ===== */
@media (max-width:1024px){
  .container{ padding-inline:1.25rem; }
  .contact__container{ grid-template-columns:1fr; }
  .footer__content{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px){
  .section{ padding:4.5rem 0; }
  .services__container, .projects__container{ grid-template-columns:1fr; }
  .contact__form{ grid-template-columns:1fr; padding:1.25rem; }
  .footer__content{ grid-template-columns:1fr; text-align:center; }
  .footer__bottom-content{ flex-direction:column; text-align:center; }
}
@media (max-width:480px){
  .container{ padding-inline:1rem; }
  .btn{ padding:.75rem 1.15rem; }
  .btn--large{ padding:.85rem 1.35rem; font-size:var(--normal-font-size); }
  .project__img{ height:220px; }
  .project__content{ padding:1rem; }
}

/* ===== UTILITIES ===== */
html,body{ max-width:100%; overflow-x:hidden; }
.footer-credit {
  font-size: 0.8rem;
  color: #888;
  text-align: center;
  margin-top: 1rem;
}

.footer-credit a {
  color: inherit;
  text-decoration: underline;
}