@font-face{font-family:'Berkshire Swash';src:url('assets/berkshire-swash-400-latin-ext.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Berkshire Swash';src:url('assets/berkshire-swash-400-latin.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Raleway';src:url('assets/raleway-400-600-latin-ext.woff2') format('woff2');font-weight:400 600;font-style:normal;font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Raleway';src:url('assets/raleway-400-600-latin.woff2') format('woff2');font-weight:400 600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ---------------------------------------------------------------------------
   San Marino Pizzeria — 1-op-1 overgenomen van de Astra/Elementor-site.
   Maatvoering en kleuren zijn nagemeten op www.sanmarinopizzeria.be:
   koppen in Berkshire Swash, lopende tekst in Raleway, oranje #FF770F,
   inhoudsbreedte 1140 px.
   --------------------------------------------------------------------------- */
:root{
  /* De oude site heeft 1140 px inhoud; de container telt de zijruimte mee, vandaar 1140 + 2x20. */
  --sp-container:1180px;
  --sp-narrow:840px;
  --sp-gutter:20px;
  --sp-gap:0px;
  --sp-primary:#FF770F;
  --sp-primary-contrast:#fff;
  --sp-primary-dark:#C66300;
  --sp-secondary:#0a0a0a;
  --sp-text:#000;
  --sp-muted:#7A7A7A;
  --sp-line:#e8e8e8;
  --sp-surface:#fffaf2;
  --sp-radius:25px;   /* Elementor zet 25 px op de beeldkaders en de gekleurde kolommen */
  --sp-btn-radius:30px;
  --sp-shadow:0 10px 30px rgba(0,0,0,.12);
  --sp-font:'Raleway',sans-serif;
  --sp-font-heading:'Berkshire Swash',Georgia,serif;
  --smp-header-h:162px;
}

body{font-family:var(--sp-font);font-size:15px;line-height:1.7;color:var(--sp-text);background:#fff}
p{margin:0 0 1.4em}
p:last-child{margin-bottom:0}
a{color:var(--sp-primary);text-decoration:none}
a:hover{color:var(--sp-primary-dark)}

/* Koppen: h1/h2 in het sierlettertype, h3 is in deze site een tussenkop in Raleway. */
h1,h2{font-family:var(--sp-font-heading);font-weight:400;color:var(--sp-secondary);margin:0 0 .3em;line-height:1.2}
h1{font-size:60px}
h2{font-size:43px;line-height:1.3}
h3,h4,h5,h6{font-family:var(--sp-font);font-weight:600;color:var(--sp-secondary);margin:0 0 .4em;line-height:1.4}
h3{font-size:24px}
h4{font-size:20px}
h5{font-size:17px}
h6{font-size:15px}
.sp-heading{margin-bottom:0}

/* De naam van de zaak in de hero: 160 px op desktop, netjes terugschalend. */
.sp-heading.sp-size-xl{font-size:clamp(52px,11vw,160px);line-height:1.2}
.sp-heading.sp-size-l{font-size:clamp(40px,6vw,60px)}
.sp-heading.sp-size-m{font-size:43px;line-height:1.3}
.sp-heading.sp-size-s{font-size:24px;line-height:1.4}

/* ---------- header ---------- */
.site-header{background:#fff;position:relative;z-index:100}
.header-inner{display:flex;align-items:center;justify-content:space-between;min-height:var(--smp-header-h);gap:2rem}
.site-logo{flex:none;display:block}
.site-logo img{width:132px;height:132px;object-fit:contain;display:block}
.site-nav .sp-menu{display:flex;align-items:center;gap:0;list-style:none;margin:0;padding:0}
.site-nav .sp-menu a{display:block;padding:0 15px;line-height:70px;font-size:15px;font-weight:400;color:var(--sp-secondary)}
.site-nav .sp-menu a:hover,.site-nav .sp-menu .is-active>a,.site-nav .sp-menu .current>a{color:var(--sp-primary)}
.menu-btn{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:10px;cursor:pointer}
.menu-btn span{width:26px;height:2px;background:var(--sp-secondary);display:block}

/* ---------- secties ---------- */
.sp-section{background-size:cover;background-position:center}
.sp-section.sp-has-bg>.sp-container{position:relative;z-index:1}
.sp-overlay{z-index:0}
.sp-pad-xl{padding:120px 0}
/* De hero is de enige sectie met 200 px lucht boven en onder. */
.smp-hero{padding:200px 0}
.sp-pad-l{padding:120px 0}
.sp-pad-m{padding:60px 0}
.sp-padb-xl{padding-bottom:120px}
.sp-padb-l{padding-bottom:80px}
.sp-padb-m{padding-bottom:60px}

/* Kolom met eigen achtergrondfoto (de "Openingsuren"-kaart op de homepage): inhoud verticaal gecentreerd. */
.sp-col.sp-has-bg{display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.sp-colpad-m{padding:40px 30px}
.sp-colpad-s{padding:20px}
.sp-colpad-l{padding:60px 40px}

/* Lichte tekst op een donkere achtergrond. */
.sp-scheme-light,.sp-scheme-light h1,.sp-scheme-light h2,.sp-scheme-light h3,
.sp-scheme-light h4,.sp-scheme-light h5,.sp-scheme-light h6,.sp-scheme-light p{color:#fff}

/* De hero: ondertitel oranje, de regel eronder zacht wit — zoals op de oude site. */
.is-home .sp-section:first-of-type .sp-heading[class*="sp-size-"]+.sp-widget .sp-heading,
.is-home .sp-w-heading h3.sp-heading{color:inherit}

/* ---------- knoppen ---------- */
.sp-btn,.sp-button{display:inline-block;background:var(--sp-primary);color:#fff;border:0;
  font-family:var(--sp-font);font-size:15px;font-weight:400;line-height:1.7;
  padding:16px 40px;border-radius:var(--sp-btn-radius);text-decoration:none;transition:background .2s}
.sp-btn:hover,.sp-button:hover{background:var(--sp-primary-dark);color:#fff}
.sp-btn-secondary{background:transparent;color:var(--sp-primary);box-shadow:inset 0 0 0 1px currentColor}
.sp-btn-secondary:hover{background:var(--sp-primary);color:#fff}

/* ---------- scheidingslijntjes ---------- */
.sp-divider{border:0;border-top:1px solid currentColor;opacity:.45;margin:14px auto;max-width:120px}
.sp-scheme-light .sp-divider{opacity:.6}

/* ---------- beelden ----------
   WordPress en Elementor tonen een beeld op zijn eigen grootte en schalen het alleen terug als de
   kolom smaller is. De kern van Stapel rekt een beeld standaard tot de volle kolombreedte; dat zou
   de sierlijntjes (250x27) en het vorkje (57x400) uit de hero metershoog maken. */
.sp-figure img{width:auto;max-width:100%;height:auto;display:block}
.sp-text-center .sp-figure img{margin-left:auto;margin-right:auto}
/* De grote sfeerfoto's staan in Elementor op 25 px ronde hoeken met een zachte slagschaduw. */
.sp-figure.sp-radius img{border-radius:25px}
.sp-figure.sp-shadow img{box-shadow:0 24px 41px -19px rgba(0,0,0,.5)}

/* ---------- footer ---------- */
.site-footer{position:relative;background-size:cover;background-position:center;padding:80px 0;color:#fff;text-align:center}
.site-footer::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.45)}
.site-footer>*{position:relative;z-index:1}
.footer-cta img{width:64px;height:64px;margin:0 auto 1rem;display:block}
.footer-cta h2{font-family:var(--sp-font-heading);font-weight:400;font-size:43px;line-height:1.3;color:#fff;margin:0 0 .2em}
.footer-cta .footer-phone{font-size:36px;margin-bottom:.4em}
.footer-cta .footer-phone a{color:#fff}
.footer-cta .footer-phone a:hover{color:var(--sp-primary)}
.footer-inner{display:flex;flex-direction:column;align-items:center;gap:.6rem;margin-top:2.5rem;font-size:15px}
.site-footer a{color:#fff}
.site-footer a:hover{color:var(--sp-primary)}
.footer-menu{display:flex;gap:1rem;list-style:none;margin:0;padding:0}
.footer-legal{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;opacity:.85}

/* ---------- kop van een binnenpagina ---------- */
.page-hero{padding:60px 0 0;text-align:center}
.page-hero h1{font-size:43px;margin:0}

/* ---------- responsive ---------- */
@media(max-width:1024px){
  .sp-pad-xl{padding:100px 0}
  .sp-pad-l{padding:70px 0}
  h1{font-size:44px}
  h2{font-size:34px}
}
@media(max-width:900px){
  :root{--smp-header-h:90px}
  .site-logo img{width:80px;height:80px}
  .menu-btn{display:flex}
  .site-nav{position:fixed;top:var(--smp-header-h);left:0;right:0;bottom:0;background:#fff;padding:1rem;
    transform:translateX(100%);transition:transform .25s;z-index:99;overflow-y:auto}
  .site-nav.is-open{transform:none}
  .site-nav .sp-menu{flex-direction:column;align-items:stretch}
  .site-nav .sp-menu a{line-height:2.6;padding:0;border-bottom:1px solid var(--sp-line)}
}
@media(max-width:700px){
  .sp-pad-xl{padding:60px 0}
  .sp-pad-l{padding:50px 0}
  .sp-pad-m{padding:40px 0}
  .footer-cta h2{font-size:30px}
  .footer-cta .footer-phone{font-size:26px}
  .site-footer{padding:50px 0}
}

/* ---------------------------------------------------------------------------
   Menukaart / dranklijst
   In Elementor stond elk gerecht in een eigen sectie: links de naam met de
   omschrijving eronder, rechts de prijs, allebei gecentreerd. Dat beeld houden we.
   --------------------------------------------------------------------------- */
.smp-kaart+.smp-kaart{margin-top:56px}
.smp-kaart-titel{font-family:var(--sp-font-heading);font-weight:400;font-size:43px;line-height:1.3;
  color:var(--sp-secondary);margin:0 0 .15em}
.smp-kaart-onder{font-size:15px;margin:0 0 .8em;color:var(--sp-text)}
.smp-kaart-sier{display:block;width:130px;height:auto;margin:0 0 34px}
.smp-kaart-lijst{list-style:none;margin:0;padding:0}
.smp-kaart-item{display:grid;grid-template-columns:3fr 1fr;align-items:start;gap:10px;margin-bottom:48px}
.smp-kaart-item:last-child{margin-bottom:0}
.smp-kaart-tekst{text-align:center}
.smp-kaart-naam{font-family:var(--sp-font);font-weight:600;font-size:24px;line-height:1.4;
  color:var(--sp-secondary);margin:0}
.smp-kaart-omschrijving{font-size:15px;line-height:1.7;margin:.1em 0 0}
.smp-kaart-prijs{font-family:var(--sp-font);font-weight:600;font-size:24px;line-height:1.4;
  color:var(--sp-secondary);text-align:center}

/* Op een donkere achtergrond (de categorie "Aperitivo" staat op grijs) meekleuren. */
.sp-scheme-light .smp-kaart-titel,.sp-scheme-light .smp-kaart-naam,
.sp-scheme-light .smp-kaart-prijs,.sp-scheme-light .smp-kaart-onder,
.sp-scheme-light .smp-kaart-omschrijving{color:#fff}

@media(max-width:700px){
  .smp-kaart-titel{font-size:32px}
  .smp-kaart-naam,.smp-kaart-prijs{font-size:19px}
  .smp-kaart-item{margin-bottom:26px}
  .smp-kaart-sier{margin-bottom:22px}
}

/* ---------- reservatiemodule ---------- */
.smp-tablebooker{max-width:680px;margin:0 auto;text-align:left}

/* De regel onder de naam in de hero, met een streepje links en rechts (in Elementor twee
   divider-widgets in aparte kolommen naast een geneste rij). */
.smp-hero-regel{display:flex;align-items:center;justify-content:center;gap:28px;
  max-width:1073px;margin-left:auto;margin-right:auto;
  font-family:var(--sp-font);font-weight:600;font-size:24px;line-height:1.4;color:rgba(255,255,255,.84)}
.smp-hero-regel::before,.smp-hero-regel::after{content:"";flex:1 1 auto;max-width:290px;height:1px;background:rgba(255,255,255,.55)}
@media(max-width:700px){
  .smp-hero-regel{font-size:17px;gap:14px}
  .smp-hero-regel::before,.smp-hero-regel::after{max-width:60px}
}