/* components.css: buttons, nav, cards, utilities, leadership, organograms */

/* Sticky footer layout */
html, body{
  height: 100%;
}

body{
  margin: 0;
}

.site{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.site-main{
  flex: 1 0 auto;
}

/* Footer container always sits at the bottom */
#siteFooter{
  margin-top: auto;
  width: 100%;
}

/* Buttons */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, border-color 160ms ease;
  user-select: none;
  white-space: nowrap;
}
.btn:active{ transform: translateY(1px); }

.btn--primary{
  background: var(--brand);
  border-color: rgba(0,0,0,0.06);
  color: #fff;
  box-shadow: 0 10px 20px rgba(242,140,40,0.25);
}
.btn--primary:hover{ background: var(--brand-2); }

.btn--ghost{
  background: rgba(255,255,255,0.55);
  border-color: rgba(17,24,39,0.18);
  color: var(--nav);
}
.btn--ghost:hover{ background: rgba(255,255,255,0.80); }

.btn--dark{
  background: rgba(17,24,39,0.92);
  color: #fff;
  border-color: rgba(255,255,255,0.10);
}
.btn--dark:hover{ background: rgba(17,24,39,1); }

.btn--mt-10{ margin-top: 10px; }

/* Nav */
.nav{
  display: flex;
  align-items: center;
  gap: 18px;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.01em;
  color: var(--nav);
}

/* Top-level nav links */
.nav > a,
.nav__toggle{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 12px;
  color: rgba(17,24,39,0.8);
}
.nav > a:hover,
.nav__toggle:hover{
  background: rgba(17,24,39,0.05);
  color: rgba(17,24,39,1);
}

/* Dropdown wrapper item */
.nav__item{
  position: relative;
  display: inline-flex;
  align-items: center;
  padding-bottom: 14px;
  z-index: 60;
}

/* Caret icon */
.nav__caret{
  width: 10px;
  height: 10px;
  display: inline-block;
  border-right: 2px solid rgba(17,24,39,0.55);
  border-bottom: 2px solid rgba(17,24,39,0.55);
  transform: rotate(45deg);
  margin-top: -2px;
}

/* Dropdown menu */
.dropdown{
  position: absolute;
  top: calc(100% - 6px);
  left: 0;
  min-width: 240px;
  background: #fff;
  border: 1px solid rgba(229,231,235,0.9);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 10px;
  display: none;
  z-index: 9999;
}
.nav__item:hover .dropdown,
.nav__item:focus-within .dropdown{
  display: block;
}

/* Dropdown links */
.dropdown a{
  display: flex;
  align-items: center;
  width: 100%;
  padding: 12px 12px;
  border-radius: 12px;
  font-weight: 800;
  color: rgba(17,24,39,0.88);
  background: transparent;
}
.dropdown a:hover{
  background: rgba(17,24,39,0.06);
  color: rgba(17,24,39,1);
}

/* JS-controlled open state */
.nav__toggle[aria-expanded="true"] + .dropdown{
  display: block;
}

/* Mobile menu */
.mobile-toggle{
  display: none;
  border: 1px solid rgba(17,24,39,0.18);
  background: rgba(255,255,255,0.65);
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 900;
}
/* assets/css/components.css */

/* Let 'hidden' control visibility */
.mobile-menu { display: block; }
.mobile-menu[hidden] { display: none !important; }

/* Only render the mobile menu layout on small screens */
@media (min-width: 961px){
  .mobile-menu { display: none !important; }
}

.mobile-menu a{
  display: block;
  padding: 12px 0;
  font-weight: 800;
  color: rgba(17,24,39,0.8);
}
.mobile-menu a:hover{ color: rgba(17,24,39,1); }

@media (max-width: 960px){
  .nav{ display: none; }
  .mobile-toggle{ display: inline-flex; }
  .nav-wrap{ gap: 10px; }
}

/* Cards */
.card{
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(229,231,235,0.9);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 18px;
}

.card__icon{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: rgba(242,140,40,0.12);
  border: 1px solid rgba(242,140,40,0.25);
  display: grid;
  place-items: center;
  font-weight: 900;
  color: rgba(217,119,6,1);
  margin-bottom: 10px;
}

.card__title{
  font-weight: 900;
  margin-bottom: 8px;
}

.card__text{
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

/* Feature row */
.feature{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px;
  border-radius: 16px;
}
.feature__icon{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: rgba(17,24,39,0.05);
  border: 1px solid rgba(17,24,39,0.08);
  display: grid;
  place-items: center;
  font-weight: 900;
}
.feature__title{
  font-weight: 900;
  color: rgba(17,24,39,0.85);
  font-size: 14px;
}

/* Helpers */
.muted{ color: var(--muted); }
.stack-16 > * + *{ margin-top: 16px; }
.stack-10 > * + *{ margin-top: 10px; }

/* About page info list */
.info-grid{
  margin-top: 18px;
  display: grid;
  gap: 14px;
}
.info-item{
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 12px;
  align-items: start;
  padding: 12px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,0.75);
  border: 1px solid rgba(229,231,235,0.9);
}
.info-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--brand);
  margin-top: 6px;
}
.info-title{
  font-weight: 900;
  color: rgba(17,24,39,0.88);
  margin-bottom: 2px;
}
.info-text{
  color: var(--muted);
  font-size: 14px;
}

