/* ==========================================================================
   Eat4Cheaper Site Styles
   - Uses CSS variables for brand color + rhythm
   - Organized top→bottom by site sections
   - Bootstrap-friendly (no global overrides except :root and body)
   ========================================================================== */

/* ----- Design tokens (easy theming) ----- */
:root{
  --e4c: #fc6444;
  --e4c-hover: #e5533b;
  --e4c-cta: #F15A29;    /* Business CTA tone */
  --e4c-cta-hover: #d94f24;
  --shade: #111;
  --muted: #6c757d;
  --radius: .5rem;
  --radius-xl: 1rem;
  --gap-sm: .75rem;
  --gap: 1rem;
  --gap-lg: 1.5rem;
  --pad-section: 6rem;
}

/* ----- Page layout scaffold ----- */
html, body { height: 100%; margin: 0; }
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main { flex: 1; } /* pushes footer down */

/* ===== UTILITIES & SHARED ===== */
.text-e4c { color: var(--e4c) !important; }
.bg-e4c   { background-color: var(--e4c) !important; } /* FIXED: was 'color' */
.pt-70    { padding-top: 70px; }
.rounded-image { border-radius: 15px; }

/* Brand buttons */
.btn-e4c{
  background-color: var(--e4c);
  color: #fff;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color .2s ease;
}
.btn-e4c:hover,
.btn-e4c:focus { background-color: var(--e4c-hover); color:#fff; }
.btn-e4c:active { background-color: var(--e4c-hover); }
.btn-e4c:disabled{
  background-color: #d3d3d3;
  color: #a9a9a9;
  cursor: not-allowed;
  opacity: .6;
}

/* Outline brand */
.btn-outline-e4c{
  color: var(--e4c);
  border-color: var(--e4c);
}
.btn-outline-e4c:hover,
.btn-outline-e4c:focus,
.btn-outline-e4c:active{
  color:#fff; background-color: var(--e4c); border-color: var(--e4c);
}

/* List group brand item */
.list-group-item-e4c{
  background-color: var(--e4c);
  color: #fff;
  border-color: var(--e4c);
  padding-left: 10px;
}

/* ===== MASTHEAD (Hero) ===== */
header.masthead{
  padding-top: calc(10.5rem + env(safe-area-inset-top)); /* notch-safe */
  padding-bottom: 6rem;
  text-align: center;
  color: #fff;
  background: url("../img/header-bg.png") center/cover no-repeat;
}
header.masthead .masthead-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 3rem; /* keep spacing under logo */
  max-width: 100%;
}
header.masthead .masthead-logo img{
  display: block;                 /* avoids inline line-height quirks */
  width: clamp(180px, 70vw, 700px); /* scale by width, stays big on desktop */
  height: auto;                   /* keep aspect ratio */
  max-width: 100%;
  /* Remove any height cap that can crop: */
  /* max-height: 4rem;  <-- delete this from the earlier rule */
  object-fit: contain;            /* fine when sizing by width */
}
/* Tighten up for very small phones */
@media (max-width: 400px){
  header.masthead .masthead-logo img{
    width: min(80vw, 360px);
  }
}
/* Add safe-area horizontal padding so nothing hugs the notch/curves */
@supports (padding: max(0px)){
  header.masthead{
    padding-left:  max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }
}
header.masthead .masthead-heading{
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 3rem;
  font-family: "Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}
header.masthead .masthead-subheading{
  font-size: 1.5rem;
  font-style: italic;
  line-height: 1.5rem;
  margin-bottom: 25px;
  font-family: "Roboto Slab",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}

/* Safer on small phones */
@media (max-width: 575.98px){
  header.masthead{
    padding-top: calc(7rem + env(safe-area-inset-top));
    padding-bottom: 4rem;
  }
  header.masthead .masthead-heading{
    font-size: 2rem; line-height: 1.2; margin-bottom: 1.25rem;
  }
  header.masthead .masthead-subheading{
    font-size: 1rem; line-height: 1.4; margin-bottom: 1rem;
  }
}

/* Larger tablets/desktops */
@media (min-width: 768px){
  header.masthead{
    padding-top: calc(17rem + env(safe-area-inset-top));
    padding-bottom: 12.5rem;
  }
  header.masthead .masthead-subheading{
    font-size: 2.25rem; line-height: 2.25rem; margin-bottom: 2rem;
  }
}

/* Store badges row: add extra space *below* for clearer gap to CTAs */
.store-badges{
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  justify-content: center;
  margin: .5rem 0 2.25rem; /* INCREASED: more gap above CTAs */
}
.store-badge{ display:block; height:56px; width:auto; }
@media (max-width: 375px){ .store-badge{ height:48px; } }

/* CTA stack (stack on mobile, row on md+) */
.hero-ctas{
  display:flex; flex-direction: column;
  gap: var(--gap);
  align-items:center;
}
@media (min-width: 768px){
  .hero-ctas{ flex-direction: row; justify-content: center; }
}

/* ===== GENERIC SECTION SPACING ===== */
.page-section{ padding: var(--pad-section) 0; }

/* ===== FEATURES (icons use Bootstrap / Font Awesome) ===== */
/* (Relies on default Bootstrap spacing/typography) */

/* ===== SCOUT (AI DealFinder) ===== */
#scout .fa-stack{ position: relative; }
.scout-icon{
  height: 65px; width:auto; margin:auto; display:block;
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
}
.scout-icon:hover{ animation: wiggle .4s ease-in-out; }
@keyframes wiggle{
  0%,100%{ transform: translate(-50%,-50%) rotate(0deg); }
  25%{ transform: translate(-50%,-50%) rotate(-5deg); }
  75%{ transform: translate(-50%,-50%) rotate(5deg); }
}

/* Screenshot card */
.e4cScreens{ width: 250px; border-radius: 10px; }

/* Bullet list & subtle stagger-in motion */
.scout-bullets{ margin:0; }
.bullet-icon{ margin-right: .6rem; }

@media (prefers-reduced-motion: no-preference){
  #scout .scout-bullets li{ opacity:0; transform: translateY(6px); }
  #scout .scout-bullets li:nth-child(1){ animation: upFade .4s .1s ease-out forwards; }
  #scout .scout-bullets li:nth-child(2){ animation: upFade .4s .2s ease-out forwards; }
  #scout .scout-bullets li:nth-child(3){ animation: upFade .4s .3s ease-out forwards; }
  #scout .scout-bullets li:nth-child(4){ animation: upFade .4s .4s ease-out forwards; }
}
@keyframes upFade{ to{ opacity:1; transform: translateY(0); } }

/* ===== LIVE DEALS ===== */
.text-wrap { overflow-wrap: anywhere; } 
.deal-card .card-title{ letter-spacing: -.01em; }
.deal-card .card-text{ color: var(--shade); }
.deal-card .card-meta i{ margin-right: .25rem; }
.shadow-soft { box-shadow: 0 8px 24px rgba(16,24,40,0.08); }
.deal-ios { border: 0; background: #fff; }
.deal-ios.rounded-4 { border-radius: 1rem; }
.deal-price { font-size: 1.05rem; }
.deal-desc { white-space: pre-wrap; }
.deal-address {
  display: inline-block;
  white-space: normal;      /* allow wrapping */
  word-break: break-word;   /* wrap long words if needed */
  max-width: 80%;           /* optional: keep inside the card */
}


/* Hover lift (only for hover-capable devices) */
@media (hover:hover){
  .deal-card{ transition: transform .15s ease, box-shadow .15s ease; }
  .deal-card:hover{ transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,.12); }
}

/* Skeleton loaders */
.deal-skel .card-body{ padding-top: 1.25rem; }
.skel{
  height: 14px; border-radius: 6px;
  background: linear-gradient(90deg, #eee 25%, #f5f5f5 37%, #eee 63%);
  background-size: 400% 100%;
  animation: skelShimmer 1.2s ease-in-out infinite;
}
.skel-title{ height: 22px; width: 70%; }
.skel-line{ width: 90%; }
.w-50{ width: 50% !important; } /* keep specificity simple */
@keyframes skelShimmer{
  0%{ background-position: 100% 0; }
  100%{ background-position: 0 0; }
}

/* ===== ABOUT ===== */
/* Scoped overlay: avoid global .container override */
#about{
  position: relative;
  background: url("../img/about.png") center/cover no-repeat;
  color: #fff;
}
#about::before{
  content:""; position:absolute; inset:0; z-index:0;
  background: rgba(0,0,0,.5);
}
/* maintain stacking without touching global .container */
#about .container{ position:relative; z-index: 1; }

