/*
Theme Name: Mayah Child
Theme URI: https://mayah.co.ke
Description: Child theme for Mayah Laundry Call. All customisation lives here so the parent theme can be updated safely.
Author: High End Innovation Ltd
Template: wpzoom-inspiro-pro
Version: 1.0.0
Text Domain: mayah-child
*/

/* ---- Design tokens ---------------------------------------------------- */
:root{
  --mayah-navy:#0B2149;
  --mayah-navy-soft:#16305F;
  --mayah-blue:#1565C0;
  --mayah-blue-light:#4DABF7;
  --mayah-magenta:#D6156F;
  --mayah-magenta-dark:#A80F55;
  --mayah-bg:#EFF7FE;
  --mayah-white:#FFFFFF;
  --mayah-ink:#12213D;
  --mayah-muted:#54658A;
  --mayah-radius:14px;
  --mayah-shadow:0 6px 24px rgba(11,33,73,.10);
  --mayah-head:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mayah-sticky-h:69px;
  --mayah-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

/* ---- Base ------------------------------------------------------------- */
body.mayah{font-family:var(--mayah-body);color:var(--mayah-ink);background:var(--mayah-white)}
.mayah h1,.mayah h2,.mayah h3,.mayah h4{font-family:var(--mayah-head);font-weight:800;letter-spacing:-.01em;color:var(--mayah-navy);line-height:1.15}
.mayah p{line-height:1.65}
.mayah img{max-width:100%;height:auto}

/* Wrap: aldri vannrett overflyt */
.mayah *,.mayah *::before,.mayah *::after{box-sizing:border-box}
.mayah{overflow-x:hidden}

/* full-bleed: temaets innholdscontainer er ca 950px, saa plakaten og de
   fargede baandene ble staaende som en smal spalte midt paa siden. Denne
   teknikken bryter ut av enhver forelder uten aa kjenne bredden dens.
   overflow-x:clip paa html (ikke hidden) hindrer at 100vw skaper en
   vannrett scrollbar, og bevarer samtidig position:sticky. */
html{overflow-x:clip}
.my-hero--img,.my-section,.my-ctabar{width:100vw;max-width:100vw;margin-inline:calc(50% - 50vw)}
.my-wrap{width:100%;max-width:1140px;margin-inline:auto;padding-inline:20px}
.my-section{padding-block:clamp(48px,7vw,88px)}
.my-section--tint{background:var(--mayah-bg)}
.my-section--navy{background:var(--mayah-navy);color:#E8EFFA}
.my-section--navy h2,.my-section--navy h3{color:#fff}

.my-eyebrow{font-family:var(--mayah-head);font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;color:var(--mayah-magenta);margin:0 0 10px}
.my-h2{font-size:clamp(1.6rem,4.2vw,2.5rem);margin:0 0 14px}
.my-lede{font-size:clamp(1rem,2.4vw,1.12rem);color:var(--mayah-muted);max-width:62ch;margin:0 0 8px}
.my-section--navy .my-lede{color:#C3D3EC}

/* ---- Buttons ---------------------------------------------------------- */
.my-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--mayah-head);font-weight:700;font-size:1rem;line-height:1;
  padding:16px 26px;border-radius:999px;text-decoration:none;border:2px solid transparent;
  min-height:52px;transition:transform .12s ease,background .12s ease,box-shadow .12s ease}
.my-btn:hover{transform:translateY(-1px)}
.my-btn:focus-visible{outline:3px solid var(--mayah-blue-light);outline-offset:3px}
.my-btn--call{background:var(--mayah-magenta);color:#fff}
.my-btn--call:hover{background:var(--mayah-magenta-dark);color:#fff}
.my-btn--wa{background:#1FA855;color:#fff}
.my-btn--wa:hover{background:#17833F;color:#fff}
.my-btn--ghost{background:transparent;color:var(--mayah-navy);border-color:var(--mayah-navy)}
.my-section--navy .my-btn--ghost{color:#fff;border-color:#fff}
.my-btn--ghost:hover{background:var(--mayah-navy);color:#fff}
.my-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}

/* ---- Hero ------------------------------------------------------------- */
.my-hero{position:relative;background:linear-gradient(135deg,var(--mayah-navy) 0%,#123A7A 55%,var(--mayah-blue) 100%);color:#fff;overflow:hidden}
.my-hero::after{content:"";position:absolute;inset:auto -12% -45% auto;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(214,21,111,.42),transparent 62%);pointer-events:none}
.my-hero__inner{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;
  /* Inspiro PROs nav.navbar er position:absolute og legger seg OVER heroen.
     Maalt hoeyde: 93px desktop, 144px mobil -- den er hoeyere paa mobil fordi
     logo og meny stables. Klaringen maa derfor OEKE naar skjermen blir smalere,
     motsatt av en vanlig vw-basert clamp. Verdiene er maalt, ikke gjettet. */
  padding-top:148px;padding-bottom:clamp(52px,8vw,96px)}
.my-hero h1{color:#fff;font-size:clamp(2rem,5.6vw,3.4rem);margin:0 0 14px}
.my-hero__sub{font-family:var(--mayah-head);font-weight:700;color:var(--mayah-blue-light);font-size:clamp(1.05rem,2.8vw,1.35rem);letter-spacing:.02em;margin:0 0 16px}
.my-hero__txt{color:#D5E3F7;font-size:clamp(1rem,2.4vw,1.12rem);max-width:52ch;margin:0}
.my-hero__brand{font-family:var(--mayah-head);font-weight:800;letter-spacing:.16em;text-transform:uppercase;font-size:.85rem;color:#fff;opacity:.9;margin:0 0 14px}
.my-hero__card{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);border-radius:20px;padding:26px;backdrop-filter:blur(3px)}
.my-hero__list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.my-hero__list li{display:flex;align-items:center;gap:12px;font-family:var(--mayah-head);font-weight:600;color:#fff;font-size:1.02rem}
.my-hero__ico{flex:0 0 40px;width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.16);display:grid;place-items:center;font-size:1.15rem}

/* ---- Hero som heldekkende plakat -------------------------------------
   Begge plakatene baerer sin egen tekst, saa vi legger INGEN HTML-tekst oppaa
   -- det ville gitt dobbelt budskap. H1 er visuelt skjult for soek og
   skjermlesere. Sideforholdet bevares (height:auto), saa ingen del av
   plakaten beskjaeres paa noen bredde.
   Maalt navbar-bunn: 126px t.o.m. 430px, 93px paa 768px, 110px fra 1024px og
   opp (hoeyden foelger logostoerrelsen, som er 56px mobil / 74px desktop).
   Klaringen er 140px mobil og 124px desktop -- over det hoeyeste i hvert
   intervall, med margin.
   Inspiro PROs nav.navbar er absolutt posisjonert og ville lagt seg over
   plakatens overskrift; marineblaa stripe med maalt klaring loeser begge deler
   og gir samtidig kontrast for den hvite menyteksten. */
.my-hero--img{background:var(--mayah-navy);padding-top:124px;line-height:0}
.my-hero--img picture,.my-hero--img img{display:block;width:100%;height:auto}
.my-hero--img::after{content:none}

/* Visuelt skjult, men lesbar for soekemotor og skjermleser. */
/* Alle egenskapene maa ha !important: temaets `.entry-content h1` har
   spesifisitet (0,1,1) mot vaar (0,1,0), saa uten dette arver overskriften
   temaets bredde og hoeyde og blir staaende synlig -- absolutt posisjonert
   oppe i hjoernet, oppaa logoen. */
.my-sr{position:absolute!important;width:1px!important;height:1px!important;
  margin:-1px!important;padding:0!important;overflow:hidden!important;
  clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;
  white-space:nowrap!important;border:0!important;font-size:1rem!important}

/* Handlingsstripe rett under plakaten -- de tegnede knappene i bildet er
   ikke klikkbare, saa disse er de ekte. */
.my-ctabar{background:var(--mayah-navy);color:#E8EFFA;padding-block:22px}
.my-ctabar__inner{display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap}
.my-ctabar__txt{margin:0;font-size:1rem;line-height:1.55;color:#CFDDF2;max-width:56ch}
.my-ctabar__txt strong{font-family:var(--mayah-head);color:#fff;font-size:1.08rem}
.my-ctabar__btns{margin-top:0;flex-wrap:nowrap}
@media(max-width:768px){
  /* Paa mobil skal plakaten fylle skjermen. Den marineblaa klaringsstripa
     tok 140px av 844 og var det foerste man saa. I stedet ligger menyen naa
     OPPAA bildets oeverste del, med en gradient som gir logo og hamburger
     kontrast mot himmelen i bildet. */
  .my-hero--img{padding-top:0}
  /* Sloeret er bevisst svakt: 0.88 moerknet plakatens egen MAYAH-logo og fikk
     bildet til aa se ut som det ikke naadde toppen. Kontrasten for meny og
     ikoner kommer naa fra skyggene under, ikke fra aa demse ned bildet. */
  .my-hero--img::before{content:"";position:absolute;top:0;left:0;right:0;height:132px;
    background:linear-gradient(180deg,rgba(11,33,73,.34) 0%,rgba(11,33,73,.18) 55%,rgba(11,33,73,0) 100%);
    pointer-events:none;z-index:2}
  /* Menyen ligger over et bilde med vekslende lyshet. Skygge paa ikonene gjoer
     dem lesbare uansett hva som er bak, uten aa moerklegge hele plakaten. */
  .navbar .navbar-toggle,.navbar .navbar-toggle .icon-bar,
  .navbar .zoom-search-icon,.navbar .wpz-cart-icon,.navbar svg,.navbar a{
    filter:drop-shadow(0 1px 2px rgba(11,33,73,.95)) drop-shadow(0 2px 7px rgba(11,33,73,.75))}
  .custom-logo{filter:drop-shadow(0 2px 7px rgba(11,33,73,.5))}
  .my-hero--img{position:relative}
  .my-ctabar__inner{flex-direction:column;align-items:stretch}
  /* Plakaten (v2, 7. sept) har IKKE lenger knapper tegnet inn, saa stripas
     knapper er ikke lenger et duplikat. De vises igjen: stripe + sticky = to
     sett, som er innenfor grensen suiten haandhever. */
  .my-ctabar__btns{display:flex;flex-wrap:wrap}
  .my-ctabar__btns .my-btn{flex:1 1 100%}
  /* Kontaktsiden hadde tre sett i synsfeltet samtidig: heroens knapper, det
     store klikkbare nummeret i skjemaseksjonen, og sticky-baren. Heroens
     duplikat vikes paa mobil -- sticky er alltid innen rekkevidde der. */
  .my-btns--herodup{display:none}
}

/* Temaets entry-title er sidens ENE H1 og beholdes i markup for soek og
   skjermlesere, men skjules visuelt fordi heroen allerede baerer overskriften.
   Vaare egne overskrifter i innholdet er derfor h2, ikke h1. */
body:has(.my-pagehero) .entry-header .entry-title,
body:has(.my-pagehero) .page-header .entry-title,
body:has(.my-hero--img) .entry-header .entry-title{
  position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ---- Full-bleed hero maa starte i toppen ------------------------------
   Temaets .entry-content har margin:45px 245px. Toppmargen slapp sidens
   bakgrunn gjennom OVER plakaten -- den graa stripa. :has() lar oss fjerne
   margen bare paa sider som faktisk starter med en full-bleed hero, slik at
   WooCommerce-sidene beholder luften sin. */
/* IKKE :first-child -- temaets tomme .entry-header staar foran innholdet
   vaart, saa den betingelsen traff aldri paa undersidene og etterlot 45px
   hvit marg over heroen. */
/* !important fordi en temaregel med hoeyere spesifisitet setter margin-top:45px.
   Selektoren MATCHER uten det (verifisert med querySelector), den taper bare
   kaskaden -- derfor er dette en bevisst overstyring, ikke en gjetning. */
.entry-content:has(> .my-hero--img),
.entry-content:has(> .my-pagehero){margin-top:0!important}
.entry-content:has(> .my-pagehero) > .entry-header,
.entry-content:has(> .my-hero--img) > .entry-header{display:none}
.entry-content:has(> .my-section:last-child),
.entry-content:has(> .my-ctabar:last-child){margin-bottom:0!important}

/* Logoen skal staa i hjoernet, ikke henge ned over plakaten. */
.custom-logo,.navbar-brand-wpz img{max-height:74px;width:auto;height:auto}
@media(max-width:768px){ .custom-logo,.navbar-brand-wpz img{max-height:56px} }

/* ---- Meny: soek, kurv og hamburger paa samme linje --------------------
   .navbar-other er flex med wrap og bare 120px bred. Soek (35) + kurv (40) +
   hamburger (28) faar ikke plass, saa hamburgeren falt ned paa egen linje
   under de to andre. Vi lar boksen ta den plassen den trenger og sentrerer
   de tre vertikalt. */
.navbar .navbar-other{flex-wrap:nowrap;align-items:center;justify-content:flex-end;
  width:auto;flex:0 0 auto;gap:4px}
.navbar .navbar-header{flex:1 1 auto;min-width:0}
.navbar .navbar-other .navbar-toggle{margin:0;align-self:center}
.navbar .navbar-other .sb-search,.navbar .navbar-other .wpz_cart{align-self:center}

/* ---- Sidehero med bilde ----------------------------------------------
   Services-bildet har INGEN innbakt tekst, i motsetning til plakatene paa
   forsiden, saa her kan ekte HTML-tekst ligge oppaa. Overlegget er en
   gradient fra marineblaa, slik at teksten holder kontrast uansett hvor
   lyst bildet er akkurat der. */
.my-pagehero{position:relative;width:100vw;max-width:100vw;margin-inline:calc(50% - 50vw);
  background:var(--mayah-navy);line-height:0;overflow:hidden}
.my-pagehero picture,.my-pagehero img{display:block;width:100%;height:auto;
  max-height:420px;object-fit:cover;object-position:center 62%}
.my-pagehero__overlay{position:absolute;inset:0;display:flex;align-items:flex-end;
  line-height:normal;padding-bottom:34px;
  background:linear-gradient(180deg,rgba(11,33,73,.55) 0%,rgba(11,33,73,.22) 34%,rgba(11,33,73,.72) 74%,rgba(11,33,73,.92) 100%)}
/* Maa scopes under .my-pagehero: base-regelen `.mayah h2` har spesifisitet
   (0,2,0) og ville ellers vinne over klassen alene (0,1,0) -- overskriften ble
   da marineblaa paa et lyst bilde. Samme felle som .my-sr. */
.my-pagehero .my-pagehero__h1{color:#fff;font-size:clamp(1.8rem,5vw,3rem);margin:0 0 8px;
  text-shadow:0 2px 16px rgba(11,33,73,.85),0 1px 3px rgba(11,33,73,.6)}
.my-pagehero .my-pagehero__txt{color:#EAF2FC;margin:0;font-size:clamp(1rem,2.4vw,1.15rem);
  max-width:56ch;text-shadow:0 1px 8px rgba(11,33,73,.8)}
.my-pagehero .my-eyebrow{text-shadow:0 1px 8px rgba(11,33,73,.8)}
@media(max-width:768px){
  /* Samme grep som forsiden: bildet starter i toppen, menyen ligger oppaa med
     gradient. Bildet er 2067x761, altsaa bare 143px hoeyt paa 390px bredde --
     for lavt til at overskriften faar plass. min-height + cover gir teksten
     rom uten aa strekke bildet. */
  .my-pagehero{padding-top:0}
  .my-pagehero picture{display:block;height:340px}
  .my-pagehero img{height:340px;max-height:none;object-fit:cover;object-position:center 58%}
  .my-pagehero__overlay{top:0;padding-bottom:26px;
    background:linear-gradient(180deg,rgba(11,33,73,.55) 0%,rgba(11,33,73,.24) 30%,rgba(11,33,73,.70) 72%,rgba(11,33,73,.93) 100%)}
  /* Bildet starter under menyen paa undersidene, saa overlaget trenger ingen
     ekstra topp-padding -- teksten holdes nederst der gradienten er moerkest. */
  .my-pagehero__overlay .my-wrap{padding-top:0}
}
@media(min-width:769px){ .my-pagehero{padding-top:124px} .my-pagehero__overlay{top:124px} }

/* ---- Cards ------------------------------------------------------------ */
.my-grid{display:grid;gap:20px}
.my-grid--4{grid-template-columns:repeat(4,1fr)}
.my-grid--3{grid-template-columns:repeat(3,1fr)}
.my-grid--2{grid-template-columns:repeat(2,1fr)}
.my-card{background:#fff;border:1px solid #DCE8F6;border-radius:var(--mayah-radius);padding:26px;box-shadow:var(--mayah-shadow);height:100%}
.my-card__ico{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-size:1.5rem;margin-bottom:14px;background:var(--mayah-bg);color:var(--mayah-blue)}
.my-card h3{font-size:1.16rem;margin:0 0 8px}
.my-card p{margin:0;color:var(--mayah-muted);font-size:.97rem}

/* USP chips */
.my-chips{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.my-chip{font-family:var(--mayah-head);font-weight:700;font-size:.95rem;padding:11px 20px;border-radius:999px;background:#fff;color:var(--mayah-navy);border:2px solid var(--mayah-blue-light)}
.my-chip--pink{border-color:var(--mayah-magenta);color:var(--mayah-magenta)}

/* Steps */
.my-steps{list-style:none;counter-reset:s;margin:0;padding:0;display:grid;gap:16px}
.my-steps li{counter-increment:s;display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid #DCE8F6;border-radius:var(--mayah-radius);padding:18px 20px}
.my-steps li::before{content:counter(s);flex:0 0 38px;width:38px;height:38px;border-radius:50%;background:var(--mayah-magenta);color:#fff;font-family:var(--mayah-head);font-weight:800;display:grid;place-items:center}
.my-steps strong{font-family:var(--mayah-head);color:var(--mayah-navy);display:block;font-size:1.02rem}

/* Split section */
.my-split{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.my-split__media{border-radius:18px;overflow:hidden;box-shadow:var(--mayah-shadow);background:var(--mayah-bg);min-height:260px;display:grid;place-items:center}
.my-split__media img{width:100%;height:100%;object-fit:cover;display:block}

/* Final CTA */
.my-cta{text-align:center}
.my-cta h2{font-size:clamp(1.7rem,4.6vw,2.7rem)}
.my-cta .my-btns{justify-content:center}
.my-phone{font-family:var(--mayah-head);font-weight:800;font-size:clamp(1.5rem,5vw,2.2rem);color:#fff;text-decoration:none;display:inline-block;margin-top:6px}
.my-phone:hover{color:var(--mayah-blue-light)}

/* ---- Contact form ----------------------------------------------------- */
.my-form{background:#fff;border:1px solid #DCE8F6;border-radius:var(--mayah-radius);padding:26px;box-shadow:var(--mayah-shadow)}
.my-field{margin-bottom:16px}
.my-field label{display:block;font-family:var(--mayah-head);font-weight:600;font-size:.92rem;color:var(--mayah-navy);margin-bottom:6px}
.my-field input,.my-field select,.my-field textarea{width:100%;max-width:100%;font-family:var(--mayah-body);font-size:1rem;padding:13px 14px;border:2px solid #CBDDF0;border-radius:10px;background:#fff;color:var(--mayah-ink);min-height:50px}
.my-field textarea{min-height:130px;resize:vertical}
.my-field input:focus,.my-field select:focus,.my-field textarea:focus{outline:none;border-color:var(--mayah-blue)}
.my-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.my-note{font-size:.87rem;color:var(--mayah-muted);margin:10px 0 0}
.my-alert{padding:14px 16px;border-radius:10px;margin-bottom:18px;font-size:.96rem}
.my-alert--ok{background:#E6F6EC;border:1px solid #9AD8B2;color:#14562F}
.my-alert--err{background:#FDECEF;border:1px solid #F2AFBD;color:#8A1230}

/* ---- Sticky mobile CTA ------------------------------------------------ */
.my-sticky{display:none}
@media(max-width:768px){
  .my-sticky{display:grid;grid-template-columns:1fr 1fr;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:9999;
    padding:9px 10px calc(9px + env(safe-area-inset-bottom));background:rgba(255,255,255,.97);
    border-top:1px solid #D3E3F5;box-shadow:0 -4px 18px rgba(11,33,73,.13)}
  .my-sticky .my-btn{width:100%;padding:14px 10px;font-size:.98rem;min-height:50px}
  /* Barens hoeyde og bodyens padding MAA vaere samme tall, ellers slutter
     footeren for tidlig eller havner under baren. Én variabel, to bruk. */
  .my-sticky{box-sizing:border-box;height:calc(var(--mayah-sticky-h) + env(safe-area-inset-bottom))}
  body.mayah{padding-bottom:calc(var(--mayah-sticky-h) + env(safe-area-inset-bottom))}
}

/* ---- Footer always at the bottom (sticky footer) ---------------------
   Short pages must not leave the footer floating mid-screen. body and .site
   become flex columns; the footer takes the remaining space with margin-top:auto.
   min-width:0 on the flex children is required -- a flex item defaults to
   min-width:auto and refuses to shrink below its content, which is exactly
   how horizontal overflow gets introduced on mobile. */
body.mayah{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
body.mayah > .site{flex:1 0 auto;display:flex;flex-direction:column;min-width:0;width:100%}
body.mayah > .site > *{min-width:0}
body.mayah #colophon{margin-top:auto;flex-shrink:0}

/* ---- Responsive ------------------------------------------------------- */
@media(max-width:980px){
  .my-hero__inner{grid-template-columns:1fr;gap:30px;padding-top:180px}
  .my-grid--4{grid-template-columns:repeat(2,1fr)}
  .my-split{grid-template-columns:1fr;gap:26px}
}
@media(max-width:640px){
  .my-grid--4,.my-grid--3,.my-grid--2{grid-template-columns:1fr}
  .my-btns .my-btn{flex:1 1 100%}
  .my-card{padding:22px}
  .my-hero__card{padding:20px}
}