/* Mobile-only header + homepage composition for local/test review. */

@media (max-width: 560px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip !important;
  }

  .site-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    width: 100%;
    max-width: 100%;
    overflow: visible !important;
    border-bottom: 0 !important;
  }

  .site-header .main-nav {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "brand menu"
      "contact contact";
    align-items: center;
    column-gap: 10px;
    row-gap: 6px;
    width: 100%;
    min-height: 0 !important;
    padding: 12px 5% 0 !important;
    overflow: visible !important;
    border-bottom: 0 !important;
  }

  .site-header .brand-wordmark {
    grid-area: brand;
    min-width: 0;
    width: 100%;
    overflow: visible !important;
    gap: 2px !important;
    white-space: nowrap;
  }

  .site-header .brand-name,
  .site-header .brand-name-accent,
  .site-header .brand-name-main,
  .site-header .brand-tagline {
    overflow: visible !important;
  }

  .site-header .brand-name {
    font-size: 31px !important;
    letter-spacing: 1px !important;
    line-height: .9 !important;
  }

  .site-header .brand-tagline {
    font-size: 7px !important;
    letter-spacing: 3.1px !important;
    line-height: 1 !important;
  }

  .site-header .menu-btn {
    grid-area: menu;
    justify-self: end;
    align-self: center;
    display: block;
    margin: 0 !important;
    padding: 3px 0 !important;
    border: 0;
    background: transparent;
    color: var(--red) !important;
    font-size: 31px !important;
    line-height: .9 !important;
  }

  .site-header .mobile-contact-info {
    grid-area: contact;
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100%;
    display: grid !important;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .78fr) minmax(0, 1.14fr);
    align-items: stretch;
    gap: 0 !important;
    margin: 2px 0 0 !important;
    padding: 8px 0 8px !important;
    border-top: 0 !important;
    border-bottom: 2px solid var(--red) !important;
    box-shadow: none !important;
    box-sizing: border-box;
    overflow: hidden !important;
  }

  .site-header .mobile-contact-info span,
  .site-header .mobile-contact-info a {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: 40px;
    margin: 0;
    color: #f2f2f2 !important;
    font-family: "DM Sans", Arial, sans-serif !important;
    font-size: clamp(8.6px, 2.25vw, 9.4px) !important;
    font-weight: 700 !important;
    line-height: 1.12 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase;
    text-decoration: none;
    box-sizing: border-box;
    overflow: hidden !important;
  }

  .site-header .mobile-contact-info .mobile-location {
    padding: 2px 5px 2px 25px;
    white-space: normal;
  }

  .site-header .mobile-contact-info .mobile-phone {
    padding: 2px 4px 2px 25px;
    white-space: nowrap;
    border-left: 2px solid var(--red);
  }

  .site-header .mobile-contact-info .mobile-hours {
    padding: 2px 0 2px 24px;
    white-space: nowrap;
    border-left: 2px solid var(--red);
  }

  .site-header .mobile-contact-info .mobile-location::before,
  .site-header .mobile-contact-info .mobile-phone::before,
  .site-header .mobile-contact-info .mobile-hours::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 50%;
    width: 16px;
    height: 16px;
    transform: translateY(-50%);
    background: var(--red);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
  }

  .site-header .mobile-contact-info .mobile-location::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' fill-rule='evenodd' d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7Zm0 4a3 3 0 1 0 0 6a3 3 0 1 0 0-6Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' fill-rule='evenodd' d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7Zm0 4a3 3 0 1 0 0 6a3 3 0 1 0 0-6Z'/%3E%3C/svg%3E");
  }

  .site-header .mobile-contact-info .mobile-phone::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6.6 10.8c1.5 3 3.9 5.4 6.9 6.9l2.3-2.3c.3-.3.7-.4 1.1-.3 1.2.3 2.5.6 3.8.6.7 0 1.3.6 1.3 1.3V21c0 .7-.6 1.3-1.3 1.3C10.9 22.3 1.7 13.1 1.7 1.7.4 1 1 0 1.7 0H6c.7 0 1.3.6 1.3 1.3.1.4 0 .8-.3 1.1z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6.6 10.8c1.5 3 3.9 5.4 6.9 6.9l2.3-2.3c.3-.3.7-.4 1.1-.3 1.2.3 2.5.6 3.8.6.7 0 1.3.6 1.3 1.3V21c0 .7-.6 1.3-1.3 1.3C10.9 22.3 1.7 13.1 1.7 1.7.4 1 1 0 1.7 0H6c.7 0 1.3.6 1.3 1.3.1.4 0 .8-.3 1.1z'/%3E%3C/svg%3E");
  }

  .site-header .mobile-contact-info .mobile-hours::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20m1 5v5.6l4 2.4-1 1.7-5-3V7z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20m1 5v5.6l4 2.4-1 1.7-5-3V7z'/%3E%3C/svg%3E");
  }

  #home .hero-content {
    padding: 54px 7% 44px !important;
  }

  #home .hero h1 {
    max-width: 100%;
    font-size: clamp(32px, 9.9vw, 48px) !important;
    line-height: 1.01 !important;
    gap: 11px !important;
  }

  #home .hero-copy {
    max-width: 100% !important;
    margin-top: 28px !important;
  }
}

@media (max-width: 360px) {
  .site-header .brand-name { font-size: 28px !important; }
  .site-header .brand-tagline { font-size: 6.4px !important; letter-spacing: 2.6px !important; }
  .site-header .mobile-contact-info { grid-template-columns: minmax(0, 1.04fr) minmax(0, .76fr) minmax(0, 1.20fr); }
  .site-header .mobile-contact-info span,
  .site-header .mobile-contact-info a { font-size: 8.3px !important; }
  .site-header .mobile-contact-info .mobile-location { padding-left: 24px; }
  .site-header .mobile-contact-info .mobile-phone { padding-left: 24px; }
  .site-header .mobile-contact-info .mobile-hours { padding-left: 23px; }
  .site-header .mobile-contact-info .mobile-location::before,
  .site-header .mobile-contact-info .mobile-phone::before,
  .site-header .mobile-contact-info .mobile-hours::before { width: 15px; height: 15px; }
  #home .hero-content { padding-top: 48px !important; }
}