/*
Theme Name: AIT Life Safety Match
Theme URI: https://www.aitlifesafety.com/
Author: White Duck
Description: Header/footer theme that matches the main AIT Life Safety Squarespace site (aitlifesafety.com). Built to wrap the ServiceTrade plugin site at st.aitlifesafety.com so the two sites look seamless. All primary navigation and footer links point back to the main site.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: aitlifesafety-match
*/

/* ==========================================================================
   Brand tokens (pulled from the live AIT Life Safety palette)
   accent (red)      hsl(358, 69%, 40%)  -> #AC2024
   darkAccent (teal) hsl(197,100%, 23%)  -> #005476   (header + footer bg)
   lightAccent cream hsl( 44, 52%, 92%)  -> #F5EFDF
   heading font: "Archivo Black"
   body font:    "proxima-nova" -> Montserrat fallback (Typekit not licensed here)
   ========================================================================== */
:root {
  --ait-teal:        #005476;
  --ait-teal-dark:   #00405b;
  --ait-red:         #ac2024;
  --ait-red-hover:   #8e181b;
  --ait-cream:       #f5efdf;
  --ait-white:       #ffffff;
  --ait-ink:         #1b1b1b;
  --ait-header-h:    112px;
  --ait-max:         1280px;
  --ait-body-font:   "proxima-nova", "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ait-head-font:   "Archivo Black", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* ---- resets scoped so we don't fight the ServiceTrade plugin markup ---- */
.ait-header *,
.ait-footer * { box-sizing: border-box; }

.ait-header,
.ait-footer {
  font-family: var(--ait-body-font);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

/* Give plugin content some breathing room from a potentially fixed header */
body { margin: 0; }

/* =========================================================================
   HEADER
   ========================================================================= */
.ait-header {
  background: var(--ait-teal);
  color: var(--ait-white);
  width: 100%;
  border-bottom: 3px solid var(--ait-red);
}

.ait-header__inner {
  max-width: var(--ait-max);
  margin: 0 auto;
  min-height: var(--ait-header-h);
  padding: 14px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.ait-header__logo {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}
.ait-header__logo img {
  display: block;
  height: 66px;
  width: auto;
  max-width: 100%;
}

/* ---- primary nav ---- */
.ait-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ait-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}
.ait-nav__item { position: relative; }

.ait-nav__link {
  display: inline-block;
  color: var(--ait-white);
  text-decoration: none;
  font-family: var(--ait-body-font);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: .01em;
  padding: 12px 16px;
  border-radius: 6px;
  transition: color .2s ease, background-color .2s ease;
  white-space: nowrap;
}
.ait-nav__link:hover,
.ait-nav__item.is-active > .ait-nav__link {
  color: var(--ait-cream);
}
.ait-nav__item--folder > .ait-nav__link::after {
  content: "";
  display: inline-block;
  margin-left: 8px;
  border: 5px solid transparent;
  border-top-color: currentColor;
  transform: translateY(2px);
}

/* ---- dropdown (Services) ---- */
.ait-subnav {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  list-style: none;
  margin: 0;
  padding: 10px;
  background: var(--ait-white);
  border-radius: 10px;
  box-shadow: 0 18px 40px rgba(0,0,0,.22);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .3s ease, transform .3s ease, visibility .3s;
  z-index: 100;
}
.ait-nav__item--folder:hover > .ait-subnav,
.ait-nav__item--folder:focus-within > .ait-subnav {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.ait-subnav__link {
  display: block;
  color: var(--ait-ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  padding: 11px 14px;
  border-radius: 6px;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease;
}
.ait-subnav__link:hover {
  background: var(--ait-cream);
  color: var(--ait-red);
}

/* ---- header CTA button (matches "Contact Us" action button) ---- */
.ait-header__cta {
  flex: 0 0 auto;
  display: inline-block;
  background: var(--ait-white);
  color: var(--ait-teal);
  font-family: var(--ait-body-font);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .02em;
  text-decoration: none;
  padding: 13px 26px;
  border-radius: 4px;
  transition: background-color .2s ease, color .2s ease, transform .1s ease;
}
.ait-header__cta:hover {
  background: var(--ait-red);
  color: var(--ait-white);
}
.ait-header__cta:active { transform: translateY(1px); }

/* ---- mobile toggle ---- */
.ait-nav-toggle {
  display: none;
  flex: 0 0 auto;
  background: transparent;
  border: 0;
  padding: 10px;
  cursor: pointer;
  color: var(--ait-white);
}
.ait-nav-toggle span,
.ait-nav-toggle span::before,
.ait-nav-toggle span::after {
  content: "";
  display: block;
  width: 26px;
  height: 3px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .25s ease, opacity .25s ease;
}
.ait-nav-toggle span::before { transform: translateY(-8px); }
.ait-nav-toggle span::after  { transform: translateY(5px); }
.ait-nav-toggle[aria-expanded="true"] span { background: transparent; }
.ait-nav-toggle[aria-expanded="true"] span::before { transform: rotate(45deg); }
.ait-nav-toggle[aria-expanded="true"] span::after  { transform: rotate(-45deg) translateY(-2px) translateX(2px); }

/* =========================================================================
   PAGE CONTENT (the ServiceTrade plugin renders inside this container)
   ========================================================================= */
.ait-content { min-height: 40vh; }
.ait-page {
  max-width: var(--ait-max);
  margin: 0 auto;
  padding: 40px 28px 64px;
  font-family: var(--ait-body-font);
  color: var(--ait-ink);
}
.ait-page__title {
  font-family: var(--ait-head-font);
  font-weight: 400;
  color: var(--ait-teal);
  font-size: clamp(28px, 4vw, 40px);
  margin: 0 0 24px;
}

/* =========================================================================
   FOOTER  (black, center-aligned — matches the main site footer)
   ========================================================================= */
.ait-footer {
  background: #000;
  color: var(--ait-white);
  font-size: 17px;
}
.ait-footer__inner {
  max-width: var(--ait-max);
  margin: 0 auto;
  padding: 60px 28px 48px;
  border-top: 1px solid rgba(255,255,255,.5);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  text-align: center;
}
.ait-footer__col h3 {
  font-family: var(--ait-head-font);
  font-weight: 400;
  font-size: 30px;
  letter-spacing: 0;
  color: var(--ait-white);
  margin: 8px 0 34px;
}
.ait-footer__menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ait-footer__menu li { margin-bottom: 18px; }
.ait-footer a {
  color: var(--ait-white);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .2s ease;
}
.ait-footer a:hover { color: var(--ait-cream); }

.ait-footer__block { margin-bottom: 24px; line-height: 1.7; }
.ait-footer__block strong { color: var(--ait-white); font-weight: 700; }
.ait-footer__block a { text-decoration: none; }
.ait-footer__block a:hover { text-decoration: underline; }

.ait-footer a.ait-footer__phone {
  display: block;
  color: var(--ait-white);
  text-decoration: none;
  margin: 0 0 26px;
}
.ait-footer a.ait-footer__phone:hover { text-decoration: underline; }
.ait-footer__contact-row { margin-bottom: 14px; }

.ait-footer__bar {
  max-width: var(--ait-max);
  margin: 0 auto;
  padding: 0 28px 40px;
}
.ait-footer__licenses {
  text-align: center;
  padding: 34px 0;
  font-size: 16px;
}
.ait-footer__licenses strong { font-weight: 700; }
.ait-footer__copyright {
  text-align: center;
  border-top: 1px solid rgba(255,255,255,.5);
  padding-top: 34px;
  font-size: 15px;
  color: rgba(255,255,255,.85);
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
/* Tablet: 3 columns collapse to 2 */
@media (max-width: 900px) {
  .ait-footer__inner { grid-template-columns: 1fr 1fr; }
}

/* Phones: single stacked column */
@media (max-width: 640px) {
  .ait-footer__inner { grid-template-columns: 1fr; gap: 34px; padding: 44px 20px 36px; }
}

@media (max-width: 860px) {
  :root { --ait-header-h: 84px; }
  .ait-nav-toggle { display: inline-flex; }

  .ait-header__inner { padding: 12px 18px; }
  .ait-header__logo img { height: 46px; }

  /* CTA hides on mobile; Contact Us lives in the dropdown menu instead */
  .ait-header__cta { display: none; }

  .ait-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--ait-teal-dark);
    border-top: 1px solid rgba(255,255,255,.12);
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
    z-index: 90;
  }
  .ait-header.is-open .ait-nav { max-height: 80vh; overflow-y: auto; }

  .ait-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 14px 18px;
  }
  .ait-nav__item { border-bottom: 1px solid rgba(255,255,255,.08); }
  .ait-nav__link { padding: 15px 8px; font-size: 17px; }
  .ait-nav__item--folder > .ait-nav__link::after { float: right; }

  .ait-subnav {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    background: transparent;
    padding: 0 0 8px 12px;
    display: none;
  }
  .ait-nav__item--folder.is-open > .ait-subnav { display: block; }
  .ait-subnav__link { color: var(--ait-cream); }
  .ait-subnav__link:hover { background: rgba(255,255,255,.08); color: var(--ait-white); }
}