/*
 * bw-header-footer.css  -  Black & White header + footer
 * Used by the new header.php / footer.php (classes are all prefixed "bw-").
 * Load AFTER style.css, responsive.css and bw-override.css.
 * Breakpoints: laptop-small <=1279px (drawer menu), tablet <=1000px, mobile <=640px
 */

:root {
  --bw-gold: #dab145;
  --bw-gold-grad: linear-gradient(260deg,rgba(218,177,69,1) 16%,rgba(243,228,126,1) 55%,rgba(218,177,69,1) 85%);
  --bw-font: "Figtree", "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* =========================================================
   HEADER
   ========================================================= */
.bw-header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 999;
  background: #000; border-bottom: 1px solid #2a2a2a;
  font-family: var(--bw-font); box-sizing: border-box;
}
.bw-header *, .bw-header *::before, .bw-header *::after { box-sizing: border-box; }
.bw-header.is-fixed { position: fixed; box-shadow: 0 4px 18px rgba(0,0,0,.4); }
body.admin-bar .bw-header.is-fixed { top: 32px; }
@media (max-width: 782px) { body.admin-bar .bw-header.is-fixed { top: 46px; } }

.bw-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; max-width: 1500px; margin: 0 auto; padding: 10px 28px;
}
.bw-logo { display: block; flex: 0 0 auto; line-height: 0; }
.bw-logo img { display: block; height: 64px; width: auto; margin: 0; padding: 0; }

.bw-drawer { display: contents; }
.bw-nav { flex: 1; display: flex; justify-content: center; min-width: 0; }
.bw-menu, .bw-menu ul { list-style: none; margin: 0; padding: 0; }
.bw-menu { display: flex; align-items: center; gap: 4px; }
.bw-menu > li { position: relative; margin: 0; padding: 0; float: none; }
.bw-menu a { text-decoration: none; }
.bw-menu > li > a {
  display: block; padding: 11px 12px; color: #fff;
  font: 500 12px/1 var(--bw-font); text-transform: uppercase;
  letter-spacing: .05em; white-space: nowrap; border-radius: 0;
  transition: color .2s, background-color .2s;
}
/* hover + current = gold gradient, black text */
.bw-menu > li > a:hover,
.bw-menu > li:hover > a,
.bw-menu > li.current-menu-item > a,
.bw-menu > li.current_page_item > a,
.bw-menu > li.current-menu-ancestor > a {
  color: #000; background: rgb(218,177,69); background: linear-gradient(260deg,rgba(218,177,69,1) 16%,rgba(243,228,126,1) 55%,rgba(218,177,69,1) 85%);
}

