/* ==========================================================================
   DEFAULT — the house theme

   Calm and centred: Instrument Serif headlines, DM Sans body, a single blue
   accent, white surfaces and a dark footer. One width system runs through
   the whole site — the chrome, grids and galleries use the wide container,
   every column of prose (page text, post reader, event page, forms) sits on
   the same reading measure. Light and dark follow the device setting.

   Structure (positioning, menu mechanics, lightbox, map chrome) comes from
   _base.css; everything visual lives here.
   ========================================================================== */

@import url('./_base.css');

:root {
  --accent: #1698cd;
  --accent-dark: #11719a;
  --accent-light: #e2f2fa;
  --text-primary: #1a1d21;
  --text-secondary: #4d545c;
  --text-muted: #737a83;
  --surface: #ffffff;
  --surface-alt: #f4f6f8;
  --surface-raised: #ffffff;
  --border: #d9dee4;
  --border-light: #e8ecf0;
  --header-bg: rgba(255, 255, 255, 0.92);
  --hero-tint: rgba(22, 152, 205, 0.10);
  --footer-bg: #1f2327;
  --footer-text: rgba(255, 255, 255, 0.72);
  --footer-muted: rgba(255, 255, 255, 0.5);
  --footer-rule: rgba(255, 255, 255, 0.1);
  --font-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --font-sans: 'DM Sans', -apple-system, 'Segoe UI', sans-serif;
  --max-width: 1100px;
  --measure: 760px;
  --gutter: 1.5rem;
  --radius: 8px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 3px rgba(20, 30, 40, 0.06);
  --shadow-md: 0 10px 30px rgba(20, 30, 40, 0.10);
  --transition: 0.2s ease;
  --header-height: 72px;
  --gallery-gap: 0.75rem;
  --gallery-min: 240px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --accent: #4fb5e6;
    --accent-dark: #8fd2f3;
    --accent-light: #15303f;
    --text-primary: #eceef1;
    --text-secondary: #c2c8cf;
    --text-muted: #8c949d;
    --surface: #111417;
    --surface-alt: #191d22;
    --surface-raised: #161a1e;
    --border: #2d343c;
    --border-light: #23292f;
    --header-bg: rgba(17, 20, 23, 0.9);
    --hero-tint: rgba(79, 181, 230, 0.12);
    --footer-bg: #0b0d0f;
    --footer-text: rgba(255, 255, 255, 0.72);
    --footer-muted: rgba(255, 255, 255, 0.5);
    --footer-rule: rgba(255, 255, 255, 0.1);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.45);
    color-scheme: dark;
  }
}

html {
  font-size: 16px;
}

body {
  font-family: var(--font-sans);
  color: var(--text-primary);
  background: var(--surface);
  line-height: 1.6;
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--transition);
}

a:hover {
  color: var(--accent-dark);
}

::selection {
  background: var(--accent-light);
  color: var(--text-primary);
}

h1,
h2,
h3,
.logo-title,
.footer-logo,
.card-title,
.banner-heading,
.post-title {
  font-family: var(--font-serif);
  font-weight: 400;
}

/* Category chips: post reader, cards */
.post-category,
.card-category {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: var(--accent-light);
  color: var(--accent-dark);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
  background: var(--header-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-light);
}

.header-inner.container {
  max-width: var(--max-width);
}

.logo {
  color: var(--text-primary);
}

.logo-title {
  font-size: 1.4rem;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.logo-tagline {
  margin-top: 0.2rem;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.main-nav {
  gap: 0.25rem;
}

.nav-link {
  position: relative;
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text-secondary);
  transition: color var(--transition), background var(--transition);
}

.nav-link:hover {
  color: var(--text-primary);
  background: var(--surface-alt);
}

.nav-link.active {
  color: var(--accent);
}

.nav-link.active::after {
  content: '';
  position: absolute;
  left: 0.9rem;
  right: 0.9rem;
  bottom: 0.15rem;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
}

.nav-dropdown {
  padding: 0.4rem;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  box-shadow: var(--shadow-md);
}

.nav-dropdown-link {
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-secondary);
  transition: color var(--transition), background var(--transition);
}

