/*
Theme Name: Bar Biloba — Coming Soon
Theme URI: https://barbiloba.nl
Author: Odyssee
Description: Minimaal coming-soon thema voor Bar Biloba, Nijmegen. Tekst-only, ABC Monument Grotesk Mono op merkgroen.
Version: 1.9.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 8.0
License: Proprietary
Text Domain: barbiloba-soon
*/

/* ---------------------------------------------------------------
   Fonts
   1. ABC Monument Grotesk Mono — merkfont (Dinamo, gelicentieerd).
      Zet de .woff2 bestanden in /fonts/ en de site pakt ze direct op.
   2. Roboto Mono — self-hosted fallback zolang (1) er niet staat.
      Zelfde monospace-ritme, geen externe requests (AVG-veilig).
   --------------------------------------------------------------- */

@font-face {
  font-family: "ABC Monument Grotesk Mono";
  src: url("fonts/ABCMonumentGroteskMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "ABC Monument Grotesk Mono";
  src: url("fonts/ABCMonumentGroteskMono-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto Mono Fallback";
  src: url("fonts/robotomono-latin.woff2") format("woff2");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------------
   Tokens — gemeten uit Barbiloba-ontwerpvoorstelv2.pdf
   --------------------------------------------------------------- */

:root {
  --bb-green: #033229;
  /* Watermerk: tonaal lichter dan de achtergrond, blijft ondergeschikt
     aan de tekst. Eén waarde om aan te draaien. */
  --bb-green-light: #0b4a3b;
  /* Waar de cursor overheen gaat licht het watermerk op naar deze tint. */
  --bb-green-glow: #188066;
  /* Crème uit favicon.svg — tekst, Instagram-tegel en favicon delen
     dezelfde waarde. */
  --bb-cream: #fbf9d7;
  /* Instagram-tegel: crème vlak met groene glyph, precies het omgekeerde
     van de favicon. */
  --bb-social-tile: var(--bb-cream);
  --bb-social-tile-hover: #fffef4;
  --bb-social-glyph: var(--bb-green);
  --bb-social-size: clamp(3rem, 1.6rem + 1.9vw, 3.75rem);
  --bb-font: "ABC Monument Grotesk Mono", "Roboto Mono Fallback", ui-monospace,
    "SF Mono", Menlo, Consolas, monospace;
  /* Ondergrens is de mobiele maat; loopt daarna vloeiend op naar 24px. */
  --bb-size: clamp(1.1875rem, 1rem + 0.5vw, 1.5rem);
  --bb-weight: 500;
  --bb-tracking: 0.1em;
  --bb-leading: 1.45;
}

/* ---------------------------------------------------------------
   Reset
   --------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 2rem 1.25rem;
  overflow-x: hidden;

  background-color: var(--bb-green);
  color: var(--bb-cream);

  font-family: var(--bb-font);
  font-size: var(--bb-size);
  font-weight: var(--bb-weight);
  line-height: var(--bb-leading);
  letter-spacing: var(--bb-tracking);
  text-transform: uppercase;
  text-align: center;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------------------------------------------------------------
   Watermerk
   --------------------------------------------------------------- */

@property --bb-fade {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

.bb-mark {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  /* Cursorpositie; mark.js schrijft hier px-waarden in. */
  --bb-x: 50%;
  --bb-y: 50%;
  --bb-r: clamp(180px, 24vmin, 340px);
}

.bb-mark-layer {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.bb-mark-layer svg {
  display: block;
  /* Past altijd binnen het scherm, met lucht aan de zijkanten. */
  width: min(1180px, 88vw);
  height: auto;
}

.bb-mark-base svg {
  fill: var(--bb-green-light);
}

.bb-mark-glow svg {
  fill: var(--bb-green-glow);
}

/* De lichtere laag ligt erbovenop en is alleen rond de cursor zichtbaar,
   dus licht het logo daar op. Masker zit op de laag zelf, zodat de
   coördinaten gewoon viewport-coördinaten zijn. */
.bb-mark-glow {
  opacity: 0;
}

@media (hover: hover) and (pointer: fine) {
  .bb-mark {
    transition: --bb-fade 500ms ease-out;
  }

  .bb-mark-glow {
    opacity: var(--bb-fade);

    --bb-glow-mask: radial-gradient(
      circle var(--bb-r) at var(--bb-x) var(--bb-y),
      rgb(0 0 0 / 1) 0%,
      rgb(0 0 0 / 0.55) 45%,
      rgb(0 0 0 / 0) 100%
    );

    -webkit-mask-image: var(--bb-glow-mask);
    mask-image: var(--bb-glow-mask);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bb-mark {
    transition: none;
  }

  .bb-mark-glow {
    opacity: 0;
  }
}

/* ---------------------------------------------------------------
   Content
   --------------------------------------------------------------- */

.bb-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2.9em;
  max-width: 34em;
}

.bb-card p {
  margin: 0;
  /* De tracking zet rechts een extra spatie; optisch terugduwen. */
  text-indent: var(--bb-tracking);
}

/* ---------------------------------------------------------------
   Instagram — zelfde vorm als bij De Matroos en het Meisje:
   afgeronde tegel met uitgespaarde glyph. Crème vlak, groene glyph,
   precies andersom dan de favicon.
   --------------------------------------------------------------- */

.bb-social {
  position: fixed;
  /* De padding vergroot het aanraakvlak tot 52px zonder het icoon
     optisch van de hoek weg te duwen. */
  right: clamp(0.5rem, 2.2vw, 1.5rem);
  bottom: clamp(0.5rem, 2.2vw, 1.5rem);
  padding: 6px;
  z-index: 2;

  display: inline-flex;
  line-height: 0;
  transition: transform 200ms ease;
}

.bb-social-icon {
  display: block;
  width: var(--bb-social-size);
  height: var(--bb-social-size);
}

.bb-social-tile {
  fill: var(--bb-social-tile);
  transition: fill 200ms ease;
}

/* Glyph uitgespaard uit het crème vlak. */
.bb-social-glyph {
  fill: var(--bb-social-glyph);
}

.bb-social:hover,
.bb-social:focus-visible {
  transform: translateY(-2px);
}

.bb-social:hover .bb-social-tile,
.bb-social:focus-visible .bb-social-tile {
  fill: var(--bb-social-tile-hover);
}

.bb-social:focus-visible {
  outline: 2px solid var(--bb-cream);
  outline-offset: 2px;
  border-radius: 10px;
}

@media (prefers-reduced-motion: reduce) {
  .bb-social,
  .bb-social-tile {
    transition: none;
  }

  .bb-social:hover,
  .bb-social:focus-visible {
    transform: none;
  }
}

/* Schermlezers krijgen de leesbare naam, visueel blijft het één blok. */
.bb-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}