#about .section-subheading{ max-width: 720px; margin: 0 auto; }

/* Trust strip stats */
.about-trust .stat{
  background: #f8f9fa; border-radius: var(--radius);
  padding: .9rem .5rem;
}
.about-trust .stat-num{
  font-size: 1.25rem; font-weight: 800; line-height: 1; color: var(--shade);
}
.about-trust .stat-label{
  font-size: .85rem; color: var(--muted); margin-top: .25rem;
}

/* About card */
.about-card .card-body{ padding: 1.5rem; }

@media (prefers-reduced-motion: no-preference){
  #about .about-card, #about .about-trust .stat{
    opacity:0; transform: translateY(6px);
    animation: upFade .45s ease-out .12s forwards;
  }
  #about .about-trust .stat:nth-child(2){ animation-delay: .18s; }
}

/* ===== BUSINESS ===== */
#business .benefits{
  display:grid; row-gap: 20px;
}
#business .benefit{
  display:grid;
  grid-template-columns: 72px 1fr; /* icon rail + text */
  column-gap: 16px;
  align-items: start;
}
#business .icon-circle{
  width: 56px; height: 56px; background-color: currentColor;
  border-radius: 50%;
  display:grid; place-items: center;
  margin-top: 2px; /* optical tweak aligns titles nicely */
}
#business .icon-circle i{ line-height: 1; }
#business .benefit-title{ margin: 2px 0 2px; color: var(--shade); }
#business .benefit-copy{ margin: 0; }

