/* site.css — deliberate design changes on top of Webflow's generated CSS.
 *
 * Loaded LAST, after the Webflow stylesheets and depth-text.css, so these win
 * on cascade order at equal specificity.
 *
 * A recurring gotcha worth knowing: Webflow puts grid placement on generated
 * ID rules (#w-node-<uuid>-<pageid>), specificity 100. A class selector will
 * NOT override them no matter where it sits in the cascade — these overrides
 * have to reuse the same ID. The trailing segment is the page id, so each rule
 * only affects the page it came from (e09fc55d = home).
 */

/* ===========================================================================
   HERO TITLE — "WELCOME TO / BEEDEE'S / WORLD"
   Lines centred on each other; block centred vertically instead of pinned to
   the bottom of the hero.
   =========================================================================== */

/* Centring the lines applies at every size. */
.hero-home__title {
  text-align: center;
}

@media (min-width: 768px) {
  /* was: align-self: end */
  #w-node-_40f1404d-043d-2326-b86e-75b0a1d2d911-e09fc55d {
    align-self: center;
  }

  /* "WELCOME TO" renders ~899px wide in a ~673px 6-column track — it has
   * always overflowed, invisibly, while everything was flush left. Centring
   * exposed it: lines 2 and 3 centred on the track, line 1 on its own wider
   * box. Sizing the block to its widest line gives all three one centre.
   *
   * NOT max-width:100% — percentages resolve against the 672px track and
   * clamp max-content straight back. Cap against the viewport instead, less
   * the two 32px page gutters.
   *
   * Above 768px only: below that the font clamps to 64px, "WELCOME TO" is
   * wider than the viewport and is meant to wrap, so max-content would push
   * it off the right edge. */
  .hero-home__title {
    width: max-content;
    max-width: calc(100vw - 4rem);
  }
}

/* ===========================================================================
   TOUCH TARGETS  (phones / tablets only — desktop is untouched)

   Measured at 375px: the MENU button is 36x14px with no padding, and the CTA
   links are 22px tall. Apple's HIG asks for ~44pt. Rather than change any
   visible sizing, each control gets an invisible ::after overlay that extends
   only the hit area — layout, spacing and appearance are identical.

   Spacing was checked before applying: .btn-wrap items sit 474px apart and
   footer links have 40px horizontal gaps, so a 44px target cannot overlap a
   neighbour and steal its taps. ::after was confirmed unused on all three.
   =========================================================================== */

@media (pointer: coarse) {
  /* IMPORTANT: only elements that are themselves interactive get the overlay.
     `.btn-wrap` is an <a> for links, but on the contact form it is a <div>
     wrapping <input type="submit">. An ::after there would cover the input and
     swallow the tap, leaving a submit button that does nothing — hence the
     `a.` qualifier. The submit input is sized directly instead, further down.

     Same reasoning for a.footer__link-text: the mailto link is an anchor in
     its own right, while the identically-classed elements inside .footer__link
     wrappers are plain divs and must not be targeted. */
  .navbar__menu-btn,
  a.btn-wrap,
  a.footer__link,
  a.footer__link-text,
  a.contact-hero__infos-link {
    position: relative;
  }

  .navbar__menu-btn::after,
  a.btn-wrap::after,
  a.footer__link::after,
  a.footer__link-text::after,
  a.contact-hero__infos-link::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    min-width: 44px;
    min-height: 44px;
    /* hit area only — never painted, never affects layout */
  }

  /* The submit is an invisible <input> overlaying a styled .btn-inner, so
     growing it changes nothing visually. */
  .contact-main__btn-submit {
    min-height: 44px;
  }
}

/* ===========================================================================
   CONTACT FORM — field text size

   .contact-main__field was sized from the raw fluid token (1.1vw) rather than
   the clamp() the design system uses everywhere else. At 390px that computes
   to 4.29px — genuinely unreadable while typing — and it stays under 16px on
   every viewport narrower than ~1454px, i.e. most laptops too.

   Anything under 16px also makes iOS Safari zoom the page on focus, which
   then leaves the form half off-screen.

   max() keeps the intended fluid growth on very wide screens and puts a 16px
   floor under everything else.
   =========================================================================== */

.contact-main__field,
.contact-main__form-select {
  font-size: max(16px, 1.1vw);
}

/* ===========================================================================
   SERVICES — mobile overflow

   .services__item-details carries margin-left:-42px / margin-right:-28px, an
   optical nudge that works at desktop widths. At 375px the right edge lands
   at 379px in a 375px viewport, so 4px gets clipped by the page wrapper.
   Neutralised on small screens only; the desktop nudge is left exactly as
   authored.
   =========================================================================== */

