/*
 * layout.css — header, footer, drawer, search,
 * scroll-to-top, language switch, theme toggle, WP admin-bar offset.
 *
 * Loaded on every page (dependency: jacar-base).
 */

/* ============================================================
   Scroll-to-top button (all pages)
   ============================================================ */
/* Pure-CSS scroll-progress ring — supported browsers (Chrome/Edge ≥115,
   Firefox ≥110) drive `--jt-p` (a registered <number> @property) from
   0 → 100 via animation-timeline: scroll(root block). The ::before
   pseudo paints a conic-gradient ring whose teal arc grows as `--jt-p`
   advances. `inherits: true` is essential: the animation is on the
   button itself, but the ::before pseudo reads the value through the
   cascade, and Chrome only re-evaluates calc() inside conic-gradient
   when the property is inherited (animating a non-inherited registered
   property doesn't propagate to descendants' computed values).
   Browsers without scroll-driven animations get the empty ring
   (`--jt-p` stays at its initial value 0). The existing JS keeps
   driving .visible and the smooth-scroll click. */
@property --jt-p {
  syntax: "<number>";
  initial-value: 0;
  inherits: true;
}
#jacar-totop {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-sizing: border-box;
  padding: 0;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-muted);
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  z-index: 9998;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, .08),
    inset 0 -1px 0 rgba(0, 0, 0, .05);
  transition:
    opacity     .2s,
    transform   .18s cubic-bezier(.22, 1.5, .36, 1),
    background  .2s ease,
    color       .2s ease,
    border-color .2s ease,
    box-shadow  .25s ease;
  -webkit-tap-highlight-color: transparent;
}
/* Conic-gradient progress ring — sits as a 3px halo just outside the
   button border. The mask-composite trick carves the centre out so we
   render a ring shape, not a full disc. The teal arc grows from 12 o'clock
   clockwise as `--jt-p` advances. */
#jacar-totop::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  padding: 3px;
  background:
    conic-gradient(var(--teal) calc(var(--jt-p) * 1%), transparent 0);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
@keyframes jacar-totop-progress {
  from { --jt-p: 0; }
  to   { --jt-p: 100; }
}
/* Visibility ramps in over the first 400 px of scroll, then locks at 1.
   `step-end` after the ramp keeps it pinned at full opacity even when the
   scroll keeps going. Pure CSS — replaces a window.scroll listener. */
@keyframes jacar-totop-show {
  0%   { opacity: 0; transform: translateY(12px); pointer-events: none; }
  100% { opacity: 1; transform: translateY(0);    pointer-events: auto; }
}
@supports (animation-timeline: scroll()) {
  #jacar-totop {
    animation:
      jacar-totop-progress linear both,
      jacar-totop-show     linear both;
    animation-timeline: scroll(root block), scroll(root block);
    animation-range: 0 100%, 0 400px;
  }
  /* The scroll-timeline keeps the ring visible too — drop the
     `.visible`-gated rule when scroll-driven animations are supported. */
  #jacar-totop::before { opacity: 1; }
}
/* Fallback for browsers without scroll-driven animations: visibility
   stays driven by the .visible class (still toggled by JS for them). */
@supports not (animation-timeline: scroll()) {
  #jacar-totop.visible::before { opacity: 1; }
}
#jacar-totop svg {
  width: 20px;
  height: 20px;
  transform: rotate(180deg);
  display: block;
  flex: 0 0 auto;
  vertical-align: middle;
}
#jacar-totop.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
#jacar-totop.visible:hover {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
  transform: translateY(-2px);
  box-shadow:
    0 8px 16px -4px rgba(43, 138, 148, .45),
    0 0 0 4px rgba(43, 138, 148, .14);
}
#jacar-totop.visible:active {
  transform: translateY(0) scale(.95);
  box-shadow:
    0 2px 4px rgba(43, 138, 148, .35),
    0 0 0 0 rgba(43, 138, 148, 0);
  transition-duration: .08s;
}
#jacar-totop:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 4px;
}

