/* Brookfield Garage: header and footer (Nov 2026). Loaded on every page after main.css. */

/* Top bar */
.topbar{background:#0d141c; color:#c9d1d9; font-size:13px; border-bottom:1px solid #1d2a37}
.topbar .topbar__inner{max-width:1240px; display:flex; justify-content:space-between; align-items:center; gap:6px 24px; padding:8px 24px; flex-wrap:wrap}
.topbar__info{display:flex; flex-wrap:wrap; gap:4px 22px; list-style:none; margin:0; padding:0}
.topbar__info li{display:flex; align-items:center; gap:7px}
.topbar__info svg{color:#e8dcc7; flex:none}
.topbar__star{color:#f2b705; font-size:14px; line-height:1}
.topbar__muted{color:#8796a5}
.topbar a.topbar__mail{color:#fff; font-weight:600; text-decoration:none}
.topbar a.topbar__mail:hover{text-decoration:underline}

/* Header */
.site-header{background:#fff; border-bottom:1px solid #e3e0da; position:sticky; top:0; z-index:50; box-shadow:0 6px 18px rgba(13,20,28,.05)}
.site-header .site-header__inner{max-width:1240px; display:flex; align-items:center; gap:24px; padding:12px 24px; min-height:80px; flex-wrap:nowrap}
.site-header .custom-logo-link{flex:none; display:flex; align-items:center}
.site-header .custom-logo{max-height:46px; width:auto; display:block}
.header-actions{order:0; flex:none; display:flex; align-items:center; gap:16px}
.header-phone{display:flex; align-items:center; gap:10px; color:#0d141c; text-decoration:none}
.header-phone__icon{width:40px; height:40px; border-radius:50%; background:#f5f3ef; color:#c8161e; display:flex; align-items:center; justify-content:center; flex:none; transition:background .15s}
.header-phone:hover .header-phone__icon{background:#fbe9e9}
.header-phone__text{display:flex; flex-direction:column; line-height:1.2}
.header-phone__text small{font-size:12px; font-weight:600; color:#5d6670}
.header-phone__text strong{font-size:16px; font-weight:800; letter-spacing:-.01em; color:#0d141c}
.site-header .header-book{display:inline-flex; align-items:center; min-height:48px; padding:0 22px; border-radius:6px; background:#c8161e; color:#fff; font-size:15px; font-weight:700; text-decoration:none; white-space:nowrap}
.site-header .header-book:hover{background:#a01218; color:#fff}
.nav-toggle{border:1px solid #c9cdd2; border-radius:6px; min-height:44px; padding:0 12px; color:#0d141c}
.nav-toggle-bars span{background:#0d141c}

/* Desktop navigation */
@media (min-width:961px){
  .site-nav{order:0; flex:1; display:flex; justify-content:center; min-width:0}
  .nav-list{gap:2px; margin:0; padding:0; font-size:15px; font-weight:600}
  .nav-list>li>a{display:inline-flex; align-items:center; min-height:44px; padding:0 12px; color:#0d141c; text-decoration:none; position:relative; white-space:nowrap}
  .nav-list>li>a::before{content:""; position:absolute; left:12px; right:12px; bottom:6px; height:2px; background:#c8161e; transform:scaleX(0); transform-origin:left; transition:transform .2s}
  .nav-list>li>a:hover, .nav-list>li.current-menu-item>a, .nav-list>li.current-menu-ancestor>a, .nav-list>li.current-page-ancestor>a{color:#b3141b}
  .nav-list>li>a:hover::before, .nav-list>li.current-menu-item>a::before, .nav-list>li.current-menu-ancestor>a::before, .nav-list>li.current-page-ancestor>a::before{transform:scaleX(1)}
  .nav-list .menu-item-has-children>a::after{content:""; width:6px; height:6px; margin-left:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg) translateY(-3px); opacity:.55; font-size:0}
  .nav-list .sub-menu{left:0; top:calc(100% + 6px); min-width:260px; padding:8px; border:1px solid #e3e0da; border-radius:10px; box-shadow:0 18px 40px rgba(13,20,28,.16)}
  .nav-list .sub-menu::before{content:""; position:absolute; left:0; right:0; top:-10px; height:10px}
  .nav-list .sub-menu a{padding:10px 12px; border-radius:6px; font-size:14.5px; color:#0d141c; text-decoration:none}
  .nav-list .sub-menu a:hover, .nav-list .sub-menu .current-menu-item>a{background:#f5f3ef; color:#b3141b}
}
@media (min-width:961px) and (max-width:1180px){
  .header-phone__text{display:none}
  .nav-list>li>a{padding:0 9px}
  .nav-list>li>a::before{left:9px; right:9px}
}

/* Tablet and phone navigation */
@media (max-width:960px){
  .site-header .site-header__inner{flex-wrap:wrap; min-height:68px; gap:12px}
  .site-header .custom-logo-link{margin-right:auto}
  .header-actions{order:2; gap:10px}
  .site-nav{order:3; flex-basis:calc(100% + 48px); margin:0 -24px; border-top:1px solid #e3e0da}
  .header-phone__text{display:none}
  .nav-list>li>a{color:#0d141c; font-weight:600}
  .nav-list .sub-menu a{color:#0d141c}
}
@media (max-width:600px){
  .topbar .topbar__inner{justify-content:center; padding:6px 16px}
  .topbar__info{justify-content:center; gap:2px 16px; font-size:12px}
  .topbar__hide-sm{display:none !important}
  .site-header .site-header__inner{padding:10px 16px; min-height:60px}
  .site-header .custom-logo{max-height:36px}
  .site-nav{flex-basis:calc(100% + 32px); margin:0 -16px}
  .header-phone, .site-header .header-book{display:none}
}

/* Footer */
.site-footer{background:#0d141c; color:#aab6c2; font-size:15px; line-height:1.6; padding:0; margin-top:72px}
.site-footer ul{margin:0; padding:0}
.site-footer li{list-style:none; margin:0}
.site-footer a{color:#fff; text-decoration:none}
.site-footer a:hover{color:#fff; text-decoration:underline; text-underline-offset:3px}
.site-footer .footer-top{max-width:1240px; display:grid; grid-template-columns:1.35fr 1.2fr 1fr 1.15fr; gap:40px; padding:72px 24px 56px}
.footer-wordmark{margin:0 0 12px; font-size:26px; font-weight:800; letter-spacing:-.02em; line-height:1.1; color:#fff}
.footer-wordmark span{color:#ef5350}
.footer-tagline{margin:0 0 20px; max-width:320px}
.footer-rating{display:flex; align-items:center; gap:10px; margin:0 0 18px; color:#fff; font-weight:600}
.footer-stars{color:#f2b705; letter-spacing:2px}
.footer-badges{display:flex; flex-direction:column; gap:8px}
.footer-badges li{display:flex; align-items:center; gap:10px; font-size:14px}
.footer-badges svg{color:#e8dcc7; flex:none}
.site-footer .footer-heading{margin:0 0 18px; color:#fff; font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase}
.footer-contact li{display:flex; align-items:flex-start; gap:12px; margin-bottom:14px; overflow-wrap:anywhere}
.footer-contact svg{color:#e8dcc7; flex:none; margin-top:3px}
.footer-contact a[href^="mailto"]{font-size:14px}
.site-footer a.footer-more{display:inline-flex; align-items:center; gap:6px; min-height:44px; font-weight:700; color:#fff}
.footer-list li{margin-bottom:10px}
.site-footer .footer-list a{color:#aab6c2}
.site-footer .footer-list a:hover{color:#fff}
.footer-hours{margin:0}
.footer-hours div{display:flex; justify-content:space-between; gap:16px; padding:9px 0; border-bottom:1px solid #1d2a37}
.footer-hours div:first-child{padding-top:0}
.footer-hours dt{color:#fff; font-weight:600}
.footer-hours dd{margin:0; text-align:right}
.footer-app{margin-top:22px; padding:16px 18px; border:1px solid #22303f; border-radius:10px; background:#13202e; display:flex; flex-direction:column; gap:4px; font-size:14px}
.footer-app strong{color:#fff}
.footer-app b{color:#fff; letter-spacing:.04em}
.footer-bottom{border-top:1px solid #1d2a37}
.site-footer .footer-bottom__inner{max-width:1240px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px 24px; padding:20px 24px; font-size:13px; color:#8796a5}
.footer-bottom__inner p{margin:0}
.footer-legal-nav{display:flex; gap:20px}
.site-footer .footer-legal-nav a{color:#aab6c2; display:inline-flex; align-items:center; min-height:32px}
.site-footer :focus-visible, .site-header :focus-visible, .topbar :focus-visible{outline:3px solid #f2b705; outline-offset:2px; border-radius:4px}
@media (max-width:960px){
  .site-footer .footer-top{grid-template-columns:1fr 1fr; gap:40px}
}
@media (max-width:600px){
  .site-footer{margin-top:56px}
  .site-footer .footer-top{grid-template-columns:1fr; gap:36px; padding:56px 16px 40px}
  .site-footer .footer-bottom__inner{padding:20px 16px; flex-direction:column; align-items:flex-start}
}

/* Phone action bar */
@media (max-width:600px){
  .mobile-bar{background:#fff; border-top:1px solid #e3e0da}
  .mobile-bar a{border-radius:6px}
  .mobile-bar-call{border-color:#0d141c; color:#0d141c}
  .mobile-bar-book{background:#c8161e}
}

/* Keep the sticky header below the WordPress admin bar for logged-in editors */
@media (min-width:783px){ .admin-bar .site-header{top:32px} }
@media (min-width:601px) and (max-width:782px){ .admin-bar .site-header{top:46px} }