/*
Theme Name: Moro Coffee House
Theme URI: https://morocoffeehouse.jo
Author: Moro Coffee House
Description: Official Elementor-ready WordPress theme for Moro Coffee House, Amman. Built from the brand's official visual guideline — playful raccoon mascot, hand-drawn stickers, and a bold cream/black/green palette.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: moro
*/

/* ==========================================================================
   MORO DESIGN TOKENS — pulled 1:1 from the official brand guideline
   ========================================================================== */
:root{
  /* Brand colors */
  --moro-cream:      #F1F1D4; /* Soft Dawn */
  --moro-black:      #000000; /* Inkroot */
  --moro-white:      #FFFEF8; /* Pure Light */
  --moro-green:      #529641; /* Fresh Stem */
  --moro-purple:     #D6ABEF; /* Petal Bloom */
  --moro-coral:      #ED706A; /* Blush Berry */
  --moro-sky:        #BCD2FA; /* Sky Whisper */
  --moro-amber:      #EB7F30; /* Amber Spark */
  --moro-yellow:     #F9F968; /* Sunbeam Pop */

  /* Semantic roles */
  --bg-page:         var(--moro-cream);
  --bg-panel-dark:   var(--moro-black);
  --text-main:       #16150F;
  --text-inverse:    var(--moro-white);
  --text-muted:      #58573F;
  --line:            rgba(0,0,0,.14);
  --line-inverse:    rgba(255,255,255,.18);

  /* Type */
  --font-display: 'Baloo 2', 'Fredoka', sans-serif;
  --font-body:    'Poppins', -apple-system, 'Segoe UI', sans-serif;

  /* Rhythm */
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;
  --shadow-soft: 0 14px 34px rgba(0,0,0,.10);
  --shadow-pop:  4px 6px 0 var(--moro-black);
  --container: 1180px;
  --gutter: clamp(20px, 5vw, 64px);
}

/* ==========================================================================
   RESET
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg-page);
  color:var(--text-main);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:800;
  line-height:1.02;
  margin:0 0 .4em;
  letter-spacing:.2px;
}
p{ margin:0 0 1em; }
.container{ max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }

/* Focus visibility (accessibility floor) */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:3px solid var(--moro-amber);
  outline-offset:3px;
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* ==========================================================================
   UTILITIES
   ========================================================================== */
.eyebrow{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--font-body); font-weight:700;
  font-size:.78rem; letter-spacing:.22em; text-transform:uppercase;
  color:currentColor; opacity:.72;
}
.eyebrow::before{ content:""; width:22px; height:2px; background:currentColor; display:inline-block; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--font-body); font-weight:700; font-size:.98rem;
  padding:.95em 1.9em; border-radius:var(--radius-pill);
  border:2.5px solid var(--moro-black);
  background:var(--moro-yellow); color:var(--moro-black);
  box-shadow:var(--shadow-pop);
  transition:transform .18s ease, box-shadow .18s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translate(-2px,-2px); box-shadow:6px 8px 0 var(--moro-black); }
.btn:active{ transform:translate(0,0); box-shadow:2px 2px 0 var(--moro-black); }
.btn--outline-inverse{ background:transparent; color:var(--moro-white); border-color:var(--moro-white); box-shadow:4px 6px 0 rgba(255,255,255,.35); }
.btn--outline-inverse:hover{ box-shadow:6px 8px 0 rgba(255,255,255,.35); }
.btn--green{ background:var(--moro-green); color:var(--moro-white); }
.btn--coral{ background:var(--moro-coral); color:var(--moro-black); }
.btn--sm{ padding:.6em 1.3em; font-size:.85rem; }

.tag{
  display:inline-block; padding:.3em .9em; border-radius:var(--radius-pill);
  font-size:.75rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  border:2px solid var(--moro-black); background:var(--moro-white);
}

.section{ padding:clamp(64px,10vw,120px) 0; position:relative; overflow:clip; }
.section--dark{ background:var(--moro-black); color:var(--moro-white); }
.section--green{ background:var(--moro-green); color:var(--moro-white); }
.section--purple{ background:var(--moro-purple); color:var(--moro-black); }
.section--cream{ background:var(--moro-cream); color:var(--moro-black); }
.section--white{ background:var(--moro-white); color:var(--moro-black); }

