/*
Theme Name: Ligatures SIG
Theme URI: https://ligatures.fba.up.pt/
Author: Pedro Amado — FBAUP / i2ADS (Ligatures SIG)
Author URI: https://ligatures.fba.up.pt/
Description: A simple, full-featured classic theme for the Ligatures SIG. Black & white core with a pink/purple/deep-blue accent palette, light/dark with a toggle, Clash Display + Satoshi typography, a sticky anchor navbar, full-width / 1280 wide / 640 content widths for the block editor, horizontal post-card thumbnails, and a footer with search. Built for vanilla WordPress + the default editor.
Version: 1.0.0
Requires at least: 6.2
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ligatures
Tags: blog, two-columns, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, block-styles, wide-blocks, full-width-template
*/

/* ============================================================================
   1. FONTS — self-hosted Clash Display (headings) + Satoshi (body), from temp-site
   ============================================================================ */
@font-face {
  font-family: "Clash Display";
  src: url("assets/fonts/ClashDisplay-Variable.woff2") format("woff2");
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("assets/fonts/Satoshi-Variable.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("assets/fonts/Satoshi-VariableItalic.woff2") format("woff2");
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}

/* ============================================================================
   2. DESIGN TOKENS  (light theme = default)
   ============================================================================ */
:root {
  /* Type families (temp-site) */
  --font-display: "Clash Display", system-ui, sans-serif;
  --font-body:
    "Satoshi", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif;

  /* Palette: full black/white + light pink · pink · light purple · purple · deep blue */
  --c-white: #ffffff;
  --c-black: #000000;
  --c-pink-light: #f7cae0;
  --c-pink: #e35197;
  --c-purple-light: #977cbf;
  --c-purple: #6d28d9;
  --c-blue: #08058f;

  /* Semantic roles (LIGHT) — body text is full black; colours are accents/large */
  --bg: var(--c-white);
  --bg-soft: #faf5f9;
  --ink: var(--c-black);
  --muted: #5a5a5a; /* ~7:1 on white               */
  --link: var(--c-blue); /* ~13:1 on white              */
  --link-hover: var(--c-pink);
  --accent: var(--c-pink); /* large / decorative          */
  --accent-2: var(--c-purple);
  --shadow: var(--c-purple); /* offset "sticker" shadow     */
  --line: rgba(0, 0, 0, 0.14);
  --line-strong: rgba(0, 0, 0, 0.85);
  --card-bg: var(--c-white);

  /* Footer = constant deep-blue band in both themes (white text/logos legible) */
  --footer-bg: var(--c-blue);
  --footer-ink: #ffffff;
  --footer-soft: rgba(255, 255, 255, 0.74);

  /* Type scale — major third (×1.25); base 1.375rem (22px), bumped for big screens.
     Math: base × 1.25ⁿ.  These also power the editor font-size presets (theme.json). */
  --step--2: 0.88rem; /* ~14px                          */
  --step--1: 1.1rem; /* ~17.6px — "Small" preset        */
  --step-0: 1.375rem; /* 22px    — "Medium" / body base   */
  --step-1: 1.7188rem; /* ~27.5px — "Large"               */
  --step-2: 2.1484rem; /* ~34.4px — "X-Large"             */
  --step-3: 2.6855rem; /* ~43px   — "XX-Large"            */
  --step-4: 3.3569rem; /* ~53.7px                         */
  --step-5: 4.1962rem; /* ~67px                           */
  --step-6: 5.2452rem; /* ~84px                           */

  /* Spacing */
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2.25rem;
  --space-xl: 3.5rem;
  --space-2xl: 5.5rem;

  /* Layout widths */
  --content: 640px; /* "normal" column           */
  --wide: 1280px; /* site-wide / .alignwide     */
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --header-h: 4.25rem;

  color-scheme: light dark;
}

/* Dark theme: full black canvas. Applies on OS-dark (unless forced light) or via toggle. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000000;
    --bg-soft: #0c0c0c;
    --ink: #ffffff;
    --muted: #b5b5b5;
    --link: var(--c-pink-light);
    --link-hover: var(--c-pink);
    --accent: var(--c-pink);
    --accent-2: var(--c-purple-light);
    --shadow: var(--c-pink);
    --line: rgba(255, 255, 255, 0.18);
    --line-strong: rgba(255, 255, 255, 0.85);
    --card-bg: #0c0c0c;
  }
}
:root[data-theme="dark"] {
  --bg: #000000;
  --bg-soft: #0c0c0c;
  --ink: #ffffff;
  --muted: #b5b5b5;
  --link: var(--c-pink-light);
  --link-hover: var(--c-pink);
  --accent: var(--c-pink);
  --accent-2: var(--c-purple-light);
  --shadow: var(--c-pink);
  --line: rgba(255, 255, 255, 0.18);
  --line-strong: rgba(255, 255, 255, 0.85);
  --card-bg: #0c0c0c;
}

/* ============================================================================
   2b. EDITOR PALETTE TOKENS — brand colours for the block editor, tokenised so
       they INVERT with the colour scheme (a "light" section becomes its dark
       equivalent in dark mode, and vice-versa; mid tones stay). Names mirror the
       theme.json palette slugs. Plus WordPress layout-width fallbacks.
   ============================================================================ */
:root {
  --col-gray-light: #ededed;
  --col-gray: #8a8a8a;
  --col-gray-dark: #2b2b2b;
  --col-pink-light: #f7cae0;
  --col-pink: #e35197;
  --col-pink-dark: #9b3361; /* dark / "old" pink */
  --col-purple-light: #cdb8ec;
  --col-purple: #6d28d9;
  --col-purple-dark: #3a1a78;
  --col-blue-light: #ccccf2;
  --col-blue: #08058f;

  /* Constrained-layout widths (also declared in theme.json). Lets full-width
     groups align their inner content to the same 640 / 1280 as the page. */
  --wp--style--global--content-size: 640px;
  --wp--style--global--wide-size: 1280px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --col-gray-light: #2b2b2b;
    --col-gray-dark: #ededed;
    --col-pink-light: #9b3361;
    --col-pink-dark: #f7cae0;
    --col-purple-light: #3a1a78;
    --col-purple-dark: #cdb8ec;
    --col-blue-light: #08058f;
    --col-blue: #ccccf2;
  }
}
:root[data-theme="dark"] {
  --col-gray-light: #2b2b2b;
  --col-gray-dark: #ededed;
  --col-pink-light: #9b3361;
  --col-pink-dark: #f7cae0;
  --col-purple-light: #3a1a78;
  --col-purple-dark: #cdb8ec;
  --col-blue-light: #08058f;
  --col-blue: #ccccf2;
}