/* ============================================================
   Header (logo, nav, category dock, author button, search,
   theme toggle, lang switch, mobile drawer)
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
}
/* Push sticky header below WP admin bar when logged in */
.admin-bar .site-header {
  top: 32px;
}
@media screen and (max-width: 782px) {
  .admin-bar .site-header { top: 46px; }
}
.site-header {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  overflow: visible;
  transition: background var(--t-slow), border-color var(--t-slow);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 62px;
  overflow: visible;
  position: relative;      /* anchor for absolute-centered dock */
}

.site-logo { flex-shrink: 0; }

/* Logo */
.site-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--text) !important;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -.02em;
}
.site-logo svg {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  animation: jacar-logo-breathe 4s ease-in-out infinite;
  will-change: transform, filter;
  transform-origin: center center;
}
@media (prefers-reduced-motion: reduce) {
  .site-logo svg { animation: none; }
}
@keyframes jacar-logo-breathe {
  0%, 100% { transform: scale(1);    filter: brightness(1); }
  50%      { transform: scale(1.05); filter: brightness(1.25); }
}

/* Primary nav */
.primary-nav {
  display: none;
  flex: 1;
  list-style: none;
  gap: .25rem;
  padding: 0;
  margin: 0;
}
@media (min-width: 768px) { .primary-nav { display: flex; align-items: center; } }

.primary-nav a {
  display: block;
  padding: .4rem .75rem;
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: .9375rem;
  font-weight: 500;
  transition: color var(--t), background var(--t);
}
.primary-nav a:hover,
.primary-nav .current-menu-item > a,
.primary-nav .current-menu-ancestor > a {
  color: var(--teal);
  background: var(--teal-lighter);
}

/* ── Header category dock ── */
.header-cats {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;            /* icons grow downward from center */
  gap: .35rem;
  overflow: visible;
  pointer-events: auto;
  z-index: 10;
}

.header-cat {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--border);
  color: var(--text-muted);
  text-decoration: none;
  flex-shrink: 0;
  transform:
    translateY(calc((var(--dock-scale, 1) - 1) * 19px))
    scale(var(--dock-scale, 1))
    rotate(var(--hover-rotate, 0deg));
  transform-origin: center center;
  transition: transform .1s cubic-bezier(.34,1.56,.64,1),
              background .15s, color .15s;
  will-change: transform;
}

.header-cat svg { width: 18px; height: 18px; pointer-events: none; }


.header-cat:hover,
.header-cat.is-active { background: var(--teal-lighter); color: var(--teal); box-shadow: 0 0 0 2px var(--teal); }
.header-cat:hover { --hover-rotate: -30deg; }

.header-cat--home { background: var(--border); }
.header-cat--home.is-active { background: var(--teal-lighter); color: var(--teal); box-shadow: 0 0 0 2px var(--teal); }

.header-cat--author { background: none; padding: 0; }
.header-cat--author img { width: 38px; height: 38px; object-fit: cover; border-radius: 50%; display: block; }
.header-cat--author:hover,
.header-cat--author.is-active { box-shadow: 0 0 0 2px var(--teal); }

/* Author button: full loop (-360°) + the -30° tilt other buttons use,
   ending at the same visual tilt after the spin */
.header-cat--author:hover {
  animation: author-spin 1.6s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes author-spin {
  from {
    transform:
      translateY(calc((var(--dock-scale, 1) - 1) * 19px))
      scale(var(--dock-scale, 1))
      rotate(0deg);
  }
  to {
    transform:
      translateY(calc((var(--dock-scale, 1) - 1) * 19px))
      scale(var(--dock-scale, 1))
      rotate(-390deg);
  }
}
/* Author tooltip: counter-rotate throughout the spin so the label stays
   horizontal, then fade in during the final 60° of rotation */
.header-cat--author:hover::after {
  animation: author-spin-label 1.6s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes author-spin-label {
  0% {
    transform: translateX(-50%) scale(calc(1 / var(--dock-scale, 1))) rotate(0deg);
    opacity: 0;
  }
  84.62% {
    transform: translateX(-50%) scale(calc(1 / var(--dock-scale, 1))) rotate(330deg);
    opacity: 0;
  }
  100% {
    transform: translateX(-50%) scale(calc(1 / var(--dock-scale, 1))) rotate(390deg);
    opacity: 1;
  }
}

/* Category icon in archive h1 */
.page-header h1 svg { width: 1em; height: 1em; vertical-align: -.15em; margin-right: .25rem; }

/* label below icon */
.header-cat::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform:
    translateX(-50%)
    scale(calc(1 / var(--dock-scale, 1)))
    rotate(calc(var(--hover-rotate, 0deg) * -1));
  transform-origin: top center;
  background: var(--bg);
  color: var(--teal);
  border: 1px solid var(--teal);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
  padding: .25rem .6rem;
  border-radius: 6px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .1s, transform .1s cubic-bezier(.34,1.56,.64,1);
  z-index: 300;
}

.header-cat:hover::after { opacity: 1; }

@media (max-width: 900px) { .header-cats { display: none; } }

/* Header actions */
.header-actions {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-left: auto;
  flex-shrink: 0;
}

.hdr-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  border: none;
  background: transparent;
  color: var(--text-muted);
  transition: color var(--t), background var(--t);
}
.hdr-btn:hover {
  color: var(--teal);
  background: var(--teal-lighter);
}
.hdr-btn svg { width: 20px; height: 20px; }