.nav-dropdown-link:hover,
.nav-dropdown-link.active {
  color: var(--accent);
  background: var(--surface-alt);
}

.site-header .header-right .member-entry {
  color: var(--text-primary);
  border-color: var(--border);
}

.lang-selector {
  margin: 0;
}

.lang-toggle,
.lang-option {
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-raised);
  color: var(--text-primary);
  font-size: 0.72rem;
  font-weight: 700;
  transition: border-color var(--transition), background var(--transition), color var(--transition);
}

.lang-toggle:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.lang-dropdown {
  padding: 4px;
  gap: 3px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  box-shadow: var(--shadow-md);
}

.lang-option {
  border-color: transparent;
  background: transparent;
  color: var(--text-secondary);
}

.lang-option.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.lang-option:hover:not(.active) {
  background: var(--surface-alt);
  color: var(--accent);
}

.site-header .menu-toggle {
  color: var(--text-primary);
}

.site-header .menu-toggle span {
  border-radius: 1px;
}

@media (max-width: 768px) {
  .main-nav {
    padding: 0.75rem var(--gutter) 1.5rem;
    background: var(--surface-raised);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-md);
  }

  .nav-link {
    padding: 0.8rem 0.9rem;
    font-size: 1rem;
  }

  .nav-link.active::after {
    display: none;
  }

  .nav-link.active {
    background: var(--accent-light);
  }

  .nav-dropdown {
    padding: 0 0 0.25rem 1rem;
    border: none;
    box-shadow: none;
    background: none;
  }

  .logo-tagline {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero-banner {
  padding: 4.5rem 0 3.25rem;
  background: linear-gradient(180deg, var(--surface-alt) 0%, var(--surface) 100%);
}

.hero-banner .banner-texture {
  background: radial-gradient(ellipse at 50% 0%, var(--hero-tint) 0%, transparent 60%);
}

.banner-content {
  max-width: var(--measure);
  text-align: center;
}

.banner-heading {
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.banner-heading::after {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  margin: 1.25rem auto 0;
  border-radius: 3px;
  background: var(--accent);
}

.banner-subheading {
  margin-top: 1.1rem;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  line-height: 1.6;
  color: var(--text-secondary);
}

.hero-banner.has-image {
  display: flex;
  align-items: center;
  min-height: clamp(360px, 50vh, 560px);
  padding: 5rem 0;
  background: #1a1d21;
  color: #fff;
}

.hero-banner.has-image .banner-overlay {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.15) 40%, rgba(0, 0, 0, 0.6) 100%);
}

.has-image .banner-heading {
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.has-image .banner-heading::after {
  background: #fff;
  opacity: 0.85;
}

.has-image .banner-subheading {
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

/* --------------------------------------------------------------------------
   Page shell and the reading measure
   -------------------------------------------------------------------------- */

.page-content.container,
.page-content.post-layout {
  max-width: var(--max-width);
}

.content-blocks {
  padding: 3rem 0 4.5rem;
}

/* Prose shares one measure everywhere; grids, galleries and embeds run wide */
.block-h2,
.block-h3,
.block-h4,
.block-text,
.block-list,
.block-quote,
.block-image,
.block-text-image,
.post-content {
  max-width: var(--measure);
  margin-left: auto;
  margin-right: auto;
}

.block-h2 {
  margin: 6rem auto 2.5rem;
  font-size: clamp(2rem, 3.6vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-align: center;
  color: var(--text-primary);
}

.block-h2::after {
  content: '';
  display: block;
  width: 40px;
  height: 3px;
  margin: 0.9rem auto 0;
  border-radius: 3px;
  background: var(--accent);
}

.block-h3 {
  margin: 2.5rem auto 0.75rem;
  font-size: 1.75rem;
  line-height: 1.2;
  color: var(--text-primary);
}

.block-h4 {
  margin: 2rem auto 0.5rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.block-text {
  margin-bottom: 1.4rem;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--text-primary);
}

.block-text p {
  margin: 0 0 1em;
}

.block-text p:last-child {
  margin-bottom: 0;
}

.block-text a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.block-text ul,
.block-text ol {
  padding-left: 1.4rem;
  margin: 0.5em 0 1em;
}

.block-text li {
  margin-bottom: 0.3em;
}

.block-text blockquote {
  margin: 1.25em 0;
  padding: 0.25rem 0 0.25rem 1.25rem;
  border-left: 3px solid var(--accent);
  color: var(--text-secondary);
}

.block-text hr {
  border: none;
  height: 1px;
  background: var(--border);
  margin: 2em 0;
}

.block-text h1,
.block-text h2,
.block-text h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: 1.2;
  margin: 1.4em 0 0.5em;
}

.block-text h1 {
  font-size: 2rem;
}

.block-text h2 {
  font-size: 1.7rem;
}

.block-text h3 {
  font-size: 1.4rem;
}

.block-text h4 {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 1.2em 0 0.4em;
}

.block-quote {
  margin: 2.5rem auto;
  padding: 1.75rem 2rem;
  border: none;
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  background: var(--surface-alt);
}

.block-quote p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  line-height: 1.45;
  color: var(--text-primary);
}

.block-quote cite {
  display: block;
  margin-top: 0.75rem;
  font-size: 0.88rem;
  font-style: normal;
  color: var(--text-muted);
}

.block-list {
  margin: 1.4rem auto;
  padding: 0;
  list-style: none;
}

.block-list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.6rem;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--text-primary);
}

