/*
Theme Name: Bar Biloba — Coming Soon
Theme URI: https://barbiloba.com
Author: Odyssee
Description: Minimaal coming-soon thema voor Bar Biloba, Nijmegen. Tekst-only, ABC Monument Grotesk Mono op merkgroen.
Version: 1.4.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;
  --bb-cream: #f2efd9;
  /* Instagram-tegel: lichter dan het watermerk, zodat hij in de hoek
     opvalt zonder de tekst te beconcurreren. */
  --bb-social-tile: #166b57;
  --bb-social-tile-hover: #218c6f;
  --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;
  --bb-size: clamp(0.9375rem, 0.7rem + 0.72vw, 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;
  display: grid;
  place-items: center;
  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 svg {
  display: block;
  /* Past altijd binnen het scherm, met lucht aan de zijkanten. */
  width: min(1180px, 88vw);
  height: auto;
  fill: var(--bb-green-light);
}

/* Rond de cursor lost het watermerk op. Masker zit op de container, zodat
   de coördinaten gewoon viewport-coördinaten zijn. */
@media (hover: hover) and (pointer: fine) {
  .bb-mark {
    transition: --bb-fade 500ms ease-out;

    --bb-mask: radial-gradient(
      circle var(--bb-r) at var(--bb-x) var(--bb-y),
      rgb(0 0 0 / calc(1 - var(--bb-fade))) 0%,
      rgb(0 0 0 / calc(1 - var(--bb-fade) * 0.72)) 45%,
      rgb(0 0 0 / 1) 100%
    );

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

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

/* ---------------------------------------------------------------
   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,
   maar tonaal in Biloba-groen in plaats van wit uitgespaard.
   --------------------------------------------------------------- */

.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 in de achtergrondkleur, net als het watermerk. */
.bb-social-glyph {
  fill: var(--bb-green);
}

.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;
}