/* Search (collapsed round button → expands to pill with input) */
.header-search {
  display: flex;
  align-items: center;
}
.header-search__btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: var(--surface);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--t), color var(--t);
  flex-shrink: 0;
}
.header-search__btn svg { width: 16px; height: 16px; }
.header-search__btn:hover { color: var(--teal); background: var(--border); }
.header-search__expand {
  display: none;
  align-items: center;
  background: var(--surface);
  border-radius: 20px;
  padding: 3px;
  gap: .25rem;
}
.header-search.open .header-search__btn { display: none; }
.header-search.open .header-search__expand { display: flex; }
.header-search__expand form { display: flex; align-items: center; padding-left: .6rem; }
.header-search__expand input {
  width: 150px;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: .875rem;
  padding: 0;
  outline: none;
}
.header-search__expand input::placeholder { color: var(--text-faint); }
.header-search__close {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: var(--bg);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: color var(--t);
  flex-shrink: 0;
}
.header-search__close:hover { color: var(--teal); }
.header-search__close svg { width: 14px; height: 14px; }

/* Theme toggle */
.theme-toggle {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--surface);
  border-radius: 50%;
  padding: 3px;
  border: none;
  transition: border-radius var(--t-slow);
}
.theme-toggle:hover,
.theme-toggle:focus-within { border-radius: 20px; }
.theme-toggle button {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: background var(--t), color var(--t), width var(--t-slow), opacity var(--t-slow), margin var(--t-slow), border-radius var(--t-slow);
}
.theme-toggle button svg { width: 16px; height: 16px; }
/* Collapsed: hide inactive buttons — zero width so container stays a perfect circle */
.theme-toggle button:not(.active) {
  width: 0;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
/* Expand on hover / keyboard focus — restore spacing with margin instead of gap */
.theme-toggle:hover button:not(.active),
.theme-toggle:focus-within button:not(.active) {
  width: 28px;
  margin: 0 2px;
  opacity: 1;
  pointer-events: auto;
}
.theme-toggle:hover button,
.theme-toggle:focus-within button { border-radius: 14px; }
.theme-toggle button.active {
  background: var(--bg);
  color: var(--teal);
  box-shadow: var(--shadow-sm);
}
/* Collapsed state: match the rest of the header buttons (e.g.
   .header-search__btn uses background: var(--surface)) — drop the
   raised "inset capsule" look and let the active button blend with
   its --surface container. The expanded (:hover/:focus-within)
   highlight still uses var(--bg) above so the active item stays
   distinguishable while the user is interacting with the toggle. */
.theme-toggle:not(:hover):not(:focus-within) button.active {
  background: var(--surface);
  box-shadow: none;
}

/* Language pill switch */
.lang-toggle {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--surface);
  border-radius: 50%;
  padding: 3px;
  transition: border-radius var(--t-slow);
}
.lang-toggle:hover,
.lang-toggle:focus-within { border-radius: 20px; }
.lang-toggle__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  padding: 0;
  line-height: 1;
  text-decoration: none;
  color: var(--text-muted);
  opacity: .55;
  overflow: hidden;
  transition: background var(--t), opacity var(--t-slow), box-shadow var(--t), width var(--t-slow), margin var(--t-slow), padding var(--t-slow), border-radius var(--t-slow);
}
/* 16px width matches the other header button icons (.theme-toggle
   button svg, .header-search__btn svg). Flag aspect ratio (4:3)
   keeps the height at 12px so it doesn't distort. */
