/*
 * Symplast theme overrides — HAND-AUTHORED, not built by webpack.
 * Enqueued after dist/main.css (depends on the symplast360tmd-bundle-css handle).
 *
 * WHY THIS FILE EXISTS:
 *   The theme's SCSS source for the site header (and ~10 other blocks) is missing
 *   from src/ — those styles live only in the compiled dist/main.css that 360pmi
 *   shipped. Running `npm run production` would drop them and break the site, so we
 *   cannot rebuild. These targeted overrides apply header/section changes WITHOUT a
 *   rebuild. When the vendor restores the real source, fold these in and delete this.
 *   See WORK-LOG.md for the restore commit/tag.
 */

/* ───────────────────────────────────────────────────────────────────────────
 * Header — desktop (>=768px): logo left, +240px logo, phone + Book a Demo CTA
 * Base header markup/styles are in dist/main.css (.header__*).
 * ─────────────────────────────────────────────────────────────────────────── */

/* Hamburger lines white (was #c1c8c0). All breakpoints. */
.header__hamburger-line {
  background-color: #ffffff;
}

/* Phone + CTA hidden on mobile (bar stays logo + hamburger; both already live
   inside the slide-in overlay menu for mobile users). */
.header__bar-actions {
  display: none;
}

@media (min-width: 768px) {
  /* Re-lay the bar: logo (left) | actions | hamburger (right). Was 1fr 1fr 1fr
     with the logo centered in column 2. */
  .header__bar {
    grid-template-columns: 1fr auto auto;
    column-gap: clamp(16px, 2vw, 32px);
  }

  /* Logo to the far left (was justify-self:center; grid-column-start:2). */
  .header__logo {
    justify-self: start;
    grid-column-start: 1;
  }

  /* Constant ~240px logo (was clamp(140px, 9.8vw, 189px)).
     NOTE: the logo asset is 189px wide natively; at 240px it upscales/softens.
     Supply a ~480px logo for crisp retina rendering. */
  .header__logo-img {
    width: 240px;
  }

  /* Phone + CTA group, just left of the hamburger. */
  .header__bar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(14px, 1.6vw, 28px);
    grid-column-start: 2;
    /* Keep above the slide-in panel (.header__inner is z-index:1 on desktop),
       matching the logo/hamburger which are z-index:2 — otherwise the panel
       covers the CTA when the menu is open. */
    position: relative;
    z-index: 2;
  }

  .header__bar-phone {
    color: #ffffff;
    font-family: "Trio Grotesk", sans-serif;
    font-weight: 700;
    font-size: clamp(13px, 0.9vw, 16px);
    letter-spacing: -0.3px;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 0.2s ease;
  }
  .header__bar-phone:hover,
  .header__bar-phone:focus-visible {
    opacity: 0.8;
  }

  /* CTA: white-on-coral pill (inverse of .btn-primary, which is coral-on-coral
     and invisible on the coral header). */
  .header__bar-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: clamp(36px, 2.4vw, 45px);
    padding: 0 clamp(18px, 1.5vw, 28px);
    border-radius: 52px;
    background-color: #ffffff;
    border: 1.5px solid #ffffff;
    color: #f27061;
    font-family: "Trio Grotesk", sans-serif;
    font-weight: 700;
    font-size: clamp(13px, 0.9vw, 16px);
    letter-spacing: -0.03em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease;
  }
  .header__bar-cta:hover,
  .header__bar-cta:focus-visible {
    background-color: transparent;
    color: #ffffff;
  }
}

/* ───────────────────────────────────────────────────────────────────────────
 * Beautiful Business wordmark — new 1000x143 image, displayed at 500px (2x retina)
 * Mirror of src/css/partials/_beautifulBusiness.scss (.beautifulBusiness__logo),
 * overridden here since we can't rebuild. Keep the SCSS in sync for when we can.
 * ─────────────────────────────────────────────────────────────────────────── */
.beautifulBusiness__logo {
  aspect-ratio: 1000 / 143; /* was 857 / 122 */
  max-width: 500px;
}
@media (min-width: 768px) {
  .beautifulBusiness__logo {
    width: 500px; /* was clamp(30vw, calc(857 * 100vw / 1920), 44.64vw) */
  }
}

/* ───────────────────────────────────────────────────────────────────────────
 * Home hero (front page only — body.home). Scoped to .home because
 * .hero__tag / .hero__cta are shared by the other hero blocks site-wide.
 *   • Pills: drop the white pill, white text, leading checkmark.
 *   • CTA: slightly larger with balanced (centered) vertical padding — the stock
 *     .btn-primary forces an off-center `padding-top: 4rem !important`.
 * ─────────────────────────────────────────────────────────────────────────── */
.home .hero__tag {
  background: transparent;
  color: #ffffff;
  border-radius: 0;
  height: auto;
  padding: 0;
  gap: 8px;
  align-items: center;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(14px, 4.65vw, 20px); /* 20px on desktop, scales down on mobile */
  letter-spacing: 2px;
  font-style: italic;
}

/* Wider spacing between the three pills on desktop. */
@media (min-width: 768px) {
  .home .hero__tags {
    gap: 5vw;
  }
}
.home .hero__tag::before {
  content: "";
  flex: 0 0 auto;
  width: 0.9em;
  height: 0.9em;
  /* Checkmark color (coral). */
  background-color: #f27061;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
}

.home .hero__cta {
  height: clamp(46px, 3.6vw, 60px); /* was clamp(33px, 2.704vw, 50px) — slightly larger */
  padding-top: 0 !important;        /* kill .btn-primary's off-center padding-top:4rem */
  padding-bottom: 0 !important;     /* balanced top/bottom; flex align-items centers the text */
  align-items: center;
}