/* ============================================================
   AMPLITUDE LABEL SYSTEMS — Custom Styling Integration
   Added to Twenty Twenty-Four Theme
   ============================================================ */

/* ── AMPLITUDE DESIGN TOKENS ─────────────────────────────── */
:root {
  /* Amplitude Color Variables */
  --amplitude-navy: #254c83;
  --amplitude-navy-dark: #1a3d6e;
  --amplitude-navy-light: #dce8fb;
  --amplitude-navy-pale: #e8eef8;
  --amplitude-yellow: #ffd800;
  --amplitude-yellow-dark: #e6c200;
  --amplitude-yellow-light: #fff8c2;
  --amplitude-orange: #ff6c3f;
  --amplitude-orange-dark: #e5512a;
  --amplitude-text: #111318;
  --amplitude-text-secondary: #3E3D3F;
  --amplitude-text-muted: #5a6070;
  --amplitude-border: #c8cdd8;
  --amplitude-border-light: #e0e3eb;
  --amplitude-background: #f4f5f8;

  /* Amplitude Shadows - Signature Standoff Effects */
  --amplitude-shadow-sm: 3px 3px 0 var(--amplitude-navy);
  --amplitude-shadow-md: 4px 4px 0 var(--amplitude-navy);
  --amplitude-shadow-lg: 6px 6px 0 var(--amplitude-navy);
  --amplitude-shadow-yellow: 4px 4px 0 var(--amplitude-yellow);

  /* Transitions */
  --amplitude-transition: all 140ms cubic-bezier(0.2, 0, 0, 1);
  --amplitude-transition-fast: all 120ms ease;
}


/* Primary Amplitude Button Style */
.wp-block-button.is-style-amplitude-primary .wp-block-button__link,
.wp-block-button .wp-block-button__link[style*="background-color:#ffd800"],
.wp-block-button .wp-block-button__link[class*="amplitude-yellow"] {
  background: var(--amplitude-yellow) !important;
  color: var(--amplitude-navy) !important;
  border-color: var(--amplitude-navy) !important;
  box-shadow: var(--amplitude-shadow-md) !important;
}

.wp-block-button.is-style-amplitude-primary .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link[style*="background-color:#ffd800"]:hover,
.wp-block-button .wp-block-button__link[class*="amplitude-yellow"]:hover {
  background: var(--amplitude-orange) !important;
  transform: translate(-2px, -2px) !important;
  box-shadow: var(--amplitude-shadow-lg) !important;
}

/* Navy Amplitude Button Style */
.wp-block-button.is-style-amplitude-navy .wp-block-button__link,
.wp-block-button .wp-block-button__link[style*="background-color:#254c83"],
.wp-block-button .wp-block-button__link[class*="amplitude-navy"] {
  background: var(--amplitude-navy) !important;
  color: white !important;
  border-color: var(--amplitude-navy) !important;
  box-shadow: var(--amplitude-shadow-yellow) !important;
}

.wp-block-button.is-style-amplitude-navy .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link[style*="background-color:#254c83"]:hover,
.wp-block-button .wp-block-button__link[class*="amplitude-navy"]:hover {
  background: var(--amplitude-navy-dark) !important;
  transform: translate(-2px, -2px) !important;
  box-shadow: 6px 6px 0 var(--amplitude-yellow) !important;
}

/* Outline Button Style */
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent !important;
  color: var(--amplitude-navy) !important;
  border-color: var(--amplitude-navy) !important;
  box-shadow: var(--amplitude-shadow-md) !important;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--amplitude-navy-pale) !important;
  transform: translate(-2px, -2px) !important;
  box-shadow: var(--amplitude-shadow-lg) !important;
}

/* ── AMPLITUDE CARD STYLING ──────────────────────────────── */
.amplitude-card {
  background: white;
  border: 1.5px solid var(--amplitude-navy);
  border-radius: 8px;
  box-shadow: var(--amplitude-shadow-md);
  padding: 24px;
  transition: var(--amplitude-transition);
  cursor: pointer;
}

.amplitude-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--amplitude-shadow-lg);
}

.amplitude-card.yellow-bg {
  background: var(--amplitude-yellow);
  color: var(--amplitude-navy);
}

.amplitude-card.navy-bg {
  background: var(--amplitude-navy);
  color: white;
  box-shadow: var(--amplitude-shadow-yellow);
}

.amplitude-card.navy-bg:hover {
  box-shadow: 6px 6px 0 var(--amplitude-yellow);
}

/* ── AMPLITUDE SECTION STYLING ────────────────────────────── */
.amplitude-section {
  padding: 72px 48px;
}

.amplitude-section.navy-bg {
  background: var(--amplitude-navy);
  color: white;
}

.amplitude-section.light-bg {
  background: var(--amplitude-background);
}

/* Hero Section */
.amplitude-hero {
  background: var(--amplitude-navy);
  padding: 80px 48px;
  position: relative;
}

.amplitude-hero h1 {
  font-weight: 800 !important;
  font-size: clamp(48px, 8vw, 80px) !important;
  line-height: 1.0 !important;
  letter-spacing: -0.02em !important;
  text-transform: uppercase !important;
  margin: 0 0 16px !important;
  -webkit-text-stroke: 1px rgb(230, 194, 0);
}

.amplitude-hero .hero-subtitle {
  color: var(--amplitude-yellow) !important;
}