.lang-toggle__btn svg { width: 16px; height: 12px; border-radius: 2px; display: block; flex-shrink: 0; }
/* Collapsed: hide inactive button — zero width so container stays a perfect circle */
.lang-toggle__btn:not(.active):not([aria-current="page"]) {
  width: 0;
  margin: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}
/* Expand on hover / keyboard focus — restore spacing with margin instead of gap */
.lang-toggle:hover .lang-toggle__btn,
.lang-toggle:focus-within .lang-toggle__btn {
  width: 28px;
  margin: 0 2px;
  opacity: .55;
  pointer-events: auto;
  border-radius: 14px;
}
.lang-toggle__btn.active,
.lang-toggle__btn[aria-current="page"] {
  background: var(--bg);
  opacity: 1;
  box-shadow: var(--shadow-sm);
}
/* Collapsed state: match the rest of the header buttons. See the
   matching .theme-toggle rule above for why. */
.lang-toggle:not(:hover):not(:focus-within) .lang-toggle__btn.active,
.lang-toggle:not(:hover):not(:focus-within) .lang-toggle__btn[aria-current="page"] {
  background: var(--surface);
  box-shadow: none;
}

/* (legacy selector kept for compat with any cached markup) */
.wpglobus-switcher-header .wpglobus-selector-link {
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .4rem .75rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: .875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  transition: border-color var(--t), color var(--t), background var(--t);
}
.wpglobus-switcher-header .wpglobus-selector-link:hover {
  border-color: var(--teal);
  color: var(--teal);
  background: var(--teal-lighter);
}

/* Mobile menu toggle */
.mobile-menu-btn {
  display: flex;
}
@media (min-width: 768px) { .mobile-menu-btn { display: none; } }

/* Mobile nav drawer — slides from right */
.mobile-nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  z-index: 199;
}
.mobile-nav-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}
.mobile-nav {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(320px, 85vw);
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border-left: 1px solid var(--border);
  padding: 4.5rem 1.25rem 1.5rem;
  gap: .25rem;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.2,.8,.2,1);
  z-index: 200;
  box-shadow: -8px 0 32px rgba(0,0,0,.25);
}
.admin-bar .mobile-nav { top: 32px; }
@media (max-width: 782px) {
  .admin-bar .mobile-nav { top: 46px; }
}
.mobile-nav.open { transform: translateX(0); }
.mobile-nav a {
  display: block;
  padding: .6rem .75rem;
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: 1rem;
  font-weight: 500;
}
.mobile-nav a:hover { color: var(--teal); background: var(--teal-lighter); }
.mobile-nav__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--t), border-color var(--t);
}
.mobile-nav__close:hover { color: var(--teal); border-color: var(--teal); }
.mobile-nav__close svg { width: 18px; height: 18px; }
body.mobile-nav-open { overflow: hidden; }

.mobile-nav__title {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--text-faint);
  margin: 1.25rem .75rem .5rem;
}
.mobile-nav__cats {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.mobile-nav__cat {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem .75rem;
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: .9375rem;
  font-weight: 500;
  text-decoration: none;
  transition: color var(--t), background var(--t);
}
.mobile-nav__cat svg { width: 18px; height: 18px; flex-shrink: 0; }
.mobile-nav__cat span:first-of-type { flex: 1; }
.mobile-nav__cat-count {
  font-size: .7rem;
  font-weight: 700;
  padding: .1rem .45rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 10%, transparent);
  color: var(--text-muted);
}
.mobile-nav__cat:hover,
.mobile-nav__cat.is-active {
  color: var(--teal);
  background: var(--teal-lighter);
}
.mobile-nav__cat.is-active .mobile-nav__cat-count {
  background: color-mix(in srgb, var(--teal) 18%, transparent);
  color: var(--teal);
}

/* ============================================================
   Footer — editorial 4-column + tag cloud + kinetic bg
   ============================================================ */