.block-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

.block-divider {
  border: none;
  height: 1px;
  background: var(--border);
  margin: 3rem 0;
}

.block-iframe,
.block-map {
  margin: 2.5rem 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.block-map__canvas,
.block-map iframe {
  border-radius: var(--radius-lg);
}

.block-image {
  margin: 2.5rem auto;
}

.block-image img {
  border-radius: var(--radius-lg);
}

.block-image-clickable {
  transition: opacity var(--transition);
}

.block-image-clickable:hover {
  opacity: 0.93;
}

.block-image figcaption,
.block-map figcaption {
  margin-top: 0.6rem;
  font-size: 0.86rem;
  color: var(--text-muted);
  text-align: center;
}

/* Image slider: round arrows, the accent marks the current picture; a row is spaced like the gallery */
.block-image-slider--row {
  margin: 2rem 0;
}

.block-image-slider__nav {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--surface-raised);
  color: var(--text-primary);
  /* A hairline ring: beside a narrow picture the arrow sits on the white page */
  box-shadow: 0 0 0 1px var(--border), var(--shadow-sm);
  transition: box-shadow var(--transition), color var(--transition);
}

.block-image-slider__nav:hover {
  color: var(--accent);
  box-shadow: 0 0 0 1px var(--border), var(--shadow-md);
}

.block-image-slider__dots {
  gap: 0.1rem;
  margin-top: 0.6rem;
}

.block-image-slider__dot {
  background-color: var(--border);
  transition: background-color var(--transition);
}

.block-image-slider__dot.active {
  background-color: var(--accent);
}

/* Text & image: runs wide like the grids and embeds, which leaves the text
   a readable line beside its picture */
.block-text-image {
  gap: 1.5rem clamp(1.75rem, 4vw, 3rem);  
}

/* --------------------------------------------------------------------------
   Cards — posts and sub-pages
   -------------------------------------------------------------------------- */

.post-list-block {
  margin: 1.5rem 0 2rem;
}

.post-list-block .loading-state {
  padding: 3rem 0;
}

.subpages-grid,
.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.75rem;
}

.subpages-grid {
  margin: 1.5rem 0 2rem;
}

