/*
Theme Name: Aviation24news
Theme URI: https://aviation24news.com
Author: ClearPath Solutions
Author URI: https://aviation24news.com
Description: Custom editorial newsroom theme for Aviation24news. Minimalist white/charcoal base with the Aviation24news signature blue as accent only. Mobile-first, dark-mode aware, built for aviation journalism.
Version: 1.4.1
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: Proprietary — © ClearPath Solutions
Text Domain: aviation24news
Tags: news, blog, editorial, dark-mode, custom-menu
*/

/* ==========================================================================
   Aviation24news — Global Stylesheet
   Minimalist editorial newsroom. White/charcoal base, blue as accent ONLY.

   MOBILE-FIRST: base rules target small screens; min-width queries layer on
   tablet (640px), desktop header (900px) and wide desktop (1100px).
   Breakpoints are declared once, at the end of each component block.
   ========================================================================== */

/* --------------------------------- Fonts --------------------------------
   Inter and the selected headline face are enqueued from inc/typography.php
   so they do not block rendering, and so the headline face can be switched
   from the Customizer. --font-headline below is the fallback default.
   ------------------------------------------------------------------------ */

/* ------------------------------ Design tokens --------------------------- */
:root {
  --font-headline: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* The masthead stays serif whatever the headline face is set to. */
  --font-wordmark: 'Lora', Georgia, 'Times New Roman', serif;

  --color-bg: #ffffff;
  --color-bg-alt: #f4f4f4;
  --color-surface: #ffffff;
  --color-text: #171717;
  --color-text-muted: #5a5a5a;
  --color-border: #e0e0e0;
  --color-accent: #1457d1;
  --color-accent-hover: #0d3f9e;
  --color-brand: #187cba; /* tail-fin logo blue */
  --color-alert: #c62828;
  --color-placeholder-bg-1: #e8ecf3;
  --color-placeholder-bg-2: #dae0ea;
  --color-placeholder-fg: #7c8697;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 3px 10px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.10);
  --shadow-hover: 0 12px 28px rgba(15, 23, 42, 0.13);

  --container-max: 1200px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --transition-fast: 200ms ease;

  --header-height: 56px;
}

[data-theme='dark'] {
  --color-bg: #121212;
  --color-bg-alt: #1b1b1b;
  --color-surface: #181818;
  --color-text: #f0f0f0;
  --color-text-muted: #a3a3a3;
  --color-border: #303030;
  --color-accent: #5b8fed;
  --color-accent-hover: #7fa5f2;
  --color-brand: #4aa6e0;
  --color-alert: #ef5350;
  --color-placeholder-bg-1: #23262d;
  --color-placeholder-bg-2: #191b20;
  --color-placeholder-fg: #8f98a5;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 3px 10px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-hover: 0 12px 28px rgba(0, 0, 0, 0.55);
}

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

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

body {
  margin: 0;
  /* Guards against any single wide child forcing a sideways scroll on phones. */
  overflow-x: hidden;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  transition: background-color 0.15s ease, color 0.15s ease;
}

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

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

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
h4,
p {
  margin: 0;
  overflow-wrap: break-word;
}

button,
input,
select,
textarea {
  font-family: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ------------------------------- Utilities ------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background-color: var(--color-accent);
  color: #fff;
  padding: 10px 16px;
  border-radius: 0 0 var(--radius-sm) 0;
  font-size: 0.85rem;
  font-weight: 600;
}

.skip-link:focus {
  left: 0;
}