/* ============================================================================
   3. RESET / BASE
   ============================================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}

html {
  scroll-padding-top: calc(var(--header-h) + 1rem);
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.8;
  color: var(--ink);
  background: var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--link);
  text-underline-offset: 0.18em;
}
a:hover {
  color: var(--link-hover);
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
::selection {
  background: var(--accent);
  color: #fff;
}

/* ============================================================================
   4. TYPOGRAPHY (temp-site hierarchy)
   ============================================================================ */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h1 {
  font-size: clamp(var(--step-3), 6vw, var(--step-5));
  font-weight: 700;
}
h2 {
  font-size: clamp(var(--step-2), 4.5vw, var(--step-3));
}
h3 {
  font-size: var(--step-1);
}
h4 {
  font-size: var(--step-0);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
p,
li,
dd,
dt {
  font-size: var(--step-0);
}
strong,
b {
  font-weight: 700;
}
em,
i {
  font-style: italic;
}
small {
  font-size: var(--step--1);
}
blockquote {
  border-left: 4px solid var(--accent);
  padding-left: var(--space-m);
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 500;
}
code,
pre,
kbd {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.9em;
}
pre {
  background: var(--bg-soft);
  padding: var(--space-m);
  overflow: auto;
  border: 1px solid var(--line);
}
hr {
  border: 0;
  height: 2px;
  background: var(--line-strong);
  margin-block: var(--space-l);
}

/* Section "eyebrow" tag (anchored sections / archive headers) */
.eyebrow {
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
}

/* ============================================================================
   5. LAYOUT — containers + WordPress block alignment (full / wide / content)
   ============================================================================ */
.wrap {
  width: 100%;
  max-width: var(--content);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap-wide {
  width: 100%;
  max-width: var(--wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.site-main {
  padding-block: var(--space-2xl);
}
/* Post/page that STARTS WITH A TITLE → a slight space (~2em) below the navbar.
   If it starts with a feature image, it sticks flush to the navbar (rule below). */
body.single .site-main,
body.page .site-main {
  padding-top: 2em;
}
body.has-feature-image .site-main {
  padding-top: 0;
}
body.home .site-main {
  padding-top: 0;
} /* front-page hero flush (wins over .page) */

/* Constrained content stream. .entry-content is full-bleed (its parent .site-main
   has no max-width), so its DIRECT CHILDREN self-constrain — no 100vw hacks and
   no horizontal scrollbars. Normal → 640; wide → 1280; full → true edge-to-edge. */
.entry-content > * {
  max-width: var(--content);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.entry-content > .alignwide {
  max-width: var(--wide);
}
.entry-content > .alignfull {
  max-width: none;
  padding-inline: 0;
}

/* Alignment helpers (nested blocks, headers, etc.) */
.alignwide {
  max-width: var(--wide);
  margin-inline: auto;
}
.aligncenter {
  margin-inline: auto;
}
.alignleft {
  float: left;
  margin: 0.3em var(--space-m) var(--space-s) 0;
  max-width: 50%;
}
.alignright {
  float: right;
  margin: 0.3em 0 var(--space-s) var(--space-m);
  max-width: 50%;
}

/* Constrained content inside FULL-WIDTH groups: keep a gutter on small screens so
   the 640px inner column doesn't touch the edges (desktop centres with whitespace). */
@media (max-width: 700px) {
  .is-layout-constrained > :where(:not(.alignfull)) {
    padding-inline: var(--gutter);
  }
}

/* Vertical rhythm — kept CONSISTENT inside and outside groups.
   (theme.json blockGap = 1.5rem spaces blocks inside groups to match these.) */
.entry-content > * + * {
  margin-top: var(--space-m);
} /* top-level blocks            */
.entry-content h2 {
  margin-top: var(--space-xl);
} /* extra air above headings    */
.entry-content .wp-block-group > :first-child,
.entry-content .wp-block-columns > :first-child,
.entry-content .wp-block-column > :first-child {
  margin-top: 0;
} /* no gap at a group's top edge */
/* Full-width groups stack FLUSH (no gap) so back-to-back colour bands are seamless.
   Their inner content keeps its own spacing & padding. */
.entry-content > .wp-block-group {
  margin-block: 0;
}
.entry-content ul,
.entry-content ol {
  padding-left: 2.2em;
  list-style: disc !important;
}
.entry-content li + li {
  margin-top: 0.4em;
}
.entry-content img {
  height: auto;
}

/* Core blocks honour the editor's chosen widths automatically (flex/grid).
   These just make columns stack on mobile and buttons match the brand. */
.wp-block-columns {
  gap: var(--space-l);
}
@media (max-width: 781px) {
  .wp-block-columns {
    gap: var(--space-m);
  }
}
.wp-block-button__link {
  background: var(--accent);
  color: #fff;
  border-radius: 0;
  font-family: var(--font-display);
  font-weight: 500;
  padding: 0.7em 1.4em;
}
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--ink);
  border: 2px solid var(--ink);
}
.is-style-outline .wp-block-button__link:hover {
  background: var(--ink);
  color: var(--bg);
}
.wp-block-image figcaption,
figcaption {
  color: var(--muted);
  font-size: var(--step--1);
  text-align: center;
}
.wp-block-separator {
  border: 0;
  height: 2px;
  background: var(--line-strong);
}
.wp-block-pullquote,
.wp-block-quote {
  border-color: var(--accent);
}
.skip-link {
  position: absolute;
  left: 1rem;
  top: -100%;
  z-index: 200;
  background: var(--ink);
  color: var(--bg);
  padding: 0.6em 1em;
  font-weight: 700;
}
.skip-link:focus {
  top: 1rem;
}

/* ============================================================================
   6. HEADER — colour stripe + sticky anchor navbar
   ============================================================================ */
.topbar {
  height: 6px;
  background: linear-gradient(
    90deg,
    var(--c-pink-light),
    var(--c-purple-light),
    var(--c-purple),
    var(--c-blue),
    var(--c-pink)
  );
  position: sticky;
  top: 0;
  z-index: 60;
}
.site-header {
  position: sticky;
  top: 6px;
  z-index: 55;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 2px solid var(--line);
}
.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  min-height: var(--header-h);
}
.site-branding {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}
.brand-link {
  display: inline-flex;
  align-items: center;
}
.brand-logo {
  height: 38px;
  width: auto;
  display: block;
}
.brand-logo--dark {
  display: none;
} /* black on light bg, white on dark bg */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand-logo--light {
    display: none;
  }
  :root:not([data-theme="light"]) .brand-logo--dark {
    display: block;
  }
}
:root[data-theme="dark"] .brand-logo--light {
  display: none;
}
:root[data-theme="dark"] .brand-logo--dark {
  display: block;
}
.site-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-0);
  color: var(--ink);
  text-decoration: none;
  line-height: 1.1;
}
.site-title:hover {
  color: var(--accent);
}