@media (max-width: 767px) {
  .services__item-details,
  .services__item-text {
    margin-left: 0;
    margin-right: 0;
  }
}

/* ===========================================================================
   ABOUT SECTION (home) — kill the scroll-reveal hide

   The title block, sub-paragraph and button ship with inline `opacity: 0`
   (IX2 initial state baked into the HTML) and only fade in after the scroll
   trigger + its authored delay — the section reads as blank orange for a
   couple of seconds. !important beats both the inline style and IX2's
   runtime writes, so the content is simply always visible. Deliberate
   trade-off: no entrance animation for this one section.
   =========================================================================== */

.about [data-w-id] {
  opacity: 1 !important;
  transform: none !important;
}

/* ---------------------------------------------------------------------------
   ABOUT SECTION — text colour

   The "SINCE /'2010" line, the bio paragraph, and the CTA underline inherit
   the site-wide orange (#ff6a00) — but this section's background IS orange,
   so that text has ~zero contrast and is invisible in a standard browser.
   (Phone browsers with force-dark "rescue" it by recolouring it green, which
   is how it was ever seen at all.) Black, per the design of the rest of the
   section's text.
   --------------------------------------------------------------------------- */

/* Root cause was twofold: the elements are ORANGE and carry
 * mix-blend-mode: exclusion. Orange blended onto the orange section
 * background computes to green (the "green text"); black blended onto
 * orange computes to orange, i.e. invisible. So the blend mode must go
 * WITH the colour change — either alone leaves the text unreadable. */
.about .about__subcontent,
.about .about__subcontent * {
  color: #000;
  mix-blend-mode: normal;
}

.about .btn-line {
  background-color: #000;
  mix-blend-mode: normal;
}

/* ===========================================================================
   FOOTER CREDIT — "Powered by Planet369"
   Injected by the build as the footer's very last element on every page.
   Full-width, centred, bold; inherits the footer's black-on-orange.
   =========================================================================== */

.p369-credit {
  /* The footer's orange panel (.footer__background) is position:absolute,
   * and positioned boxes paint ABOVE static content — without a stacking
   * context of its own this div renders UNDER the panel, invisible. */
  position: relative;
  z-index: 1;
  padding: var(--spacing--main) var(--spacing--container-desktop);
  font-weight: 700;
  text-align: center;
  color: #000;
}

/* Requested sizing: eyebrow ("SINCE /'2010") +60%, bio paragraph +40%.
 * Both normally take .text-size-small's clamp(); multiplying each term of
 * the same clamp keeps them fluid across breakpoints instead of pinning a
 * pixel size that only suits one screen. */
.about .about__eyebrow.text-size-small {
  font-size: clamp(calc(var(--font-size-mobile--small) * 1.6),
                   calc(var(--font-size-fluid--small) * 1.6),
                   calc(var(--font-size-fluid--small) * 1.6));
}

.about .about__paragraph.text-size-small {
  font-size: clamp(calc(var(--font-size-mobile--small) * 1.4),
                   calc(var(--font-size-fluid--small) * 1.4),
                   calc(var(--font-size-fluid--small) * 1.4));
}

/* ===========================================================================
   ABOUT SECTION (home) — photo left, text right
   Was: content in columns 1-9, photo in 10-12 (auto-placed in DOM order).
   Explicit line numbers are used rather than reordering the markup, so the
   DOM keeps heading-before-image reading order for screen readers.
   =========================================================================== */

@media (min-width: 768px) {
  /* .about__visual — was: span 3 / span 3  (landed in columns 10-12) */
  #w-node-_0f3862d4-a363-eea1-6d6c-fe7f6443767d-e09fc55d {
    grid-column: 1 / 4;
    grid-row: 1;
  }

  /* .about__content — was: span 9 / span 9  (landed in columns 1-9) */
  #w-node-_5b03893a-46de-06cb-a55e-b2a7e84ccc67-e09fc55d {
    grid-column: 4 / 13;
    grid-row: 1;
  }
}

/* ===========================================================================
   COUNT-UP NUMBER (About heading)
   Width is pinned in JS at the final value, so counting 0 -> 10,000 cannot
   reflow the sentence. tabular-nums keeps the digits from jittering as they
   change; inline-block is what makes min-width apply at all.
   =========================================================================== */

.count-up {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}