/* PMF Metalwork — shared custom styles
   Everything else (layout, spacing, type, colour) is handled by Tailwind
   utility classes directly in the HTML. This file only covers the handful
   of effects Tailwind's utilities can't express on their own: the
   image-tile hover overlays used on Home, Gallery and the Metals hub. */

body {
  background: #ffffff;
}

/* =======================================================================
   Typography, links, buttons, nav — the classes below are what actually
   govern how these elements look. Change a rule here and it updates
   everywhere that class is used, across all 14 pages.
   (Brand colours/fonts themselves are tokenised once in
   js/tailwind-config.js — these rules just consume those same values,
   written out literally since this file is plain CSS, not Tailwind.)
   ======================================================================= */

/* --- Eyebrow / kicker text ------------------------------------------- */
.eyebrow {
  color: #f78d2d;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.3em;
}
.eyebrowalt {
  color: grey;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.3em;
}
.eyebrow--tight {
  letter-spacing: 0.2em;
}

/* --- Headings ---------------------------------------------------------
   Family/weight/colour live here; responsive font-size still comes from
   a Tailwind size utility (text-4xl, sm:text-5xl, etc.) alongside these
   classes, since size varies by context (hero vs section heading) while
   family/weight/colour never should. */
.h1,
.h2,
.h3 {
  font-family: "Work Sans", sans-serif;
  font-weight: 300;
  color: #242424;
}
.h1 {
  line-height: 1.2;
  letter-spacing: -0.025em;
}
.h2 {
  line-height: 1.3;
}

/* --- Links -------------------------------------------------------------
   Default content link: purple, darkens on hover. */
.link {
  color: #4f008c;
  transition: color 0.15s ease;
  font-weight: 600;
}
.link:hover {
  color: #f78d2d;
}

/* Footer variant: purple, shifts to orange on hover. */
.link-footer {
  color: #4f008c;
  transition: color 0.15s ease;
}
.link-footer:hover {
  color: #f78d2d;
}

/* --- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-block;
  border-radius: 0.125rem;
  font-size: 0.875rem;
  font-weight: 500;
  text-align: center;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-primary {
  padding: 0.75rem 1.75rem;
  background: #4f008c;
  color: #ffffff;
}
.btn-primary:hover {
  background: #f78d2d;
}
.btn-outline {
  padding: 0.75rem 1.75rem;
  border: 1px solid rgba(36, 36, 36, 0.15);
  color: #4f008c;
}
.btn-outline:hover {
  border-color: #f78d2d;
  color: #ffffff;
  background: #f78d2d;
}

/* Small pill-style link (Gallery's "jump to category" links) */
.tag-link {
  display: inline-block;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  border: 1px solid rgba(36, 36, 36, 0.15);
  border-radius: 0.125rem;
  color: #242424;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.tag-link:hover {
  border-color: #4f008c;
  color: #4f008c;
}

/* --- Header / navigation bar --- */
.site-header {
  background-color: #F7F3FA;
}

/* --- Nav links (header, both desktop row and mobile disclosure panel) --- */
.nav-link {
  color: #4f008c;
  transition: color 0.15s ease;
  font-weight: 500;
}
.nav-link:hover {
  color: #f78d2d;
}
.nav-link.is-active {
  color: #f78d2d;
  font-weight: 700;
}

/* --- Tile hover effect: Home, Gallery -------------------------------- */
/* Image fills the tile; on hover-capable devices a purple gradient
   overlay reveals a title + description. On touch devices there's no
   hover, so this content should be made visible some other way if ever
   needed (currently only used where the overlay text is decorative). */
.tile {
  position: relative;
  overflow: hidden;
}
.tile img {
  transition: transform 0.6s ease;
}
.tile-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.5rem;
  background: linear-gradient(180deg, rgba(79, 0, 140, 0) 30%, rgba(26, 1, 45, 0.92) 100%);
  opacity: 1;
  transition: opacity 0.35s ease;
}
@media (hover: hover) and (pointer: fine) {
  .tile-overlay {
    opacity: 0;
  }
  .tile:hover img {
    transform: scale(1.06);
  }
  .tile:hover .tile-overlay {
    opacity: 1;
  }
}

/* --- Tile hover effect: Metals hub ------------------------------------ */
/* Same idea, but with a persistent dark title bar at the bottom (title
   always visible on all devices) and the purple gradient + description
   reveal still hover-only on top of that. */
.tile-title-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(20, 20, 20, 0.55);
  padding: 0.85rem 1.5rem;
}
.tile-hover-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.5rem;
  padding-bottom: 3.75rem;
  background: linear-gradient(180deg, rgba(79, 0, 140, 0) 40%, rgba(79, 0, 140, 0.85) 100%);
  opacity: 1;
  transition: opacity 0.3s ease;
}
@media (hover: hover) and (pointer: fine) {
  .tile-hover-overlay {
    opacity: 0;
  }
  .tile:hover img {
    transform: scale(1.06);
  }
  .tile:hover .tile-hover-overlay {
    opacity: 1;
  }
}


/* ============================================================
   TermsFeed cookie consent banner
   ============================================================ */

.cc-nb-main-container {
  background: #E8E6E2 !important;
  color: #5c5c5c !important;
  font-family: "Inter", sans-serif !important;
  padding: 2rem !important;
  box-shadow: 0 0 24px rgba(36, 36, 36, 0.12) !important;
}

/* Heading */
.cc-nb-title {
  color: #242424 !important;
  font-family: "Work Sans", sans-serif !important;
  font-size: 1.5rem !important;
  font-weight: 400 !important;
  margin-bottom: 0.75rem !important;
}

/* Main text */
.cc-nb-text {
  color: #5c5c5c !important;
  font-size: 0.9rem !important;
  line-height: 1.6 !important;
}

/* Buttons container */
.cc-nb-buttons-container {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.6rem !important;
  margin-top: 1.25rem !important;
}

/* All buttons */
.cc-nb-buttons-container button {
  font-family: "Inter", sans-serif !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  border-radius: 0.125rem !important;
  padding: 0.75rem 1.25rem !important;
  transition: all 0.15s ease !important;
}

/* Agree */
.cc-nb-okagree {
  background: #4f008c !important;
  border: 1px solid #4f008c !important;
  color: #ffffff !important;
}

.cc-nb-okagree:hover {
  background: #f78d2d !important;
  border-color: #f78d2d !important;
}

/* Decline */
.cc-nb-reject {
  background: transparent !important;
  border: 1px solid rgba(36, 36, 36, 0.2) !important;
  color: #4f008c !important;
}

.cc-nb-reject:hover {
  background: #f78d2d !important;
  border-color: #f78d2d !important;
  color: #ffffff !important;
}

/* Change preferences */
.cc-nb-changep {
  background: transparent !important;
  border: 1px solid rgba(36, 36, 36, 0.2) !important;
  color: #4f008c !important;
}

.cc-nb-changep:hover {
  border-color: #4f008c !important;
}

@media (max-width: 640px) {
  .cc-nb-main-container {
    padding: 1.25rem !important;
  }

  .cc-nb-title {
    font-size: 1.25rem !important;
  }

  .cc-nb-text {
    font-size: 0.85rem !important;
    line-height: 1.5 !important;
  }

  .cc-nb-buttons-container {
    gap: 0.5rem !important;
  }

  .cc-nb-buttons-container button {
    width: 100% !important;
    padding: 0.65rem 1rem !important;
  }
}