/*
Theme Name: Amazing Bites
Theme URI: https://amazingbites.com.hr
Description: Topla, rustikalno-moderna tema za restoran Amazing Bites. Sticky header s pripremljenim gumbom za online naručivanje (GloriaFood), hero sekcija, specijaliteti, lokacija i kontakt. Hrvatski jezik.
Author: Amazing Bites
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
Text Domain: amazingbites
*/

/* =========================================================
   1. VARIJABLE / BRAND
   ========================================================= */
:root{
  --ab-orange:      #C8521E;   /* primarna terakota iz logotipa */
  --ab-orange-2:    #E2682E;   /* hover / svjetlija */
  --ab-charcoal:    #2B2E33;   /* tamno siva (BITES) - tekst */
  --ab-charcoal-2:  #43474D;
  --ab-paper:       #FAF6EF;   /* krem pozadina */
  --ab-paper-2:     #F2E9DB;   /* topliji krem */
  --ab-wheat:       #D9B98C;   /* pšenični vijenac */
  --ab-green:       #6E8B4A;   /* zeleni začinski akcent */
  --ab-cream-line:  #E7DBC7;
  --ab-shadow:      rgba(43,46,51,.12);
  --ab-shadow-lg:   rgba(43,46,51,.22);

  --ab-display: "Fraunces", "Times New Roman", serif;
  --ab-body:    "Mulish", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --ab-maxw: 1180px;
  --ab-header-h: 86px;
  --ab-header-h-scrolled: 66px;
  --ab-radius: 14px;
}

/* =========================================================
   2. RESET / BAZA
   ========================================================= */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--ab-header-h)}
body{
  margin:0;
  font-family:var(--ab-body);
  font-size:17px;
  line-height:1.65;
  color:var(--ab-charcoal);
  background:var(--ab-paper);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--ab-orange);text-decoration:none;transition:color .2s ease}
a:hover{color:var(--ab-orange-2)}
h1,h2,h3,h4{font-family:var(--ab-display);font-weight:600;line-height:1.1;color:var(--ab-charcoal);margin:0 0 .5em}
h2{font-size:clamp(2rem,4vw,2.9rem)}
h3{font-size:1.4rem}
p{margin:0 0 1em}
.ab-container{width:100%;max-width:var(--ab-maxw);margin:0 auto;padding:0 24px}
.ab-section{padding:96px 0}
.ab-eyebrow{
  font-family:var(--ab-body);font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  font-size:.78rem;color:var(--ab-orange);margin:0 0 14px;display:inline-block;
}
.ab-center{text-align:center}
.ab-lead{font-size:1.15rem;color:var(--ab-charcoal-2);max-width:680px;margin:0 auto}

/* =========================================================
   3. GUMBI (uklj. priprema za GloriaFood .glf-button)
   ========================================================= */
