/* ============================================================
   Custom CSS — Bootheel Rentals
   Project-specific overrides only. Do NOT edit the template
   design system (clean.css / home-photos.css) directly.
   Load order: fonts -> clean.css -> home-photos.css -> custom.css
   ============================================================ */

/* Footer flush to page bottom
   clean.css sets body{padding-bottom:54px} (leftover — no fixed bottom bar uses it),
   which showed a white strip below the dark footer. Zero it out. */
body{padding-bottom:0}

/* Footer logo — larger per Clay (2026-07-07); overrides clean.css 50px, keeps its margin-bottom */
footer.site .logo img{height:136px}
/* Task 61(b2) - footer social row. .util is the Visit/Call column; because grid items
   stretch to the row height, margin-top:auto pins the row to the bottom of the TALLEST
   column, not to this column's own height. */
footer.site .cols .util{display:flex;flex-direction:column}
footer.site .social{margin-top:auto;padding-top:24px;display:flex;align-items:center;gap:14px}
footer.site .social a{color:#aebfd4;display:inline-flex;transition:color .15s}
footer.site .social a:hover{color:#fff}
footer.site .social svg{width:20px;height:20px;fill:currentColor;display:block}


/* v2.21.0 standard — balance heading line-wrapping (clean.css defines no text-wrap) */
h1,h2,h3{text-wrap:balance}

/* ===== Task 18 refinements (2026-07-09) ===== */
/* Center content grids so short/last rows center instead of left-aligning */
.cattiles{display:flex;flex-wrap:wrap;justify-content:center}
.cattiles > .cattile{flex:0 1 calc((100% - 54px)/4)}
@media(max-width:980px){.cattiles > .cattile{flex-basis:calc((100% - 36px)/3)}}
@media(max-width:600px){.cattiles > .cattile{flex-basis:calc((100% - 18px)/2)}}
.itemgrid{display:flex;flex-wrap:wrap;justify-content:center}
.itemgrid > .icard{flex:0 1 calc((100% - 66px)/4)}
@media(max-width:980px){.itemgrid > .icard{flex-basis:calc((100% - 44px)/3)}}
@media(max-width:680px){.itemgrid > .icard{flex-basis:calc((100% - 22px)/2)}}
@media(max-width:430px){.itemgrid > .icard{flex-basis:100%}}
/* nophoto fallback: cover-crop to fill the existing area (no surrounding placeholder bg) */
.ph-photo.is-nophoto{object-fit:cover}
.imgwrap img.is-nophoto{object-fit:cover}

/* Hero featured-slider rate: space the unit label off the price so $223/Call don't butt against per day/for rate (2026-07-09) */
.eqslider__rate b{margin-right:.32em}


/* ===== Fine-tuning (2026-07-10) ===== */
/* Brand marquee logos link to the brand detail page — keep logo layout intact */
.marquee__track li a{display:flex;align-items:center;justify-content:center;height:100%}

/* Category tiles — icon as faint background watermark (shared: home + equipment hub + category pages) */
.cattiles .cattile{position:relative;overflow:hidden;min-height:150px}
.cattiles .cattile .catbg{position:absolute;right:-8px;bottom:-16px;width:120px;height:120px;opacity:.12;pointer-events:none;z-index:0}
.cattiles .cattile .catbg svg{width:100%;height:100%;display:block}
.cattiles .cattile .catbg svg path{fill:var(--utility)}
.cattiles .cattile > h4,.cattiles .cattile > .ct{position:relative;z-index:1}

/* Item-detail thumbnails — centered wrap (Clay 2026-07-10): short/last row centers, no stranded lone thumb */
.gallery .thumbs{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.gallery .thumbs .ph{flex:0 1 calc((100% - 36px)/4)}

/* Item-detail: let the sticky price card travel — stretch the sidebar column to the tall left column so .qcard{position:sticky} has room (Clay 2026-07-10). FAQ stays in the left column; mobile card is position:static via clean.css so unaffected. */
.detail{align-items:stretch}


/* ===== T35 fine-tuning (2026-07-10, session 20) ===== */
/* #9 CTA image full-color: drop the dark gradient overlay on .hose image panels (was home-photos.css:18 rgba .62/.30) */
.hose .imgwrap::after{content:none}
/* #10 Softer .vhero--c scrim so the panel image reads through (was home-photos.css:93 rgba .86/.82/.62) */
.vhero--c .panel .scrim{background:linear-gradient(150deg,rgba(10,22,38,.6),rgba(12,52,90,.32) 30%,rgba(14,111,181,.2))}


/* ===== T40 fine-tune (2026-07-13, session 25) ===== */
/* Equipment nav DD: "Browse all" + "See all" share one row (2-col wide submenu) instead of stacking */
header.site nav .submenu--wide a.all{grid-column:auto;white-space:nowrap}
/* all-equipment.php right-column grid: 3-up (4-up too squashed in the narrower results column); mobile preserved */
.eqa-main .itemgrid > .icard{flex:0 1 calc((100% - 44px)/3)}
@media(max-width:680px){.eqa-main .itemgrid > .icard{flex-basis:calc((100% - 22px)/2)}}
@media(max-width:430px){.eqa-main .itemgrid > .icard{flex-basis:100%}}

/* ============================================================
   cc-wysiwyg - WYSIWYG output normalization (Dwight standard).
   clean.css applies a universal reset (*{margin:0;padding:0}) and
   a{color:inherit;text-decoration:none} sitewide. Customer-authored
   rich text therefore arrives with no paragraph spacing, no list
   markers or indent, and links indistinguishable from body text.
   These rules restore those affordances INSIDE the wrapper only.
   ============================================================ */
.cc-wysiwyg > *:first-child{margin-top:0}
.cc-wysiwyg > *:last-child{margin-bottom:0}
.cc-wysiwyg p{margin:0 0 1em}
.cc-wysiwyg ul,.cc-wysiwyg ol{margin:0 0 1em;padding-left:1.5em}
.cc-wysiwyg ul{list-style:disc}
.cc-wysiwyg ol{list-style:decimal}
.cc-wysiwyg li{margin:0 0 .35em}
.cc-wysiwyg li > ul,.cc-wysiwyg li > ol{margin:.35em 0 0}
.cc-wysiwyg a{color:var(--action);text-decoration:underline}
.cc-wysiwyg a:hover{text-decoration:none}
.cc-wysiwyg strong,.cc-wysiwyg b{font-weight:700}
.cc-wysiwyg em,.cc-wysiwyg i{font-style:italic}
.cc-wysiwyg h2,.cc-wysiwyg h3,.cc-wysiwyg h4{margin:1.25em 0 .5em;font-family:var(--display);line-height:1.15}
.cc-wysiwyg blockquote{margin:0 0 1em;padding-left:1em;border-left:3px solid var(--hair);color:var(--muted)}
.cc-wysiwyg table{border-collapse:collapse;margin:0 0 1em}
.cc-wysiwyg th,.cc-wysiwyg td{border:1px solid var(--hair);padding:6px 10px;text-align:left}
.cc-wysiwyg img{max-width:100%;height:auto}

/* ============================================================
   Task 73 (Clay, 2026-08-12) - detail-page PRIMARY photo shows the WHOLE image.
   The crop had TWO causes and CSS alone could only ever fix one of them:
     1. `.gallery .ph{height:440px}` (320px under 920px) combined with
        `.ph>.ph-photo{object-fit:cover}` filling that fixed box.
     2. every main_photo thumbnail is generated cropThumbnails=1, so the crop
        was ALSO baked into the served file. The PHP now serves urlPath (the
        uncropped original); these rules stop the box re-cropping it.
   Scoped to `.gallery > .ph` - a DIRECT child, i.e. the primary photo only -
   so the shared `.ph` cover-crop primitive is untouched in the hero, pillars,
   item cards and hose band, and the thumb grid keeps its uniform tiles.
   ============================================================ */
.gallery > .ph{height:auto;min-height:0;display:block;width:fit-content;max-width:100%;margin-inline:auto;background:none}
.gallery > .ph > .ph-photo{position:static;inset:auto;display:block;width:auto;height:auto;max-width:100%;max-height:78vh;margin:0 auto}
/* nophoto needs no special case once the box hugs - it renders at its own
   800x600 (4:3), capped by the column. The previous aspect-ratio override
   would DISTORT it here, since no fixed box height remains to fill. */
.gallery > .ph > .ph-photo.is-nophoto{max-width:100%}
/* both were already invisible beneath the absolutely-positioned photo; keeping
   them hidden means the ONLY change on the page is the photo's geometry */
.gallery > .ph > .ph-tag,.gallery > .ph > .ph-cap{display:none}

/* Task 78 -- Site search, homepage pillars section */
.pillar-search{display:flex;align-items:center;gap:10px;max-width:480px;margin:0 auto 28px;border:1px solid var(--hairline,#d9dee7);border-radius:999px;background:#fff;padding:6px 8px 6px 20px}
.pillar-search input{flex:1;border:none;outline:none;font-family:'Inter',sans-serif;font-size:.95rem;color:var(--ink,#1c2533);background:transparent}
.pillar-search input::placeholder{color:var(--muted,#5b6573)}
.pillar-search button{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border:none;border-radius:50%;background:var(--action,#0e6fb5);color:#fff;cursor:pointer;transition:.15s}
.pillar-search button:hover{background:var(--utility,#0c4676)}