@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=Public+Sans:wght@400;500&display=swap");

/* ===========================
   ALA Contact Page
   Matches G1 White Editorial design system
   =========================== */

:root {
  --c-bg:      #FFFFFF;
  --c-ink:     #000000;
  --c-muted:   #767676;
  --c-divider: rgba(0,0,0,.13);
  --c-f-head:  "Archivo", system-ui, -apple-system, sans-serif;
  --c-f-body:  "Public Sans", system-ui, -apple-system, sans-serif;
}

/* Reset leaks from Razzi */
#ala-contact,
#ala-contact * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Page wrapper — mobile first */
.ala-contact {
  background: var(--c-bg);
  padding: 72px 0 120px;
  font-family: var(--c-f-body);
  -webkit-font-smoothing: antialiased;
  color: var(--c-ink);
}

/* Centered container */
.ala-contact__inner {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 28px;
}

/* Tick rule — same as G1 */
.ala-contact__tick {
  display: block;
  width: 56px;
  height: 1px;
  background: var(--c-ink);
  margin-bottom: 24px;
}

/* Eyebrow — same as G1 g1-label */
.ala-contact__eyebrow {
  font-family: var(--c-f-head);
  font-weight: 600;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 20px;
}

/* Section title — same as G1 g1-h2 */
.ala-contact__title {
  font-family: var(--c-f-head);
  font-weight: 800;
  font-size: clamp(30px, 3.6vw, 54px);
  line-height: 1.02;
  letter-spacing: -.022em;
  color: var(--c-ink);
  margin-top: 16px;
}

/* Body copy — same as G1 g1-copy */
.ala-contact__body {
  font-family: var(--c-f-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
  color: var(--c-ink);
  margin-top: 20px;
}

.ala-contact__body--muted {
  color: var(--c-muted);
}

/* Section 1 header — lots of space below before the list */
.ala-contact__header {
  margin-bottom: 56px;
}

/* Contact list */
.ala-contact__list {
  border-top: 1px solid var(--c-divider);
}

/* Each row */
.ala-contact__row {
  display: flex;
  align-items: center;
  min-height: 80px;
  padding: 0 4px;
  border-bottom: 1px solid var(--c-divider);
  text-decoration: none;
  color: var(--c-ink);
  background: var(--c-bg);
  transition: background .12s ease;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}

.ala-contact__row:hover,
.ala-contact__row:focus-visible {
  background: #F7F7F7;
  outline: none;
}

.ala-contact__row:active { background: #F0F0F0; }

/* Icon */
.ala-contact__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  flex-shrink: 0;
}

.ala-contact__icon svg { display: block; }

/* Label */
.ala-contact__label {
  flex: 1;
  font-family: var(--c-f-head);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: .04em;
  color: var(--c-ink);
  line-height: 1;
  padding-left: 4px;
}

/* Arrow */
.ala-contact__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  flex-shrink: 0;
}

.ala-contact__arrow svg path { stroke: #AAAAAA; }

/* ============================================
   INFO SECTIONS — BIG space, never collapses
   Use #ala-contact prefix to beat the wildcard reset above
   ============================================ */
#ala-contact .ala-contact__info-section {
  margin-top: 96px !important;
  padding-top: 80px !important;
  border-top: 1px solid var(--c-divider);
}

/* Sign-off — large breath before footer */
#ala-contact .ala-contact__signoff {
  border-top: 1px solid var(--c-divider);
  margin-top: 160px !important;
  padding-top: 72px !important;
}

.ala-contact__signoff-text {
  font-family: var(--c-f-head);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .22em;
  color: var(--c-muted);
  text-transform: uppercase;
  line-height: 1;
}

/* Razzi leak suppression */
body.page-template-template-contact .razzi-page-header,
body.page-template-template-contact .razzi-breadcrumb,
body.page-template-template-contact .entry-header,
body.page-template-template-contact .entry-footer,
body.page-template-template-contact .entry-content > *:not(#ala-contact),
body.page-template-template-contact .site-content > *:not(#ala-contact):not(#page):not(.site-content) {
  display: none !important;
}

body.page-template-template-contact #content.site-content {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Desktop — scale up generously */
@media (min-width: 768px) {
  .ala-contact {
    padding: 120px 0 180px;
  }
  .ala-contact__header {
    margin-bottom: 72px;
  }
  #ala-contact .ala-contact__info-section {
    margin-top: 140px !important;
    padding-top: 100px !important;
  }
  #ala-contact .ala-contact__signoff {
    margin-top: 220px !important;
    padding-top: 80px !important;
  }
  .ala-contact__title {
    font-size: clamp(36px, 3.6vw, 54px);
  }
}

/* Accessibility */
.ala-contact__row:focus-visible {
  box-shadow: inset 0 0 0 2px var(--c-ink);
}