.subpage-card,
.post-card {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  color: var(--text-primary);
  text-decoration: none;
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.subpage-card:hover,
.post-card:hover {
  border-color: var(--border);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.card-cover {
  /* Bleeds through the card's padding on both sides: the base sheet's
     max-width: 100% would otherwise cap it at the inner width */
  width: calc(100% + 3rem);
  max-width: none;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  margin: -1.5rem 0 1.25rem -1.5rem;
  background: var(--surface-alt);
}

.card-meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.7rem;
}

.card-date {
  font-size: 0.82rem;
  color: var(--text-muted);
}

.card-title {
  margin-bottom: 0.5rem;
  font-size: 1.5rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  transition: color var(--transition);
}

.subpage-card:hover .card-title,
.post-card:hover .card-title {
  color: var(--accent);
}

.card-tagline,
.card-excerpt {
  flex: 1;
  margin-bottom: 1rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* Sub-page or post card with both a tagline and an excerpt: the tagline is
   a subtitle under the title, the excerpt fills the card */
.subpage-card .card-tagline:has(+ .card-excerpt),
.post-card .card-tagline:has(+ .card-excerpt) {
  flex: 0 0 auto;
  margin-bottom: 0.4rem;
  font-weight: 600;
  color: var(--text-primary);
}

/* With tagline and excerpt switched off, "Read more" still sits at the bottom */
.subpage-card .card-read-more,
.post-card .card-read-more {
  margin-top: auto;
}

.card-read-more {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--accent);
}

.post-grid .empty-state {
  padding: 3rem 0;
  text-align: center;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   Post reader — same measure as page prose
   -------------------------------------------------------------------------- */

.post-content {
  padding: 3rem 0 4rem;
}

.post-content .content-blocks {
  padding: 0;
}

.post-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
  font-size: 0.88rem;
  color: var(--text-muted);
}

.post-title {
  margin-bottom: 1.75rem;
  font-size: clamp(2.2rem, 4.5vw, 3rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.post-body p {
  margin-bottom: 1.1em;
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--text-primary);
}

.back-link,
.post-content .back-link {
  display: inline-block;
  margin-top: 2.5rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--accent);
}

.back-link:hover {
  color: var(--accent-dark);
}

.error-state {
  padding: 6rem 0;
  text-align: center;
}

.error-state h2 {
  margin-bottom: 0.5rem;
  font-size: 2.2rem;
}

.error-state p {
  margin-bottom: 1.5rem;
  color: var(--text-muted);
}

.page-content > .loading-state {
  padding: 6rem 0;
}

/* --------------------------------------------------------------------------
   Gallery
   -------------------------------------------------------------------------- */

.gallery-grid,
.gallery-columns {
  margin: 2rem 0;
}

.gallery-grid-item,
.gallery-column-item {
  border-radius: var(--radius);
}

.gallery-grid-item,
.gallery-column-item {
  background: var(--surface-alt);
}

.gallery-grid-item img,
.gallery-column-item img {
  transition: transform 0.35s ease;
}

.gallery-grid-item:hover img,
.gallery-column-item:hover img {
  transform: scale(1.04);
}

.gallery-item-label {
  padding: 1.4rem 0.75rem 0.65rem;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.65));
  color: #fff;
  font-size: 0.82rem;
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   Events (EventListBlock.vue and PublicEvent.vue are scoped, hence the
   three-class selectors)
   -------------------------------------------------------------------------- */

/* A centred, wrapping row instead of a grid: a full row looks the same, but
   one or two cards (or a short last row) sit in the middle, not at the left.
   The column count follows the block's own width, as auto-fill did. */
.public-layout .event-list-block {
  container-type: inline-size;
}

.public-layout .event-list-block .event-grid {
  --event-cols: 1;
  --event-gap: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--event-gap);
  margin: 1.5rem 0 2rem;
}

/* 300px cards: two fit from 628px, three from 956px */
@container (min-width: 39.25rem) {
  .public-layout .event-list-block .event-grid {
    --event-cols: 2;
  }
}

@container (min-width: 59.75rem) {
  .public-layout .event-list-block .event-grid {
    --event-cols: 3;
  }
}