.section-head{ max-width:640px; margin-bottom:clamp(32px,5vw,56px); }
.section-head h2{ font-size:clamp(2.1rem,4.6vw,3.4rem); }
.section-head p{ font-size:1.08rem; opacity:.85; max-width:52ch; }

/* sticker doodles — the site's signature device, echoing the brand's sticker sheet */
.sticker{ position:absolute; z-index:2; filter:drop-shadow(2px 4px 0 rgba(0,0,0,.18)); pointer-events:none; }
.sticker svg{ width:100%; height:100%; display:block; }
@media (max-width:780px){ .sticker{ display:none; } }

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{
  position:sticky; top:0; z-index:100;
  background:var(--moro-black); color:var(--moro-white);
  border-bottom:2px solid rgba(255,255,255,.08);
}
.site-header__row{
  display:flex; align-items:center; justify-content:space-between;
  padding-block:14px; gap:20px;
}
.brand{ display:flex; align-items:center; gap:.6em; }
.brand__logo{ height:34px; width:auto; display:block; }
.main-nav{ display:flex; align-items:center; gap:clamp(18px,2vw,34px); }
.main-nav a{
  font-weight:600; font-size:.95rem; position:relative; padding:6px 0;
}
.main-nav a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--moro-yellow);
  transition:width .2s ease;
}
.main-nav a:hover::after, .main-nav a.is-active::after{ width:100%; }
.header-cta{ display:flex; align-items:center; gap:14px; }
.nav-toggle{ display:none; background:none; border:2px solid var(--moro-white); border-radius:10px; padding:8px 10px; color:var(--moro-white); }

@media (max-width: 900px){
  .nav-toggle{ display:inline-flex; }
  .main-nav{
    position:fixed; inset:66px 0 0 0; background:var(--moro-black);
    flex-direction:column; align-items:flex-start; padding:28px var(--gutter);
    transform:translateY(-8px); opacity:0; pointer-events:none; transition:all .22s ease;
  }
  .main-nav.is-open{ transform:translateY(0); opacity:1; pointer-events:auto; }
  .main-nav a{ font-size:1.3rem; }
  .header-cta .btn span{ display:none; }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  background:var(--moro-black); color:var(--moro-white);
  padding-top:clamp(64px,9vw,110px); padding-bottom:clamp(64px,9vw,110px);
  position:relative; overflow:clip;
}
.hero__grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(24px,5vw,60px); align-items:center; }
.hero__eyebrow{ color:var(--moro-yellow); }
.hero h1{
  font-size:clamp(3rem,7.4vw,6.4rem); color:var(--moro-cream);
  margin-top:.3em; text-shadow:3px 4px 0 rgba(0,0,0,.5);
}
.hero h1 em{ font-style:normal; color:var(--moro-yellow); }
.hero__sub{ font-size:1.15rem; max-width:46ch; opacity:.85; margin-top:.8em; }
.hero__cta{ display:flex; gap:16px; margin-top:2em; flex-wrap:wrap; }
.hero__meta{ display:flex; gap:26px; margin-top:2.6em; flex-wrap:wrap; }
.hero__meta div{ font-size:.85rem; opacity:.75; }
.hero__meta strong{ display:block; font-family:var(--font-display); font-size:1.4rem; color:var(--moro-yellow); }
.hero__art{ position:relative; display:flex; justify-content:center; }
.hero__art img{ width:min(420px,100%); }

/* ==========================================================================
   MARQUEE STRIP
   ========================================================================== */
