/**
 * NYBraceTown — WordPress Overrides  v20260412b
 *
 * local.css handles ALL visual design and layout.
 * This file ONLY patches things that WP breaks vs the original Sesame DOM:
 *  1. #hd — WP keeps nav inside #hd; source has it separate below
 *  2. #main-nav — source uses position:absolute inside #hd wrapper; WP has it after
 *  3. Container max-width alignment
 *  4. Admin bar offset
 *  5. Callout bg-image paths (local.css uses ../images/ which resolves correctly)
 *  6. Slideshow full-width
 *  7. Clearfix for floats
 */

/* ── Reset WP margins/padding on body ───────────────────────────────── */
body { margin: 0; padding: 0; }
#wrap { min-height: 100vh; }

/* ── Admin bar ───────────────────────────────────────────────────────── */
body.admin-bar #hd { margin-top: 32px; }

/* ── #hd: source uses min-height:200px + border-bottom at 48em ──────── */
/* WP outputs #hd then #main-nav as siblings — correct order already    */
/* local.css sets position:absolute on #main-nav — override to static   */
#main-nav {
    position: relative !important;
    top: auto !important;
    z-index: 100;
}
#main-nav .container {
    height: auto !important;
}

/* ── Nav: WP wraps in extra <div> from wp_nav_menu ─────────────────── */
/* local.css targets #main-nav ul directly — should work as-is          */
/* But WP adds div.menu-primary-container wrapper — kill its padding    */
#main-nav > .container > .collapsible > div {
    margin: 0;
    padding: 0;
}

/* ── Slideshow full-width ────────────────────────────────────────────── */
#slideshow {
    width: 100%;
    overflow: hidden;
    border-bottom: solid 6px #d388bd;
}
#slideshow .container {
    padding: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}
#slideshow #home-slideshow.slideshow,
#slideshow #home-slideshow {
    width: 100% !important;
    margin: 0 !important;
    position: relative;
}
/* Each slide image: full width, object-fit cover, fixed height          */
#slideshow #home-slideshow img,
#slideshow #home-slideshow .cycle-slide img {
    display: block;
    width: 2000px;
      max-width: none;
    height: 420px;
    object-fit: fill;
    max-width: none !important;
}
/* Cycle2 wraps slides in .cycle-slide — make those full-width too       */
#slideshow #home-slideshow .cycle-slide {
    width: 100% !important;
    position: absolute;
    top: 0; left: 0;
}

/* ── Inner page static hero image (class="static" on img) ───────────── */
#slideshow #home-slideshow img.static {
    display: block;
    width: 2000px;
      max-width: none;
    height: 420px;
    object-fit: fill;
    max-width: none !important;
}

/* ── Tagline ─────────────────────────────────────────────────────────── */
#tagline .container {
    max-width: 980px;
    margin: 0 auto;
}

/* ── #hd background divider image (source has it) ───────────────────── */
/* We skip hd-divider.png — not critical for structure                   */

/* ── #bd float-based layout: local.css handles at 48em ─────────────── */
/* DO NOT add flex here — let local.css floats take effect               */
/* Just ensure container is correct                                      */
#bd .container {
    max-width: 980px;
    margin: 0 auto;
    padding-left: 10px;
    padding-right: 10px;
}

/* Clearfix for float layout */
#bd .container::after,
#bd::after {
    content: "";
    display: table;
    clear: both;
}

/* ── Footer container ────────────────────────────────────────────────── */
#ft .container,
#ft .container.row {
    max-width: 980px;
    margin: 0 auto;
    padding: 0 10px;
    position: relative;
}

/* ── ft-left / ft-right float layout ────────────────────────────────── */
.ft-left {
    float: left;
    width: 55%;
}
.ft-right {
    float: right;
    width: 42%;
}
#ft::after,
#ft .container::after {
    content: "";
    display: table;
    clear: both;
}
/* #btt: source centers it above the footer with negative margin */
#btt {
    position: relative;
    text-align: center;
    margin: -22px auto 23px;
    clear: both;
    width: 100%;
}
#btt a#back-to-top {
    display: block;
    margin: 0 auto;
    width: 40px;
}
#btt img { display: block; width: 40px; height: auto; }

/* ── Locations inside ft-right ──────────────────────────────────────── */
#locations {
    overflow: hidden;
}
.ft-location {
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
    width: 44%;
}
.ft-location a { text-decoration: none; color: #ccc; }
.ft-location a:hover { color: #fff; }
.ft-location .map img {
    display: block;
    max-width: 130px;
    height: auto;
    margin-bottom: 4px;
    border: 2px solid rgba(255,255,255,0.2);
}
.ft-location .addy { font-size: 11px; line-height: 1.5; color: #ccc; }

/* ── Footer text-nav ─────────────────────────────────────────────────── */
p.text-nav a { display: block !important; }
p.text-nav .space { display: none; }

/* ── ft-links btn color fix (source: pink #af075b) ──────────────────── */
#ft-links a.btn {
    background: #af075b !important;
    color: #fff !important;
    display: inline-block;
    padding: 7px 14px;
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
    border-radius: 2px;
}
#ft-links a.btn:hover { background: #8c0549 !important; }
#ft-links { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
#ft-links img { max-height: 32px; width: auto; display: block; }

/* ── Awards section ──────────────────────────────────────────────────── */
#awards {
    text-align: center;
    padding: 15px 0;
    background: #fff;
}
#awards .container {
    max-width: 980px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
#awards img { max-height: 100px; width: auto; }

/* ── #affiliations: centered icon bar (source: text-align:center, clear:both) */
#affiliations {
    width: 100%;
    text-align: center;
    clear: both;
    padding: 15px 0 10px;
    overflow: hidden;
}
#affiliations a {
    display: inline-block;
    padding: 0 14px;
    margin-bottom: 10px;
    vertical-align: middle;
}
#affiliations img {
    display: block;
    max-height: 60px;
    width: auto;
}
#affiliations::after { content: ""; display: table; clear: both; }

/* ── Nav sprite hover/active state ──────────────────────────────────── */
/* source: background-position: center top (shows top half of sprite)   */
#main-nav ul li.active > a[id],
#main-nav ul li:hover > a[id] {
    background-position: center top !important;
    text-decoration: none;
    color: #ffffff;
}
/* For-all-ages nav item — no sprite in source, use plain blue bg       */
#main-nav ul li.for-all-ages > a {
    background-image: none;
}
/* Active nav item highlight via WP classes                             */
#main-nav ul li.active > a,
#main-nav ul li.active > a[id] {
    background-position: center top !important;
}

/* ── appt box: yellow bg, pink text ────────────────────────────────────*/
.appt {
    background: #fcbd00 !important;
    color: #af075b !important;
}
.appt strong { color: #af075b !important; }
.appt a { color: #fff !important; }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .ft-left, .ft-right { float: none; width: 100%; }
    .ft-location { width: 45%; }
}
@media (max-width: 480px) {
    .ft-location { float: none; width: 100%; margin-right: 0; }
}

/* ===== Homepage hero: use object-fit:cover so image is centered (fade mode) ===== */
/* Cycle2 fade sets left:0 inline (overriding CSS left:50%), leaving margin-left:-1000px from local.css  */
/* We must reset margin-left to 0 so images start at x=0 and fill the full width */
body.home #slideshow #home-slideshow img,
body.home #slideshow #home-slideshow .cycle-slide img {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    object-fit: cover !important;
    object-position: center center !important;
}
body.home #slideshow #home-slideshow img.static {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    object-fit: cover !important;
    object-position: center center !important;
}