/*
  Apex Pro Cabinets — Locked Button System
  =======================================
  Centralized, defensive button module.

  Notes:
  - Buttons must use .ap-btn (and optional variants) only.
  - This file should be loaded AFTER the global stylesheet.
  - Core properties use !important to resist accidental overrides.
*/

:root {
  /* Button-specific tokens (never reuse elsewhere) */
  --apbtn-bg-light: #1d2d44;
  --apbtn-bg-dark: #516f9d;
  --apbtn-border-light: #516f9d;
  --apbtn-border-dark: #1d2d44;

  --apbtn-text-on-dark: #ffffff;
  --apbtn-text-on-light: #ffffff;

  --apbtn-radius: 18px;
  --apbtn-border-width: 1px;
  --apbtn-pad-y: 0.75rem;
  --apbtn-pad-x: 1.2rem;
  --apbtn-font-family: "Cinzel", serif;
  --apbtn-font-size: 0.9rem;
  --apbtn-font-weight: 500;
  --apbtn-letter-spacing: 0.12em;
  --apbtn-text-transform: uppercase;
  --apbtn-line-height: 1;
}

/* Base */
.ap-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;

  padding: var(--apbtn-pad-y) var(--apbtn-pad-x) !important;
  border-radius: var(--apbtn-radius) !important;
  border: var(--apbtn-border-width) solid currentColor !important;

  font-family: var(--apbtn-font-family) !important;
  font-size: var(--apbtn-font-size) !important;
  font-weight: var(--apbtn-font-weight) !important;
  letter-spacing: var(--apbtn-letter-spacing) !important;
  line-height: var(--apbtn-line-height) !important;
  text-transform: var(--apbtn-text-transform) !important;
  text-decoration: none !important;
  white-space: nowrap !important;

  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: geometricPrecision !important;

  cursor: pointer !important;
  user-select: none !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;

  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, transform 120ms ease !important;
}

/* Theme-based color swapping (supports either body or html data-theme) */
[data-theme="light"] .ap-btn {
  background-color: var(--apbtn-bg-light) !important;
  color: var(--apbtn-text-on-dark) !important;
  border-color: var(--apbtn-border-light) !important;
}

[data-theme="dark"] .ap-btn {
  background-color: var(--apbtn-bg-dark) !important;
  color: var(--apbtn-text-on-light) !important;
  border-color: var(--apbtn-border-dark) !important;
}

/* Hover / focus */
.ap-btn:hover {
  transform: translateY(-1px) !important;
}

.ap-btn:active {
  transform: translateY(0) !important;
}

.ap-btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18) !important;
}

/* Variants */
.ap-btn--pill {
  border-radius: 18px !important;
}

.ap-btn--icon {
  --apbtn-radius: 14px;

  width: 3.05rem !important;
  height: 3.05rem !important;
  padding: 0 !important;
  /* Hamburger glyph sizing (S1-09) */
  font-size: 1.55rem !important;
  line-height: 1 !important;  letter-spacing: 0 !important;
  font-weight: 600 !important;
}

/* Vertical two-line label (e.g., LIGHT\nMODE) */
.ap-btn--stack {
  flex-direction: column !important;
  line-height: 1.05 !important;
  gap: 0.2rem !important;
}

/* Larger CTA variant (used for S5-15) */
.ap-btn--lg{
  --apbtn-pad-y: 0.85rem;
  --apbtn-pad-x: 1.35rem;
  --apbtn-font-size: 0.95rem;
}


/* Theme toggle (S1-08): match icon button height, keep readable padding */
.ap-btn[data-theme-toggle].ap-btn--stack {
  height: 3.05rem !important;
  /* Narrower footprint while keeping two-line label safely inside */
  padding: 0.45rem 0.70rem !important;
  min-width: 4.6rem !important;
}

/* Button groups: equalize widths via JS (see main.js) */
.ap-btn-group {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  justify-content: center;
}

/* Equal-width button groups (only when explicitly enabled via data-equalize-buttons="true")
   Uses inline-grid so the group shrink-wraps to content, while each column (1fr) equalizes to the widest button. */
.ap-btn-group[data-equalize-buttons="true"]{
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0.9rem;
  justify-content: center;
  align-items: center;
}

.ap-btn-group[data-equalize-buttons="true"] .ap-btn{
  width: 100%;
}

/* On very small screens, stack instead of squeezing */
@media (max-width: 520px){
  .ap-btn-group[data-equalize-buttons="true"]{
    grid-auto-flow: row;
    width: 100%;
  }
}

.ap-btn-group .ap-btn {
  flex: 0 0 auto;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ap-btn {
    transition: none !important;
  }
  .ap-btn:hover,
  .ap-btn:active {
    transform: none !important;
  }
}

/* Header hamburger visibility (S1-09)
   .ap-btn sets display:inline-flex !important, so visibility must be controlled here. */
.mobile-toggle.ap-btn { display: none !important; }

@media (max-width: 760px){
  .mobile-toggle.ap-btn { display: inline-flex !important; }
}

@media (min-width: 761px){
  .mobile-toggle.ap-btn { display: none !important; }
}

/* Header theme toggle when rendered as icon button (square) */
.theme-toggle.ap-btn--icon.ap-btn--stack{
  flex-direction: column !important;
  gap: 0.05rem !important;
  padding: 0 !important;
}
.theme-toggle.ap-btn--icon.ap-btn--stack .theme-pill__label,
.theme-toggle.ap-btn--icon.ap-btn--stack .theme-pill__sub{
  font-size: 9px !important;
  line-height: 1 !important;
  letter-spacing: 0.14em !important;
}

/* === v1.10 Locked Overrides (Header toggle + Footer social) === */
/* Header: force theme toggle to match hamburger geometry exactly */
.header-actions .theme-toggle.theme-pill.ap-btn.ap-btn--icon{
  width: 3.05rem !important;
  height: 3.05rem !important;
  min-width: 3.05rem !important;
  padding: 0 !important;
  border-radius: var(--apbtn-radius) !important;
}

/* Header: make two-line label fit inside the 44x44 icon button */
.header-actions .theme-toggle.theme-pill .theme-pill__label,
.header-actions .theme-toggle.theme-pill .theme-pill__sub{
  font-size: 0.56rem !important;   /* ~9px */
  line-height: 1 !important;
  letter-spacing: 0.14em !important;
}

/* Footer: Facebook button must follow the same button system as CTAs */
.footer .social a{
  width: 3.05rem !important;
  height: 3.05rem !important;
  min-width: 3.05rem !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: var(--apbtn-radius) !important;
  border: var(--apbtn-border-width) solid var(--apbtn-border-dark) !important;
  background: var(--apbtn-bg-dark) !important;
  color: var(--apbtn-text-on-dark) !important;
  text-decoration: none !important;
  box-shadow: var(--shadow-soft) !important;
}

/* Footer: theme-aware swap so it matches your light/dark CTA surfaces */
[data-theme="light"] .footer .social a{
  background: var(--apbtn-bg-light) !important;
  border-color: var(--apbtn-border-dark) !important;
  color: var(--apbtn-text-on-light) !important;
}
[data-theme="dark"] .footer .social a{
  background: var(--apbtn-bg-dark) !important;
  border-color: var(--apbtn-border-light) !important;
  color: var(--apbtn-text-on-dark) !important;
}

.footer .social a svg{
  display:block !important;
  width: 20px !important;
  height: 20px !important;
}