:root{--bg:#fffaf5;--primary:#8B3A3A;--accent:#C4622D;--gold:#D89B1E;--green:#3F6F52;--ink:#1f2937;}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,"Helvetica Neue",Arial,sans-serif;line-height:1.5}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
.small{font-size:.9rem}
.muted{color:#5b6776}

.site-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;background:linear-gradient(90deg,var(--primary),var(--accent));color:#fff;position:sticky;top:0;z-index:1000}
.brand a{color:#fff;font-weight:800;letter-spacing:.5px;font-size:1.25rem}
.brand .dot{color:var(--gold)}

.hamburger{position:relative;width:44px;height:36px;border:0;background:transparent;cursor:pointer}
.hamburger::before, .hamburger::after{content:"";position:absolute;left:6px;right:6px;height:3px;background:#fff;border-radius:2px;transition:transform .2s ease}
.hamburger::before{top:10px;box-shadow:0 8px 0 0 #fff, 0 16px 0 0 #fff}
.hamburger::after{display:none} /* three lines via box-shadow */

.nav{display:flex;gap:1rem}
.nav a{color:#fff;font-weight:600;opacity:.95}
.nav a:hover{opacity:1}

@media (max-width: 880px){
  .nav{position:absolute;inset:56px 0 auto 0;background:linear-gradient(180deg,var(--primary),var(--green));display:none;flex-direction:column;padding:.5rem 1rem;box-shadow:0 8px 20px rgba(0,0,0,.2)}
  .nav.open{display:flex}
}

.hero-under-menu{padding:0 1rem}
.img-placeholder{width:100%;height:180px;background:repeating-linear-gradient(45deg,#eee,#eee 10px,#f7f7f7 10px,#f7f7f7 20px);border:2px dashed #c8c8c8;border-radius:12px;margin:1rem auto}
.img-placeholder.tall{height:260px}

.container{max-width:1100px;margin:0 auto;padding:1rem}
.grid.two{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;align-items:start}
@media (max-width: 900px){.grid.two{grid-template-columns:1fr}}

.hero-img img{width:100%;height:auto;border-radius:12px;box-shadow:0 6px 20px rgba(0,0,0,.1)}
.stack{display:flex;flex-direction:column;gap:1rem}

.cards{list-style:none;padding:0;margin:1rem 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem}
.list-card{background:#fff;border:1px solid #eee;border-radius:14px;padding:1rem;box-shadow:0 4px 14px rgba(0,0,0,.05)}
.list-card h3{margin:.25rem 0}
.directions{display:inline-block;background:var(--green);color:#fff;padding:.4rem .7rem;border-radius:999px;font-weight:700}
.directions:hover{opacity:.9}
.cite{display:block;margin-top:.5rem;color:#6b7280}

.table-wrap{overflow-x:auto}
.nice-table{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 6px 20px rgba(0,0,0,.05)}
.nice-table th,.nice-table td{padding:.75rem;border-bottom:1px solid #eee;text-align:left}
.nice-table thead th{background:linear-gradient(90deg,var(--accent),var(--gold));color:#fff}

.text-placeholder{background:#fff;border:1px solid #eee;border-radius:14px;padding:1rem;box-shadow:0 4px 14px rgba(0,0,0,.05)}

.site-footer{margin-top:2rem;padding:1.25rem;text-align:center;background:linear-gradient(90deg,var(--green),var(--accent));color:#fff;font-weight:700;border-top:4px solid var(--gold)}

/* --- Ads layout --- */
.with-ads{display:grid;grid-template-columns: 1fr;gap:1rem}
.ad-col{display:none;gap:1rem}
.ad-card{background:#fff;border:1px dashed #c8c8c8;border-radius:10px;min-height:160px;display:flex;align-items:center;justify-content:center;font-weight:800;color:#9aa1a9}
@media (min-width: 1100px){
  .with-ads{grid-template-columns:200px 1fr 200px;align-items:start}
  .ad-col{display:flex;flex-direction:column}
}
/* Featured page will override to hide ads */
.no-ads .ad-col{display:none}

.site-footer a{color:inherit;text-decoration:none}
.site-footer a:hover{text-decoration:underline}
.site-footer .sep{opacity:.8;margin:0 .4rem}

/* Ensure nav stacks on small screens */
@media (max-width: 880px){
  .container{padding:1rem .75rem}
}

/* Tweak button for a11y without 'Menu' text */
.hamburger:focus{outline:2px solid rgba(255,255,255,.8);outline-offset:2px}


/* === MERGE PATCH: hero full-width + responsive crop + ad-image support === */

/* Make hero stretch edge-to-edge (no side padding) */
.hero-under-menu{padding:0;}

/* Use the existing placeholder as a real hero container */
.img-placeholder{
  width:100%;
  height:clamp(190px, 22vw, 320px);
  margin:0;
  border-radius:0;
  border:0;
  background:#e5e7eb;
  overflow:hidden;
}

/* When hero image is inside placeholder */
.img-placeholder img.hero-banner,
.img-placeholder > img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 72%; /* desktop crop (less bottom than mobile) */
  display:block;
}

/* Mobile crop can be a bit lower to keep mountains visible */
@media (max-width:600px){
  .img-placeholder{height:200px;}
  .img-placeholder img.hero-banner,
  .img-placeholder > img{object-position:center 88%;}
}

/* Ensure the layout below hero has breathing room */
.hero-under-menu + .container,
.hero-under-menu + main.container{margin-top:1rem;}

/* Support image-based ad placeholders inside .ad-card */
.ad-card{overflow:hidden;}
.ad-card img{
  width:100%;
  height:auto;
  display:block;
}

/* If ad-card is flex-centered text in some pages, keep it working */
.ad-card{
  align-items:center;
  justify-content:center;
}


/* === ADS VISIBILITY PATCH (keep ads on skinny screens) === */
.ad-col { display: flex; gap: 0.75rem; }

@media (max-width: 1099px) {
  .with-ads { display: flex; flex-direction: column; }
  .ad-col { flex-direction: row; justify-content: center; }
  .ad-card { width: 140px; height: 140px; }
}

@media (min-width: 1100px) {
  .with-ads {
    display: grid;
    grid-template-columns: 200px minmax(760px, 1fr) 200px;
    align-items: start;
  }
  .ad-col { flex-direction: column; }
}


/* === INDEX INTRO EXPAND PATCH (remove roundabout column, expand intro) === */
/* If homepage intro uses a 2-column layout, force it to 1-column now */
.index-intro,
.intro-grid,
.home-intro,
.hero-columns,
.two-col,
.columns-2 {
  display: block;
}

/* If there are grid definitions, collapse to single column */
.index-intro,
.intro-grid,
.home-intro,
.hero-columns,
.two-col,
.columns-2 {
  grid-template-columns: 1fr !important;
}

/* Ensure any leftover right-column cards don't reserve width */
.roundabout,
.roundabout-card,
.right-col,
.side-col {
  display: none !important;
}


/* === NESTLED FULL-WIDTH PATCH (homepage intro should not be 2-column on desktop) === */
.grid.two{
  grid-template-columns: 1fr !important;
}
/* If the old right column still exists in markup, hide it so it doesn't "reserve" space */
.grid.two > div:nth-child(2){
  display:none !important;
}


/* === AD PLACEHOLDER VISIBILITY PATCH === */
.ad-card {
  min-height: 140px;
  border: 2px dashed #999;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  font-size: 0.9rem;
  background: #fafafa;
}

.ad-card::before {
  content: "Ad Space";
  font-weight: 600;
  letter-spacing: 0.03em;
}


/* === BANNER AD PLACEHOLDER (hero-under-menu) === */
.hero-under-menu .banner-ad-placeholder{
  width: 100%;
  height: clamp(70px, 6vw, 105px);
  border: 3px dashed #999;
  border-radius: 12px;
  background: #fafafa;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  font-weight: 700;
  letter-spacing: .03em;
  margin: 1rem 0;
}

/* === FULL-WIDTH TOP BANNER (spans ads + content) === */
.top-banner-ad{
  grid-column: 1 / -1;
  width: 100%;
  margin: 0 0 1rem 0;
}
.top-banner-ad a{display:block}
.top-banner-ad img{
  width: 100%;
  height: clamp(70px, 6vw, 105px);
  object-fit: cover;
  display: block;
  border-radius: 12px;
}

/* === TOP BANNER IMAGE PATCH (Cartecay) === */
.top-banner-ad img.banner-ad-img {
  width: 100%;
  height: clamp(70px, 6vw, 105px);
  object-fit: cover;
  display: block;
  border-radius: 12px;
}


/* === HEADER LOGO FIX (prevent cut-off) === */
header.site-header{
  min-height: 64px;
  padding-top: .75rem;
  padding-bottom: .75rem;
  overflow: visible;
}
header .brand{
  display:flex;
  align-items:center;
  gap:.6rem;
  line-height:1;
}
header .brand img{
  max-height: 44px;
  width:auto;
  display:block;
  object-fit:contain;
}

/* === BANNER AD UNDER MENU (non-index pages) === */
.hero-under-menu .banner-ad-img{
  width: 100%;
  height: clamp(70px, 6vw, 105px);
  object-fit: cover;
  display: block;
  border-radius: 12px;
}
.hero-under-menu .banner-ad-link{display:block;}


/* === BANNER SHORT + NO LEFT LOGO PATCH === */
header .brand img{display:none !important;}

/* Shorter banner ad under menu */
.hero-under-menu .banner-ad-img{
  height: clamp(70px, 6vw, 105px) !important;
  object-fit: cover;
  object-position: center 50%;
}
/* Remove any default img-placeholder styling that could create extra space */
.hero-under-menu .img-placeholder{
  height: auto !important;
  background: transparent !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}


.hero-under-menu{ padding:0; margin:0; }
.hero-under-menu .banner-ad-link{ display:block; width:100%; }
.hero-under-menu .banner-ad-img{
  width: 100%;
  height: clamp(80px, 7vw, 115px); /* short banner, responsive */
  object-fit: cover;              /* fills full width nicely */
  object-position: center center; /* keeps text centered */
  display: block;
  border-radius: 12px;
}
@media (max-width: 600px){
  .hero-under-menu .banner-ad-img{ height: 90px; border-radius: 10px; }
}


.hero-under-menu{ padding:0; margin:0; }
.hero-under-menu .banner-ad-link{
  display:block;
  width:100%;
  height: clamp(80px, 7vw, 115px);
  background: #0f172a; /* dark backing so letterbox looks intentional */
  border-radius: 12px;
  overflow: hidden;
}
.hero-under-menu .banner-ad-img{
  width: 100%;
  height: 100%;
  object-fit: contain;           /* NO CROP */
  object-position: center center;
  display:block;
}
@media (max-width: 600px){
  .hero-under-menu .banner-ad-link{ height: 90px; border-radius: 10px; }
}



/* If any page wraps hero-under-menu inside a max-width container, force it to expand */
.hero-under-menu{ max-width: none !important; }


/* === CARTECAY BANNER FULL-BLEED + NO-CROP (NON-INDEX PAGES) ===
   Forces the banner to span the full viewport width even if nested in a container.
   Uses contain so the image is NEVER cut off top/bottom. Aspect ratio is close to banner height.
*/
.hero-under-menu{
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding: 0 !important;
}

.hero-under-menu .banner-ad-link{
  display:block;
  width: 100%;
  background: #0f172a; /* subtle letterbox if needed */
}

.hero-under-menu .banner-ad-img{
  width: 100% !important;
  height: 70px !important;      /* shorter banner */
  object-fit: contain !important; /* NO CROP EVER */
  object-position: center center !important;
  display:block !important;
}

@media (max-width: 600px){
  .hero-under-menu .banner-ad-img{ height: 62px !important; }
}

/* INDEX HERO: make it shorter */
#index-hero img,
.hero-under-menu .hero-img,
.hero-under-menu img {
  width: 100%;
  height: clamp(180px, 22vw, 320px); /* desktop: shorter */
  object-fit: cover;
  object-position: center 40%;
  display: block;
}

/* Mobile: even shorter */
@media (max-width: 600px){
  #index-hero img,
  .hero-under-menu .hero-img,
  .hero-under-menu img {
    height: 200px;
    object-position: center 35%;
  }
}

.hero-under-menu .img-placeholder{
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
}

.hero-under-menu img {
  width: 100%;
  height: 200px;              /* or whatever height you prefer */
  object-fit: cover;
  object-position: center center; /* ← THIS is the key */
  display: block;
}

/* Add breathing room on left & right for all pages */
.container,
.main-content,
.page-content {
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Slightly wider padding on larger screens */
@media (min-width: 900px) {
  .container,
  .main-content,
  .page-content {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}