/* dropdown */
.bw-menu .sub-menu {
  position: absolute; left: 0; top: 100%; min-width: 260px; margin: 0; padding: 8px 0;
  background: #000; border-top: 2px solid var(--bw-gold); z-index: 5;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .2s, transform .2s, visibility .2s;
}
.bw-menu .sub-menu li { margin: 0; padding: 0; border-bottom: 1px solid rgba(255,255,255,.14); float: none; }
.bw-menu .sub-menu li:last-child { border-bottom: 0; }
.bw-menu .sub-menu a { display: block; padding: 11px 20px; color: #fff; font: 400 14px/1.3 var(--bw-font); text-transform: none; }
.bw-menu .sub-menu a:hover,
.bw-menu .sub-menu li.current-menu-item > a { color: #000; background: linear-gradient(260deg,rgba(218,177,69,1) 16%,rgba(243,228,126,1) 55%,rgba(218,177,69,1) 85%); }

.bw-toggle, .bw-sub-toggle { display: none; }

/* right side: Book appointment + phone (comes from the "Top Right" widget) */
.bw-cta { flex: 0 0 auto; text-align: right; }
.bw-cta p { margin: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font-family: var(--bw-font); }
.bw-cta p a { color: #fff; text-decoration: none; transition: color .2s; }
.bw-cta p a:hover { color: var(--bw-gold); }
.bw-cta p a.cust-link-itm-top {
  font: 400 13px/1 var(--bw-font); padding-right: 22px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='18' height='16' rx='2' fill='none' stroke='white' stroke-width='1.6'/%3E%3Cpath d='M8 3v4M16 3v4M3 10h18' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right center; background-size: 14px;
}
.bw-cta p a[href^="tel"] { font: 700 21px/1 var(--bw-font); letter-spacing: .02em; }

@media (min-width: 1280px) {
  .bw-menu li:hover > .sub-menu,
  .bw-menu li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
}

/* ---------- LAPTOP / SMALL DESKTOP  (<= 1279px): drawer menu ---------- */
@media (max-width: 1279px) {
  .bw-toggle {
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
    background: transparent; color: #fff; border: 1px solid #fff; border-radius: 0;
    padding: 10px 16px; font: 500 14px/1 var(--bw-font); text-transform: uppercase; letter-spacing: .05em;
  }
  .bw-toggle__icon { font-size: 22px; line-height: 1; }
  .bw-toggle:hover { color: #000; background: linear-gradient(260deg,rgba(218,177,69,1) 16%,rgba(243,228,126,1) 55%,rgba(218,177,69,1) 85%); border-color: var(--bw-gold); }

  .bw-drawer {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; background: #000; border-top: 1px solid #222;
    padding: 0 24px 20px; max-height: calc(100vh - 90px); overflow-y: auto;
  }
  .bw-header.is-open .bw-drawer { display: flex; }
  .bw-nav { display: block; flex: none; }
  .bw-menu { flex-direction: column; align-items: stretch; gap: 0; }
  .bw-menu > li { display: flex; flex-wrap: wrap; align-items: center; border-bottom: 1px solid #1e1e1e; }
  .bw-menu > li > a { flex: 1; padding: 16px 10px; font-size: 13px; }
  .bw-sub-toggle {
    display: block; width: 48px; height: 48px; background: transparent; border: 0;
    color: #fff; font-size: 24px; line-height: 1; cursor: pointer;
  }
  .bw-sub-toggle:hover { color: var(--bw-gold); }
  .bw-menu .sub-menu {
    position: static; flex-basis: 100%; min-width: 0; opacity: 1; visibility: visible; transform: none;
    display: none; border-top: 0; padding: 0 0 10px 14px;
  }
  .bw-menu li.is-open > .sub-menu { display: block; }
  .bw-cta { padding-top: 18px; text-align: left; }
  .bw-cta p { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; }
}

/* ---------- MOBILE (<= 640px) ---------- */
@media (max-width: 640px) {
  .bw-header__inner { padding: 8px 16px; }
  .bw-logo img { height: 52px; }
  .bw-drawer { padding: 0 16px 18px; }
  .bw-cta p a[href^="tel"] { font-size: 19px; }
}

/* =========================================================
   FOOTER
   ========================================================= */
.bw-footer {
  clear: both; float: left; width: 100%;
  background: #000; color: #fff; font-family: var(--bw-font); box-sizing: border-box;
}
.bw-footer *, .bw-footer *::before, .bw-footer *::after { box-sizing: border-box; }
.bw-footer a { text-decoration: none; transition: color .2s; }
.bw-wrap { max-width: 1240px; width: 100%; margin: 0 auto; padding: 0 24px; }

.bw-footer__menu { border-bottom: 1px solid #2a2a2a; }
.bw-footer-menu { list-style: none; margin: 0; padding: 24px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 32px; }
.bw-footer-menu li { margin: 0; padding: 0; border: 0; float: none; display: block; }
.bw-footer-menu a { color: #fff; font: 500 13px/1 var(--bw-font); text-transform: uppercase; letter-spacing: .06em; margin: 0; padding: 0; }
.bw-footer-menu a:hover { color: var(--bw-gold); }

.bw-footer__cols { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 60px 0; }
.bw-footer__widgets { display: contents; }
.bw-footer__brand { grid-column: 2; grid-row: 1; text-align: center; padding: 0 56px; border-left: 1px solid #2a2a2a; border-right: 1px solid #2a2a2a; }
.bw-footer__logo { display: inline-block; margin-bottom: 20px; line-height: 0; }
.bw-footer__logo img { height: 96px; width: auto; display: inline-block; }
.bw-footer__cols .ftr-loca { grid-column: 1; grid-row: 1; width: auto; order: 0; padding: 0 56px 0 0; margin: 0; border: 0; text-align: center; }
.bw-footer__cols .ftr-call { grid-column: 3; grid-row: 1; width: auto; order: 0; padding: 0 0 0 56px; margin: 0; border: 0; text-align: center; }

.bw-footer .footer-itm h3 {
  display: inline-block; margin: 0 0 20px; padding: 0 0 10px;
  font: 700 1.3rem/1.1 var(--bw-font); letter-spacing: .04em; text-transform: uppercase; color: #fff;
  border-bottom: 3px solid var(--bw-gold);
}
.bw-footer .footer-itm h3::before { display: none; }
.bw-footer .footer-itm h3 a { color: #fff; }
.bw-footer .footer-itm h3 a:hover { color: var(--bw-gold); }
.bw-footer .footer-itm h4 { margin: 0; font: 700 1.7rem/1.1 var(--bw-font); letter-spacing: .02em; }
.bw-footer .footer-itm h4 a { display: inline; padding: 0; color: #fff; font: inherit; letter-spacing: inherit; }
.bw-footer .footer-itm h4 a::before { display: none; }
.bw-footer .footer-itm h4 a:hover { color: var(--bw-gold); }
.bw-footer .footer-itm p { margin: 0 0 10px; padding: 0; font: 400 1.05rem/1.55 var(--bw-font); text-transform: none; color: #e8e8e8; }
.bw-footer .footer-itm p a { color: #e8e8e8; }
.bw-footer .footer-itm p a:hover { color: var(--bw-gold); }
.bw-footer .address { padding: 0; margin: 0 0 12px; }
.bw-footer .address::before, .bw-footer .address::after { display: none; }

/* social icons: black circle, white icon, gold gradient on hover */
.bw-footer .footer-social-icn { display: flex; justify-content: center; gap: 12px; }
.bw-footer .footer-social-icn br { display: none; }
.bw-footer .footer-social-icn a {
  display: inline-block; width: 42px; height: 42px; border: 1px solid #fff; border-radius: 50%;
  font-size: 0; line-height: 0; text-indent: -9999px; overflow: hidden;
  background-color: #000; background-repeat: no-repeat; background-position: center; background-size: 48%;
  transition: background-color .25s, border-color .25s;
}
.bw-footer .footer-social-icn a:hover { background-color: var(--bw-gold); border-color: var(--bw-gold); }
.bw-footer .footer-social-icn a.fb{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M13.5 22v-8.2h2.8l.5-3.3h-3.3V8.4c0-.9.3-1.6 1.7-1.6h1.7V3.9c-.3 0-1.3-.1-2.4-.1-2.5 0-4.1 1.5-4.1 4.2v2.5H7.6v3.3h2.8V22z'/%3E%3C/svg%3E");}
.bw-footer .footer-social-icn a.fb:hover{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M13.5 22v-8.2h2.8l.5-3.3h-3.3V8.4c0-.9.3-1.6 1.7-1.6h1.7V3.9c-.3 0-1.3-.1-2.4-.1-2.5 0-4.1 1.5-4.1 4.2v2.5H7.6v3.3h2.8V22z'/%3E%3C/svg%3E");}
.bw-footer .footer-social-icn a.tw{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M17.8 3h3.1l-6.8 7.8L22 21h-6.3l-4.9-6.4L5.1 21H2l7.3-8.3L2 3h6.4l4.4 5.9zm-1.1 16.2h1.7L7.4 4.7H5.6z'/%3E%3C/svg%3E");}
.bw-footer .footer-social-icn a.tw:hover{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M17.8 3h3.1l-6.8 7.8L22 21h-6.3l-4.9-6.4L5.1 21H2l7.3-8.3L2 3h6.4l4.4 5.9zm-1.1 16.2h1.7L7.4 4.7H5.6z'/%3E%3C/svg%3E");}
.bw-footer .footer-social-icn a.in{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M6.9 8.7H3.6V20h3.3zM5.3 3.5a1.9 1.9 0 100 3.8 1.9 1.9 0 000-3.8zM20.4 13.4c0-3-1.6-4.9-4.2-4.9-1.3 0-2.3.6-2.9 1.5V8.7h-3.2V20h3.3v-6.3c0-1.5.6-2.5 1.9-2.5 1.2 0 1.8.9 1.8 2.5V20h3.3z'/%3E%3C/svg%3E");}
.bw-footer .footer-social-icn a.in:hover{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6.9 8.7H3.6V20h3.3zM5.3 3.5a1.9 1.9 0 100 3.8 1.9 1.9 0 000-3.8zM20.4 13.4c0-3-1.6-4.9-4.2-4.9-1.3 0-2.3.6-2.9 1.5V8.7h-3.2V20h3.3v-6.3c0-1.5.6-2.5 1.9-2.5 1.2 0 1.8.9 1.8 2.5V20h3.3z'/%3E%3C/svg%3E");}
.bw-footer .footer-social-icn a.ig{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3.5' y='3.5' width='17' height='17' rx='5' fill='none' stroke='white' stroke-width='2'/%3E%3Ccircle cx='12' cy='12' r='4' fill='none' stroke='white' stroke-width='2'/%3E%3Ccircle cx='17.3' cy='6.7' r='1.2' fill='white'/%3E%3C/svg%3E");}
.bw-footer .footer-social-icn a.ig:hover{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3.5' y='3.5' width='17' height='17' rx='5' fill='none' stroke='black' stroke-width='2'/%3E%3Ccircle cx='12' cy='12' r='4' fill='none' stroke='black' stroke-width='2'/%3E%3Ccircle cx='17.3' cy='6.7' r='1.2' fill='black'/%3E%3C/svg%3E");}

/* copyright bar */
.bw-copyright { border-top: 1px solid #2a2a2a; padding: 22px 0; font-size: .9rem; color: #cfcfcf; }
.bw-copyright__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; }
.bw-copyright p { margin: 0; font: 400 .9rem/1.5 var(--bw-font); color: #cfcfcf; }
.bw-copyright__links { font: 400 .9rem/1.5 var(--bw-font); color: #cfcfcf; }
.bw-copyright a { color: #fff; padding: 0 4px; font: inherit; text-transform: none; }
.bw-copyright a:hover { color: var(--bw-gold); }

/* back to top button */
#back-top a { background-color: #000 !important; background-image: none; border: 1px solid #fff; color: #fff; }
#back-top a:hover { background: linear-gradient(260deg,rgba(218,177,69,1) 16%,rgba(243,228,126,1) 55%,rgba(218,177,69,1) 85%) !important; border-color: var(--bw-gold); color: #000; }

/* ---------- TABLET (<= 1000px) ---------- */
@media (max-width: 1000px) {
  .bw-footer__cols { grid-template-columns: 1fr; gap: 36px; padding: 44px 0; }
  .bw-footer__brand { grid-column: 1; grid-row: 1; border: 0; padding: 0; }
  .bw-footer__cols .ftr-loca { grid-column: 1; grid-row: 2; padding: 0; }
  .bw-footer__cols .ftr-call { grid-column: 1; grid-row: 3; padding: 0; }
}

/* ---------- MOBILE (<= 640px) ---------- */
@media (max-width: 640px) {
  .bw-footer-menu { gap: 12px 20px; padding: 20px 16px; }
  .bw-wrap { padding: 0 16px; }
  .bw-footer .footer-itm h4 { font-size: 1.45rem; }
  .bw-copyright__inner { justify-content: center; text-align: center; }
}
