/*
Theme Name: Mavromati
Theme URI: https://mavromatiolijfolie.nl
Description: Premium kindthema voor Mavromati Olijfolie. Mediterraan, mobile-first, snel.
Author: Gløde
Template: storefront
Version: 1.0
*/
/* ==========================================================================
   MAVROMATI OLIJFOLIE — premium mediterraan, mobile-first
   Palet: oker/goud #c68a3a, diepzwart #161311, crème #f7f1e6, olijfgroen #6b7a3f
   ========================================================================== */

:root{
  --mav-gold:#c68a3a;
  --mav-gold-dark:#a9712a;
  --mav-ink:#161311;
  --mav-ink-soft:#2a2521;
  --mav-cream:#f7f1e6;
  --mav-cream-2:#efe6d4;
  --mav-olive:#6b7a3f;
  --mav-line:rgba(22,19,17,.10);
  --mav-shadow:0 10px 40px rgba(22,19,17,.10);
  --mav-radius:14px;
  --mav-maxw:1180px;
}

/* ---------- Basis / typografie ---------- */
body.mavromati,
.mavromati{
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--mav-ink);
  background:var(--mav-cream);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.mavromati h1,.mavromati h2,.mavromati h3,.mavromati h4{
  font-family:"Playfair Display",Georgia,"Times New Roman",serif;
  color:var(--mav-ink);
  line-height:1.15;
  letter-spacing:.2px;
  font-weight:700;
}
.mavromati a{color:var(--mav-gold-dark);}
.mavromati a:hover{color:var(--mav-ink);}
.mavromati .col-full,.mavromati .container{max-width:var(--mav-maxw);}

/* Verberg standaard Storefront-titels op custom pagina's waar we ze niet willen */
.page-template-default .mav-page .entry-header,
.home .entry-header{display:none;}

/* ---------- Header ---------- */
.mavromati .site-header{
  background:var(--mav-ink);
  border-bottom:1px solid rgba(247,241,230,.10);
  padding:.5em 0;
}
.mavromati .site-branding{margin-bottom:0;}
/* Klein, netjes uitgelijnd logo */
.mavromati .site-header .custom-logo-link img,
.mavromati .site-logo-anchor img{
  max-height:54px;
  width:auto;
  margin:0;
}
.mavromati .site-header .site-header-cart .cart-contents,
.mavromati .site-header a:not(.button){color:var(--mav-cream);}
.mavromati .main-navigation ul li a{
  color:var(--mav-cream);
  font-weight:500;
  letter-spacing:.4px;
  font-size:.95em;
  text-transform:uppercase;
}
.mavromati .main-navigation ul li a:hover,
.mavromati .main-navigation ul li.current-menu-item > a{color:var(--mav-gold);}
.mavromati .site-header-cart .cart-contents:hover{color:var(--mav-gold);}

/* ---------- Buttons ---------- */
.mavromati button,
.mavromati .button,
.mavromati a.button,
.mavromati .woocommerce a.button,
.mavromati .woocommerce button.button,
.mavromati input[type="submit"]{
  background:var(--mav-gold);
  color:var(--mav-ink)!important;
  border:none;
  border-radius:999px;
  padding:.85em 1.9em;
  font-weight:600;
  letter-spacing:.4px;
  text-transform:uppercase;
  font-size:.9em;
  transition:transform .15s ease, background .2s ease;
}
.mavromati button:hover,
.mavromati .button:hover,
.mavromati a.button:hover,
.mavromati .woocommerce a.button:hover,
.mavromati .woocommerce button.button:hover,
.mavromati input[type="submit"]:hover{
  background:var(--mav-ink);
  color:var(--mav-cream)!important;
  transform:translateY(-2px);
}
.mavromati .button.alt,.mavromati .woocommerce #respond input#submit.alt,
.mavromati .woocommerce a.button.alt,.mavromati .woocommerce button.button.alt{
  background:var(--mav-gold);color:var(--mav-ink)!important;
}