/* ------------------------------- Layout --------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: 16px;
}

.section {
  padding-block: 24px;
}

.section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  border-bottom: 2px solid var(--color-text);
  padding-bottom: 8px;
}

.section-heading h1,
.section-heading h2 {
  font-family: var(--font-headline);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.section-heading .view-link {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-accent);
  white-space: nowrap;
}

.section-heading .view-link:hover {
  color: var(--color-accent-hover);
  text-decoration: underline;
}

@media (min-width: 640px) {
  .container {
    padding-inline: 20px;
  }

  .section {
    padding-block: 30px;
  }

  .section-heading {
    margin-bottom: 24px;
    gap: 16px;
    padding-bottom: 10px;
  }

  .section-heading h1,
  .section-heading h2 {
    font-size: 1.5rem;
  }

  .section-heading .view-link {
    font-size: 0.85rem;
  }
}

/* -------------------------------- Header --------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--header-height);
  padding-block: 8px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: auto;
  font-family: var(--font-wordmark);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--color-text);
  flex-shrink: 0;
}

.brand__mark {
  /* Master artwork is 5456 x 4146; height drives the size so the ratio
     stays exact whatever the breakpoint. */
  width: auto;
  height: 24px;
  flex-shrink: 0;
}

.brand__logo {
  width: auto;
  height: 26px;
  flex-shrink: 0;
}

.brand__accent {
  color: var(--color-accent);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Mobile: nav + search collapse into a panel below the header bar, so
   neither the links nor the search field are lost on small screens. */
.site-header__drawer {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  max-height: calc(100vh - var(--header-height));
  overflow-y: auto;
}

.site-header__drawer.is-open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.main-nav__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-nav li {
  list-style: none;
}

.main-nav a {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-text);
  /* Comfortable tap target on touch screens. */
  padding: 10px 4px;
  border-bottom: 2px solid transparent;
  display: block;
}

.main-nav a:hover,
.main-nav .current-menu-item > a,
.main-nav .current-menu-ancestor > a,
.main-nav a[aria-current='page'] {
  color: var(--color-accent);
}

.header-search {
  display: flex;
  align-items: center;
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: box-shadow var(--transition-fast);
}

.header-search:focus-within {
  box-shadow: var(--shadow-md);
}

.header-search input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  padding: 10px 12px;
  /* 16px prevents iOS Safari from zooming in on focus. */
  font-size: 16px;
  outline: none;
}

.header-search button {
  border: none;
  background: transparent;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.header-search button:hover {
  color: var(--color-accent);
}

.header-search svg {
  width: 17px;
  height: 17px;
}

.theme-toggle,
.nav-toggle {
  border: none;
  background: transparent;
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-sm);
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
  flex-shrink: 0;
  transition: box-shadow var(--transition-fast), color var(--transition-fast);
}

.theme-toggle:hover,
.nav-toggle:hover {
  box-shadow: var(--shadow-md);
  color: var(--color-accent);
}

.theme-toggle svg,
.nav-toggle svg {
  width: 17px;
  height: 17px;
}

/* Show the icon for the theme the toggle switches TO. */
.theme-toggle .icon-sun {
  display: none;
}

[data-theme='dark'] .theme-toggle .icon-sun {
  display: block;
}

[data-theme='dark'] .theme-toggle .icon-moon {
  display: none;
}

@media (min-width: 900px) {
  .site-header__inner {
    gap: 20px;
    padding-block: 10px;
  }

  .brand {
    font-size: 1.15rem;
    margin-right: 0;
  }

  .brand__mark {
    height: 27px;
  }

  .brand__logo {
    height: 28px;
  }

  /* display:contents dissolves the drawer so the nav and search sit
     directly in the header row — no duplicated markup per breakpoint.
     pointer-events must be restored explicitly: the mobile rule above sets
     it to none, and because it is an inherited property it keeps cascading
     into the links even after the drawer's own box has gone away, which
     would leave the whole desktop nav and search field unclickable. */
  .site-header__drawer {
    display: contents;
    pointer-events: auto;
    opacity: 1;
  }

  .main-nav {
    flex: 1;
  }

  .main-nav__list {
    flex-direction: row;
    align-items: center;
    gap: 24px;
  }

  .main-nav a {
    font-size: 0.92rem;
    padding-block: 4px;
    padding-inline: 0;
  }

  .main-nav a:hover,
  .main-nav .current-menu-item > a,
  .main-nav .current-menu-ancestor > a,
  .main-nav a[aria-current='page'] {
    border-bottom-color: var(--color-accent);
  }

  .header-search {
    margin-left: auto;
    width: auto;
  }

  .header-search input {
    width: 160px;
    flex: 0 0 auto;
    padding: 7px 10px;
    font-size: 0.85rem;
  }

  .header-search button {
    padding: 7px 9px;
  }

  .theme-toggle {
    width: 32px;
    height: 32px;
  }

  .theme-toggle svg {
    width: 16px;
    height: 16px;
  }

  .nav-toggle {
    display: none;
  }
}