.marquee{ background:var(--moro-yellow); border-block:3px solid var(--moro-black); overflow:hidden; }
.marquee__track{ display:flex; gap:48px; white-space:nowrap; padding:14px 0; animation:marquee 26s linear infinite; width:max-content; }
.marquee__track span{ font-family:var(--font-display); font-size:1.1rem; letter-spacing:.03em; }
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ==========================================================================
   SPLIT PANEL (mirrors the guideline's own half/half color-block spreads)
   ========================================================================== */
.split{ display:grid; grid-template-columns:1fr 1fr; min-height:560px; }
.split__panel{ padding:clamp(40px,6vw,80px) clamp(24px,5vw,64px); display:flex; flex-direction:column; justify-content:center; position:relative; }
.split__panel img.split__art{ max-width:340px; margin-inline:auto; }
@media (max-width:860px){ .split{ grid-template-columns:1fr; min-height:auto; } }

/* ==========================================================================
   CARDS — menu highlights, values, blog teasers
   ========================================================================== */
.grid{ display:grid; gap:clamp(18px,2.4vw,28px); }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:960px){ .grid--3,.grid--4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .grid--3,.grid--4{ grid-template-columns:1fr; } }

.card{
  background:var(--moro-white); border:2.5px solid var(--moro-black); border-radius:var(--radius-md);
  padding:26px; box-shadow:var(--shadow-pop); transition:transform .18s ease, box-shadow .18s ease;
}
.card:hover{ transform:translate(-3px,-3px); box-shadow:7px 9px 0 var(--moro-black); }
.card__icon{ width:52px; height:52px; margin-bottom:14px; }
.card h3{ font-size:1.3rem; margin-bottom:.3em; }
.card p{ color:var(--text-muted); font-size:.95rem; margin-bottom:0; }

.drink-card{ background:var(--moro-white); border:2.5px solid var(--moro-black); border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-pop); }
.drink-card__top{ aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; padding:20px; }
.drink-card__top img{ width:70%; }
.drink-card__body{ padding:18px 20px 22px; border-top:2.5px solid var(--moro-black); }
.drink-card__body .price{ font-family:var(--font-display); color:var(--moro-green); font-size:1.2rem; }

/* ==========================================================================
   MENU PAGE
   ========================================================================== */
.menu-tabs{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:32px; }
.menu-tabs button{
  border:2.5px solid var(--moro-black); background:var(--moro-white); border-radius:var(--radius-pill);
  padding:.55em 1.4em; font-weight:700; font-size:.9rem;
}
.menu-tabs button.is-active{ background:var(--moro-black); color:var(--moro-white); }

.menu-panel{ display:none; }
.menu-panel.is-active{ display:block; animation:fade .25s ease; }
@keyframes fade{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }

.menu-list{ border-top:2px dashed var(--line); }
.menu-row{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding:16px 4px; border-bottom:2px dashed var(--line);
}
.menu-row__name{ font-weight:700; font-size:1.05rem; }
.menu-row__sizes{ display:flex; gap:22px; font-family:var(--font-display); color:var(--moro-green); font-size:1.05rem; white-space:nowrap; }
.menu-row__sizes small{ font-family:var(--font-body); font-weight:600; color:var(--text-muted); font-size:.7rem; display:block; text-align:center; }

.menu-note{ margin-top:26px; padding:18px 22px; background:var(--moro-yellow); border:2.5px solid var(--moro-black); border-radius:var(--radius-md); font-weight:600; font-size:.92rem; }

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.testi-card{ background:var(--moro-black); color:var(--moro-white); border-radius:var(--radius-md); padding:28px; position:relative; }
.testi-card .stars{ color:var(--moro-yellow); letter-spacing:.15em; margin-bottom:12px; }
.testi-card p{ font-size:1.02rem; opacity:.92; }
.testi-card footer{ font-family:var(--font-display); color:var(--moro-yellow); margin-top:14px; font-size:.95rem; }

/* ==========================================================================
   GALLERY
   ========================================================================== */