/* ── AMPLITUDE ICON STYLING ───────────────────────────────── */
.amplitude-icon {
  width: 48px;
  height: 48px;
  background: var(--amplitude-yellow);
  border: 1.5px solid var(--amplitude-navy);
  border-radius: 4px;
  box-shadow: var(--amplitude-shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  flex-shrink: 0;
}

.amplitude-icon.small {
  width: 36px;
  height: 36px;
  box-shadow: 2px 2px 0 var(--amplitude-navy);
}

.amplitude-icon.large {
  width: 56px;
  height: 56px;
  box-shadow: var(--amplitude-shadow-md);
}

/* ── AMPLITUDE BADGE STYLING ──────────────────────────────── */
.amplitude-badge {
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 2px;
  padding: 2px 7px;
  display: inline-block;
  border: 1.5px solid;
}

.amplitude-badge.popular {
  background: var(--amplitude-yellow);
  color: var(--amplitude-navy);
  border-color: var(--amplitude-navy);
}

.amplitude-badge.in-stock {
  background: var(--amplitude-navy);
  color: white;
  border-color: var(--amplitude-navy);
}

.amplitude-badge.new {
  background: var(--amplitude-yellow);
  color: var(--amplitude-navy);
  border-color: var(--amplitude-navy);
}

/* ── AMPLITUDE BACKGROUND PATTERNS ────────────────────────── */
.bg-dots {
  background-image: radial-gradient(circle, rgba(214, 214, 214, 0.93) 1.5px, #0000 1.5px) !important;
  background-size: 20px 20px !important;
}

.bg-dots.navy-bg {
  background-image: radial-gradient(circle, rgba(255,216,0,0.12) 1.5px, transparent 1.5px) !important;
}

/* ── AMPLITUDE TYPOGRAPHY ─────────────────────────────────── */
.amplitude-eyebrow {
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--amplitude-navy);
  opacity: 0.5;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.amplitude-eyebrow::before {
  content: '';
  width: 20px;
  height: 2px;
  background: var(--amplitude-yellow);
  border: 1px solid var(--amplitude-navy);
}

.amplitude-eyebrow.navy-bg {
  color: var(--amplitude-yellow);
  opacity: 0.8;
}

/* ── AMPLITUDE GRID LAYOUTS ───────────────────────────────── */
.amplitude-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  max-width: 1184px;
  margin: 0 auto;
}

.amplitude-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1184px;
  margin: 0 auto;
}

.amplitude-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  max-width: 1184px;
  margin: 0 auto;
}

/* ── AMPLITUDE RESPONSIVE DESIGN ──────────────────────────── */
@media (max-width: 768px) {
  .amplitude-section {
    padding: 48px 24px;
  }

  .amplitude-hero {
    padding: 48px 24px;
  }

  .amplitude-grid-2,
  .amplitude-grid-3,
  .amplitude-grid-4 {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .amplitude-hero h1 {
    font-size: 4em !important;
  }
}

/* ── AMPLITUDE ANIMATION UTILITIES ────────────────────────── */
.amplitude-animate-in {
  opacity: 0;
  transform: translateY(12px);
  transition: all 300ms ease-out;
}

.amplitude-animate-in.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* ── AMPLITUDE UTILITY CLASSES ────────────────────────────── */
.text-center { text-align: center; }
.text-uppercase { text-transform: uppercase; }
.font-mono { font-family: 'JetBrains Mono', monospace; }
.font-bold { font-weight: 700; }
.font-medium { font-weight: 500; }

.color-navy { color: var(--amplitude-navy); }
.color-yellow { color: var(--amplitude-yellow); }
.color-white { color: white; }
.color-muted { color: var(--amplitude-text-muted); }

.bg-navy { background: var(--amplitude-navy); }
.bg-yellow { background: var(--amplitude-yellow); }
.bg-light { background: var(--amplitude-background); }
.bg-white { background: white; }

/* ── TWENTY TWENTY-FOUR INTEGRATION ───────────────────────── */
/* Apply Amplitude styling to existing Twenty Twenty-Four elements */

/* Update default button styles */
.wp-block-button__link:not(.is-style-outline) {
  box-shadow: var(--amplitude-shadow-sm);
}

.wp-block-button__link:not(.is-style-outline):hover {
  transform: translate(-1px, -1px);
  box-shadow: var(--amplitude-shadow-md);
}
.mobile-menu-toggle .wp-element-button {
     transform: unset !important;
  box-shadow: unset !important;
}

.mobile-menu-toggle .wp-element-button:hover {
     transform: unset !important;
  box-shadow: unset !important;
}

/* Update default colors to complement Amplitude palette */
.has-contrast-color { color: var(--amplitude-text) !important; }
.has-contrast-2-color { color: var(--amplitude-text-muted) !important; }
.has-accent-color { color: var(--amplitude-navy) !important; }

/* Tablet: 2+2 becomes logo full width, then 3 cols below */
@media (max-width: 800px) {
  .footercols.wp-block-columns {
    flex-wrap: wrap !important;
  }

  /* Logo col: full width on its own row */
  .footercols.wp-block-columns > .logofootercol {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /* All other columns: split into 3 across the remaining row */
  .footercols.wp-block-columns > .wp-block-column:not(.logofootercol) {
    flex: 0 0 calc(33.333% - 2rem) !important;
    max-width: calc(38.333% - 2rem) !important;
  }
}

/* Mobile: all stacked single column */
@media (max-width: 580px) {
  .footercols.wp-block-columns > .wp-block-column {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  .footercols.wp-block-columns > .wp-block-column:not(.logofootercol) {
    flex: 0 0 calc(58.333% - 2rem) !important;
    max-width: calc(50.333% - 2rem) !important;
  }
}