/* ---------- Hero ---------- */
.mav-hero{
  position:relative;
  min-height:82vh;
  display:flex;align-items:center;justify-content:center;
  text-align:center;
  background-size:cover;background-position:center;
  color:var(--mav-cream);
  overflow:hidden;
}
.mav-hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(22,19,17,.55) 0%,rgba(22,19,17,.70) 100%);
}
.mav-hero__inner{position:relative;z-index:2;max-width:760px;padding:2.5em 1.4em;}
.mav-hero__eyebrow{
  display:inline-block;
  letter-spacing:3px;text-transform:uppercase;font-size:.78em;
  color:var(--mav-gold);margin-bottom:1em;font-weight:600;
}
.mav-hero h1{
  color:var(--mav-cream);
  font-size:clamp(2.4rem,6vw,4.2rem);
  margin:0 0 .35em;
  letter-spacing:4px;
}
.mav-hero p{
  font-size:clamp(1rem,2.4vw,1.25rem);
  color:rgba(247,241,230,.92);
  margin:0 auto 2em;max-width:560px;
}
.mav-hero .button{font-size:1em;padding:1em 2.4em;}

/* ---------- Secties ---------- */
.mav-section{padding:clamp(3rem,7vw,6rem) 1.4em;}
.mav-section--cream{background:var(--mav-cream);}
.mav-section--cream2{background:var(--mav-cream-2);}
.mav-section--ink{background:var(--mav-ink);color:var(--mav-cream);}
.mav-section--ink h2,.mav-section--ink h3{color:var(--mav-cream);}
.mav-wrap{max-width:var(--mav-maxw);margin:0 auto;}
.mav-center{text-align:center;}
.mav-eyebrow{
  display:block;letter-spacing:3px;text-transform:uppercase;
  font-size:.78em;color:var(--mav-gold-dark);font-weight:700;margin-bottom:.8em;
}
.mav-section--ink .mav-eyebrow{color:var(--mav-gold);}
.mav-section h2{font-size:clamp(1.9rem,4vw,2.8rem);margin:0 0 .6em;}
.mav-lead{font-size:1.12rem;max-width:680px;margin:0 auto 2.5em;}
.mav-section--ink .mav-lead{color:rgba(247,241,230,.85);}

/* ---------- Split (tekst + beeld) ---------- */
.mav-split{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);
  align-items:center;
}
.mav-split img{
  width:100%;height:100%;max-height:520px;object-fit:cover;
  border-radius:var(--mav-radius);box-shadow:var(--mav-shadow);
}
.mav-split__text h2{margin-top:0;}

/* ---------- Feature-rij (3 USP's) ---------- */
.mav-features{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;margin-top:1rem;
}
.mav-feature{
  background:#fff;border:1px solid var(--mav-line);border-radius:var(--mav-radius);
  padding:2rem 1.6rem;text-align:center;
}
.mav-feature__icon{
  width:48px;height:48px;margin:0 auto 1rem;color:var(--mav-gold-dark);
}
.mav-feature h3{font-size:1.2rem;margin:.2em 0 .5em;}
.mav-feature p{font-size:.96rem;color:var(--mav-ink-soft);margin:0;}

/* ---------- Producten (homepage) ---------- */
.mav-products .woocommerce ul.products li.product,
.mav-products ul.products li.product{
  background:#fff;border:1px solid var(--mav-line);border-radius:var(--mav-radius);
  padding:1.2rem 1rem 1.6rem;text-align:center;transition:transform .2s ease,box-shadow .2s ease;
}
.mav-products ul.products li.product:hover{transform:translateY(-4px);box-shadow:var(--mav-shadow);}
.mavromati ul.products li.product .price{color:var(--mav-ink);font-weight:600;}
.mavromati ul.products li.product .woocommerce-loop-product__title{
  font-family:"Playfair Display",Georgia,serif;font-size:1.05rem;
}

/* ---------- Quote ---------- */
.mav-quote{max-width:760px;margin:0 auto;text-align:center;}
.mav-quote blockquote{
  font-family:"Playfair Display",Georgia,serif;font-size:clamp(1.4rem,3.4vw,2rem);
  font-style:italic;line-height:1.4;border:none;margin:0;color:var(--mav-cream);
}
.mav-quote cite{display:block;margin-top:1.2em;font-style:normal;letter-spacing:2px;
  text-transform:uppercase;font-size:.8em;color:var(--mav-gold);}

/* ---------- CTA-band ---------- */
.mav-cta{text-align:center;}
.mav-cta h2{margin-bottom:.4em;}
.mav-cta p{max-width:520px;margin:0 auto 2em;color:rgba(247,241,230,.85);}

