/* =============================================================================
   globals.css — base element styles, applied site-wide
   Sets default text rendering and element resets beyond reset.css.
   background-color and font-family are handled by layout.css.
   ============================================================================= */

body {
  color: var(--color-white);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.2;
  font-weight: 700;
  color: var(--color-white);
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  opacity: 0.8;
}

button {
  cursor: pointer;
  font-family: var(--font-family-base);
}


/* =============================================================================
   Utility: gradient text
   Applies --gradient-accent as a text fill.
   Usage: add class="gradient-text" to any inline or block text element.
   ============================================================================= */

.gradient-text {
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent; /* fallback for browsers that skip -webkit-text-fill-color */
}


/* =============================================================================
   Utility: icon-mask
   Root-cause fix for recoloring externally-referenced SVG icons from CSS.

   An <img src="icon.svg"> can never be recolored by CSS — the browser
   treats it as an opaque embedded resource, and `color`/`fill` from the
   page have no effect on it (this is what caused the Instagram icon to
   stay white/gray after the icon's own color was changed at the CSS
   level: only the label text picked it up, because .gradient-text only
   ever touched text glyphs, never the <img>). Baking a color or gradient
   into the SVG file itself "fixes" one icon but doesn't scale — every
   future icon needing a color would need its own hand-edited copy.

   `mask-image` solves this properly: the SVG supplies only a shape (its
   own internal fill color is irrelevant — only opacity/alpha matters), and
   the element's own `background` becomes the visible color, exactly like
   `fill="currentColor"` would if the SVG were inlined — except this works
   for icons referenced from an external file, and for gradients, which
   `currentColor` can't express at all.

   Usage: add class="icon-mask" to a <span> (or similar empty element,
   sized via width/height), then set `mask-image` / `-webkit-mask-image`
   (per-icon, since the file path differs each time) and `width`/`height`
   in a component-specific rule. Defaults to `background-color: currentColor`
   so most icons need zero extra color rules — they automatically pick up
   whatever `color` is already set in that context (e.g. a link's resting/
   hover color), the same "just works" behavior `currentColor` gives inline
   SVGs. Override `background` directly (see .site-footer__social-icon)
   for a gradient or other non-solid treatment.
   ============================================================================= */

.icon-mask {
  display: inline-block;
  background-color: currentColor;      /* default: inherits color like fill="currentColor" would */
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}


/* =============================================================================
   Utility: img-rounded
   Applies a small 4px corner radius. Intended for supporting/gallery
   photography (route reference photos, additional gallery shots, the
   real-size photo inside the Scale Reference modal) — deliberately NOT for
   an artwork's own hero image at the top of its detail page, which keeps
   its existing square-cornered treatment unchanged.
   Usage: add class="img-rounded" to any <img> that should get this radius.
   ============================================================================= */

.img-rounded {
  border-radius: 4px;
}