/*
Theme Name: AG.digital
Theme URI: https://ag.digital
Author: Artem Gorodetskiy
Author URI: https://ag.digital
Description: Portfolio block theme for AG.digital — Principal UX/UI Designer & AI Researcher. Faithful WordPress port of the original ag.digital site with Gutenberg-editable content, custom Case Studies post type, dark mode and built-in Schema.org markup for SEO/GEO.
Version: 1.3.4
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: agdigital
*/

/* ============ Design tokens (mirrors the original index.css) ============ */
:root {
  --ag-bg: hsl(0 0% 98%);
  --ag-fg: hsl(0 0% 10%);
  --ag-card: hsl(0 0% 100%);
  --ag-secondary: hsl(0 0% 95%);
  --ag-muted: hsl(0 0% 93%);
  --ag-muted-fg: hsl(0 0% 45%);
  --ag-accent: hsl(221 83% 53%);
  --ag-accent-fg: hsl(0 0% 98%);
  --ag-border: hsl(0 0% 90%);
  --ag-radius: 0.75rem;
  --ag-radius-lg: 1rem;
  --ag-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.dark {
  --ag-bg: hsl(0 0% 8%);
  --ag-fg: hsl(0 0% 95%);
  --ag-card: hsl(0 0% 10%);
  --ag-secondary: hsl(0 0% 15%);
  --ag-muted: hsl(0 0% 18%);
  --ag-muted-fg: hsl(0 0% 60%);
  --ag-border: hsl(0 0% 18%);
}

/* Map WP preset variables onto the live-switchable tokens so dark mode
   affects blocks that use theme.json palette colors. */
body {
  --wp--preset--color--background: var(--ag-bg);
  --wp--preset--color--foreground: var(--ag-fg);
  --wp--preset--color--card: var(--ag-card);
  --wp--preset--color--secondary: var(--ag-secondary);
  --wp--preset--color--muted: var(--ag-muted);
  --wp--preset--color--muted-foreground: var(--ag-muted-fg);
  --wp--preset--color--accent: var(--ag-accent);
  --wp--preset--color--border: var(--ag-border);
  background-color: var(--ag-bg);
  color: var(--ag-fg);
  -webkit-font-smoothing: antialiased;
  transition: background-color .3s ease, color .3s ease;
}

html { scroll-behavior: smooth; }
img { max-width: 100%; height: auto; }
a { text-decoration: none; }

/* Site-wide default paragraph style, taken from the case-study body
   copy (e.g. "After, Inc. is a leading provider..."): larger size,
   generous line-height, muted grey. Low specificity on purpose so any
   more specific rule (hero text, buttons, labels, etc.) still wins. */
p { font-size: 1.125rem; line-height: 1.75; color: var(--ag-muted-fg); }
/* Links inside body/description copy (card excerpts, About skill
   descriptions, Contact intro, case-study article text): white with
   an underline, so they read as links against the muted paragraph
   color instead of blending in. */
.wp-block-post-excerpt a,
.ag-skill-card p a,
.wp-block-paragraph a,
.ag-content p a {
  color: var(--ag-fg);
  text-decoration: underline;
  transition: color .2s ease;
}
.wp-block-post-excerpt a:hover,
.ag-skill-card p a:hover,
.wp-block-paragraph a:hover,
.ag-content p a:hover {
  color: color-mix(in srgb, var(--ag-fg) 80%, black);
}

h1, h2, h3, h4 { letter-spacing: -0.02em; }
/* Generic section H2 (About: Skills & Expertise/Experience/Tools I Use;
   Contact: Email/Connect/Availability) — the browser default (1.5em)
   read as too small/plain for a section title. Low specificity (tag +
   wp-block-heading class) so the more specific case-study
   `.single-case_study .ag-content h2` rule below still wins there. */
h2.wp-block-heading {
  font-size: clamp(1.875rem, 4vw, 2.25rem);
  margin-top: 4rem;
}

/* ============ Header / Navbar ============ */
.ag-navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--ag-bg) 80%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--ag-border);
}
.ag-navbar > .ag-navbar-inner {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1.5rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ag-logo-link {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ag-fg);
  transition: var(--ag-transition);
}
.ag-logo-link:hover { opacity: .7; }