/* -------------------------------- Buttons --------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 20px;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-accent);
  background-color: transparent;
  color: var(--color-accent);
  transition: background-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}

.btn:hover {
  background-color: var(--color-accent);
  color: #fff;
  box-shadow: var(--shadow-md);
}

.btn--solid {
  background-color: var(--color-accent);
  color: #fff;
}

.btn--solid:hover {
  background-color: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

/* ------------------------------- Category tag ------------------------------ */
.tag {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-sm);
  padding: 3px 10px;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

a.tag:hover {
  background-color: var(--color-accent);
  color: #fff;
}

/* ------------------------------ Placeholder media -------------------------- */
.media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-md);
  background-image: linear-gradient(135deg, var(--color-placeholder-bg-1), var(--color-placeholder-bg-2));
}

.media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media__fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px;
  text-align: center;
}

.media__fallback .media__icon {
  width: 30px;
  height: 30px;
  stroke-width: 1;
  color: var(--color-placeholder-fg);
  opacity: 0.7;
}

.media__fallback .media__label {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-placeholder-fg);
  opacity: 0.85;
}

/* --------------------------------- Cards ----------------------------------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background-color: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 12px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

/* Tag stays clickable above the card's stretched link overlay. */
.card__meta {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 2px;
}

.card__title {
  display: block;
  font-family: var(--font-headline);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

/* The clamp lives on an inner span so it does not clip the stretched
   link overlay below (overflow:hidden would cut off the ::after). */
.card__title-text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Stretched link: the whole card is one click target. */
.card__title::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.card a.card__title:hover {
  color: var(--color-accent);
}

.card__deck {
  font-size: 0.88rem;
  color: var(--color-text-muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card__byline {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

/* Hover lift only where a real pointer exists — avoids sticky hover on touch. */
@media (hover: hover) {
  .card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
  }
}

@media (min-width: 640px) {
  .card {
    padding: 14px;
  }
}

/* Trending grid — uniform cards, left-aligned, single column on phones. */
.trending-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  justify-content: start;
  align-items: stretch;
}

.trending-actions {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

@media (min-width: 640px) {
  .trending-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .trending-actions {
    margin-top: 24px;
  }
}

@media (min-width: 1100px) {
  .trending-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 28px;
  }
}

/* -------------------------------- Latest feed ------------------------------- */
.latest-feed {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.latest-feed__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  background-color: var(--color-surface);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

@media (hover: hover) {
  .latest-feed__item:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
  }
}

.latest-feed__thumb {
  width: 84px;
  flex-shrink: 0;
}

/* The category label does not fit a thumbnail this small — icon only. */
.latest-feed__thumb .media__label {
  display: none;
}

.latest-feed__thumb .media__icon {
  width: 20px;
  height: 20px;
}

.latest-feed__body {
  flex: 1;
  /* Without this a long headline can push the row wider than the screen. */
  min-width: 0;
}

.latest-feed__title {
  display: block;
  font-family: var(--font-headline);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.35;
}

.latest-feed__title .card__title-text {
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.latest-feed__title::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.latest-feed__item a.latest-feed__title:hover {
  color: var(--color-accent);
}

.latest-feed__meta {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
  font-size: 0.72rem;
  color: var(--color-text-muted);
}

@media (min-width: 640px) {
  .latest-feed__item {
    gap: 16px;
    padding: 12px;
  }

  .latest-feed__thumb {
    width: 104px;
  }

  .latest-feed__thumb .media__icon {
    width: 22px;
    height: 22px;
  }

  .latest-feed__title {
    font-size: 1rem;
  }

  .latest-feed__title .card__title-text {
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

  .latest-feed__meta {
    gap: 10px;
    font-size: 0.75rem;
  }
}

/* -------------------------------- Authors --------------------------------- */
.authors-scroll {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  /* Room for the hover lift and shadow so neither is clipped by the scroller. */
  padding: 4px 4px 12px;
  margin-inline: -4px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

/* Cards grow to fill the row when there are few authors, and fall back to
   horizontal scrolling once they no longer fit. */
.author-card {
  position: relative;
  scroll-snap-align: start;
  flex: 1 0 200px;
  max-width: 320px;
  background-color: var(--color-surface);
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

@media (hover: hover) {
  .author-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
  }
}

.author-card__photo {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  background-image: linear-gradient(135deg, var(--color-placeholder-bg-1), var(--color-placeholder-bg-2));
  flex-shrink: 0;
}

.author-card__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.author-card__photo .media__fallback {
  align-items: center;
  justify-content: center;
}

.author-card__photo svg {
  width: 28px;
  height: 28px;
  stroke-width: 1;
  color: var(--color-placeholder-fg);
  opacity: 0.7;
}

.author-card__name {
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: 0.95rem;
}

.author-card__name::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.author-card a.author-card__name:hover {
  color: var(--color-accent);
}

/* Reserve two lines so bios start at the same height across all cards. */
.author-card__role {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-accent);
  font-weight: 600;
  line-height: 1.35;
  min-height: 2.7em;
  display: flex;
  align-items: center;
  text-align: center;
}

.author-card__bio {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  line-height: 1.5;
  text-align: left;
}

@media (min-width: 640px) {
  .authors-scroll {
    gap: 20px;
  }

  .author-card {
    flex-basis: 220px;
  }

  .author-card__photo {
    width: 76px;
    height: 76px;
  }
}

/* -------------------------------- Find us section --------------------------- */
.find-us {
  background-color: var(--color-bg-alt);
  border-radius: var(--radius-md);
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
}

.find-us__title {
  font-family: var(--font-headline);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}

.find-us__contact p {
  font-size: 0.88rem;
  color: var(--color-text-muted);
  margin-top: 4px;
}

.find-us__contact a:hover {
  color: var(--color-accent);
}

.find-us__socials {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.find-us__socials a {
  width: 42px;
  height: 42px;
  border: none;
  box-shadow: var(--shadow-sm);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
  background-color: var(--color-surface);
  transition: box-shadow var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.find-us__socials a:hover {
  box-shadow: var(--shadow-md);
  color: var(--color-accent);
  transform: translateY(-2px);
}

.find-us__socials svg {
  width: 18px;
  height: 18px;
}

@media (min-width: 640px) {
  .find-us {
    flex-direction: row;
    align-items: center;
    padding: 32px;
    gap: 32px;
  }

  .find-us__title {
    font-size: 1.25rem;
  }

  .find-us__contact p {
    font-size: 0.9rem;
  }

  .find-us__socials {
    gap: 14px;
  }

  .find-us__socials a {
    width: 38px;
    height: 38px;
  }
}

/* --------------------------------- Footer ----------------------------------- */
.site-footer {
  border-top: 1px solid var(--color-border);
  margin-top: 24px;
}

.site-footer__inner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  padding-block: 28px;
}

.site-footer__col--brand {
  grid-column: 1 / -1;
}

.site-footer__col h3 {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-bottom: 10px;
}

.site-footer__col ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.site-footer__col li,
.site-footer__col a {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  overflow-wrap: break-word;
}

.site-footer__col a:hover {
  color: var(--color-accent);
}

.site-footer__bottom {
  border-top: 1px solid var(--color-border);
  padding-block: 16px;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-align: center;
}

@media (min-width: 640px) {
  .site-footer__inner {
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    padding-block: 40px;
  }

  .site-footer__col--brand {
    grid-column: auto;
  }

  .site-footer__col h3 {
    font-size: 0.75rem;
    margin-bottom: 12px;
  }

  .site-footer__col li,
  .site-footer__col a {
    font-size: 0.88rem;
  }

  .site-footer__bottom {
    font-size: 0.78rem;
  }
}