.nav-controls {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* Primary menu */
.primary-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.primary-menu li {
  position: relative;
}
.primary-menu a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0.4em 0.7em;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
}
.primary-menu a:hover {
  background: var(--accent);
  color: #fff;
}
.primary-menu .current-menu-item > a,
.primary-menu a[aria-current="true"] {
  color: var(--accent);
}
.primary-menu .current-menu-item > a:hover {
  color: #fff;
}

/* Sub-menus */
.primary-menu ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 12rem;
  background: var(--bg);
  border: 2px solid var(--line-strong);
}
.primary-menu li:hover > ul,
.primary-menu li:focus-within > ul {
  display: block;
}

/* Theme toggle + mobile menu button */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: none;
  color: var(--ink);
  cursor: pointer;
}
.theme-toggle:hover {
  color: var(--accent);
}
.nav-toggle {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.4em 0.8em;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink);
  background: var(--bg);
  border: 2px solid var(--line-strong);
}
.nav-toggle:hover {
  background: var(--ink);
  color: var(--bg);
}

@media (max-width: 860px) {
  .primary-menu {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--bg);
    border-bottom: 2px solid var(--line-strong);
    padding: var(--space-2xs) var(--gutter) var(--space-s);
  }
  .primary-menu.is-open {
    display: block;
  }
  .primary-menu ul {
    flex-direction: column;
  }
  .primary-menu a {
    border-top: 2px solid var(--line);
  }
  .primary-menu ul ul {
    position: static;
    border: 0;
    padding-left: var(--space-m);
  }
  .primary-menu li:hover > ul {
    display: block;
  }
}
@media (min-width: 861px) {
  .nav-toggle {
    display: none;
  }
  .primary-menu ul {
    display: flex;
    align-items: center;
    gap: 0.1rem;
  }
}