.ag-navbar .wp-block-navigation { gap: 2rem; }
.ag-navbar .wp-block-navigation-item { position: relative; }
.ag-navbar .wp-block-navigation a {
  font-size: .875rem;
  font-weight: 500;
  color: var(--ag-muted-fg);
  transition: var(--ag-transition);
}
.ag-navbar .wp-block-navigation a:hover,
.ag-navbar .wp-block-navigation .current-menu-item > a,
.ag-navbar .wp-block-navigation-item.is-current > a {
  color: var(--ag-fg);
}
/* Active-item underline: thin bar under the current top-level nav link,
   toggled via .is-current (added on load by theme.js, since our nav links
   are plain typed URLs rather than linked post objects). */
.ag-navbar .wp-block-navigation-item > a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1.3125rem;
  height: 2px;
  background: var(--ag-fg);
  transform: scaleX(0);
  transition: transform .25s ease;
}
.ag-navbar .wp-block-navigation-item.is-current > a::after { transform: scaleX(1); }
.ag-navbar .wp-block-navigation__submenu-container {
left: 50% !important;
  right: auto !important;
  transform: translateX(-50%);
  background: var(--ag-bg) !important;
  border: 1px solid var(--ag-border) !important;
  border-radius: var(--ag-radius);
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  padding: .5rem !important;
  min-width: 240px !important;
}
.ag-navbar .wp-block-navigation__submenu-container a {
color: var(--ag-muted-fg) !important;
  border-radius: .5rem;
  padding: .625rem .75rem !important;
}
.ag-navbar .wp-block-navigation__submenu-container a:hover {
  background: var(--ag-muted);
  color: var(--ag-fg) !important;
}
.ag-navbar .wp-block-navigation__responsive-container.is-menu-open {
  background: var(--ag-bg);
  padding-top: 5rem;
}

/* Theme toggle button */
.ag-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem; height: 2.5rem;
  border-radius: 9999px;
  border: none;
  background: transparent;
  color: var(--ag-fg);
  cursor: pointer;
  transition: var(--ag-transition);
}
.ag-theme-toggle:hover { background: var(--ag-muted); }
.ag-theme-toggle .icon-sun { display: none; }
.dark .ag-theme-toggle .icon-sun { display: block; }
.dark .ag-theme-toggle .icon-moon { display: none; }

/* Push page content below fixed navbar */
.ag-main { padding-top: 6rem; padding-bottom: 4rem; }

/* ============ Buttons ============ */
.wp-block-button__link, .ag-btn {
  background: var(--ag-fg);
  color: var(--ag-bg);
  border-radius: var(--ag-radius);
  font-weight: 500;
  font-size: 1rem;
  padding: .75rem 2rem;
  transition: var(--ag-transition);
  border: 1px solid transparent;
}
.wp-block-button__link:hover, .ag-btn:hover { opacity: .9; transform: translateY(-1px); }
.is-style-outline > .wp-block-button__link {
  background: transparent;
  color: var(--ag-fg);
  border: 1px solid var(--ag-border);
}
.is-style-outline > .wp-block-button__link:hover { background: var(--ag-secondary); }

/* ============ Pills (categories, tags, skills) ============ */
.ag-pills { display: flex; flex-wrap: wrap; gap: .75rem; }
.ag-pills a, .ag-pill {
  display: inline-block;
  padding: .625rem 1.5rem;
  border-radius: 9999px;
  background: var(--ag-secondary);
  color: var(--ag-fg);
  font-size: .875rem;
  font-weight: 500;
  transition: var(--ag-transition);
}
.ag-pills a:hover, .ag-pill:hover { background: var(--ag-muted); }
.ag-pills a.is-active, .ag-pill.is-active { background: var(--ag-fg); color: var(--ag-bg); }
.ag-tags { display: flex; flex-wrap: wrap; gap: .5rem; }
.ag-tags .wp-block-post-terms__separator { display: none; }
.ag-tag, .ag-tags a {
  font-size: .75rem;
  padding: .25rem .75rem;
  border-radius: 9999px;
  background: var(--ag-secondary);
  color: var(--ag-fg);
  text-decoration: none;
}
/* Tags are informational only, not filterable archive links */
.ag-tags a { pointer-events: none; cursor: default; }