/* ---------- Footer ---------- */
.mavromati .site-footer{
  background:var(--mav-ink);color:rgba(247,241,230,.75);
  padding:4rem 1.4em 0;border-top:3px solid var(--mav-gold);
}
.mav-footer-grid{
  max-width:var(--mav-maxw);margin:0 auto;
  display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:2.5rem;
  padding-bottom:3rem;
}
.mav-footer-col h4{
  color:var(--mav-cream);font-family:"Playfair Display",Georgia,serif;
  font-size:1.15rem;margin:0 0 1rem;
}
.mav-footer-col img{max-width:150px;margin-bottom:1.2rem;}
.mav-footer-col p{font-size:.94rem;line-height:1.7;margin:.2em 0;}
.mav-footer-col ul{list-style:none;margin:0;padding:0;}
.mav-footer-col ul li{margin:.45em 0;}
.mav-footer-col ul li a{color:rgba(247,241,230,.75);text-decoration:none;}
.mav-footer-col ul li a:hover{color:var(--mav-gold);}
.mav-footer-bottom{
  max-width:var(--mav-maxw);margin:0 auto;border-top:1px solid rgba(247,241,230,.12);
  padding:1.4rem 0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem;
  font-size:.85rem;color:rgba(247,241,230,.55);
}
.mavromati .site-footer a{color:rgba(247,241,230,.75);}

/* ---------- Mobiel ---------- */
@media (max-width:768px){
  .mav-split{grid-template-columns:1fr;}
  .mav-split img{max-height:340px;}
  .mav-features{grid-template-columns:1fr;}
  .mav-footer-grid{grid-template-columns:1fr;gap:2rem;text-align:center;}
  .mav-footer-col img{margin-left:auto;margin-right:auto;}
  .mav-footer-bottom{justify-content:center;text-align:center;}
  .mav-hero{min-height:74vh;}
  .mavromati .site-header .custom-logo-link img{max-height:44px;}
}
@media (max-width:480px){
  .mav-section{padding:2.6rem 1.1em;}
}

/* WooCommerce single product opfrissen */
.mavromati .single-product div.product .product_title{font-size:clamp(1.8rem,4vw,2.4rem);}
.mavromati .single-product div.product p.price{color:var(--mav-gold-dark);font-size:1.5rem;}
.mavromati .woocommerce-message,
.mavromati .woocommerce-info{border-top-color:var(--mav-gold);}
.mavromati .woocommerce-info::before{color:var(--mav-gold);}

/* ====== Mobiel menu + logo uitlijning ====== */
@media (max-width:768px){
  /* Logo netjes gecentreerd in de header */
  .mavromati .site-header{padding:.7em 0;}
  .mavromati .site-branding{text-align:center;float:none;width:100%;}
  .mavromati .site-header .custom-logo-link{display:inline-block;float:none;margin:0 auto;}
  .mavromati .site-header .custom-logo-link img{max-height:46px;}
  /* Zoekbalk in header verbergen op mobiel (ruimte besparen) */
  .mavromati .site-header .site-search{display:none;}

  /* Hamburger in huisstijl, duidelijk zichtbaar en uitgelijnd */
  .mavromati .main-navigation{width:100%;}
  .mavromati button.menu-toggle{
    display:block;width:100%;margin:.4em 0 0;
    background:transparent;color:var(--mav-cream)!important;
    border:1px solid rgba(247,241,230,.25);border-radius:999px;
    text-transform:uppercase;letter-spacing:1px;font-size:.85em;padding:.7em 1em;
  }
  .mavromati button.menu-toggle::after{content:"";}
  .mavromati button.menu-toggle:hover{background:rgba(247,241,230,.06);color:var(--mav-gold)!important;}

  /* Uitklapmenu: nette, leesbare items */
  .mavromati .main-navigation ul.menu,
  .mavromati .main-navigation div.menu > ul{
    background:var(--mav-ink-soft);border-radius:12px;margin-top:.6em;overflow:hidden;
  }
  .mavromati .main-navigation ul li{border-bottom:1px solid rgba(247,241,230,.08);float:none;width:100%;}
  .mavromati .main-navigation ul li:last-child{border-bottom:none;}
  .mavromati .main-navigation ul li a{
    padding:1em 1.2em;text-align:center;font-size:1em;
  }
}

/* Logo ook netjes uitgelijnd op desktop (klein, links) */
@media (min-width:769px){
  .mavromati .site-branding{display:flex;align-items:center;}
}