.site-footer {
  background: var(--footer-bg);
  color: var(--footer-text);
  padding: 4rem 0 0;
  margin-top: 5rem;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Kinetic background — two subtle drifting orbs, same DNA as hero but softer */
.footer-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.footer-bg__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .55;
}
.footer-bg__orb--teal {
  width: 55vmax; height: 55vmax;
  top: -18vmax; left: -15vmax;
  background: radial-gradient(circle, rgba(43,138,148,.45) 0%, rgba(43,138,148,.1) 45%, transparent 70%);
  animation: footer-drift-1 32s ease-in-out infinite alternate;
}
.footer-bg__orb--lime {
  width: 40vmax; height: 40vmax;
  bottom: -12vmax; right: -10vmax;
  background: radial-gradient(circle, rgba(180,200,120,.30) 0%, rgba(180,200,120,.08) 45%, transparent 70%);
  animation: footer-drift-2 38s ease-in-out infinite alternate;
}
@keyframes footer-drift-1 {
  to { transform: translate(6vw, 5vh) scale(1.1); }
}
@keyframes footer-drift-2 {
  to { transform: translate(-6vw, -5vh) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .footer-bg__orb--teal,
  .footer-bg__orb--lime { animation: none; }
}
.footer-inner { position: relative; z-index: 2; }

/* Gradient accent bar */
.footer-accent {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--teal) 0%, var(--lime) 100%);
  z-index: 3;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem 2rem;
  padding-bottom: 2.5rem;
}
@media (min-width: 640px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-col--brand { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .footer-grid { grid-template-columns: 2.2fr 1.1fr 1.4fr 1fr; }
  .footer-col--brand { grid-column: auto; }
}

/* ── Signature (SVG author + brand decomposition) ── */
.footer-signature {
  display: block;
  max-width: 440px;
  margin-bottom: 1rem;
  text-decoration: none;
  line-height: 0;
}
.footer-signature .sig-svg {
  width: 100%;
  height: auto;
  display: block;
}

/* ── Brand column (legacy logo — kept for backwards compat) ── */
.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  color: #fff !important;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: -.02em;
  margin-bottom: 1rem;
  text-decoration: none;
}
.footer-logo svg { width: 42px; height: 42px; flex-shrink: 0; }
.footer-brand__desc {
  font-size: .95rem;
  line-height: 1.6;
  color: var(--footer-text);
  max-width: 360px;
  margin-bottom: .6rem;
}
.footer-brand__byline {
  font-size: .82rem;
  line-height: 1.55;
  color: var(--footer-faint);
  max-width: 360px;
  margin: 0 0 1.25rem;
  font-style: italic;
}
.footer-socials {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}
.footer-social-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .85rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.6);
  font-size: .8125rem;
  font-weight: 500;
  transition: border-color var(--t), color var(--t), background var(--t), transform var(--t);
  text-decoration: none;
}
.footer-social-link:hover {
  border-color: var(--teal);
  color: var(--teal);
  background: rgba(43,138,148,.1);
  transform: translateY(-1px);
}
.footer-social-link svg { width: 14px; height: 14px; flex-shrink: 0; }

/* ── Column kicker ── */
.footer-col__kicker {
  font-family: var(--font-heading);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--teal);
  margin: 0 0 1.15rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* ── Explore list (categories w/ icon) ── */
.footer-explore { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .1rem; }
.footer-explore a {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .35rem 0;
  font-size: .875rem;
  color: rgba(255,255,255,.62);
  text-decoration: none;
  transition: color var(--t), transform var(--t);
}
.footer-explore a:hover {
  color: var(--teal);
  transform: translateX(2px);
}
.footer-explore__icon {
  flex-shrink: 0;
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px;
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.45);
  transition: background var(--t), color var(--t);
}
.footer-explore__icon svg { width: 14px; height: 14px; }
.footer-explore a:hover .footer-explore__icon {
  background: rgba(43,138,148,.18);
  color: var(--teal);
}
.footer-explore__name { flex: 1; }
.footer-explore__count {
  font-size: .7rem;
  font-weight: 700;
  color: rgba(255,255,255,.3);
  font-variant-numeric: tabular-nums;
}