/* Quick facts bar */
.facts{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(229,231,235,0.9);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 14px;
}
.fact{
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(17,24,39,0.03);
  border: 1px solid rgba(17,24,39,0.06);
}
.fact__label{
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(17,24,39,0.55);
  margin-bottom: 6px;
}
.fact__value{
  font-weight: 900;
  color: rgba(17,24,39,0.88);
}
@media (max-width: 960px){
  .facts{ grid-template-columns: 1fr 1fr; }
}

/* Gallery */
.gallery{
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.gallery__item{
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(229,231,235,0.9);
  box-shadow: var(--shadow-soft);
  background: #fff;
}
.gallery__item img{
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}
@media (max-width: 960px){
  .gallery{ grid-template-columns: 1fr 1fr; }
  .gallery__item img{ height: 180px; }
}

/* Footer helpers */
.footer__title{ color:#fff; margin: 0 0 10px; }
.footer__text{ color: rgba(255,255,255,0.75); }
.footer__list{ list-style:none; padding:0; margin:0; }
.footer__address{ color: rgba(255,255,255,0.75); font-style: normal; }
.footer__bottom-inner{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

/* Leadership cards */
.leaders{ grid-template-columns: repeat(3, 1fr); }

.leader-card{
  padding: 0;
  overflow: hidden;
}
/* Leadership card image: keep it inside the box */
.leader-card__media{
  height: 220px;            /* tweak: 180–260 */
  background: rgba(17,24,39,0.04);
  border-bottom: 1px solid rgba(229,231,235,0.9);
  overflow: hidden;
}

.leader-card__media img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;       /* use 'cover' if you prefer cropping */
  object-position: center;
}

.leader-card__body{ padding: 18px; }
.leader-card__name{
  margin: 0 0 6px;
  font-weight: 900;
}
.leader-card__role{
  margin: 0 0 10px;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(17,24,39,0.55);
}
.leader-card__meta{
  margin-top: 12px;
  font-size: 13px;
  color: rgba(17,24,39,0.6);
}
.leader-card__link{
  color: rgba(17,24,39,0.75);
  font-weight: 800;
}
.leader-card__link:hover{ color: rgba(17,24,39,1); }
.leader-card__sep{ margin: 0 8px; opacity: 0.5; }

@media (max-width: 960px){
  .leaders{ grid-template-columns: 1fr; }
  .leader-card__media{ aspect-ratio: 16 / 9; }
}

/* Org chart bubble (image inside) */
.orgchart{
  margin-top: 18px;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(229,231,235,0.9);
  border-radius: 18px;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.orgchart__canvas{
  position: relative;
  padding: 22px;
}

.orgchart__title{
  font-weight: 1000;
  font-size: 34px;
  text-decoration: underline;
  margin: 0 0 14px;
}

.orgchart__figure{
  margin: 0;
  background: #fff;
  border: 1px solid rgba(229,231,235,0.9);
  border-radius: 16px;
  overflow: hidden;
}

.orgchart__img{
  width: 100%;
  height: auto;
  display: block;
}

/* If the image is wide, allow horizontal scroll on small screens */
@media (max-width: 960px){
  .orgchart__figure{ overflow-x: auto; }
  .orgchart__img{ min-width: 900px; }
}

/* Contact form */
.contact-card{ padding: 18px; }

.form{ margin-top: 14px; display: grid; gap: 12px; }
.form__row{ display: grid; gap: 8px; }
.form__row--two{ grid-template-columns: 1fr 1fr; gap: 12px; }

.form__label{
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(17,24,39,0.65);
}

.form__input{
  width: 100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(229,231,235,0.95);
  background: rgba(255,255,255,0.95);
  color: rgba(17,24,39,0.9);
  font-weight: 700;
}

.form__input:focus{
  outline: none;
  border-color: rgba(47,137,179,0.55);
  box-shadow: 0 0 0 4px rgba(47,137,179,0.12);
}

.form__textarea{ resize: vertical; }

@media (max-width: 960px){
  .form__row--two{ grid-template-columns: 1fr; }
}

/* Map embed */
.map{
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(229,231,235,0.9);
  box-shadow: var(--shadow-soft);
  background: #fff;
}

.map__frame{
  width: 100%;
  height: 420px;
  border: 0;
  display: block;
}

@media (max-width: 960px){
  .map__frame{ height: 360px; }
}

.form-status{
  margin: 12px 0 0;
  padding: 12px 14px;
  border-radius: 14px;
  font-weight: 800;
  border: 1px solid rgba(229,231,235,0.9);
  background: rgba(17,24,39,0.03);
  color: rgba(17,24,39,0.85);
}

.form-status--ok{
  border-color: rgba(34,197,94,0.35);
  background: rgba(34,197,94,0.10);
}

.form-status--bad{
  border-color: rgba(239,68,68,0.35);
  background: rgba(239,68,68,0.10);
}

/* Legal content formatting */
.legal{
  line-height: 1.7;
}

.legal h2{
  margin-top: 18px;
  margin-bottom: 8px;
}

.legal ul{
  margin: 10px 0 14px 18px;
}

.legal li{
  margin: 6px 0;
}

/* Legal content formatting */
.legal{ line-height: 1.7; }
.legal h2{ margin-top: 18px; margin-bottom: 8px; }
.legal ul{ margin: 10px 0 14px 18px; }
.legal li{ margin: 6px 0; }

/* Desktop nav layout */
.nav{
  display: flex;
  align-items: center;
  gap: 18px;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.01em;
  color: var(--nav);
}

/* Mobile menu: use [hidden] attribute */
.mobile-menu{ display: block; }
.mobile-menu[hidden]{ display: none !important; }

@media (min-width: 961px){
  .mobile-menu{ display: none !important; }
}

/* IMPORTANT FIX:
   Do NOT hide .nav globally on mobile.
   Only hide the DESKTOP injected nav. */
@media (max-width: 960px){
  #desktopNav .nav{ display: none; }
  .mobile-toggle{ display: inline-flex; }
  .nav-wrap{ gap: 10px; }
}

/* Desktop dropdown behavior */
.dropdown{
  position: absolute;
  top: calc(100% - 6px);
  left: 0;
  min-width: 240px;
  background: #fff;
  border: 1px solid rgba(229,231,235,0.9);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 10px;
  display: none;
  z-index: 9999;
}
.nav__item:hover .dropdown,
.nav__item:focus-within .dropdown{
  display: block;
}
.nav__toggle[aria-expanded="true"] + .dropdown{
  display: block;
}

/* Mobile accordion dropdowns */
@media (max-width: 960px){
  .mobile-menu .nav{
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .mobile-menu .nav__item{
    position: static;
    padding-bottom: 0;
  }

  .mobile-menu .dropdown{
    position: static;
    display: none;
    min-width: 0;
    border: 0;
    box-shadow: none;
    padding: 6px 0 0;
  }

  .mobile-menu .nav__toggle[aria-expanded="true"] + .dropdown{
    display: block;
  }

  .mobile-menu .nav__item:hover .dropdown,
  .mobile-menu .nav__item:focus-within .dropdown{
    display: none;
  }
}

/* Caret rotation based on aria-expanded */
.nav__caret{
  display: inline-block;
  transition: transform 180ms ease;
  transform-origin: center;
}

/* Rotate when open */
.nav__toggle[aria-expanded="true"] .nav__caret{
  transform: rotate(180deg);
}

/* Optional: slightly tighten spacing on mobile */
@media (max-width: 960px){
  .nav__toggle{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
}

/* === MOBILE MENU: make toggles easy to tap + keep dropdowns open === */
@media (max-width: 960px){
  .mobile-menu .nav__item,
  .mobile-menu .nav__item > a,
  .mobile-menu .nav__toggle{
    width: 100%;
  }

  /* Big, easy tap area */
  .mobile-menu .nav__toggle{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-radius: 14px;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  /* Dropdown as stacked accordion */
  .mobile-menu .dropdown{
    position: static;
    border: 0;
    box-shadow: none;
    padding: 6px 0 0;
    display: none;
  }

  /* IMPORTANT: force open state wins on mobile */
  .mobile-menu .nav__toggle[aria-expanded="true"] + .dropdown{
    display: block !important;
  }

  /* REMOVE/OVERRIDE the old mobile hover suppression (it breaks touch) */
  .mobile-menu .nav__item:hover .dropdown,
  .mobile-menu .nav__item:focus-within .dropdown{
    display: block !important;
  }

  /* Submenu link tap targets */
  .mobile-menu .dropdown a{
    display: block;
    padding: 12px 16px;
    border-radius: 12px;
  }
}

/* Footer social links (mobile centered, desktop right) */
.footer-social{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;

  justify-content: center; /* mobile default */
}

@media (min-width: 961px){
  .footer-social{
    justify-content: flex-end; /* desktop */
  }
}

/* Match “Request a Quote” orange vibe */
.footer-social__link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 10px 14px;
  border-radius: 999px;

  text-decoration: none;
  font-weight: 800;

  /* Theme (uses CSS vars if you have them; falls back to a good orange) */
  background: var(--accent, #f59e0b);
  border: 1px solid var(--accent, #f59e0b);
  color: #111;
}

.footer-social__link:hover,
.footer-social__link:focus-visible{
  filter: brightness(0.95);
}

.footer-social__link svg{
  display: block;
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* 1) Push the social buttons down a bit */
.footer-social{
  margin-top: 18px;          /* <-- increase/decrease to taste */
  justify-content: center;   /* center within its own row */
}

/* 2) Center the social row within the LEFT footer column (desktop) */
.footer_grid > div:first-child{
  display: flex;
  flex-direction: column;
}

.footer_grid > div:first-child .footer-social{
  align-self: center;        /* centers the whole social group in that column */
}

/* Optional: if you want it centered on mobile too (still fine as-is) */
@media (max-width: 960px){
  .footer_grid > div:first-child .footer-social{
    align-self: center;
  }
}

.footer-social{
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}