.gallery-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.gallery-grid a{ display:block; border-radius:var(--radius-md); overflow:hidden; border:2.5px solid var(--moro-black); aspect-ratio:1; }
.gallery-grid img{ width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.gallery-grid a:hover img{ transform:scale(1.08); }
@media (max-width:860px){ .gallery-grid{ grid-template-columns:repeat(2,1fr); } }

/* ==========================================================================
   BLOG
   ========================================================================== */
.post-card{ background:var(--moro-white); border:2.5px solid var(--moro-black); border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-pop); display:flex; flex-direction:column; }
.post-card__img{ aspect-ratio:16/10; overflow:hidden; border-bottom:2.5px solid var(--moro-black); }
.post-card__img img{ width:100%; height:100%; object-fit:cover; }
.post-card__body{ padding:22px 22px 26px; display:flex; flex-direction:column; gap:10px; flex:1; }
.post-card .cat{ font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--moro-green); }
.post-card h3{ font-size:1.28rem; }
.post-card p{ color:var(--text-muted); font-size:.92rem; margin-bottom:0; }
.post-card .read-more{ margin-top:auto; font-weight:700; font-size:.88rem; display:inline-flex; align-items:center; gap:6px; }

.single-post{ max-width:760px; margin-inline:auto; }
.single-post__meta{ display:flex; gap:16px; align-items:center; font-size:.85rem; color:var(--text-muted); margin-bottom:18px; }
.single-post h1{ font-size:clamp(2rem,4.6vw,3rem); }
.single-post .post-cover{ border:2.5px solid var(--moro-black); border-radius:var(--radius-lg); overflow:hidden; margin:26px 0 36px; box-shadow:var(--shadow-pop); }
.single-post__content h2{ font-size:1.6rem; margin-top:1.6em; }
.single-post__content h3{ font-size:1.25rem; margin-top:1.3em; }
.single-post__content p{ font-size:1.05rem; color:var(--text-main); }
.single-post__content ul{ list-style:disc; padding-left:1.4em; margin-bottom:1.2em; }
.single-post__content li{ margin-bottom:.4em; }
.single-post__content blockquote{ border-left:4px solid var(--moro-green); padding-left:18px; font-style:italic; color:var(--text-muted); margin:1.6em 0; }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,48px); align-items:start; }
@media (max-width:860px){ .contact-grid{ grid-template-columns:1fr; } }
.info-row{ display:flex; gap:16px; padding:18px 0; border-bottom:2px dashed var(--line); }
.info-row__icon{ width:40px; height:40px; flex:none; }
.info-row h4{ font-family:var(--font-body); font-weight:700; font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); margin-bottom:.2em; }
.info-row p{ margin:0; font-size:1.02rem; font-weight:600; }
.map-embed{ border:2.5px solid var(--moro-black); border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-pop); }
.map-embed iframe{ width:100%; height:420px; border:0; display:block; }

.hours-table{ width:100%; border-collapse:collapse; }
.hours-table td{ padding:9px 0; border-bottom:1px dashed var(--line); font-size:.95rem; }
.hours-table td:last-child{ text-align:right; font-weight:700; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{ background:var(--moro-black); color:var(--moro-white); padding:70px 0 26px; position:relative; overflow:clip; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,.14); }
@media (max-width:860px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
.footer-grid h5{ font-family:var(--font-body); font-weight:700; font-size:.82rem; text-transform:uppercase; letter-spacing:.08em; color:var(--moro-yellow); margin-bottom:14px; }
.footer-grid li{ margin-bottom:9px; }
.footer-grid a:hover{ color:var(--moro-yellow); }
.footer-brand{ font-family:var(--font-display); font-size:1.7rem; margin-bottom:10px; }
.footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; padding-top:22px; font-size:.82rem; opacity:.68; }
.social-row{ display:flex; gap:12px; margin-top:16px; }
.social-row a{ width:38px; height:38px; border:2px solid var(--moro-white); border-radius:50%; display:flex; align-items:center; justify-content:center; }
.social-row a:hover{ background:var(--moro-yellow); border-color:var(--moro-yellow); color:var(--moro-black); }

/* ==========================================================================
   CTA BAND
   ========================================================================== */
.cta-band{ text-align:center; }
.cta-band h2{ font-size:clamp(2.2rem,5.2vw,3.6rem); }
.cta-band p{ max-width:52ch; margin-inline:auto; opacity:.85; }
.cta-band .btn{ margin-top:1.4em; }

/* Elementor compatibility: full-width/canvas templates shouldn't be boxed */
.elementor-page .container{ max-width:none; padding-inline:0; }