/* ── Recent posts list ── */
.footer-recent-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.footer-recent-list li + li {
  margin-top: .75rem;
  padding-top: .75rem;
  border-top: 1px solid rgba(255,255,255,.06);
}
.footer-recent-list a {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  text-decoration: none;
}
.footer-recent-list a:hover .footer-recent__title { color: var(--teal); }
.footer-recent__title {
  font-size: .9rem;
  color: rgba(255,255,255,.72);
  line-height: 1.4;
  font-weight: 500;
  transition: color var(--t);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.footer-recent__date {
  font-size: .72rem;
  color: rgba(255,255,255,.35);
  letter-spacing: .02em;
}

/* ── Connect column ── */
.footer-cta {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: .9rem 1rem;
  border-radius: var(--radius);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  color: #fff;
  text-decoration: none;
  margin-bottom: 1.25rem;
  position: relative;
  transition: background var(--t), border-color var(--t);
}
.footer-cta svg {
  position: absolute;
  top: .9rem; right: .9rem;
  width: 16px; height: 16px;
  color: rgba(255,255,255,.5);
  transition: color var(--t), transform var(--t);
}
.footer-cta:hover { border-color: var(--teal); background: rgba(43,138,148,.1); }
.footer-cta:hover svg { color: var(--teal); transform: translate(2px, -2px); }
.footer-cta__label {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: rgba(255,255,255,.5);
}
.footer-cta__value {
  font-family: var(--font-heading);
  font-size: .95rem;
  font-weight: 700;
  color: #fff;
  margin-top: .1rem;
  word-break: break-word;
}

.footer-meta {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  margin: 0;
}
.footer-meta > div {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  font-size: .82rem;
}
.footer-meta dt {
  color: rgba(255,255,255,.35);
  font-weight: 500;
  margin: 0;
}
.footer-meta dd {
  color: rgba(255,255,255,.7);
  font-weight: 600;
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.footer-meta dd a { color: inherit; text-decoration: none; border-bottom: 1px dotted rgba(255,255,255,.25); transition: color var(--t), border-color var(--t); }
.footer-meta dd a:hover { color: var(--teal); border-color: var(--teal); }

/* ── Tag cloud discovery row ── */
.footer-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem;
  padding: 1.5rem 0;
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.footer-tags__label {
  font-family: var(--font-heading);
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--teal);
  margin-right: .75rem;
}
.footer-tag {
  display: inline-flex;
  align-items: center;
  padding: .25rem .6rem;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 500;
  color: rgba(255,255,255,.55);
  text-decoration: none;
  transition: background var(--t), color var(--t), border-color var(--t);
}
.footer-tag:hover {
  background: var(--teal);
  color: #fff;
  border-color: var(--teal);
}

/* Inline "hecho con ♥ en" flourish next to the copyright */
.footer-made {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-style: italic;
  color: rgba(255,255,255,.5);
}
.footer-made em { font-style: inherit; }

/* Inline ops status in the bottom bar */
.footer-ops {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: .78rem;
  color: rgba(255,255,255,.55);
  letter-spacing: .02em;
}

/* Beating heart (shared by footer-made) */
.footer-status__heart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ff4d6d;
  width: 13px; height: 13px;
  animation: heart-beat 1.4s ease-in-out infinite;
  transform-origin: center;
  filter: drop-shadow(0 0 6px rgba(255,77,109,.45));
  vertical-align: -.12em;
}
.footer-status__heart svg { width: 13px; height: 13px; }
@keyframes heart-beat {
  0%, 28%, 100% { transform: scale(1); }
  14%           { transform: scale(1.22); }
  42%           { transform: scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .footer-status__heart { animation: none; }
}

/* Ops green pulsing dot */
.footer-status__dot {
  position: relative;
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #28c940;
  box-shadow: 0 0 0 0 rgba(40,201,64,.55);
  animation: ops-pulse 2s ease-in-out infinite;
}
.footer-status__dot::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: rgba(40,201,64,.35);
  filter: blur(4px);
  animation: ops-glow 2s ease-in-out infinite;
}
@keyframes ops-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(40,201,64,.55); }
  50%      { box-shadow: 0 0 0 10px rgba(40,201,64,0); }
}
@keyframes ops-glow {
  0%, 100% { opacity: .4; transform: scale(.9); }
  50%      { opacity: 1;  transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .footer-status__dot,
  .footer-status__dot::after { animation: none; }
}

/* ── Bottom bar ── */
.footer-bottom {
  padding: 1.25rem 0 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  font-size: .8rem;
  color: rgba(255,255,255,.4);
}
.footer-bottom__copy a { color: rgba(255,255,255,.6); font-weight: 600; text-decoration: none; transition: color var(--t); }
.footer-bottom__copy a:hover { color: var(--teal); }
.footer-bottom__sep { margin: 0 .4rem; color: rgba(255,255,255,.2); }
.footer-bottom__links {
  display: flex;
  gap: 1.15rem;
  align-items: center;
  flex-wrap: wrap;
}
.footer-bottom__links a {
  color: rgba(255,255,255,.5);
  text-decoration: none;
  transition: color var(--t);
  position: relative;
}
.footer-bottom__links a:hover { color: var(--teal); }
.footer-bottom__totop {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}
.footer-bottom__totop svg {
  width: 14px; height: 14px;
  transform: rotate(180deg);
}

/* ============================================================
   16. SIDEBAR
   ============================================================ */
.sidebar-widget {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}
.sidebar-widget__title {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-faint);
  margin-bottom: 1rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--teal-light);
}
.sidebar-widget ul { list-style: none; padding: 0; margin: 0; }
.sidebar-widget li { margin: 0; }
.sidebar-widget li a {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem 0;
  font-size: .9rem;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-faint);
  transition: color var(--t);
}
.sidebar-widget li:last-child a { border-bottom: none; }
.sidebar-widget li a:hover { color: var(--teal); }

