/* PhiBrows Yolly palette over the Beautyeo template, loaded after the template stylesheet.
 *
 * The template is variable-driven, so keeping our colours is a straight inversion of its
 * tokens: page and cards go to the warm ink ladder, the brown accent becomes the brand
 * gold, text flips to ivory/warm grey. Never edit the template stylesheet itself — this
 * file is the only place colour changes belong.
 *
 * Ladder: page #0f0c08 · band #16110a · card #1c160d · gold #c9a55c · champagne #e8d3a2
 *         ivory #f2ead9 · body #b3a68f
 */
:root {
  --color--white-solid: #1c160d;   /* light cards / nav surface -> raised dark card */
  --color--black-solid: #f2ead9;   /* headings / dark buttons   -> ivory */
  --color--brown-solid: #c9a55c;   /* the accent                -> gold */
  --color--brown-light-1: #0f0c08; /* lightest section tint     -> page ink */
  --color--brown-light-2: #16110a; /* mid tint                  -> band */
  --color--brown-light-3: #241b10; /* strongest tint            -> deep card */
  --color--grey-light: #16110a;    /* grey panels               -> band */
  --color--grey-medium: #b3a68f;   /* secondary text            -> warm grey */
}

body {
  background-color: var(--color--brown-light-1);
  color: var(--color--grey-medium);
}

/* The heading photo chips.
 *
 * The template paints them as raw backgrounds on the heading spans — the one place in the
 * whole design where a photo keeps square corners; every other image it renders
 * (.hero-main-image, .blog-image, .services-gallery-image, the service cards) is clipped
 * with var(--radius--r-16px). The client asked for the same rounding here.
 *
 * A background cannot be clipped independently of the text sharing the span, so the photo
 * moves onto an ::after box that reproduces the template's own geometry exactly and adds
 * nothing but the radius:
 *   >= 768px  template background-size: 160px  -> a 10rem-wide box at full line height,
 *                                                 cover crop (the same band it painted)
 *   <= 767px  template background-size: contain -> full line height, width from the
 *                                                 photo's own aspect ratio (whole photo)
 * Both blocks stay above 480px: below that the template drops the chips to plain words
 * (background-image: none), and an unconditional override would paint a photo behind the
 * word on phones.
 *
 * The radius is one step past the template's 16px image radius, because these chips are
 * small — 24px on a 160x108 chip reads about as round as 16px does on a full-width photo,
 * and 16px on the shorter tablet chip keeps that same proportion.
 *
 * z-index: -1 with isolation: isolate on the span is what keeps this a pure swap. A
 * background paints behind its element's own text; a positioned pseudo would paint over
 * it, and where a span wraps to three lines (the home H1 between 480 and 520px) the photo
 * grows past the padding reserve and would have covered the last letter of „детайлът".
 * The isolate keeps the negative layer inside the span, so it can never sink behind an
 * ancestor's background either. pointer-events: none leaves text selection alone.
 */
@media screen and (min-width: 480px) {
  .hero-header-span-1,
  .hero-header-span-2,
  .hair-header-span-1,
  .hair-header-span-2 {
    background-image: none;
    isolation: isolate;
    position: relative;
  }

  .hero-header-span-1::after,
  .hero-header-span-2::after,
  .hair-header-span-1::after,
  .hair-header-span-2::after {
    content: "";
    background-image: var(--chip-photo);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 1.5rem;
    width: 10rem;
    pointer-events: none;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: -1;
  }

  .hero-header-span-1 {
    --chip-photo: url("/images/lamination-combo-p-500.webp");
    --chip-aspect: 500 / 572;
  }

  .hero-header-span-2 {
    --chip-photo: url("/images/microblading-closeup-p-500.webp");
    --chip-aspect: 500 / 666;
  }

  .hair-header-span-1 {
    --chip-photo: url("/images/yolly-at-work-p-500.webp");
    --chip-aspect: 500 / 666;
  }

  .hair-header-span-2 {
    --chip-photo: url("/images/yolly-portrait-p-500.webp");
    --chip-aspect: 500 / 494;
  }
}

/* Tablet: the template swaps to background-size: contain, so the chip is the whole photo
 * fitted to the line height. The box follows the photo's aspect ratio, otherwise the
 * corners would round transparent space instead of the picture. */
@media screen and (min-width: 480px) and (max-width: 767px) {
  .hero-header-span-1::after,
  .hero-header-span-2::after,
  .hair-header-span-1::after,
  .hair-header-span-2::after {
    border-radius: 1rem;
    width: 4rem;
  }

  /* The aspect ratio is what makes the box hug the photo; without support for it a
   * width: auto box would shrink to nothing (the pseudo has no content), so the 4rem
   * above stays as the fallback and only supporting browsers hand sizing to the photo. */
  @supports (aspect-ratio: 1) {
    .hero-header-span-1::after,
    .hero-header-span-2::after,
    .hair-header-span-1::after,
    .hair-header-span-2::after {
      aspect-ratio: var(--chip-aspect);
      width: auto;
    }
  }
}

/* Webflow's base nav/dropdown rules hard-code #222 — invisible once the nav surface goes
 * dark. Lift them onto the ivory the rest of the navbar text uses; the template's own
 * hover/current rules still win where they apply. */
.navbar .w-nav-link,
.navbar .w-dropdown-toggle {
  color: var(--color--black-solid);
}