/* ============================================================================
   7. HERO / FEATURE (full-width). Front page hero = an .alignfull block, or .hero group.
   ============================================================================ */
.hero {
  padding-block: clamp(3rem, 9vw, 6rem);
}
.hero__eyebrow {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 500;
}
.hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(var(--step-4), 12vw, var(--step-6));
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--accent);
}

/* ============================================================================
   8. POST CARDS — archive lists + in-page Query Loop / Latest Posts blocks.
      Thumbnail: horizontal, ~100px tall, ON TOP, original aspect ratio kept.
   ============================================================================ */
.post-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}
@media (min-width: 700px) {
  .post-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1080px) {
  .post-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}
.card__thumb {
  display: block;
  margin-bottom: var(--space-xs);
}
/* Key rule: FIT WITHIN ~100px tall and the card width using max-* with auto
   dimensions → the original aspect ratio is always preserved; the image is
   never cropped and never distorted (a horizontal ≈2:1 source renders ~200×100;
   a very wide one simply shrinks to fit the card width, staying proportional). */
.card__thumb img {
  max-height: 100px;
  max-width: 100%;
  width: auto;
  height: auto;
}
.card__title {
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.1;
}
.card__title a {
  color: var(--ink);
  text-decoration: none;
}
.card__title a:hover {
  color: var(--accent);
}
.card__meta {
  font-size: var(--step--1);
  color: var(--muted);
}
.card__meta a {
  color: var(--muted);
}
.card__excerpt {
  color: var(--ink);
}
.read-more {
  font-family: var(--font-display);
  font-weight: 500;
  text-decoration: none;
}
.read-more::after {
  content: " →";
}

