/*
 * Texas Ribs Custom Stylesheet
 * Based on Manual de identidad.pdf
*/

/* -- 1. BRAND VARIABLES -- */
:root{
  --texas-red:#d52b1e;
  --texas-bright-blue:#0047bb;
  --texas-dark-blue:#002855;
  --texas-light-blue:#87ceeb;
  --font-headline:'Arvo',serif;
  --font-body:'Montserrat',sans-serif;
}

/* -- 2. GENERAL STYLES -- */
body{font-family:var(--font-body);overflow-x:hidden;}
h1,h2,h3,h4,h5,h6{font-family:var(--font-headline);color:var(--texas-dark-blue);text-transform:uppercase;}
/* Ensure sticky header actually stays on top */
header.sticky-top{position:sticky;top:0;z-index:1050;background:#fff;box-shadow:0 2px 0 rgba(0,40,85,.12);} 

/* Smooth anchor offsets so sticky header doesn't cover section titles */
#promociones, #ubicaciones, #lonestar, #facturacion, #historia, #menu-preview { scroll-margin-top: 100px; }

/* -- 3. COMPONENT STYLES -- */
.navbar{background-color:#fff;border-bottom:2px solid var(--texas-dark-blue);} 
.navbar .nav-link{color:var(--texas-dark-blue);font-weight:700;margin:0 1rem;} 
.navbar-toggler{border:none;outline:none;} 
.navbar-toggler:focus{box-shadow:none;} 
.btn-menu{background-color:var(--texas-dark-blue);color:#fff;font-family:var(--font-headline);padding:.5rem 2rem;white-space:nowrap;}
.brand-logo{height:64px;width:auto;max-width:100%;}

.hero-media-container{height:60vh;width:100%;background:url('https://texasribs-buck.sfo3.cdn.digitaloceanspaces.com/gTJFGAWuryYNKerPc-300-x%20(1).webp') no-repeat center center;background-color:var(--texas-dark-blue);background-size:cover;position:relative;} 

#hero-headline .hero-title-small{font-size:2rem;font-weight:400;font-family:var(--font-body);color:var(--texas-dark-blue);} 
.section-title-large{font-size:clamp(2rem,8vw,7rem);line-height:1;margin-bottom:2rem;color:var(--texas-bright-blue);display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;text-align:center;} 
.headline-star-img{height:6rem;margin:0 .5rem;animation:pulse 2s infinite ease-in-out;transform-origin:center center;} 
@keyframes pulse{0%{transform:scale(1);}50%{transform:scale(1.08);}100%{transform:scale(1);}}

#historia h2{color:var(--texas-red);font-size:3.5rem;margin-bottom:1.5rem;}
#historia p{font-size:1.2rem;line-height:1.6;}

.btn-ver-menu{background-color:var(--texas-red);color:#fff;font-family:var(--font-headline);padding:.75rem 2.5rem;font-size:1.2rem;display:inline-block;max-width:90%;}

.united-ribs-title{display:flex;justify-content:center;align-items:center;font-family:var(--font-headline);font-weight:700;margin-bottom:3rem;line-height:1.1;text-transform:uppercase;}
.united-ribs-left{display:flex;flex-direction:column;text-align:right;line-height:.9;margin-right:.5rem;}
.united-ribs-united{font-size:clamp(1.6rem,7vw,5.5rem);color:var(--texas-bright-blue);} 
.united-ribs-states{font-size:clamp(1.6rem,7vw,5.5rem);color:var(--texas-dark-blue);} 
.united-ribs-center-stack{display:flex;flex-direction:column;align-items:center;justify-content:space-between;margin:0 .2rem;}
.united-ribs-of{font-size:clamp(0.9rem,3.5vw,2.8rem);color:var(--texas-dark-blue);transform:rotate(-90deg);margin-top:1rem;} 
.united-ribs-star{font-size:2.4rem;color:var(--texas-dark-blue);}
.united-ribs-ribs{font-size:clamp(2.2rem,16vw,12rem);color:var(--texas-red);} 
.image-container-fixed{aspect-ratio:4/3;overflow:hidden;margin-bottom:1rem;position:relative;cursor:pointer;}
.image-container-fixed img{width:100%;height:100%;object-fit:cover;}
.location-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0,40,85,.6);color:#fff;font-family:var(--font-headline);font-size:2.5rem;display:flex;justify-content:center;align-items:center;opacity:1;transition:background-color .3s ease;}
.image-container-fixed:hover .location-overlay{background-color:rgba(213,43,30,.7);}
.branch-list{margin-top:1rem;padding:2rem;border:2px solid var(--texas-dark-blue);background-color:#f8f9fa;text-align:left;}
.branch-item{padding-bottom:1rem;margin-bottom:1rem;border-bottom:1px solid #e0e0e0;}
.branch-item:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0;}
.branch-item h4{color:var(--texas-red);font-size:1.5rem;}
.branch-item p{color:var(--texas-dark-blue);margin-bottom:0;}
#ubicaciones a{text-decoration:none;}

.lonestar-text h2{font-size:4.5rem;color:var(--texas-dark-blue);line-height:1;}
.lonestar-text h3{font-size:2rem;color:var(--texas-red);}
.star-o{color:var(--texas-red);}
.app-buttons-container{display:flex;align-items:center;gap:1.5rem;}
.app-buttons-container img{height:90px;width:auto;} 

/* (old) Newsletter inputs (kept for reference) */
.text-youre-the-star{color:var(--texas-dark-blue);font-size:2.5rem;margin-bottom:2rem;}
#newsletter .form-control{border:2px solid var(--texas-dark-blue);border-radius:0;padding:.75rem;text-align:center;}
#newsletter .btn-primary{background-color:var(--texas-dark-blue);border:none;border-radius:0;padding:.75rem 3rem;font-family:var(--font-headline);}

/* ================================
   Newsletter v2 (TX left + headline right)
   ================================ */
.newsletter-wrap{border:3px solid var(--texas-dark-blue);border-radius:10px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.06);}
.newsletter-left{
  min-height:540px; padding:clamp(1.25rem,3.5vw,2.5rem); background-color:var(--texas-bright-blue);
  background-image:url("https://texasribs-buck.sfo3.cdn.digitaloceanspaces.com/tx-newsletter-overlay.png");
  background-repeat:no-repeat; background-position:left center; background-size:cover;
}
.form-on-graphic-label{color:#fff;font-family:var(--font-headline);font-weight:700;letter-spacing:.02em;margin-bottom:.25rem;}
.form-on-graphic-input{
  border:0; border-radius:999px; height:64px; padding:0 1.25rem; background:#fff; text-align:left; font-size:1.05rem;
  box-shadow:0 2px 0 rgba(0,0,0,0.08);
}
.btn-newsletter-submit{background-color:var(--texas-dark-blue);border:0;border-radius:999px;padding:.9rem 2.25rem;font-family:var(--font-headline);font-weight:700;letter-spacing:.02em;}
.tiny-note{color:rgba(255,255,255,.85);font-size:.8rem;}
.newsletter-right{padding:clamp(1.25rem,3.5vw,2.5rem);background:#fff;min-height:540px;}
.red-headline{color:var(--texas-red);font-family:var(--font-headline);}
.news-tag{font-size:clamp(1.6rem,3.6vw,2.4rem);line-height:1;margin-bottom:.25rem;}
.news-starline{font-family:var(--font-headline);color:var(--texas-dark-blue);font-size:clamp(4rem,10vw,8rem);line-height:.9;}
.news-star{display:inline-block;transform:translateY(.02em);}
.news-sub{font-size:clamp(1.2rem,2.6vw,2rem);letter-spacing:.03em;margin-top:.25rem;}
.star-row span{font-size:clamp(1.4rem,2.2vw,2rem);color:var(--texas-dark-blue);margin:0 .18rem;}
@media (max-width:991.98px){
  .newsletter-left,.newsletter-right{min-height:460px;}
  .form-on-graphic-input{height:58px;}
}

/* ================================
   Autocomplete (modal)
   ================================ */
.autocomplete-list{
  position:absolute; top:100%; left:0; right:0; z-index:1056;
  background:#fff; border:2px solid var(--texas-dark-blue); border-top:none;
  max-height:260px; overflow:auto; border-radius:0 0 12px 12px;
  box-shadow:0 8px 20px rgba(0,0,0,.08);
}
.autocomplete-item{ padding:.75rem 1rem; cursor:pointer; border-top:1px solid rgba(0,40,85,.08); }
.autocomplete-item:hover,
.autocomplete-item.active{ background:rgba(0,40,85,.08); }
.autocomplete-note{ padding:.5rem 1rem; color:#555; font-size:.9rem; }

/* Modal buttons */
.modal-content{border:3px solid var(--texas-dark-blue);border-radius:0;}
.modal-header{border-bottom:2px solid var(--texas-dark-blue);}
.modal-title{font-family:var(--font-headline);color:var(--texas-dark-blue);}
#orderModal .btn-primary{background-color:var(--texas-red);border:none;border-radius:0;font-family:var(--font-body);font-weight:700;padding:.75rem;}
#orderModal .btn-secondary{background-color:var(--texas-dark-blue);border:none;border-radius:0;font-family:var(--font-body);font-weight:700;padding:.75rem;} 

/* ================================
   Menu Explorer tweaks
   ================================ */
.btn-cat{border:2px solid var(--texas-dark-blue);background:#fff;color:var(--texas-dark-blue);font-family:var(--font-headline);font-weight:700;border-radius:999px;padding:.35rem 1rem;white-space:nowrap;}
.btn-cat.active{background:var(--texas-red);border-color:var(--texas-red);color:#fff;}
.menu-card{border:0;background:transparent;}
.menu-card h6{font-family:var(--font-headline);text-transform:uppercase;color:var(--texas-dark-blue);} 
.menu-img{width:100%;height:180px;object-fit:cover;border-radius:6px;}
@media (min-width: 768px){ .menu-img{height:220px;} }

/* ================================
   Mobile tweaks
   ================================ */
@media (max-width: 767.98px){
  /* Center brand with CSS grid; reserve space for toggler so brand never chops */
  .navbar{padding-top:.9rem;padding-bottom:.9rem;}
  .navbar .container{display:grid;grid-template-columns:72px 1fr 72px;align-items:center;position:static;}
  .navbar .navbar-brand{grid-column:2;justify-self:center;position:static;transform:none;margin:0 auto;text-align:center;max-width:100%;}
  .navbar .navbar-toggler{grid-column:3;justify-self:end;position:static;margin:0;}
  .brand-logo{height:72px;max-width:100%;}

  .hero-media-container{height:38vh;}
  #hero-headline .hero-title-small{font-size:1.2rem;}
  .section-title-large{font-size:2.6rem;}
  .headline-star-img{height:2rem;}
  .navbar .nav-link{margin:.4rem 0;}
  .btn-menu{padding:.45rem 1rem;}
  #historia h2{font-size:2rem;}
  #historia p{font-size:1rem;}
  .united-ribs-united,.united-ribs-states{font-size:2rem;}
  .united-ribs-of{font-size:1rem;transform:none;margin:0;}
  .united-ribs-ribs{font-size:3.2rem;}
  .location-overlay{font-size:1.4rem;}
  .app-buttons-container img{height:64px;}
  /* LoneStar section sizing */
  #lonestar .lonestar-text h2{font-size:2.4rem;line-height:1.05;word-break:break-word;}
  #lonestar .lonestar-text h3{font-size:1.25rem;}
  #lonestar .app-buttons-container{justify-content:center;gap:1rem;}
  #lonestar .app-buttons-container img{height:52px;}
}

@media (max-width: 991.98px){
  .section-title-large{font-size:4rem;}
  .headline-star-img{height:3rem;}
}