/* vs214-brand-20261001a.css — 214vs.com header business-name + logo prominence (Google Ads BUSINESS_NAME/LOGO_PROMINENCE).
   Additive, CSS-only. Reuses the existing "214 Veteran Solutions" text and the existing logo <img>; adds no text or images.
   Scoped to the two observed headers only:
     A) Site header (Layout.tsx): nav.fixed > .container > a[href="/"] > img[alt="214 Veteran Solutions logo"] + span
     B) GBP landing sticky header (GBPLanding.tsx, /san-antonio-general-contractor/):
        div.sticky.top-0 > div > div > img[alt="214 Veteran Solutions logo"] + div  (name + tagline)
   Footer logos are not matched (they are not inside nav.fixed or div.sticky.top-0).
   Logos are enlarged with equal negative block margins, so the layout box stays 40px and header heights do not change
   (content offsets under the fixed nav are unaffected). No !important: every selector out-specifies the Tailwind
   utilities it overrides (.hidden, .sm:block, .h-10, .w-10, .h-10) by attribute + class count. */

/* ---------- A) Site header (all Layout pages, incl. /lp/*, /, /contact/, /about/) ---------- */
nav.fixed > .container > a[href="/"]:has(> img[alt="214 Veteran Solutions logo"]) {
  min-width: 0;            /* allow the name to ellipsize instead of pushing the menu button */
  flex: 0 1 auto;
  margin-right: 12px;      /* keep clear space before the menu button / desktop links */
}
nav.fixed > .container > a[href="/"] > img[alt="214 Veteran Solutions logo"] {
  height: 48px;
  width: auto;             /* preserve aspect ratio (174x185 source) */
  max-width: none;
  margin-block: -4px;      /* layout box stays 40px -> nav height unchanged */
  flex-shrink: 0;
}
nav.fixed > .container > a[href="/"] > img[alt="214 Veteran Solutions logo"] + span {
  display: block;          /* overrides Tailwind .hidden below the sm (640px) breakpoint */
  min-width: 0;
}
@media (max-width: 639.98px) {
  /* Phones: the name was display:none. Show it on one line next to the logo; ellipsis only as a safety net. */
  nav.fixed > .container > a[href="/"] > img[alt="214 Veteran Solutions logo"] + span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 700;
    font-size: 17px;
    line-height: 1.2;
  }
}
@media (min-width: 640px) {
  /* Tablet/desktop: name already visible (18px, wraps to 2 lines beside the xl desktop links) - text left as is. */
  nav.fixed > .container > a[href="/"] > img[alt="214 Veteran Solutions logo"] {
    height: 56px;
    margin-block: -8px;
  }
}

/* ---------- B) GBP landing sticky header (/san-antonio-general-contractor/) ---------- */
div.sticky.top-0 > div > div > img[alt="214 Veteran Solutions logo"] {
  width: 48px;
  height: 48px;
  margin-block: -4px;      /* header height unchanged */
  flex-shrink: 0;
  object-fit: contain;
}
div.sticky.top-0 > div > div:has(> img[alt="214 Veteran Solutions logo"]) {
  min-width: 0;
  flex: 0 1 auto;
  gap: 10px;
  margin-right: 8px;
}
div.sticky.top-0 > div > div > img[alt="214 Veteran Solutions logo"] + div {
  display: block;          /* overrides Tailwind .hidden below 640px */
  min-width: 0;
}
@media (max-width: 639.98px) {
  /* Phone CTA button takes ~190px on phones: let the existing name wrap to two lines instead of hiding it. */
  div.sticky.top-0 > div > div > img[alt="214 Veteran Solutions logo"] + div > div:first-child {
    font-size: 15px;
    line-height: 1.1;
    white-space: normal;
    overflow-wrap: normal;
  }
  /* Secondary tagline ("Veteran-Owned General Contractor") stays hidden on phones as before (no room). */
  div.sticky.top-0 > div > div > img[alt="214 Veteran Solutions logo"] + div > div + div {
    display: none;
  }
}
@media (max-width: 389.98px) {
  /* Narrow phones (360px): keep the name to two lines beside the phone button. */
  div.sticky.top-0 > div > div > img[alt="214 Veteran Solutions logo"] {
    width: 44px;
    height: 44px;
    margin-block: -2px;
  }
  div.sticky.top-0 > div > div:has(> img[alt="214 Veteran Solutions logo"]) {
    gap: 8px;
    margin-right: 4px;
  }
  div.sticky.top-0 > div > div > img[alt="214 Veteran Solutions logo"] + div > div:first-child {
    font-size: 14px;
  }
  div.sticky.top-0 > div > a[href^="tel:"] > button {
    padding-left: 12px;    /* was 16px; same text, icon and 40px height */
    padding-right: 12px;
  }
}