/* ============================================
   custom.css — McDowell South RV
   Project-specific styles. Do NOT edit template CSS (styles.css / pages.css / inventory.css) directly.
   CSS load order: styles.css -> pages.css -> brand.css -> custom.css
   ============================================ */

/* ============================================
   Task 17 — wider inventory listing container
   Sidebar stays fixed at 286px (.inv-layout); the extra width flows
   into the 1fr results column so the 3-up card grid breathes.
   Scoped to the inventory page body+banner only — site chrome
   (header/footer .wrap) stays at the global 1240px so nav stays aligned.
   ============================================ */
body[data-page="inventory"] .page-banner .wrap,
body[data-page="inventory"] .page .wrap{ max-width:1440px; }


/* ============================================
   No-photo placeholder (Clay 2026-06-27)
   Dealer logo (/images/nophoto.jpg) behind a diagonal brand-blue
   line overlay; "coming soon" text removed so the logo reads through.
   Applies everywhere .ph is used (listing cards, detail gallery/thumbs,
   similar cards, modal chip). Overrides styles.css .ph (loaded later).
   ============================================ */
.ph{
  background-color:#eeeeee;
  background-image:
    repeating-linear-gradient(135deg, rgba(0,35,153,.18) 0 13px, rgba(0,35,153,0) 13px 26px),
    url('/images/nophoto.jpg');
  background-position:center center, center center;
  background-size:auto auto, cover;
  background-repeat:repeat, no-repeat;
}
.ph .ph-label{ display:none !important; }


/* ============================================
   Detail-page fixes (Clay 2026-06-27)
   ============================================ */
/* share dropdown was hiding behind the sticky anchor bar (z-index:40) */
.pd-sharemenu{ z-index:50; }
/* similar-RVs carousel arrows: hide at the track ends on desktop; mobile keeps them hidden via the .carousel-nav media query */
.carousel-nav.sim-hide{ display:none; }
/* favorite/save heart hidden pending Paul's decision — no My-Favorites page yet (markup + JS left intact for re-enable) */
#pdFav{ display:none; }

