/*
 * Brand-logo overlay.
 *
 * Both the navbar logo and the footer logo are rendered by Framer as:
 *   <a aria-label="Logo" data-framer-name="Default|Inverted - Large">
 *     <div class="framer-iief19-container">… laptop icon SVG …</div>
 *     <div class="framer-ovmr3b">          … "Gramscode" <p>     …</div>
 *   </a>
 *
 * Goal: photo brand mark on the left, "Gramscode" wordmark on the right,
 * NO gap between them, NO flash of "Gramstudio" during Framer's React
 * hydration.
 *
 * Strategy:
 *   1. Hide BOTH Framer-rendered children (.framer-iief19-container =
 *      old laptop SVG, .framer-ovmr3b = the wordmark <p>). The wordmark
 *      is hidden so Framer can swap its text to "Gramstudio" all it
 *      wants without us caring — nothing visible is affected.
 *   2. Resize the hidden icon container to act as a slot for the photo
 *      we paint via background-image.
 *   3. Override Framer's flex `gap` to 0 so children sit flush.
 *   4. Inject the visible "Gramscode" text via CSS `::after` with the
 *      same typography Framer uses (Poppins, 24/36 px, etc). CSS
 *      content is immune to Framer's hydration — zero flash possible.
 *
 * Accessibility: aria-label="Logo" on the anchor is the accessible name.
 */

/* Hide BOTH Framer children — the laptop icon and the wordmark <p>.
 * The wordmark is hidden because Framer's React hydration keeps
 * rewriting its text content (Gramscode ↔ Gramstudio). We replace it
 * with a CSS ::after pseudo-element instead, which Framer can't touch. */
a[aria-label="Logo"] > .framer-iief19-container,
a[aria-label="Logo"] > .framer-ovmr3b {
  visibility: hidden !important;
}

/* Keep the hidden wordmark element's natural width so the anchor's
 * layout box stays wide enough to encompass the visible text. The
 * ::after below sits ON TOP of (visibility:hidden) wordmark — visually
 * only ::after shows. */

/* Kill Framer's intra-anchor gap (8 px navbar / 12 px footer) — we
 * want the photo and wordmark fully flush. */
a[aria-label="Logo"] {
  gap: 0 !important;
  position: relative;  /* anchor for ::after */
}

/* Common: paint the photo brand mark at the anchor's left edge. */
a[aria-label="Logo"] {
  background-repeat: no-repeat;
  background-position: left center;
  background-image: url("/images/logo/gramscode-mark-320.png?v=9");
  background-image: -webkit-image-set(
    url("/images/logo/gramscode-mark-160.png?v=9") 1x,
    url("/images/logo/gramscode-mark-320.png?v=9") 2x,
    url("/images/logo/gramscode-mark-480.png?v=9") 3x
  );
  background-image: image-set(
    url("/images/logo/gramscode-mark-160.png?v=9") 1x,
    url("/images/logo/gramscode-mark-320.png?v=9") 2x,
    url("/images/logo/gramscode-mark-480.png?v=9") 3x
  );
}

/* Shared ::after wordmark typography (matches Framer's <p> at runtime
 * — Poppins, weight 400, negative letter-spacing tuned per size). */
a[aria-label="Logo"]::after {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-family: Poppins, "Poppins Placeholder", sans-serif;
  font-weight: 400;
  font-style: normal;
  white-space: nowrap;
  pointer-events: none;
}

/* Navbar variant — cream surface, dark wordmark. */
a[aria-label="Logo"][data-framer-name="Default"] {
  min-height: 44px !important;
  background-size: 44px auto;
}
a[aria-label="Logo"][data-framer-name="Default"] > .framer-iief19-container {
  width: 44px !important;
  min-width: 44px !important;
  flex: 0 0 44px !important;
}
a[aria-label="Logo"][data-framer-name="Default"]::after {
  content: "Gramscode";
  left: 44px;
  font-size: 24px;
  line-height: 28.8px;
  letter-spacing: -0.72px;
  color: rgb(19, 38, 27);
}
@media (min-width: 768px) {
  a[aria-label="Logo"][data-framer-name="Default"] {
    min-height: 52px !important;
    background-size: 52px auto;
  }
  a[aria-label="Logo"][data-framer-name="Default"] > .framer-iief19-container {
    width: 52px !important;
    min-width: 52px !important;
    flex: 0 0 52px !important;
  }
  a[aria-label="Logo"][data-framer-name="Default"]::after {
    left: 52px;
  }
}

/* Footer variant — dark green surface, cream wordmark. */
a[aria-label="Logo"][data-framer-name="Inverted - Large"] {
  min-height: 64px !important;
  background-size: 60px auto;
}
a[aria-label="Logo"][data-framer-name="Inverted - Large"] > .framer-iief19-container {
  width: 60px !important;
  min-width: 60px !important;
  flex: 0 0 60px !important;
}
a[aria-label="Logo"][data-framer-name="Inverted - Large"]::after {
  content: "Gramscode";
  left: 60px;
  font-size: 36px;
  line-height: 43.2px;
  letter-spacing: -1.08px;
  color: rgb(255, 255, 255);
}
@media (min-width: 768px) {
  a[aria-label="Logo"][data-framer-name="Inverted - Large"] {
    min-height: 76px !important;
    background-size: 72px auto;
  }
  a[aria-label="Logo"][data-framer-name="Inverted - Large"] > .framer-iief19-container {
    width: 72px !important;
    min-width: 72px !important;
    flex: 0 0 72px !important;
  }
  a[aria-label="Logo"][data-framer-name="Inverted - Large"]::after {
    left: 72px;
  }
}