.ab-btn,
.glf-button{           /* .glf-button = stil koji preuzme GloriaFood gumb kad ga dodaš */
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:var(--ab-body);font-weight:800;font-size:1rem;letter-spacing:.01em;
  padding:14px 28px;border-radius:999px;border:2px solid transparent;cursor:pointer;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  text-decoration:none !important;line-height:1;white-space:nowrap;
}
.ab-btn--primary,
.glf-button{
  background:var(--ab-orange) !important;color:#fff !important;
  box-shadow:0 8px 22px rgba(200,82,30,.30);
}
.ab-btn--primary:hover,
.glf-button:hover{background:var(--ab-orange-2) !important;color:#fff !important;transform:translateY(-2px);box-shadow:0 12px 28px rgba(200,82,30,.38)}
.ab-btn--ghost{background:transparent;color:var(--ab-charcoal);border-color:var(--ab-charcoal)}
.ab-btn--ghost:hover{background:var(--ab-charcoal);color:#fff}
.ab-btn--light{background:#fff;color:var(--ab-charcoal)}
.ab-btn--light:hover{background:var(--ab-paper-2);color:var(--ab-charcoal)}
.ab-btn--sm{padding:11px 22px;font-size:.92rem}

/* =========================================================
   4. HEADER (sticky)
   ========================================================= */
.ab-header{
  position:sticky;top:0;z-index:1000;
  background:rgba(250,246,239,.92);
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid transparent;
  transition:height .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
}
.ab-header__inner{
  height:var(--ab-header-h);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  transition:height .25s ease;
}
.ab-header.is-scrolled{
  background:rgba(250,246,239,.97);
  box-shadow:0 6px 22px var(--ab-shadow);
  border-bottom-color:var(--ab-cream-line);
}
.ab-header.is-scrolled .ab-header__inner{height:var(--ab-header-h-scrolled)}

.ab-logo{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.ab-logo img{height:60px;width:auto;transition:height .25s ease}
.ab-header.is-scrolled .ab-logo img{height:46px}

/* Navigacija */
.ab-nav{display:flex;align-items:center;gap:30px;margin-left:auto}
.ab-nav ul{list-style:none;display:flex;align-items:center;gap:28px;margin:0;padding:0}
.ab-nav a{
  font-weight:700;color:var(--ab-charcoal);font-size:.98rem;position:relative;padding:6px 0;
}
.ab-nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--ab-orange);
  transition:right .25s ease;border-radius:2px;
}
.ab-nav a:hover{color:var(--ab-orange)}
.ab-nav a:hover::after{right:0}

.ab-header__cta{display:flex;align-items:center;gap:14px}

/* Hamburger (CSS-only checkbox hack) */
.ab-burger{display:none}
.ab-burger-label{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px;margin:-8px}
.ab-burger-label span{width:26px;height:3px;background:var(--ab-charcoal);border-radius:3px;transition:.25s ease}

/* =========================================================
   5. HERO
   ========================================================= */
.ab-hero{position:relative;min-height:78vh;display:flex;align-items:center;overflow:hidden}
.ab-hero__bg{position:absolute;inset:0;z-index:0}
.ab-hero__bg img{width:100%;height:100%;object-fit:cover}
.ab-hero__bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg, rgba(20,16,12,.82) 0%, rgba(20,16,12,.55) 42%, rgba(20,16,12,.12) 100%);
}
.ab-hero__inner{position:relative;z-index:2;padding:120px 0;color:#fff;max-width:660px}
.ab-hero .ab-eyebrow{color:var(--ab-wheat)}
.ab-hero h1{
  color:#fff;font-size:clamp(2.8rem,6vw,4.6rem);line-height:1.02;margin-bottom:.25em;
  text-shadow:0 2px 24px rgba(0,0,0,.35);
}
.ab-hero h1 em{font-style:italic;color:var(--ab-wheat)}
.ab-hero__tagline{
  font-family:var(--ab-display);font-style:italic;font-size:1.5rem;color:var(--ab-wheat);
  margin:0 0 8px;
}
.ab-hero p{font-size:1.15rem;color:rgba(255,255,255,.92);margin-bottom:30px;max-width:520px}
.ab-hero__actions{display:flex;flex-wrap:wrap;gap:14px}

/* =========================================================
   6. INFO TRAKA (radno vrijeme / dostava)
   ========================================================= */
.ab-strip{background:var(--ab-charcoal);color:#fff}
.ab-strip__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.ab-strip__item{
  display:flex;align-items:center;gap:16px;padding:26px 24px;
  border-right:1px solid rgba(255,255,255,.10);
}
.ab-strip__item:last-child{border-right:none}
.ab-strip__icon{font-size:1.7rem;line-height:1;flex:0 0 auto}
.ab-strip__item h4{color:#fff;margin:0 0 2px;font-family:var(--ab-body);font-weight:800;font-size:1rem}
.ab-strip__item p{margin:0;color:rgba(255,255,255,.72);font-size:.92rem}

/* =========================================================
   7. O NAMA
   ========================================================= */
.ab-about{background:var(--ab-paper)}
.ab-about__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:center}
.ab-about__media{position:relative}
.ab-about__media img{border-radius:var(--ab-radius);box-shadow:0 24px 50px var(--ab-shadow-lg)}
.ab-about__media .ab-badge{
  position:absolute;right:-18px;bottom:-18px;background:var(--ab-orange);color:#fff;
  font-family:var(--ab-display);font-weight:600;border-radius:50%;width:130px;height:130px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  box-shadow:0 14px 30px rgba(200,82,30,.4);line-height:1.1;
}
.ab-about__media .ab-badge span{font-size:2rem;display:block}
.ab-about__media .ab-badge small{font-size:.72rem;font-family:var(--ab-body);text-transform:uppercase;letter-spacing:.1em;font-weight:700}

/* =========================================================
   8. SPECIJALITETI (kartice)
   ========================================================= */
.ab-menu{background:var(--ab-paper-2)}
.ab-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:48px}
.ab-card{
  background:#fff;border-radius:var(--ab-radius);padding:34px 30px;
  border:1px solid var(--ab-cream-line);box-shadow:0 10px 26px var(--ab-shadow);
  transition:transform .2s ease, box-shadow .2s ease;
}
.ab-card:hover{transform:translateY(-6px);box-shadow:0 20px 40px var(--ab-shadow-lg)}
.ab-card__icon{
  width:58px;height:58px;border-radius:14px;background:var(--ab-paper-2);
  display:flex;align-items:center;justify-content:center;font-size:1.7rem;margin-bottom:18px;
}
.ab-card h3{margin-bottom:.4em}
.ab-card p{margin:0;color:var(--ab-charcoal-2);font-size:.98rem}

/* =========================================================
   9. CTA TRAKA (poziv na narudžbu)
   ========================================================= */
.ab-cta{
  background:linear-gradient(135deg,var(--ab-orange) 0%,#A8401A 100%);
  color:#fff;text-align:center;
}
.ab-cta h2{color:#fff}
.ab-cta p{color:rgba(255,255,255,.9);max-width:560px;margin:0 auto 30px}
.ab-cta__actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
/* Na narančastoj CTA traci gumb je bijel da bude vidljiv (override glf-button) */
.ab-cta .glf-button{background:#fff !important;color:var(--ab-orange) !important;box-shadow:0 8px 22px rgba(0,0,0,.18)}
.ab-cta .glf-button:hover{background:var(--ab-paper-2) !important;color:var(--ab-orange) !important}

/* =========================================================
   10. LOKACIJA / KONTAKT
   ========================================================= */
.ab-contact__grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.ab-contact__list{list-style:none;margin:24px 0 0;padding:0}
.ab-contact__list li{display:flex;gap:16px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--ab-cream-line)}
.ab-contact__list li:last-child{border-bottom:none}
.ab-contact__icon{font-size:1.3rem;flex:0 0 auto;margin-top:2px}
.ab-contact__list strong{display:block;font-family:var(--ab-display);font-size:1.05rem}
.ab-contact__list span{color:var(--ab-charcoal-2)}
.ab-map{border-radius:var(--ab-radius);overflow:hidden;box-shadow:0 14px 34px var(--ab-shadow);min-height:340px;background:var(--ab-paper-2)}
.ab-map iframe{width:100%;height:100%;min-height:340px;border:0;display:block}
.ab-map__placeholder{display:flex;align-items:center;justify-content:center;min-height:340px;color:var(--ab-charcoal-2);text-align:center;padding:30px;font-size:.95rem}

/* =========================================================
   11. FOOTER
   ========================================================= */
.ab-footer{background:var(--ab-charcoal);color:rgba(255,255,255,.78);padding:64px 0 0}
.ab-footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:48px;padding-bottom:48px}
.ab-footer h4{color:#fff;font-family:var(--ab-body);font-weight:800;letter-spacing:.04em;margin:0 0 18px;font-size:1.05rem}
.ab-footer__logo img{height:78px;width:auto;margin-bottom:16px}
.ab-footer__tag{font-family:var(--ab-display);font-style:italic;color:var(--ab-wheat)}
.ab-footer ul{list-style:none;margin:0;padding:0}
.ab-footer ul li{margin-bottom:10px}
.ab-footer a{color:rgba(255,255,255,.78)}
.ab-footer a:hover{color:var(--ab-wheat)}
.ab-social{display:flex;gap:12px;margin-top:8px}
.ab-social a{
  width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;transition:.2s ease;
}
.ab-social a:hover{background:var(--ab-orange);transform:translateY(-3px)}
.ab-social svg{width:22px;height:22px;fill:#fff}
.ab-footer__bottom{
  border-top:1px solid rgba(255,255,255,.10);padding:22px 0;text-align:center;
  font-size:.86rem;color:rgba(255,255,255,.55);
}

/* =========================================================
   12. RESPONSIVE
   ========================================================= */
@media (max-width:980px){
  .ab-about__grid{grid-template-columns:1fr;gap:48px}
  .ab-contact__grid{grid-template-columns:1fr;gap:40px}
  .ab-cards{grid-template-columns:repeat(2,1fr)}
  .ab-footer__grid{grid-template-columns:1fr 1fr;gap:36px}
  .ab-strip__grid{grid-template-columns:1fr}
  .ab-strip__item{border-right:none;border-bottom:1px solid rgba(255,255,255,.10)}
  .ab-strip__item:last-child{border-bottom:none}
}

@media (max-width:760px){
  .ab-section{padding:64px 0}
  /* Mobilna navigacija */
  .ab-burger-label{display:flex}
  .ab-nav{
    position:fixed;inset:var(--ab-header-h) 0 auto 0;flex-direction:column;align-items:stretch;
    background:var(--ab-paper);gap:0;padding:8px 0 16px;margin:0;
    box-shadow:0 14px 30px var(--ab-shadow-lg);border-bottom:1px solid var(--ab-cream-line);
    transform:translateY(-130%);opacity:0;pointer-events:none;transition:transform .3s ease, opacity .3s ease;
  }
  .ab-nav ul{flex-direction:column;align-items:stretch;gap:0;width:100%}
  .ab-nav ul li{width:100%}
  .ab-nav a{display:block;padding:15px 24px;border-bottom:1px solid var(--ab-cream-line)}
  .ab-nav a::after{display:none}
  .ab-burger:checked ~ .ab-nav{transform:translateY(0);opacity:1;pointer-events:auto}
  .ab-burger:checked ~ .ab-burger-label span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  .ab-burger:checked ~ .ab-burger-label span:nth-child(2){opacity:0}
  .ab-burger:checked ~ .ab-burger-label span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
  /* CTA u headeru ostaje vidljiv i sticky */
  .ab-header__cta .ab-btn{padding:11px 18px}
}

@media (max-width:520px){
  .ab-cards{grid-template-columns:1fr}
  .ab-footer__grid{grid-template-columns:1fr}
  .ab-hero__inner{padding:90px 0}
  .ab-about__media .ab-badge{width:104px;height:104px}
}