.public-layout .event-list-block .event-card {
  flex: 0 0 calc((100% - (var(--event-cols) - 1) * var(--event-gap)) / var(--event-cols));
  min-width: 0;
  border-color: var(--border-light);
  border-radius: var(--radius-lg);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.public-layout .event-list-block .event-card:hover {
  border-color: var(--border);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.public-layout .event-list-block .event-card__body {
  padding: 1.25rem 1.5rem 1.5rem;
}

.public-layout .event-list-block .event-card__title {
  font-size: 1.5rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.public-layout .event-list-block .event-card__more {
  font-weight: 600;
}

.public-layout .event-list-block .empty-state {
  flex: 1 1 100%;
  margin: 0;
  padding: 3rem 0;
  text-align: center;
}

.public-layout .page-content.event-page {
  max-width: var(--max-width);
}

.public-layout .event-page .event-content {
  max-width: var(--measure);
  margin: 0 auto;
}


.public-layout .event-page .event-title {
  font-size: clamp(2.2rem, 4.5vw, 3rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.public-layout .event-page .event-bring {
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

.public-layout .event-page .registration-box {
  border-color: var(--border-light);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
}

.public-layout .event-page .reg-input,
.public-layout .event-page .reg-notice,
.public-layout .event-page .reg-error,
.public-layout .event-page .reg-button {
  border-radius: var(--radius);
}

.public-layout .event-page .reg-button {
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Forms — feedback block, member area, gift cards
   -------------------------------------------------------------------------- */

.public-layout .content-blocks .feedback-block {
  max-width: var(--measure);
  margin: 2.5rem auto;
  padding: 2rem;
  border-color: var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.public-layout .content-blocks .feedback-block__title {
  font-size: 1.6rem;
}

.public-layout .content-blocks .feedback-input,
.public-layout .content-blocks .feedback-error,
.public-layout .content-blocks .feedback-button {
  border-radius: var(--radius);
}

.public-layout .content-blocks .feedback-input {
  padding: 0.7rem 0.85rem;
}

.public-layout .content-blocks .feedback-kind {
  border-radius: var(--radius-lg);
}

.public-layout .content-blocks .feedback-button {
  font-weight: 600;
}

.public-layout .member-page .member-card {
  border-color: var(--border-light);
  border-radius: var(--radius-lg);
  padding: 2.25rem;
}

.public-layout .member-page .member-title {
  font-size: 1.9rem;
}

.public-layout .member-page .member-input {
  padding: 0.7rem 0.85rem;
}

.public-layout .gift-page .gift-box {
  border-color: var(--border-light);
  border-radius: var(--radius-lg);
}

.public-layout .gift-page .gift-button {
  border-radius: var(--radius);
  font-weight: 600;
}

/* Recipe block (scoped): the pictures follow the theme's rounding */
.public-layout .content-blocks .recipe__picture,
.public-layout .content-blocks .recipe__step-picture,
.public-layout .content-blocks .recipe__ingredients,
.public-layout .content-blocks .recipe__tip {
  border-radius: var(--radius-lg);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  margin-top: 4rem;
  padding: 4rem 0 0;
  background: var(--footer-bg);
  color: var(--footer-text);
}

.footer-inner.container {
  max-width: var(--max-width);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--footer-rule);
}

.footer-logo {
  font-size: 1.5rem;
  color: #fff;
}

.footer-tagline {
  margin-top: 0.5rem;
  max-width: 36ch;
  font-size: 0.88rem;
  color: var(--footer-muted);
}

.footer-contact h4,
.footer-links h4 {
  margin-bottom: 1rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--footer-muted);
}

.footer-contact p {
  margin-bottom: 0.35rem;
  font-size: 0.9rem;
}

.footer-contact a {
  color: var(--accent);
}

.footer-contact a:hover {
  color: #fff;
}

.footer-address {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  white-space: pre-line;
  color: var(--footer-muted);
}

.footer-links {
  display: flex;
  flex-direction: column;
}

.footer-nav-link {
  padding: 0.25rem 0;
  font-size: 0.9rem;
  color: var(--footer-text);
  text-decoration: none;
  transition: color var(--transition);
}

.footer-nav-link.active,
.footer-nav-link:hover {
  color: var(--accent);
}

.footer-nav-child {
  display: none;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem 0;
  font-size: 0.8rem;
  color: var(--footer-muted);
}

.footer-legal {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.legal-link,
.admin-link {
  font-size: 0.8rem;
  color: var(--footer-muted);
  text-decoration: none;
  transition: color var(--transition);
}

.admin-link {
  font-size: 0.75rem;
}

.legal-link:hover,
.admin-link:hover {
  color: #fff;
}

@media (max-width: 768px) {
  .site-footer {
    text-align: center;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .footer-tagline {
    margin-left: auto;
    margin-right: auto;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }
}