/* Portal image */
#business img{
  max-width:100%; height:auto;
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

/* Business CTA (distinct hue from main brand for hierarchy) */
#business .btn-e4c{
  background-color: var(--e4c-cta);
  color:#fff; border:none;
}
#business .btn-e4c:hover{ background-color: var(--e4c-cta-hover); }

@media (max-width: 575.98px){
  #business .benefit{ grid-template-columns: 56px 1fr; }
}

/* Metric chips under the portal image */
.metric-chip{
  display:inline-block;
  padding: .35rem .6rem;
  border-radius: 999px;
  background:#fff;
  border:1px solid #e6e6e6;
  font-size:.85rem;
  font-weight:500;
  color:#555;
  line-height:1.2;
  margin:.25rem 0;
}

/* ===== CONTACT ===== */
section#contact{
  background-color:#212529;
  background-image:url("../img/map-image.png");
  background-repeat:no-repeat;
  background-position:center;
}
section#contact .section-heading{ color:#fff; }
section#contact form#contactForm .form-group{ margin-bottom: 1.5rem; }
section#contact form#contactForm .form-group input,
section#contact form#contactForm .form-group textarea{ padding: 1.25rem; }
section#contact form#contactForm .form-group input.form-control{ height:auto; }
section#contact form#contactForm .form-group-textarea{ height:100%; }
section#contact form#contactForm .form-group-textarea textarea{
  height:100%; min-height:10rem;
}
section#contact form#contactForm p.help-block{ margin:0; }
section#contact form#contactForm .form-control:focus{
  border-color:#ffc800; box-shadow:none;
}

/* Placeholder styles (cross-browser) */
section#contact form#contactForm ::-webkit-input-placeholder{
  font-family:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  font-weight:700; color:#ced4da;
}
section#contact form#contactForm :-moz-placeholder{ font-family:"Montserrat"; font-weight:700; color:#ced4da; }
section#contact form#contactForm ::-moz-placeholder{ font-family:"Montserrat"; font-weight:700; color:#ced4da; }
section#contact form#contactForm :-ms-input-placeholder{ font-family:"Montserrat"; font-weight:700; color:#ced4da; }