/* ==========================================================================
   INFAMOUS TRAVEL CO. — shared base styles
   Loaded by every page. Page-specific rules live in each page's own <style>.
   Design is intentionally identical to the approved mockups.
   ========================================================================== */

:root{
  --black:#0B0B0B;
  --cream:#EDE2C9;
  --red:#D91F3D;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{background:var(--cream);font-family:'Archivo',sans-serif;color:var(--black);}
.heading{font-family:'Anton',sans-serif;text-transform:uppercase;letter-spacing:.5px;}

/* --------------------------------------------------------------------------
   Mobile header (shared across every page; page CSS defines the desktop
   header). `body header` outranks the page-CSS `header` rules on specificity.
   Two rows: centred logo on top, nav beneath — nothing overflows 390px.
   -------------------------------------------------------------------------- */
@media(max-width:740px){
  body header{flex-wrap:wrap;row-gap:10px;padding:12px 14px;justify-content:center;}
  body header .logo,body header a.logo{width:100%;text-align:center;font-size:22px;}
  body header nav{margin:0 auto;flex-wrap:wrap;justify-content:center;}
  body header nav a{margin:0 9px;font-size:12px;}
  body header nav a.cta{padding:8px 12px;}
  body header a.back{margin:0 auto;}
}

/* Social-proof pill flip (spots left <-> 24h views) */
[data-proof]{transition:opacity .35s ease;}

/* Site-wide announcement bar (above the header) */
.promo-bar{display:block;background:var(--red);color:var(--cream);text-align:center;font-weight:800;text-transform:uppercase;letter-spacing:1.2px;font-size:12.5px;padding:9px 16px;text-decoration:none;}
.promo-bar:hover{background:#b5182f;color:var(--cream);}
/* Keep the bar to a single line on phones */
@media(max-width:740px){
  body .promo-bar{white-space:nowrap;overflow:hidden;font-size:11px;letter-spacing:.6px;padding:8px 8px;}
}
@media(max-width:360px){
  body .promo-bar{font-size:9.5px;letter-spacing:.3px;}
}

/* Footer Terms & Conditions link (present on every page) */
.foot-terms{color:inherit;text-decoration:underline;}
.foot-terms:hover{color:var(--red);}
.foot-terms-line{margin-top:10px;font-size:13px;color:#8f8570;}

/* Privacy link under the "No spam…" fine print (mailing forms + popup) */
.fine a{color:inherit;text-decoration:underline;}

/* Accessibility: visible keyboard focus (mouse users are unaffected) */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
[tabindex]:focus-visible{outline:3px solid var(--red);outline-offset:2px;}

/* ---- Signup popup (shared by home + trip pages) ---- */
.popup-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:50;display:none;align-items:center;justify-content:center;padding:20px;}
.popup-overlay.show{display:flex;}
.popup{background:var(--black);color:var(--cream);border:4px solid var(--red);max-width:440px;width:100%;padding:36px;position:relative;text-align:center;}
.popup .close{position:absolute;top:10px;right:14px;background:none;border:none;color:#8f8570;font-size:26px;cursor:pointer;line-height:1;}
.popup .close:hover{color:var(--cream);}
.popup h3{font-family:'Anton',sans-serif;font-size:34px;text-transform:uppercase;line-height:.95;}
.popup h3 span{color:var(--red);}
.popup p{margin:14px 0 20px;font-size:14px;line-height:1.6;color:#cfc4a8;}
.popup form{display:flex;}
.popup input{flex:1;padding:14px;border:3px solid var(--cream);border-right:none;background:var(--cream);color:var(--black);font-family:'Archivo',sans-serif;font-size:14px;}
.popup input:focus{outline:none;}
.popup button[type=submit]{background:var(--red);color:var(--cream);border:3px solid var(--red);font-family:'Archivo',sans-serif;font-weight:800;text-transform:uppercase;font-size:13px;letter-spacing:1px;padding:14px 18px;cursor:pointer;}
.popup button[type=submit]:hover{background:#b5182f;}
.popup .fine{font-size:11px;margin-top:12px;color:#8f8570;}
.popup .success{display:none;font-family:'Anton',sans-serif;font-size:22px;text-transform:uppercase;margin-top:10px;}