/* Make the core Query Loop / Latest Posts blocks match the card look */
.wp-block-post-template,
.wp-block-latest-posts.is-grid {
  gap: var(--space-xl);
}
/* Reset any fixed height / aspect-ratio the editor may set on these blocks, so the
   image fits within ~100px tall WITHOUT cropping or distortion (ratio preserved). */
.wp-block-post-featured-image,
.wp-block-latest-posts__featured-image {
  aspect-ratio: auto !important;
  height: auto !important;
}
.wp-block-post-featured-image img,
.wp-block-latest-posts__featured-image img {
  max-height: 100px;
  max-width: 100%;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  aspect-ratio: auto !important;
}
.wp-block-post-title {
  font-family: var(--font-display);
}
.wp-block-post-title a {
  color: var(--ink);
  text-decoration: none;
}
.wp-block-post-title a:hover {
  color: var(--accent);
}
.wp-block-post-date,
.wp-block-post-terms {
  color: var(--muted);
  font-size: var(--step--1);
}

/* ============================================================================
   9. SINGLE / PAGE
   ============================================================================ */
.entry-header {
  margin-bottom: var(--space-l);
}
.entry-title {
  font-size: clamp(var(--step-3), 6vw, var(--step-4));
}
.entry-meta {
  color: var(--muted);
  font-size: var(--step--1);
  margin-top: var(--space-xs);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em 1em;
}
.entry-meta a {
  color: var(--muted);
}
.featured-media {
  margin-bottom: var(--space-l);
}
.featured-media img {
  width: 100%;
  height: auto;
}
.entry-footer {
  margin-top: var(--space-xl);
  padding-top: var(--space-m);
  border-top: 2px solid var(--line);
  font-size: var(--step--1);
  color: var(--muted);
}
.post-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--space-m);
  margin-top: var(--space-xl);
}
.post-nav a {
  font-family: var(--font-display);
  font-weight: 500;
  text-decoration: none;
}
.page-header {
  margin-bottom: var(--space-xl);
}
.page-title {
  font-size: clamp(var(--step-3), 6vw, var(--step-4));
}

/* ============================================================================
   10. SEARCH FORM
   ============================================================================ */
.search-form {
  display: flex;
  gap: 0;
  width: 100%;
  max-width: 30rem;
}
.search-form .search-field {
  flex: 1 1 0;
  min-width: 0; /* let the input shrink — prevents mobile horizontal overflow */
  min-height: 48px;
  padding: 0.5em 0.8em;
  font: inherit;
  font-size: var(--step-0);
  color: var(--ink);
  background: var(--bg);
  border: 2px solid var(--line-strong);
}
.search-form .search-submit {
  min-height: 48px;
  padding: 0 1.1em;
  font-family: var(--font-display);
  font-weight: 600;
  cursor: pointer;
  color: var(--bg);
  background: var(--ink);
  border: 2px solid var(--ink);
}
.search-form .search-submit:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* ============================================================================
   11. FOOTER — deep-blue band; widgets (logos), footer menu, search, info
   ============================================================================ */
.site-footer {
  background: var(--footer-bg);
  color: var(--footer-ink);
  padding-block: var(--space-2xl);
  margin-top: var(--space-2xl);
}
.site-footer a {
  color: #fff;
}
.site-footer a:hover {
  color: var(--c-pink-light);
}

/* Footer widgets STACK by default (each clears left & right). For a horizontal
   logo strip, use a Row or Gallery block inside ONE widget. Blocks can be set to
   narrow / wide / full width in the widget editor (alignment rules below). */
.footer-widgets {
  margin-bottom: var(--space-xl);
}
.footer-widget + .footer-widget {
  margin-top: var(--space-l);
}
.footer-widget .alignwide {
  max-width: var(--wide);
  margin-inline: auto;
}
.footer-widget .alignfull {
  max-width: none;
}
.footer-widget__title {
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--footer-soft);
  margin-bottom: var(--space-s);
}
.footer-widget img {
  display: inline-block;
}

