/* =====================================================================
   style.css  →  /public_html/assets/style.css
   Manuel's Cantina — colors pulled from the logo.
   ===================================================================== */

  :root{
    --turq:#00B0D0;
    --turq-deep:#0090ad;
    --green:#3D9130;
    --pink:#F93873;
    --red:#A50E12;
    --cream:#F4EBD8;
    --wood:#6B3F22;
    --wood-dark:#3a2414;
    --ink:#1a1410;
    --char:#120d09;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  html,body{overflow-x:hidden;max-width:100%}
  body{
    font-family:'Barlow',sans-serif;
    color:var(--cream);
    background:var(--char);
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3{font-family:'Barlow Condensed',sans-serif;letter-spacing:.01em;line-height:1.05}
  .script{font-family:'Pacifico',cursive;font-weight:400}
  a{color:inherit;text-decoration:none}
  img{display:block;max-width:100%}

  /* ---------- NAV ---------- */
  header{
    position:sticky;top:0;z-index:50;
    background:rgba(18,13,9,.94);
    backdrop-filter:blur(8px);
    border-bottom:2px solid var(--green);
  }
  .nav{
    max-width:1200px;margin:0 auto;padding:.6rem 1.25rem;
    display:flex;align-items:center;justify-content:space-between;gap:1rem;
  }
  .nav .brand{display:flex;align-items:center;gap:.6rem;font-family:'Barlow Condensed';font-weight:700;font-size:1.3rem}
  .nav .brand .b1{color:var(--turq)}
  .nav .brand .b2{color:var(--cream)}
  .nav .brand .cactus{color:var(--green);font-size:1.5rem;line-height:1}
  nav ul{display:flex;gap:1.6rem;list-style:none;font-family:'Barlow Condensed';font-weight:600;font-size:1.05rem;text-transform:uppercase;letter-spacing:.05em}
  nav a{color:var(--cream);padding:.2rem 0;border-bottom:2px solid transparent;transition:.2s}
  nav a:hover{color:var(--turq);border-color:var(--turq)}
  .nav .call{
    background:var(--red);color:#fff;font-family:'Barlow Condensed';font-weight:700;
    padding:.5rem 1.1rem;border-radius:4px;font-size:1.05rem;letter-spacing:.03em;white-space:nowrap;
    transition:.2s;
  }
  .nav .call:hover{background:#c2161a;transform:translateY(-1px)}
  .menu-toggle{display:none;background:none;border:0;color:var(--cream);font-size:1.6rem;cursor:pointer}

  /* ---------- HERO ---------- */
  .hero{
    position:relative;min-height:88vh;display:flex;align-items:center;justify-content:center;
    text-align:center;padding:5rem 1.25rem;overflow:hidden;
  }
  .hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0}
  .hero-bg::after{content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(18,13,9,.72) 0%,rgba(18,13,9,.55) 45%,rgba(18,13,9,.9) 100%);}
  .hero-inner{position:relative;z-index:2;max-width:760px}
  .hero img.logo{width:min(420px,80vw);margin:0 auto 1.4rem;filter:drop-shadow(0 6px 24px rgba(0,0,0,.6))}
  .hero .tag{
    font-family:'Barlow Condensed';font-weight:600;text-transform:uppercase;
    letter-spacing:.22em;color:var(--turq);font-size:clamp(.85rem,2vw,1.05rem);margin-bottom:1.4rem;
  }
  .hero .tag::before,.hero .tag::after{content:"\2022";color:var(--pink);margin:0 .6rem}
  .hero h1{font-size:clamp(2.4rem,7vw,4.6rem);font-weight:700;text-transform:uppercase;margin-bottom:1rem;text-shadow:0 3px 16px rgba(0,0,0,.7)}
  .hero h1 .em{color:var(--turq)}
  .hero p.lede{font-size:clamp(1.05rem,2.4vw,1.3rem);max-width:560px;margin:0 auto 2rem;color:#f0e6d2}
  .hero-cta{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap}
  .btn{
    font-family:'Barlow Condensed';font-weight:700;text-transform:uppercase;letter-spacing:.04em;
    font-size:1.1rem;padding:.8rem 1.7rem;border-radius:5px;transition:.2s;border:2px solid transparent;cursor:pointer;
  }
  .btn-primary{background:var(--red);color:#fff}
  .btn-primary:hover{background:#c2161a;transform:translateY(-2px)}
  .btn-ghost{background:rgba(255,255,255,.06);color:var(--cream);border-color:var(--turq)}
  .btn-ghost:hover{background:var(--turq);color:var(--char)}

  /* status pill */
  .hero .hours-pill{
    display:inline-flex;align-items:center;gap:.5rem;margin-top:1.7rem;
    background:rgba(61,145,48,.18);border:1px solid var(--green);
    padding:.4rem 1rem;border-radius:999px;font-size:.92rem;color:#dff0d8;
  }
  .dot{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(61,145,48,.3)}

  /* ---------- SECTION SHELL ---------- */
  section{padding:4.5rem 1.25rem}
  section,[id]{scroll-margin-top:80px}
  .wrap{max-width:1100px;margin:0 auto}
  .eyebrow{font-family:'Barlow Condensed';font-weight:600;text-transform:uppercase;letter-spacing:.18em;color:var(--pink);font-size:.95rem;margin-bottom:.4rem;text-align:center}
  .sec-title{font-family:'Barlow Condensed';font-weight:700;text-transform:uppercase;font-size:clamp(2rem,5vw,3rem);text-align:center;margin-bottom:.4rem}
  .sec-title .u{color:var(--turq)}
  .sec-sub{text-align:center;max-width:620px;margin:0 auto 2.6rem;color:#d8ccb6}

  /* welcome */
  .welcome{background:var(--char);text-align:center}
  .welcome p{font-size:clamp(1.1rem,2.6vw,1.35rem);max-width:720px;margin:0 auto;color:#ece1cc}
  .welcome .divider{display:flex;align-items:center;justify-content:center;gap:.8rem;margin:2rem auto 0;color:var(--green);font-size:1.4rem}
  .welcome .divider .line{height:1px;width:60px;background:linear-gradient(90deg,transparent,var(--green))}
  .welcome .divider .line.r{background:linear-gradient(90deg,var(--green),transparent)}

  /* ---------- MENU ---------- */
  .menu{background:linear-gradient(180deg,#160f0a,#1d140d)}
  /* collapsible cards */
  .menu-card h3[role="button"]{cursor:pointer;user-select:none}
  .menu-card h3 .chev{
    font-family:'Barlow',sans-serif;color:var(--green);font-size:1.1rem;line-height:1;
    transition:transform .25s ease;margin-left:auto;flex-shrink:0;align-self:center;
  }
  .menu-card.collapsed h3 .chev{transform:rotate(-90deg)}
  .card-body{
    overflow:hidden;transition:max-height .35s ease,opacity .25s ease,margin .25s ease;
    max-height:6000px;opacity:1;
  }
  .menu-card.collapsed .card-body{max-height:0;opacity:0;margin:0}
  .menu-controls{display:flex;justify-content:center;gap:.6rem;margin-bottom:1.6rem}
  .menu-controls button{
    font-family:'Barlow Condensed',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.04em;
    font-size:.85rem;padding:.35rem .9rem;border:1px solid var(--turq);border-radius:999px;
    color:var(--turq);background:transparent;cursor:pointer;transition:.2s;
  }
  .menu-controls button:hover{background:var(--turq);color:var(--char)}

  .menu-grid{display:grid;grid-template-columns:1fr;gap:1.5rem}
  .menu-card .menu-grid{grid-template-columns:repeat(2,1fr)}
  .menu-card{
    background:rgba(244,235,216,.035);border:1px solid rgba(244,235,216,.1);
    border-radius:10px;padding:1.6rem 1.7rem;break-inside:avoid;
  }
  .menu-card.full{grid-column:1/-1}
  .menu-card h3{
    font-size:1.7rem;font-weight:700;text-transform:uppercase;color:var(--turq);
    padding-bottom:.5rem;margin-bottom:.3rem;border-bottom:2px solid var(--green);
    display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;
  }
  .menu-card h3 .note{font-family:'Barlow';font-size:.72rem;font-weight:600;color:var(--pink);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
  .item{padding:.55rem 0;border-bottom:1px dotted rgba(244,235,216,.14)}
  .item:last-child{border-bottom:0}
  .item .row{display:flex;justify-content:space-between;gap:.8rem;align-items:baseline}
  .item .name{font-weight:600;color:#fbf4e4;font-size:1.02rem}
  .item .price{font-family:'Barlow Condensed';font-weight:700;color:var(--green);font-size:1.05rem;white-space:nowrap}
  .item .price.dual{color:var(--green)}
  .item .desc{font-size:.88rem;color:#c3b79f;margin-top:.15rem;max-width:46ch}
  .subhead{font-family:'Barlow Condensed';font-weight:700;text-transform:uppercase;color:var(--pink);font-size:.95rem;letter-spacing:.06em;margin:.9rem 0 .3rem}
  .inline-list{font-size:.95rem;color:#d8ccb6}
  .inline-list .name{color:#fbf4e4;font-weight:600}
  .price-tag{color:var(--green);font-family:'Barlow Condensed';font-weight:700}
  .card-note{font-size:.82rem;color:#b8ab92;font-style:italic;margin-top:.7rem}

  /* ---------- ABOUT ---------- */
  .about{background:var(--char)}
  .about-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center}
  .about-text h2{font-size:clamp(2rem,5vw,3rem);text-transform:uppercase;font-weight:700;margin-bottom:1.2rem}
  .about-text h2 .u{color:var(--turq)}
  .about-text p{color:#e3d8c2;margin-bottom:1rem;font-size:1.05rem}
  .about-photo{border-radius:12px;overflow:hidden;border:3px solid var(--wood);box-shadow:0 14px 40px rgba(0,0,0,.5)}
  .about-photo img{width:100%;height:100%;object-fit:cover}

  /* ---------- VISIT ---------- */
  .visit{background:linear-gradient(180deg,#1d140d,#160f0a)}
  .visit-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
  .info-card{background:rgba(244,235,216,.04);border:1px solid rgba(244,235,216,.12);border-radius:12px;padding:2rem}
  .info-card h3{font-size:1.5rem;text-transform:uppercase;color:var(--turq);margin-bottom:1.1rem;font-weight:700}
  .hours-row{display:flex;justify-content:space-between;padding:.45rem 0;border-bottom:1px dotted rgba(244,235,216,.15);font-size:1.02rem}
  .hours-row:last-child{border:0}
  .hours-row .day{font-weight:600;color:#fbf4e4}
  .hours-row.closed .day,.hours-row.closed .time{color:#9c8f78}
  .hours-row .time{color:#dccfb8}
  .hours-row .time .open{color:var(--green);font-weight:600}
  .lunch-banner{margin-top:1rem;background:rgba(0,176,208,.12);border:1px solid var(--turq);border-radius:8px;padding:.7rem .9rem;font-size:.92rem;color:#cfeef6}
  .info-card .addr{font-size:1.1rem;color:#fbf4e4;font-weight:600;margin-bottom:.3rem}
  .info-card .addr-sub{color:#cabd a5;color:#cabda5;margin-bottom:1.2rem}
  .info-card .phone-big{font-family:'Barlow Condensed';font-weight:700;font-size:2rem;color:var(--green);margin:.3rem 0 1.2rem}
  .info-card .phone-big a:hover{color:var(--turq)}
  .map-link{display:inline-flex;align-items:center;gap:.5rem;color:var(--turq);font-weight:600;border-bottom:1px solid var(--turq);padding-bottom:2px}
  .map-link:hover{color:var(--pink);border-color:var(--pink)}

  /* ---------- FOOTER ---------- */
  footer{background:var(--char);border-top:2px solid var(--green);padding:3rem 1.25rem 2rem;text-align:center}
  footer .fbrand{font-family:'Barlow Condensed';font-weight:700;font-size:2rem;text-transform:uppercase;margin-bottom:.4rem}
  footer .fbrand .b1{color:var(--turq)}
  footer .fbrand .b3{color:var(--red)}
  footer .fmeta{color:#cabda5;margin-bottom:.3rem}
  footer .fmeta a{color:var(--turq)}
  footer .legal{margin-top:1.6rem;font-size:.8rem;color:#7d7058}
  .cactus-ico{color:var(--green)}

  @media (max-width:860px){
    nav ul{display:none}
    .menu-toggle{display:block}
    .about-grid,.visit-grid{grid-template-columns:1fr}
    .about-photo{order:-1}
    .menu-grid,.menu-card .menu-grid{grid-template-columns:1fr}
    nav.open ul{
      display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;
      background:var(--char);padding:1rem 1.25rem;gap:.9rem;border-bottom:2px solid var(--green);
    }
  }
  @media (prefers-reduced-motion:reduce){*{scroll-behavior:auto;transition:none!important}}

  /* ---------- NAV LOGO (transparent PNG) ---------- */
  .nav-logo{height:46px;width:auto;display:block}
  @media (max-width:480px){ .nav-logo{height:38px} }

  /* ---------- ANNOUNCEMENT BAR ---------- */
  .announce{
    background:linear-gradient(90deg, rgba(61,145,48,.22), rgba(0,176,208,.16));
    border-bottom:1px solid rgba(61,145,48,.5);
  }
  .announce-inner{
    max-width:1100px;margin:0 auto;padding:.5rem 1.25rem;
    display:flex;align-items:center;gap:.6rem;
    font-size:.92rem;color:#eaf6e8;
  }
  .announce-ico{flex-shrink:0;font-size:.95rem;opacity:.9}
  .announce-track{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .7rem}
  .announce-msg{font-weight:500}
  .announce-sep{color:var(--green)}
  @media (max-width:480px){ .announce-inner{font-size:.85rem;padding:.45rem 1rem} }