/* ============ Project cards (query loop) ============ */
/* Use the grid's own row-gap/column-gap for spacing (equal in both
   directions) instead of a separate bottom-margin hack, which made
   rows sit further apart than columns. */
.ag-projects .wp-block-post-template {
  row-gap: 3rem;
  column-gap: 3.75rem;
}
.ag-projects .wp-block-post { margin-bottom: 0; }
.ag-card { cursor: pointer; }
.ag-card .ag-card-media {
  position: relative;
  overflow: hidden;
  border-radius: var(--ag-radius-lg);
  background: var(--ag-muted);
  aspect-ratio: 4 / 3;
  margin-bottom: 1rem;
}
/* Animated hover border: a soft dark-to-light-grey band that sweeps
   around the tile, fading smoothly in on hover and out on mouse-leave. */
@property --ag-border-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
.ag-card .ag-card-media::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(from var(--ag-border-angle),
    color-mix(in srgb, var(--ag-muted-fg) 25%, transparent),
    color-mix(in srgb, var(--ag-muted-fg) 75%, transparent),
    color-mix(in srgb, var(--ag-muted-fg) 25%, transparent) 50%,
    color-mix(in srgb, var(--ag-muted-fg) 75%, transparent),
    color-mix(in srgb, var(--ag-muted-fg) 25%, transparent));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .5s ease;
  animation: ag-border-spin 3.5s linear infinite;
  pointer-events: none;
  z-index: 1;
}
.ag-card:hover .ag-card-media::before { opacity: 1; }
@keyframes ag-border-spin { to { --ag-border-angle: 360deg; } }
@media (prefers-reduced-motion: reduce) {
  .ag-card .ag-card-media::before { animation: none; }
}
/* The featured-image block nests figure > a > img; every level must be
   full-height, otherwise the img's height:100% resolves to auto and the
   4:3 tile shows an empty strip below the image. */
.ag-card .ag-card-media .wp-block-post-featured-image {
  height: 100%;
  margin: 0;
}
.ag-card .ag-card-media .wp-block-post-featured-image a {
  display: block;
  height: 100%;
}
.ag-card .ag-card-media img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .7s cubic-bezier(0.4, 0, 0.2, 1);
}
.ag-card:hover .ag-card-media img { transform: scale(1.05); }
.ag-card .ag-card-media::after {
  content: "↗";
  position: absolute;
  bottom: 1.5rem; right: 1.5rem;
  width: 2.75rem; height: 2.75rem;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.9);
  color: #111;
  border-radius: 9999px;
  font-size: 1.1rem;
  opacity: 0;
  transition: var(--ag-transition);
}
.ag-card:hover .ag-card-media::after { opacity: 1; }
.ag-card .wp-block-post-terms {
  font-size: .75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ag-accent);
}
.ag-card .wp-block-post-terms a { color: var(--ag-accent); }
.ag-card .wp-block-post-title { font-size: 1.5rem; font-weight: 700; line-height: 1.25; margin: .75rem 0 0; }
.ag-card .wp-block-post-title a { color: var(--ag-fg); transition: var(--ag-transition); }
/* Match the body copy used inside case studies (.ag-content p) rather
   than a smaller card-specific size. */
.ag-card .wp-block-post-excerpt { font-size: 1.125rem; line-height: 1.75; color: var(--ag-muted-fg); margin-top: 1.125rem; }
.ag-card .wp-block-post-excerpt__more-link { display: none; }

/* ============ Typography helpers ============ */
.ag-hero-title { font-size: clamp(3rem, 8vw, 4.5rem); font-weight: 700; line-height: 1.02; letter-spacing: -0.03em; }
.ag-muted { color: var(--ag-muted-fg); }
.ag-accent-label {
  font-size: .875rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--ag-accent);
}

/* ============ Case study ============ */
/* Two-column header: title/eyebrow/excerpt/tags on the left, cover image
   on the right (matches the original ag.digital layout). */