/* ===== Task 29 — homepage banner carousel ===== */
.banner-carousel{position:relative;width:100%;overflow:hidden;background:var(--tint,#E9EDF8);}
.banner-track{display:flex;transition:transform .5s ease;will-change:transform;}
.banner-slide{flex:0 0 100%;min-width:100%;}
.banner-slide img{display:block;width:100%;height:auto;}
.banner-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.4);color:#fff;border:0;width:44px;height:44px;border-radius:50%;font-size:20px;line-height:1;cursor:pointer;z-index:2;display:flex;align-items:center;justify-content:center;transition:background .2s;}
.banner-nav:hover{background:rgba(0,0,0,.7);}
.banner-nav.prev{left:16px;}
.banner-nav.next{right:16px;}
.banner-dots{position:absolute;bottom:14px;left:0;right:0;display:flex;gap:8px;justify-content:center;z-index:2;margin:0;padding:0;}
.banner-dots button{width:10px;height:10px;border-radius:50%;border:0;background:rgba(255,255,255,.55);cursor:pointer;padding:0;}
.banner-dots button.active{background:#fff;}
@media(max-width:700px){.banner-nav{width:36px;height:36px;font-size:16px;}}
/* ===== Task 39 — detail page rv-type icon + brand logo ===== */
.pd-badges{display:flex;align-items:center;gap:30px;flex-wrap:wrap;width:100%;margin-top:14px;padding:16px 4px 4px;border-top:1px solid #e5e7eb;}
.pd-badge-icon{display:inline-block;height:150px;width:200px;background-color:var(--blue);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:left center;mask-position:left center;-webkit-mask-size:contain;mask-size:contain;}
.pd-badge-logo{height:190px;width:auto;}
.fp-brand-logo{width:auto;display:block;margin-bottom:14px;}
@media(max-width:700px){.pd-badges{gap:18px;padding:14px 2px 2px;}.pd-badge-icon{height:104px;width:150px;}.pd-badge-logo{height:130px;}.fp-brand-logo{max-width:100%;height:auto;}}

/* Task 37 (2026-06-29): white RV-type icons on the dark Shop-by-Type tiles.
   Uploaded rv_types SVGs are solid-black monochrome shapes on transparent bg;
   CSS-mask the icon URL + fill white so one upload theme-colors to any context. */
.type-icon .type-ico{
  display:block; width:150px; height:78px; max-width:100%;
  background-color:#fff;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain; mask-size:contain;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.35));
}

/* Task 37 (2026-06-29): hero-search RV-type tiles reuse the uploaded rv_types SVGs,
   masked to brand-blue (white when the tile is selected) — one source of truth w/ Shop-by-Type. */
.ddf-tile .tic .ddf-ico-mask{
  display:block; width:100%; height:100%;
  background-color:var(--blue);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain; mask-size:contain;
}
.ddf-tile.sel .tic .ddf-ico-mask{ background-color:#fff; }

/* T17d — collapsible filter accordions (Type/Brand/Feature) */
.filters .filter-group.acc .acc-h{cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px;}
.filters .filter-group.acc .acc-chev{width:18px;height:18px;flex:0 0 auto;transition:transform .2s ease;opacity:.7;}
.filters .filter-group.acc .acc-body{display:none;}
.filters .filter-group.acc.open .acc-body{display:block;}
.filters .filter-group.acc.open .acc-chev{transform:rotate(180deg);}

/* Task 45b — 360 virtual-tour badge on result cards */
.unit-photo .tour-badge{position:absolute;right:12px;bottom:12px;z-index:3;display:inline-flex;align-items:center;gap:5px;background:var(--blue,#002399);color:#fff;font-weight:700;font-size:.72rem;line-height:1;padding:5px 9px;border-radius:6px;box-shadow:0 1px 4px rgba(0,0,0,.35)}
.unit-photo .tour-badge svg{width:13px;height:13px;display:block}

/* Task 45b — detail-gallery 360 tour tile + iframe swap */
.pd-stage{position:relative}
.pd-thumb--tour{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:2px;background:var(--blue,#002399);color:#fff;font-weight:700;font-size:.7rem;cursor:pointer;text-align:center}
.pd-thumb--tour svg{width:22px;height:22px}
.pd-tour-overlay{position:absolute;inset:0;z-index:5;background:#000;display:none}
.pd-tour-overlay iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.pd-tour-back{position:absolute;top:10px;left:10px;z-index:6;background:rgba(0,0,0,.65);color:#fff;border:0;border-radius:6px;padding:7px 12px;font-weight:600;cursor:pointer}

/* ===== Task 50: Homepage text interrupter (brand-blue announcement, below hero) ===== */
.home-interrupter{background:var(--blue,#002399);color:#fff;text-align:center;padding:34px 20px;}
.home-interrupter .wrap{max-width:1180px;margin:0 auto;}
.home-interrupter .hi-headline{color:#fff;font-family:'Playfair Display',Georgia,serif;font-size:clamp(1.5rem,3.4vw,2.4rem);line-height:1.15;margin:0;font-weight:800;}
.home-interrupter .hi-body{color:rgba(255,255,255,.92);font-size:clamp(1rem,1.55vw,1.12rem);line-height:1.55;margin:14px auto 0;max-width:1080px;}
.home-interrupter .hi-btn{margin-top:20px;}
@media(max-width:600px){.home-interrupter{padding:26px 16px;}}

/* ============================================
   Task 51 — Mobile walkthrough fixes (2026-06-30)
   Override layer (loads after styles.css/pages.css). Phones only.
   ============================================ */

/* (1) Top utility bar: center the wrapped lines + tighten spacing (shorter bar) */
@media(max-width:700px){
  .utility{font-size:.78rem;}
  .utility .wrap{justify-content:center;column-gap:14px;row-gap:2px;min-height:0;padding:5px 0;flex-wrap:wrap;}
  .utility .util-left{justify-content:center;column-gap:14px;row-gap:2px;width:100%;}
  .utility a,.util-tag{line-height:1.25;}
}

/* (2) Mobile dropdown submenus: force in-flow + indented under the parent link.
       The desktop absolute/translateX(-50%) was leaking onto mobile and pushing
       submenu items off-screen left; !important nails them inside the panel.
   (3) Hamburger: push to the right edge of the bar, balanced opposite the logo. */
@media(max-width:1024px){
  .nav-cta{margin-left:auto;}
  .nav-item.has-menu{position:static;}
  .nav-menu{
    position:static !important; left:auto !important; right:auto !important; top:auto !important;
    transform:none !important; opacity:1 !important; visibility:visible !important;
    width:100% !important; min-width:0 !important; max-width:100% !important;
    box-shadow:none !important; background:transparent !important;
    margin:0 !important; padding:0 0 8px 16px !important; display:none;
  }
  .nav-item.has-menu.show .nav-menu{display:block;}
  .nav-menu a{white-space:normal !important;}
}

/* (4) About page value stats: 2×2 on phones (was 3 across + 1 below) */
@media(max-width:700px){
  .stat-row{display:grid !important;grid-template-columns:1fr 1fr;gap:24px 16px;justify-items:center;}
  .stat-row .st{text-align:center;}
}
/* ============================================
   Task 52 — Hero fine-tune (2026-07-01)
   Demo notes: smaller headings, transparent glass search box,
   content lower + centered so the drone video reads as the feature.
   Overrides only (Paul's styles.css untouched). New drone bg still pending.
   ============================================ */
.hero{align-items:stretch;}
.hero .wrap{display:flex;flex-direction:column;padding-top:clamp(44px,7vh,72px);padding-bottom:clamp(40px,6vh,60px);text-align:center;}
.hero-tag{margin-inline:auto;}
.hero h1{font-size:clamp(1.5rem,3.3vw,2.25rem);margin-top:14px;max-width:none;}
.hero-sub{font-size:clamp(.98rem,1.4vw,1.12rem);margin-top:12px;margin-left:auto;margin-right:auto;}
.searchcard{margin-top:auto;margin-left:auto;margin-right:auto;text-align:left;background:rgba(255,255,255,.14);backdrop-filter:blur(12px) saturate(1.08);-webkit-backdrop-filter:blur(12px) saturate(1.08);border:1px solid rgba(255,255,255,.30);box-shadow:0 12px 40px rgba(0,8,40,.30);}
.searchcard .field{background:rgba(255,255,255,.92);}
.searchcard .field:focus-within{background:#fff;}
.search-toggle button{color:#fff;}
.search-toggle button.on{background:var(--blue);color:#fff;}
.search-meta{justify-content:center;}
/* Task 52 (2026-07-01): stronger hero text-shadow so white/gold don't wash out over bright video frames */
.hero-tag,.hero h1,.hero-sub{text-shadow:0 2px 6px rgba(0,8,34,.85),0 1px 2px rgba(0,8,34,.72);}
.hero-sub b{text-shadow:0 2px 6px rgba(0,8,34,.92),0 1px 2px rgba(0,8,34,.78);}

/* Welcome-badge fix (2026-07-01): styles.css .welcome-media img (spec 0,1,1) was overriding .family-badge width/height (0,1,0), stretching the corner badge to cover the whole photo. Restore Paul's small bottom-right badge. */
.welcome-media img.family-badge{width:108px;height:auto;object-fit:contain;}

/* ============================================
   Page-banner (breadcrumb) sitewide standard (Task 16, 2026-07-01)
   Clay: remove the overlay so the full-color photo shows; add hero-style
   text-shadow for white-text legibility; let the title + paragraph span the
   full .wrap width (right edge aligns with the body / 'Our promise' card),
   instead of the narrow 18ch/56ch caps. Applies site-wide to every page banner.
   ============================================ */
.page-banner.with-photo::after,
.page-banner.with-photo.dark::after{
  background:
    linear-gradient(95deg,rgba(6,10,22,.66) 0%,rgba(6,10,22,.42) 26%,rgba(6,10,22,.14) 52%,rgba(6,10,22,0) 74%),
    linear-gradient(0deg,rgba(6,10,22,.34) 0%,rgba(6,10,22,0) 42%);
}
.page-banner .breadcrumb,
.page-banner .banner-tag{text-shadow:0 2px 6px rgba(0,8,34,.85),0 1px 2px rgba(0,8,34,.72);}
.page-banner h1{max-width:none;text-shadow:0 2px 8px rgba(0,8,34,.92),0 1px 2px rgba(0,8,34,.80);}
.page-banner .lead{max-width:none;text-shadow:0 2px 6px rgba(0,8,34,.85),0 1px 2px rgba(0,8,34,.72);}


/* ===== Task 52 (S41 2026-07-02): hero search dropdowns open UPWARD ===== */
/* .searchcard is bottom-anchored in the hero (margin-top:auto), so the RV Type + */
/* Floorplan Feature menus must open UP, not down (overrides Paul styles.css .ddf-menu). */
.hero-dd .ddf-menu{ top:auto; bottom:calc(100% + 8px); transform-origin:bottom center; }
.hero-dd.open .ddf-menu{ animation:ddPopUp .16s ease; }
@keyframes ddPopUp{ from{opacity:0;transform:translateY(6px);} to{opacity:1;transform:translateY(0);} }


/* ===== Task 52b (2026-07-02): bigger, centered hero dropdown icons (28px -> 100px wide) ===== */
.ddf-tile{ min-height:0; }
.ddf-tile .tic{ width:100px; height:40px; margin:0 auto; }

/* S48 2026-07-07 — hero scrim lightened for official drone montage (Clay) */
.hero-scrim{
  background:
    linear-gradient(95deg,rgba(6,10,22,.01) 0%,rgba(6,10,22,0) 26%,rgba(6,10,22,.20) 50%,rgba(6,10,22,0) 72%),
    linear-gradient(0deg,rgba(6,10,22,0) 0%,rgba(6,10,22,0) 40%);
}