/* Header, ported from src/components/common/Header.astro's <style> block.
   Selectors are scoped to the header template part's rendered wrapper
   (<header class="wp-block-template-part">, from parts/header.html's
   {"slug":"header","tagName":"header"} template-part reference). */

header.wp-block-template-part {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid var(--border-color-tertiary);
  background-color: var(--background-secondary);
}

header.wp-block-template-part .logo,
header.wp-block-template-part .menu-icon,
header.wp-block-template-part .logo a {
  display: flex;
  align-items: center;
}

/* The burger trigger is a real <button> (Header.astro:63), and this
   theme's trimmed reset -- unlike the reference's, which resets every
   button globally (src/styles/reset.css:111) -- doesn't strip the UA
   chrome, so it's stripped here. Same per-consumer approach the
   `.nav-item .lang-switch` rule below already uses. */
header.wp-block-template-part .menu-icon {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
}

header.wp-block-template-part .button-text {
  display: inline-block;
  translate: 0 1px;
}

header.wp-block-template-part .actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

header.wp-block-template-part nav {
  display: none;
}

header.wp-block-template-part nav ul {
  display: flex;
  align-items: center;
  gap: 24px;
}

header.wp-block-template-part .nav-item a,
header.wp-block-template-part .nav-item .lang-switch {
  display: block;
  padding: 6px 12px;
  color: inherit;
  font: inherit;
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
}

header.wp-block-template-part .nav-item {
  margin: 0;
  line-height: 100%;
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: all 0.2s ease-in-out;
  width: fit-content;
  color: var(--text-color-secondary);
}

header.wp-block-template-part .nav-item:hover {
  color: var(--text-primary);
  background-color: var(--overlay-hover);
}

/* Below 1024px the header nav is hidden outright (the `nav { display:
   none }` rule above) and the burger trigger opens the full-screen
   drawer instead -- markup in includes/navigation.php, styles in
   assets/css/navigation.css. This file used to hold a CSS-only
   `:checked ~ nav` dropdown stand-in for that drawer; it was replaced by
   the real port (FIX 9), and the `<input type="checkbox">` it depended on
   is gone from parts/header.html with it. */