.single-case_study .ag-case-back { text-align: left; margin-bottom: 2rem; }
.single-case_study .ag-case-head { margin-bottom: 4rem; gap: 4rem; }
.single-case_study .ag-case-head .wp-block-post-excerpt { max-width: 32rem; margin-top: 1.5rem; }
.single-case_study .ag-case-head .ag-tags { margin-top: 1.5rem; justify-content: flex-start; }
.single-case_study .ag-case-cover-col { flex-basis: 0; }
.single-case_study .ag-case-cover img {
  border-radius: var(--ag-radius-lg);
  width: 100%;
  height: auto;
  display: block;
}
@media (max-width: 781px) {
  .single-case_study .ag-case-head { gap: 2rem; }
  .single-case_study .ag-case-cover-col { order: -1; }
}

.ag-details-grid {
  border-top: 1px solid var(--ag-border);
  border-bottom: 1px solid var(--ag-border);
  padding: 3rem 0;
}
/* Match the narrow text-column width even though the block itself
   carries an .alignwide class (which would otherwise stretch it to
   the 80rem wide-size). */
.ag-details-grid.alignwide {
  max-width: 48rem;
  margin-left: auto;
  margin-right: auto;
}
.ag-details-grid .label { font-size: .875rem; color: var(--ag-muted-fg); margin-bottom: .5rem; }
.ag-details-grid .value { font-size: 1.125rem; font-weight: 600; }

.single-case_study .ag-content h2 { font-size: clamp(1.875rem, 4vw, 2.25rem); font-weight: 700; margin-top: 4rem; }
.single-case_study .ag-content h3 { font-size: clamp(1.5rem, 3vw, 1.875rem); font-weight: 700; margin-top: 3rem; }
.single-case_study .ag-content p, .single-case_study .ag-content ul {
  font-size: 1.125rem; line-height: 1.75; color: var(--ag-muted-fg);
}
.ag-content figure img, .ag-rounded img, .ag-rounded { border-radius: var(--ag-radius-lg); }
.ag-content figcaption { text-align: center; font-size: .875rem; color: var(--ag-muted-fg); margin-top: 1rem; }

/* Full-bleed colored bands */
/* Core block-library ships this rule normally; it's missing here, which
   was silently squeezing every alignfull element (colored case-study
   bands, etc.) down to the constrained content width instead of
   bleeding edge-to-edge. */
.alignfull { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }

.ag-band { padding: 3rem 0; }
.ag-band figure { margin: 0 auto; max-width: 80rem; padding: 0 1.5rem; }
.ag-band-yellow { background: #FCB018; }
.ag-band-purple { background: #5D44F6; }
.ag-band-black  { background: #000; }
.ag-band-grey   { background: var(--ag-muted); }

/* Scroll-snap carousel */
.ag-carousel {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 1rem;
  -webkit-overflow-scrolling: touch;
}
.ag-carousel > figure, .ag-carousel > .wp-block-image {
  flex: 0 0 85%;
  scroll-snap-align: start;
  margin: 0;
}
.ag-carousel img { border-radius: var(--ag-radius-lg); width: 100%; object-fit: cover; }
.ag-carousel::-webkit-scrollbar { height: 8px; }
.ag-carousel::-webkit-scrollbar-thumb { background: var(--ag-border); border-radius: 9999px; }

/* Carousel prev/next arrows (injected by theme.js) */
.ag-carousel-wrap { position: relative; }
.ag-carousel-nav {
  position: absolute;
  top: calc(50% - .5rem);
  transform: translateY(-50%);
  width: 3rem; height: 3rem;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .92);
  color: #111;
  border: 1px solid var(--ag-border);
  border-radius: 9999px;
  font-size: 1.75rem; line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
  transition: var(--ag-transition);
  z-index: 2;
}
.ag-carousel-nav:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
.ag-carousel-prev { left: .75rem; }
.ag-carousel-next { right: .75rem; }
.ag-carousel-nav.is-disabled { opacity: 0; pointer-events: none; }
@media (max-width: 640px) {
  .ag-carousel-nav { width: 2.5rem; height: 2.5rem; font-size: 1.5rem; }
}

/* Table of contents (single case study, desktop) */
.ag-toc {
  position: fixed;
  left: 2rem; top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  max-width: 220px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.ag-toc.is-visible { opacity: 1; pointer-events: auto; }
.ag-toc a {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .5rem 0;
  group: link;
}
.ag-toc-line {
  height: 1px;
  width: 1.5rem;
  background: color-mix(in srgb, var(--ag-muted-fg) 30%, transparent);
  transition: width .3s ease, background-color .3s ease;
  flex: none;
}
.ag-toc-label {
  font-size: .8125rem;
  color: var(--ag-muted-fg);
  opacity: 0;
  transition: opacity .3s ease, color .3s ease;
  white-space: nowrap;
}
.ag-toc a:hover .ag-toc-line { width: 2rem; background: color-mix(in srgb, var(--ag-muted-fg) 60%, transparent); }
.ag-toc a:hover .ag-toc-label { opacity: .7; }
.ag-toc a.is-active .ag-toc-line { width: 3rem; background: var(--ag-accent); }
.ag-toc a.is-active .ag-toc-label { opacity: 1; color: var(--ag-fg); font-weight: 500; }
@media (max-width: 1279px) { .ag-toc { display: none; } }

/* ============ Experience timeline (About) ============ */
.ag-xp { border-left: 2px solid var(--ag-border); padding-left: 2rem; padding-bottom: 2rem; }
.ag-xp .ag-xp-year { font-size: .875rem; font-weight: 500; color: var(--ag-accent); margin-bottom: .5rem; }
.ag-xp h3 { font-size: 1.5rem; font-weight: 600; margin: 0 0 .25rem; }
.ag-xp .ag-xp-co { color: var(--ag-muted-fg); }
.ag-xp .ag-xp-loc { font-size: .875rem; color: var(--ag-muted-fg); margin-bottom: .75rem; }
.ag-xp p { color: var(--ag-muted-fg); }

/* Tool / skill cards */
.ag-tool-card {
display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .625rem;
  padding: 1.5rem;
  border-radius: var(--ag-radius);
  background: var(--ag-card);
  border: 1px solid transparent;
  text-align: center;
  font-weight: 500;
  transition: var(--ag-transition);
  position: relative;
}
.ag-tool-card .ag-tool-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ag-tool-card .ag-tool-icon img,
.ag-tool-card .ag-tool-icon svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.dark .ag-tool-card .ag-tool-icon img.ag-icon-invert {
  filter: invert(1) brightness(1.6);
}
.ag-skill-card {
  padding: 1.5rem;
  border-radius: var(--ag-radius);
  background: var(--ag-card);
  border: 1px solid transparent;
  transition: var(--ag-transition);
  position: relative;
}
.ag-skill-card h3 { font-size: 1.125rem; font-weight: 600; margin: 0 0 .5rem; }
.ag-skill-card p { font-size: 1.125rem; line-height: 1.75; color: var(--ag-muted-fg); margin: 0; }
/* Same animated conic-gradient sweeping border used on case-study tiles
   (see @property --ag-border-angle / ag-border-spin above), reused here
   so the About page tool/skill tiles hover consistently with Work tiles. */
.ag-tool-card::before,
.ag-skill-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--ag-border-angle),
    color-mix(in srgb, var(--ag-muted-fg) 25%, transparent),
    color-mix(in srgb, var(--ag-muted-fg) 75%, transparent),
    color-mix(in srgb, var(--ag-muted-fg) 25%, transparent) 50%,
    color-mix(in srgb, var(--ag-muted-fg) 75%, transparent),
    color-mix(in srgb, var(--ag-muted-fg) 25%, transparent));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .5s ease;
  animation: ag-border-spin 3.5s linear infinite;
  pointer-events: none;
}
.ag-tool-card:hover::before,
.ag-skill-card:hover::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .ag-tool-card::before, .ag-skill-card::before { animation: none; }
}

