/* Brandywine Kennels: build additions, loaded after home.css / reservations.css.
   Only behavior the static design couldn't show: mobile menu, <details> FAQ,
   form status messages, honeypot, thank-you state, skip link. Same tokens as the design. */

/* skip link */
.skip{position:absolute;left:12px;top:-60px;z-index:50;background:#01398e;color:#ffffff;padding:10px 18px;border-radius:999px;font-family:Lato,Arial,sans-serif;font-weight:700;text-decoration:none}
.skip:focus{top:12px;color:#ffffff}

/* Nov 2026 client edits: full rate list in the top "Boarding" card. Wider than the
   other three cells on desktop; its own full-width row below 1100px. */
.glance .cell.rates{gap:8px}
.glance .cell.rates .big{font-size:24px}
.ratelist{list-style:none;margin:2px 0;padding:0;display:flex;flex-direction:column}
.ratelist li{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.22);font-size:15px;line-height:1.4;color:#e3eaf7}
.ratelist .amt{font-family:"Playfair Display",Georgia,serif;font-size:22px;color:#ffffff;white-space:nowrap}
.ratelist li.multi{flex-direction:column;align-items:flex-start;gap:2px}
.ratelist .more{color:#ffffff;font-weight:700}
@media (min-width:1100px){.glance .card{grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr))}}
@media (max-width:1099px){.glance .cell.rates{grid-column:1 / -1;border-right:0}}
@media (min-width:901px) and (max-width:1099px){.glance .card{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Hours card: one line per day, day on the left, times on the right */
.hourlist{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-direction:column}
.hourlist li{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:1px solid #ece7dd;font-size:14px;line-height:1.35}
.hourlist li:last-child{border-bottom:0}
.hourlist .t{white-space:nowrap}
@media (min-width:1100px){.hourlist li{font-size:13px;gap:8px}}

/* pricing band: four plans (one dog, two dogs, three or more, bathing) */
@media (min-width:1100px){.plans{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:640px) and (max-width:1099px){.plans{grid-template-columns:repeat(2,minmax(0,1fr))}}
.plan .amt{flex-wrap:wrap;row-gap:4px}
.bk .sharenote{max-width:760px;margin:30px auto 0;text-align:center;font-size:16px;color:#dfe7f6}

/* gallery: 10 photos, 5 of them tall. From 1100px it is a fixed 5 x 3 grid (the order
   values put one tall and one short photo in each column), with focal points so heads
   stay in frame. Below 1100px the boxes get too narrow or too short to hold a whole dog,
   so the photos stack in columns at their own shape: nothing is cropped. The HTML order
   is the one that keeps those 3 and 2 columns evenly balanced. */
@media (min-width:1100px){
.gal{grid-template-columns:repeat(5,minmax(0,1fr))}
.gal img[src$="husky.jpg"]{order:1}.gal img[src$="pup.jpg"]{order:2}
.gal img[src$="basset.jpg"]{order:3}.gal img[src$="dane.jpg"]{order:4}
.gal img[src$="doberman.jpg"]{order:5}.gal img[src$="doodle.jpg"]{order:6}
.gal img[src$="tricolor.jpg"]{order:7}.gal img[src$="lab.jpg"]{order:8}
.gal img[src$="office.jpg"]{order:9}.gal img[src$="beagle.jpg"]{order:10}
.gal img[src$="dane.jpg"]{object-position:50% 25%}
.gal img[src$="lab.jpg"]{object-position:65% 50%}
.gal img[src$="tricolor.jpg"]{object-position:58% 50%}
}
@media (max-width:1099px){
.gal{display:block;columns:3;column-gap:14px}
.gal img{height:auto;margin:0 0 14px;break-inside:avoid}
}
@media (max-width:600px){.gal{columns:2;column-gap:10px}.gal img{margin-bottom:10px;border-radius:14px}}

/* service cards: a 3:2 photo instead of a fixed 300px strip, so the Bathing dog's whole
   face fits at every width (a 300px strip showed only a third of the photo's height). */
.svc .card img{height:auto;aspect-ratio:3/2}

/* hero on narrow screens: keep the Rottweiler centered instead of cutting off his back half */
@media (max-width:900px){.hero img{object-position:30% 60%}}

/* images with an HTML height attribute but a CSS aspect-ratio */
.about .main,.about .video img{height:auto}

/* mobile menu drawer (home). Opens with JS (.is-open) or, without JS, via #mobile-menu:target */
.mdrawer{display:none}
@media (max-width:900px){
.mdrawer{position:absolute;top:calc(100% + 8px);left:16px;right:16px;z-index:20;flex-direction:column;gap:2px;background:#ffffff;border:1px solid #ece7dd;border-radius:22px;padding:12px;box-shadow:0 18px 50px rgba(0,25,70,.18)}
.mdrawer.is-open,.mdrawer:target{display:flex}
.mdrawer a{display:flex;align-items:center;min-height:48px;padding:6px 16px;border-radius:12px;font-family:"Playfair Display",Georgia,serif;font-size:20px;color:#01398e;text-decoration:none}
.mdrawer a:hover,.mdrawer a:focus-visible{background:#eef3fb}
.mdrawer a.btn{justify-content:center;margin-top:8px;color:#ffffff;font-size:17px}
.mdrawer a.btn:hover{background:#002a6b;color:#ffffff}
.menu-btn[aria-expanded="true"]{background:#eef3fb}
}

/* FAQ accordion: <details>/<summary> styled like the design's .qa button */
.qa summary{all:unset;box-sizing:border-box;width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 26px;cursor:pointer;font-family:"Playfair Display",Georgia,serif;font-size:23px;color:#01398e;min-height:44px;list-style:none}
.qa summary::-webkit-details-marker{display:none}
.qa summary:focus-visible{outline:3px solid #7aa2e3;outline-offset:-3px;border-radius:18px}
.qa[open] .ic{transform:rotate(45deg)}

/* form status messages */
.form-status{border-radius:14px;padding:14px 18px;font-size:16px;line-height:1.5}
.form-status a{font-weight:700}
.form-status--ok{background:#eef3fb;border:1.5px solid #01398e;color:#01398e}
.form-status--err{background:#fdf0ee;border:1.5px solid #b3261e;color:#8c1d18}
.form-status--err a{color:#8c1d18}
#res-err:target{display:block}

/* honeypot: off-screen, not display:none (some bots skip hidden fields) */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* reservation form: sending state, file list */
.form.is-sending .btn.big{opacity:.7;cursor:progress}
.drop .files{font-size:14px;color:#444444}
.drop:focus-within{outline:3px solid #7aa2e3;outline-offset:2px}

/* reservation thank-you: shown when #thanks is the URL target, the form is hidden */
.thanks{display:none}
.thanks:target{display:flex}
.thanks:target ~ .form{display:none}
.thanks:focus{outline:none}