@media (min-width: 1024px) {
  header.wp-block-template-part {
    height: 64px;
    padding: 16px 88px;
    border-bottom-color: var(--border-color-secondary);
    background-color: var(--background-secondary);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  header.wp-block-template-part .actions {
    gap: 24px;
  }

  header.wp-block-template-part nav {
    display: block;
  }

  header.wp-block-template-part .menu-icon {
    display: none !important;
  }
}

/* Buttons, ported subset of src/components/common/Button.astro's
   <style> block (only the variant/size combination the header uses:
   variant="primary" size="xsmall" sizeDesktop="small"). */
header.wp-block-template-part .button {
  font-family: 'PPObjectSans-Medium';
  display: flex;
  align-items: center;
  width: fit-content;
  gap: 6px;
  text-transform: uppercase;
  font-size: var(--text-button-lg);
  line-height: 100%;
  letter-spacing: 1.92px;
  height: 44px;
  border-radius: var(--radius-md);
  text-wrap: nowrap;
  text-decoration: none;
  transition:
    border 0.1s,
    background-color 0.2s ease,
    transform 0.15s ease;
}

header.wp-block-template-part .button.primary {
  background-color: var(--background-inverted);
  color: var(--text-primary-inverted);
  padding: 0 16px;
}

header.wp-block-template-part .button.primary:hover {
  transform: scaleY(0.99) scaleX(1.005);
  opacity: 0.9;
}

header.wp-block-template-part .button.primary:active {
  transform: scaleY(0.97) scaleX(1.005);
  opacity: 0.95;
}

header.wp-block-template-part .button.xsmall {
  height: 24px;
  padding: 0 8px;
  gap: 2px;
  font-size: var(--text-button-sm);
  letter-spacing: 1.2px;
}

@media (min-width: 1024px) {
  header.wp-block-template-part .button.desktop-small {
    height: 32px;
    padding: 0 12px;
    gap: 6px;
    font-size: var(--text-button-md);
    letter-spacing: 1.68px;
  }
}

/* Waitlist mode (the site's app switch): the pill carries both labels,
   JOIN THE WAITLIST and the short WAITLIST that fits next to the logo and
   the menu button on a phone (functions.php puts them in), and shows one. */
header.wp-block-template-part .cta-label-long {
  display: none;
}

@media (min-width: 1024px) {
  header.wp-block-template-part .cta-label-long {
    display: inline;
  }

  header.wp-block-template-part .cta-label-short {
    display: none;
  }
}

/* Footer, ported from src/components/common/Footer.astro's and
   src/components/common/SocialLinks.astro's <style> blocks. Selectors are
   scoped to the footer template part's rendered wrapper
   (<footer class="wp-block-template-part">, from parts/footer.html's
   {"slug":"footer","tagName":"footer"} template-part reference).

   Deviation from the Astro source: Footer.astro nests two wrapper divs per
   social row (an outer .social-mobile/.social-desktop visibility toggle
   around an inner .social flex row from SocialLinks.astro). The WordPress
   part merges both into a single element carrying both classes, so the
   visibility rules below set display:flex/none directly on
   .social-mobile/.social-desktop instead of porting the source's
   display:block (which would collapse the icon row since each .media-link
   is itself display:flex, i.e. block-level, and would stack vertically
   without an explicit flex parent). */

footer.wp-block-template-part .footer-container {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 16px;
}

footer.wp-block-template-part .top-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

footer.wp-block-template-part .logo {
  display: flex;
  align-items: center;
  color: var(--monochrome-white);
}

footer.wp-block-template-part .logo-horizontal {
  display: none;
}

footer.wp-block-template-part .social {
  display: flex;
  align-items: center;
  gap: 18px;
}

footer.wp-block-template-part .social-desktop {
  display: none;
}

footer.wp-block-template-part .media-link {
  display: flex;
  align-items: center;
  color: inherit;
}

footer.wp-block-template-part .media-icon {
  opacity: 0.72;
  transition:
    opacity 0.2s ease-in-out,
    color 0.2s ease-in-out;
}

footer.wp-block-template-part a.media-link:hover .media-icon,
footer.wp-block-template-part a.media-link:focus-visible .media-icon {
  color: var(--monochrome-white);
  opacity: 1;
}

footer.wp-block-template-part .menu {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

footer.wp-block-template-part .menu-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Footer Nav Block (Figma Footer 2221:14523 / mobile 2083:1423, 2026-10-05):
   one column per group (Product, Company, Legal). From 1024px a heading
   row, a divider, then the link rows; below, no headings, and the groups
   are split by dividers alone (none above the first), 12px around each. */
footer.wp-block-template-part .menu-column {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

footer.wp-block-template-part .menu-column:first-child .menu-divider {
  display: none;
}

footer.wp-block-template-part .menu-divider {
  height: 1px;
  width: 100%;
  background-color: var(--border-color-secondary-inverted);
  border: none;
  margin: 0;
}

/* The group headings (`menu-title` paragraphs: Product, Company, Legal),
   desktop only (shown in the 1024px block below), white bold 14/20 on a
   28px row. The 10-02 headings (`menu-heading`: Phone plans, The Company,
   Careers) that the database copy of the footer may still carry are
   dropped at render by functions.php, whatever this file says. */
footer.wp-block-template-part .menu-title {
  display: none;
  align-items: center;
  height: 28px;
  margin: 0;
  font-family: var(--font-bold);
  font-size: var(--text-copy-md);
  line-height: 20px;
  color: var(--text-primary-inverted);
}

footer.wp-block-template-part .menu-item {
  display: flex;
  align-items: center;
  height: 28px;
  margin: 0;
}

footer.wp-block-template-part .menu-item a {
  color: var(--text-primary-inverted);
  border-bottom: 1.5px solid transparent;
  transition:
    opacity 0.2s ease-in-out,
    border-color 0.2s ease-in-out;
}

footer.wp-block-template-part .menu-item a:hover,
footer.wp-block-template-part .menu-item a:focus {
  border-bottom-color: var(--monochrome-white);
}

footer.wp-block-template-part .last-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

footer.wp-block-template-part .payment-providers {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
}

footer.wp-block-template-part .payment-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 32px;
  color: var(--monochrome-white);
  opacity: 0.72;
}

@media (min-width: 1024px) {
  /* The black runs edge to edge, as in every frame (the footer instance is
     as wide as the frame); only the content stops at 1600px. The 1600px cap
     used to sit on the black box itself, so on screens wider than 1600px
     the footer was a black block with grey (#f5f4f4) bars beside it, under
     full-width sections like the Coverage page's map (tz 2026-11-02). The
     side padding keeps the content exactly where the cap put it: 64px in,
     and centred at 1600px. */
  footer.wp-block-template-part .footer-container {
    width: 100%;
    margin: 0;
    padding: 48px max(64px, calc((100% - 1600px) / 2 + 64px));
  }

  footer.wp-block-template-part .logo-symbol {
    display: none;
  }

  footer.wp-block-template-part .logo-horizontal {
    display: block;
    width: auto;
    height: 23px;
  }

  footer.wp-block-template-part .social-mobile {
    display: none;
  }

  footer.wp-block-template-part .social-desktop {
    display: flex;
  }

  footer.wp-block-template-part .menu {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    align-items: start;
    box-sizing: border-box;
    min-height: 200px;
  }

  footer.wp-block-template-part .menu-block {
    gap: 0;
  }

  footer.wp-block-template-part .menu-column {
    gap: 8px;
    padding-top: 16px;
  }

  footer.wp-block-template-part .menu-title {
    display: flex;
  }

  footer.wp-block-template-part .menu-column:first-child .menu-divider {
    display: block;
  }

  footer.wp-block-template-part .payment-providers {
    flex: 0 0 auto;
    justify-content: flex-end;
    gap: 24px;
  }
}