/* Footer logos: white SVGs/PNGs read on the blue band; keep them tidy */
.footer-widget .wp-block-image img,
.footer-widget figure img {
  max-height: 46px;
  width: auto;
}

.footer-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em 1.5em;
}
.footer-menu a {
  font-family: var(--font-display);
  font-weight: 500;
  text-decoration: none;
}

.footer-search {
  margin-block: var(--space-l);
}
.footer-search .search-field {
  background: transparent;
  color: #fff;
  border-color: var(--footer-soft);
}
.footer-search .search-field::placeholder {
  color: var(--footer-soft);
}
.footer-search .search-submit {
  background: #fff;
  color: var(--c-blue);
  border-color: #fff;
}
.footer-search .search-submit:hover {
  background: var(--c-pink);
  color: #fff;
  border-color: var(--c-pink);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s) var(--space-l);
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-l);
  border-top: 2px solid var(--footer-soft);
  color: var(--footer-soft);
  font-size: var(--step--1);
}

/* ============================================================================
   12. 404
   ============================================================================ */
.error-404 {
  padding-block: var(--space-2xl);
  text-align: center;
}
.error-404 .code {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(5rem, 28vw, 14rem);
  line-height: 0.85;
  color: var(--accent);
  letter-spacing: -0.04em;
}
.error-404 .quip {
  font-family: var(--font-display);
  font-size: clamp(var(--step-2), 5vw, var(--step-4));
  margin-top: var(--space-s);
}
.error-404 .sub {
  color: var(--muted);
  max-width: 46ch;
  margin: var(--space-m) auto 0;
}
.error-404 .actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  justify-content: center;
  margin-top: var(--space-l);
}
/* ~2em spacer above a small, muted helper line */
.error-404__hint {
  margin: 2em auto 0;
  max-width: 52ch;
  font-size: var(--step--1);
  color: var(--muted);
}

/* ============================================================================
   13. BUTTONS / UTILITIES
   ============================================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 48px;
  padding: 0.6em 1.3em;
  font-family: var(--font-display);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid var(--ink);
  background: var(--accent);
  color: #fff;
}
.btn--ghost {
  background: transparent;
  color: var(--ink);
}
.btn--ghost:hover {
  background: var(--ink);
  color: var(--bg);
}

/* Hover for pink filled buttons (.btn + editor buttons): keep text BLACK & visible
   (fixes the pink-on-pink disappearing text), lift it "towards the user", and add a
   solid offset shadow (no blur). The interactive search button is excluded. */
.btn:not(.btn--ghost):hover,
.btn:not(.btn--ghost):focus-visible,
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
.wp-block-button:not(.is-style-outline) .wp-block-button__link:focus-visible {
  color: #000;
  background-color: color-mix(in srgb, var(--accent) 82%, #fff);
}
@media (prefers-reduced-motion: no-preference) {
  .btn,
  .wp-block-button__link {
    transition:
      transform 0.12s ease,
      box-shadow 0.12s ease,
      background-color 0.12s ease,
      color 0.12s ease;
  }
  .btn:hover,
  .btn:focus-visible,
  .wp-block-button__link:hover,
  .wp-block-button__link:focus-visible {
    transform: translate(-2px, -3px);
    box-shadow: 5px 6px 0 var(--c-purple);
  }
}
.to-top {
  position: fixed;
  right: var(--gutter);
  bottom: var(--gutter);
  z-index: 40;
  width: 48px;
  height: 48px;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  color: var(--bg);
  border: 2px solid var(--ink);
  text-decoration: none;
  font-size: var(--step-1);
}
.to-top.is-visible {
  display: inline-flex;
}
.to-top:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* WordPress required helper classes */
.alignnone {
  max-width: 100%;
}
.wp-caption {
  max-width: 100%;
}
.sticky,
.bypostauthor {
} /* required by Theme Check */
.gallery-caption {
}

/* Admin bar offset for the sticky header */
body.admin-bar .topbar {
  top: 32px;
}
body.admin-bar .site-header {
  top: calc(32px + 6px);
}
@media (max-width: 782px) {
  body.admin-bar .topbar {
    top: 46px;
  }
  body.admin-bar .site-header {
    top: calc(46px + 6px);
  }
}