/* alignment-fix.css — site-wide hardening for consistent alignment (SAFE overrides)
   Goal: consistent header/nav/footer/content alignment across all pages & breakpoints.
   Scope: layout-only; no copy/content changes.
*/

/* 1) Universal sizing + media safety */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;overflow-x:hidden}
img,svg,video,canvas{max-width:100%;height:auto}
iframe{max-width:100%}

/* 2) Consistent page container */
.container{
  width:100%;
  max-width:1120px;
  margin-left:auto;
  margin-right:auto;
  padding-left:1.25rem;
  padding-right:1.25rem;
}

/* 3) Consistent vertical rhythm (prevents random top/bottom drift) */
main{display:block}
section{scroll-margin-top:84px}
.section, .content, .page, .wrap{width:100%}
.section{padding-top:28px;padding-bottom:28px}
@media (max-width: 900px){
  section{scroll-margin-top:72px}
  .section{padding-top:22px;padding-bottom:22px}
}

/* 4) Header alignment (logo + nav + utilities) */
.site-header{width:100%}
.site-header .header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.85rem;
  flex-wrap:wrap;
}
.site-header .logo{display:flex;align-items:center;flex:0 0 auto}
.site-header .logo img{display:block;height:auto}

/* If header has a container already, ensure it behaves */
.site-header .container{display:flex;align-items:center;justify-content:space-between;gap:.85rem;flex-wrap:wrap}

/* 5) Primary nav alignment (links + dropdown details) */
.main-nav, .site-header .main-nav{
  display:flex;
  align-items:center;
  gap:.9rem;
  flex-wrap:wrap;
}
.main-nav a, .site-header .main-nav a{
  display:inline-flex;
  align-items:center;
  line-height:1.15;
  white-space:nowrap;
  /* Some older global rules were adding margins to <a>. Keep nav clean. */
  margin:0 !important;
}

/* Make top-level items share a consistent hit-area/height to prevent
   baseline drift (a common cause of "uneven" main-menu alignment). */
.site-header .main-nav > a,
.site-header .main-nav > details > summary,
.main-nav > a,
.main-nav > details > summary{
  min-height:44px;
  padding:.55rem .7rem;
  display:inline-flex;
  align-items:center;
}

/* Ensure dropdown summary aligns exactly like a normal link */
.nav-dd>summary{line-height:1.15}

/* Desktop: keep the header row from wrapping (nav itself can still wrap
   if viewport is tight, but the logo/menu baseline stays aligned). */
@media (min-width: 901px){
  .site-header .header-inner,
  .site-header .container{flex-wrap:nowrap;align-items:center}
  .site-header .main-nav{flex-wrap:wrap}
}

/* Dropdown nav (details/summary) */
.nav-dd{position:relative}
.nav-dd>summary{
  list-style:none;
  cursor:pointer;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  margin:0;
}
.nav-dd>summary::-webkit-details-marker{display:none}
.nav-dd-menu{
  position:absolute;
  top:100%;
  left:0;
  min-width:240px;
  border-radius:14px;
  box-shadow:0 12px 28px rgba(0,0,0,.12);
  background:#fff;
  padding:.35rem;
  display:none;
  z-index:9999;
}
.nav-dd[open]>.nav-dd-menu{display:block}
.nav-dd-menu a{
  display:block;
  padding:.55rem .65rem;
  border-radius:10px;
  text-decoration:none;
}
/* Keep dropdown inside viewport on narrow screens */
@media (max-width: 640px){
  .nav-dd-menu{left:auto;right:0;min-width:min(92vw,320px)}
}

/* 6) Any header search input: prevent it from collapsing layout */
.nav-search{
  display:flex;
  align-items:center;
  flex:0 1 280px;
  min-width:180px;
}
.nav-search input, .nav-search select{
  width:100%;
  max-width:280px;
}

/* Translate widget container: prevent it from pushing layout around */
.google-translate{display:flex;align-items:center;flex:0 0 auto;min-height:28px}

/* 7) Common grids/cards: prevent misalignment due to uneven heights */
.grid, .cards, .card-grid{
  display:grid;
  gap:16px;
}
.card, .cards .card{height:100%}

/* 8) Tables & long content: prevent overflow */
table{max-width:100%;border-collapse:collapse}
pre, code{max-width:100%;overflow:auto}
a, p, li{word-wrap:break-word;overflow-wrap:anywhere}

/* 9) Forms: keep fields aligned */
form{max-width:100%}
input, select, textarea, button{max-width:100%}

/* 10) Footer alignment */
.site-footer{width:100%}
.site-footer .footer-inner{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  align-items:flex-start;
  justify-content:space-between;
}

/* 11) Mobile header stacking: keeps everything aligned */
@media (max-width: 900px){
  .site-header .header-inner,
  .site-header .container{align-items:flex-start}
  .main-nav, .site-header .main-nav{width:100%}
  .nav-search{flex:1 1 100%;width:100%}
  .nav-search input, .nav-search select{max-width:100%}
}