/* ============ Contact form ============ */
.ag-form label { display: block; font-size: .875rem; font-weight: 500; margin-bottom: .5rem; }
.ag-form input[type="text"],
.ag-form input[type="email"],
.ag-form textarea {
  box-sizing: border-box;
  width: 100%;
  padding: .5rem .75rem;
  border-radius: .625rem;
  border: 1px solid var(--ag-border);
  background: var(--ag-card);
  color: var(--ag-fg);
  font-size: .875rem;
  font-family: inherit;
  margin-bottom: 1.5rem;
  transition: var(--ag-transition);
}
.ag-form input:focus, .ag-form textarea:focus {
  outline: 2px solid var(--ag-fg);
  outline-offset: 1px;
  border-color: transparent;
}
.ag-form textarea { min-height: 160px; resize: none; }
.ag-form button {
  box-sizing: border-box;
  width: 100%;
  height: 3rem;
  border: none;
  border-radius: var(--ag-radius);
  background: var(--ag-fg);
  color: var(--ag-bg);
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--ag-transition);
}
.ag-form button:hover { opacity: .9; }
.ag-form .ag-hp { position: absolute; left: -9999px; }
.ag-form-notice { padding: 1rem 1.25rem; border-radius: var(--ag-radius); margin-bottom: 1.5rem; font-size: .9375rem; }
.ag-form-notice.ok { background: #e7f6ec; color: #14532d; }
.ag-form-notice.err { background: #fdecec; color: #7f1d1d; }
.dark .ag-form-notice.ok { background: #14361f; color: #a7e3bc; }
.dark .ag-form-notice.err { background: #3a1414; color: #f3b4b4; }

/* Contact page: email / social links with icons (right column) */
.ag-contact-links { display: flex; flex-direction: column; gap: 1rem; margin: 0 0 2.5rem; }
.ag-contact-links a {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: 1.125rem;
  color: var(--ag-muted-fg);
  transition: var(--ag-transition);
}
.ag-contact-links a:hover { color: var(--ag-fg); }
.ag-contact-links svg { width: 20px; height: 20px; flex: none; }

/* Contact page: form column narrower than the info column, with the
   freed-up space going entirely into the gap between them (info column
   keeps its original width; form + its submit button shrink together
   since the button is width:100% of the form). */
.page-id-31 .wp-block-columns {
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 3rem;
}
.page-id-31 .wp-block-columns > .wp-block-column {
  min-width: 0;
}
.page-id-31 .wp-block-columns > .wp-block-column:first-child {
  flex: 0 0 38.5%;
}
.page-id-31 .wp-block-columns > .wp-block-column:last-child {
  flex: 0 0 48%;
}
@media (max-width: 781px) {
  .page-id-31 .wp-block-columns > .wp-block-column {
    flex: 1 1 100% !important;
  }
  .page-id-31 .wp-block-columns > .wp-block-column + .wp-block-column {
    margin-top: 1rem;
  }
}

/* Availability badge */
.ag-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem 1rem;
  border-radius: 9999px;
  background: color-mix(in srgb, var(--ag-accent) 10%, transparent);
  color: var(--ag-accent);
  font-size: .875rem; font-weight: 500;
}
.ag-badge::before {
  content: "";
  width: .5rem; height: .5rem;
  border-radius: 9999px;
  background: var(--ag-accent);
  animation: ag-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes ag-pulse { 50% { opacity: .4; } }

/* ============ Footer ============ */
.ag-footer {
  max-width: 80rem; margin: 0 auto;
  padding: .75rem 1.5rem;
  display: flex; flex-wrap: wrap; gap: 1.5rem;
  align-items: center; justify-content: space-between;
  font-size: .875rem; color: var(--ag-muted-fg);
}
.ag-footer a { color: var(--ag-muted-fg); transition: var(--ag-transition); }
.ag-footer a:hover { color: var(--ag-fg); }
.ag-footer .ag-social { display: flex; gap: 1.5rem; align-items: center; }
.ag-footer svg { width: 20px; height: 20px; display: block; }

/* ============ Entry animations ============ */
@media (prefers-reduced-motion: no-preference) {
  .ag-animate {
    opacity: 0;
    transform: translateY(16px);
    animation: ag-in .7s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }
  .ag-delay-1 { animation-delay: .1s; }
  .ag-delay-2 { animation-delay: .2s; }
  .ag-delay-3 { animation-delay: .3s; }
}
@keyframes ag-in { to { opacity: 1; transform: none; } }

/* ============ Misc ============ */
.wp-site-blocks > * + * { margin-block-start: 0; }