/* ==========================================================================
   (De)Scaling Madrid — Base elements & brand utilities
   ========================================================================== */

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: var(--fw-black); line-height: var(--lh-heading); }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; }

:where(a, button):focus-visible {
  outline: var(--bw-strong) solid var(--focus-ring);
  outline-offset: 2px;
}

/* ---- Brand background: azulejo tile texture ----------------------------- */
.tile-bg {                       /* soft connected azulejo grid on cream */
  background-color: var(--cream);
  background-image: url('../assets/patterns/azulejo-soft.svg');
  background-size: 96px auto;
  background-position: center;
}
.tile-bg--faint { opacity: 1; }
.tile-bg::before {               /* use on a positioned wrapper for opacity control */
  content: "";
}
.tile-bg-soft {
  position: relative;
  background-color: var(--cream);
  isolation: isolate;
}
.tile-bg-soft::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url('../assets/patterns/azulejo-soft.svg');
  background-size: 96px auto;
  opacity: 0.7;
  pointer-events: none;
}

/* ---- Geometric brand shapes (clip-paths) -------------------------------- */
.shape-diamond {                 /* horizontal lozenge / hexagon banner */
  clip-path: polygon(0 50%, 12% 0, 88% 0, 100% 50%, 88% 100%, 12% 100%);
}
.shape-chevron-down {            /* downward pennant (speaker pin) */
  clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%);
}
.shape-chevron-up {
  clip-path: polygon(50% 0, 100% 30%, 100% 100%, 0 100%, 0 30%);
}
.shape-rhombus {                 /* horizontal rhombus — Madrid Metro pictogram */
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

/* ---- The integral "S" mark (long-s) as a text helper -------------------- */
.brand-s { font-family: var(--font-serif); font-style: italic; }

/* ---- Misc utilities ----------------------------------------------------- */
.u-cap { text-transform: uppercase; }
.u-flower-bullet { display: inline-flex; align-items: center; gap: 0.5em; }
.u-flower-bullet::before {
  content: "";
  width: 0.9em; height: 0.9em;
  background: url('../assets/logos/flower-cobalt.svg') center/contain no-repeat;
  flex: none;
}