/* ============================================================
   PAGE HEADER — archive / search / 404 hero (kinetic backdrop)

   Reuses the homepage hero's kinetic backdrop minus the floating
   technology tags. Pairs with the homepage's .cp-hero (which lives
   in home.css); shared on every non-front-page archive view, so the
   selector belongs to the layout shell.
   ============================================================ */
.page-header {
  position: relative;
  padding: 4.5rem 0 3rem;
  text-align: center;
  background: #060d10;
  overflow: hidden;
  isolation: isolate;
  margin-bottom: 3rem;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.page-header::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 24px 24px;
  z-index: 1;
  pointer-events: none;
}
.page-header::before {
  content: '';
  position: absolute;
  inset: -120%;
  background: conic-gradient(
    from 0deg at 45% 55%,
    transparent       0deg,
    rgba(43,138,148,.09)  60deg,
    rgba(180,200,120,.05) 120deg,
    transparent      180deg,
    rgba(43,138,148,.07)  240deg,
    transparent      360deg
  );
  animation: hero-spin 38s linear infinite;
  z-index: 1;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .page-header::before { animation: none; }
}
.page-header > .container {
  position: relative;
  z-index: 3;
}
.page-header__eyebrow {
  font-size: .8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--teal);
  margin-bottom: .5rem;
}
.page-header h1 {
  margin-bottom: 1rem;
  color: #fff;
}
.page-header__desc {
  color: rgba(255,255,255,.7);
  font-size: 1.0625rem;
  max-width: 560px;
  margin-inline: auto;
}
/* ============================================================
   HEADER + FOOTER RESPONSIVE TWEAKS (migrated from style.css §22)
   ============================================================ */