/* v17: Container clamp for standalone content sections (loaded last for safety) */
.content-block,
.market-pulse,
.market-pulse-block{
  width:100%;
  max-width:1120px;
  margin:0 auto;
  padding-left:1.25rem;
  padding-right:1.25rem;
}



/* === Global Container Enforcement (safe-only) ===
   Goal: Ensure all primary content sections above the footer align to the site's container width.
   Applied to common full-width sections that were rendering outside the container on some pages.
*/
:root{
  --site-container-max: 1120px;
  --site-container-gutter: clamp(16px, 3vw, 28px);
}

#mainContent .trust-strip,
#mainContent .ai-context-block,
#mainContent .local-market-notes,
#mainContent .local-notes,
#mainContent .deal-timeline,
#mainContent .next-steps,
#mainContent .content-block,
#mainContent .faq-hub,
#mainContent #zain-expanded-content,
#mainContent > section.section{
  max-width: var(--site-container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--site-container-gutter);
  padding-right: var(--site-container-gutter);
  box-sizing: border-box;
}

/* Also catch pages that don't use #mainContent wrapper (rare) */
.trust-strip,
.ai-context-block,
.local-market-notes,
.local-notes,
.deal-timeline,
.next-steps,
.content-block,
.faq-hub,
#zain-expanded-content{
  max-width: var(--site-container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--site-container-gutter);
  padding-right: var(--site-container-gutter);
  box-sizing: border-box;
}


/* === ZAIN: Center "Choose your path" tiles (Buyer/Seller/1031) sitewide === */
.path-tiles{
  justify-items: stretch;
}
.path-tile{
  text-align: center;
}
.path-tile strong,
.path-tile span{
  text-align: center;
}
/* Improve vertical centering if tiles become flex in future */
.path-tile{
  display: block;
}
/* Mobile: keep tiles centered even when stacking */
@media (max-width: 720px){
  .path-tiles{grid-template-columns: 1fr !important;}
}



/* === Market grid thumbnails (img/metros) === */
/* Thumb-backed city cards (homepage markets section) */
.city-card.has-thumb{
  position:relative;
  overflow:hidden;
  border-radius:18px;
  background: #0b1220;
  color:#fff;
  min-height:160px;
}
.city-card.has-thumb::before{
  content:"";
  position:absolute; inset:0;
  background-image: var(--city-bg);
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
  filter: saturate(1.05) contrast(1.02);
  z-index:0;
}
.city-card.has-thumb::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,.66) 100%);
  z-index:1;
}
.city-card.has-thumb > *{ position:relative; z-index:2; }
.city-card.has-thumb h3{ margin:0 0 6px 0; }
.city-card.has-thumb p{ margin:0; opacity:.95; max-width: 55ch; }



/* === Home metro thumbnails (img/metros) — enforced (loaded last) === */
.metro-hero{
  width:100%;
  height:132px;
  border-radius:16px;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  overflow:hidden;
  position:relative;
}
.metro-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0.10), rgba(0,0,0,0.22));
}

/* Map metro cards to img/metros files */
.metro-miami{ background-image:url('../img/metros/miami.jpg'); }
.metro-dallas{ background-image:url('../img/metros/dallas.jpg'); }
.metro-tampa{ background-image:url('../img/metros/tampa.jpg'); }
.metro-orlando{ background-image:url('../img/metros/orlando.jpg'); }
.metro-houston{ background-image:url('../img/metros/houston.jpg'); }
.metro-atlanta{ background-image:url('../img/metros/atlanta.jpg'); }
.metro-charlotte{ background-image:url('../img/metros/charlotte.jpg'); }
.metro-phoenix{ background-image:url('../img/metros/phoenix.jpg'); }
.metro-la{ background-image:url('../img/metros/los-angeles.jpg'); }
.metro-sandiego{ background-image:url('../img/metros/san-diego.jpg'); }
.metro-nyc{ background-image:url('../img/metros/nyc.jpg'); }
.metro-chicago{ background-image:url('../img/metros/chicago.jpg'); }

/* Composite metro tiles that represent multi-city markets */
.metro-miami-ftl-wpb{ background-image:url('../img/metros/miami.jpg'); }
.metro-tampa-stp{ background-image:url('../img/metros/tampa.jpg'); }
.metro-dallas-ftw{ background-image:url('../img/metros/dallas.jpg'); }


/* v24: Lead image for Major U.S. Fuel Markets section (index.html) */
.section-lead-media{margin:14px 0 18px 0}
.section-lead-media img{display:block;width:100%;max-width:1120px;margin:0 auto;border-radius:18px;box-shadow:0 10px 30px rgba(0,0,0,.08);height:auto}
@media (min-width: 820px){.section-lead-media{margin:16px 0 22px 0}}