/* Mobile (640px) — collapse footer grid to a single column. */
@media (max-width: 640px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* Mobile header: collapse lang + theme pills into mobile drawer */
@media (max-width: 767px) {
  .header-actions > .lang-toggle,
  .header-actions > .theme-toggle { display: none; }
}

/* Touch-friendly sizing on coarse pointers (phones, tablets) */
@media (pointer: coarse) {
  .header-search__btn,
  .hdr-btn,
  .mobile-menu-btn { min-width: 40px; min-height: 40px; }
  .header-search__close { min-width: 40px; min-height: 40px; }
  .theme-toggle button,
  .lang-toggle__btn { min-width: 36px; min-height: 36px; }
  #jacar-totop { width: 48px; height: 48px; }
}

/* Mobile nav drawer controls */
.mobile-nav-controls {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem .75rem .25rem;
  margin-top: .25rem;
  border-top: 1px solid var(--border-faint);
}
.mobile-nav-controls .lang-toggle,
.mobile-nav-controls .theme-toggle { display: flex; }
/* Always expanded in mobile drawer */
.mobile-nav-controls .lang-toggle__btn:not(.active):not([aria-current="page"]) {
  width: 36px; padding: 0 4px; opacity: .55; pointer-events: auto;
}
.mobile-nav-controls .theme-toggle button:not(.active) {
  width: 28px; opacity: 1; pointer-events: auto;
}

/* ============================================================
 *  Page header — shared archive / category / tag / author / search /
 *  date hero. Was in home.css before Task 3.1; moved to layout.css
 *  because home.css is now only enqueued on the homepage and these
 *  archive templates need their hero everywhere.
 *
 *  Recipe matches the .cp-hero variant in home.css (same grid-texture
 *  overlay + floating teal blob) but with a simpler dark-teal gradient.
 *  The jcs-hero-float keyframe is duplicated here so the animation
 *  works without home.css being loaded.
 * ============================================================ */
@keyframes jcs-hero-float {
  0%, 100% { transform: translate(0, 0)   scale(1); }
  33%      { transform: translate(40px, -30px) scale(1.08); }
  66%      { transform: translate(-30px, 40px) scale(0.95); }
}

.page-header {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 360px;
  display: flex;
  align-items: center;
  padding: clamp(3rem, 8vw, 5rem) var(--rhythm-block, 1rem);
  color: #ffffff;
  background:
    radial-gradient(1200px 600px at 20% 30%, rgba(69, 123, 157, 0.55) 0%, transparent 60%),
    radial-gradient( 800px 500px at 80% 70%, rgba(43, 138, 148, 0.30) 0%, transparent 60%),
    linear-gradient(135deg, #1a1a1a 0%, #2b8a94 100%);
}
.page-header::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23A8DADC' stroke-width='0.5' stroke-opacity='0.13'%3E%3Cpath d='M0 0h60v60H0z'/%3E%3Cpath d='M30 0v60M0 30h60'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 60px 60px;
}
.page-header::after {
  content: "";
  position: absolute;
  top: -30%; right: -20%;
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(180, 200, 120, 0.22) 0%, transparent 70%);
  border-radius: 50%;
  filter: blur(60px);
  animation: jcs-hero-float 26s ease-in-out infinite;
  z-index: 0;
  pointer-events: none;
}
.page-header > .container { position: relative; z-index: 2; }
.page-header h1,
.page-header .h1,
.page-header .page-header__eyebrow,
.page-header .page-header__desc { color: #ffffff; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.25); }
.page-header__eyebrow {
  font-size: 0.85rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  opacity: 0.85;
  margin: 0 0 0.6rem;
}
.page-header h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.1;
  margin: 0 0 0.5rem;
}
.page-header__desc {
  margin: 0.25rem 0 0;
  max-width: 48rem;
  opacity: 0.85;
  font-size: 1rem;
  line-height: 1.55;
}
@media (max-width: 720px) {
  .page-header { min-height: 280px; }
  .page-header h1 { font-size: clamp(1.6rem, 7vw, 2.2rem); }
}

@media (prefers-reduced-motion: reduce) {
  .page-header {
    animation: none !important;
    background-size: 100% 100% !important;
  }
  .page-header::before,
  .page-header::after {
    animation: none !important;
  }
}

/* Search results page — lock the hero to the same box height as the
   category-page hero (which settles at min-height because its content
   is shorter). Internal spacing is tightened so the search form still
   fits within the locked height. */
body.search .page-header {
  height: 360px;
  min-height: 360px;
}
body.search .search-form-wrap { margin-top: 1rem; }
body.search .search-results-count {
  margin-top: 0.75rem;
  text-align: center;
  max-width: 560px;
  margin-inline: auto;
}
@media (max-width: 720px) {
  body.search .page-header {
    height: 280px;
    min-height: 280px;
  }
  body.search .search-form-wrap { margin-top: 0.75rem; }
  body.search .search-results-count { margin-top: 0.5rem; }
}