/*
Theme Name: AIRundown Editorial
Theme URI: https://aiagent.airundowndaily.com
Description: Editorial design-system child theme for Kadence. Manrope + Inter type pairing, a fluid clamp() type scale, calm technical color tokens (mapped onto Kadence's global palette so the Customizer still drives brand color), reading-optimized single-post layout, and styled cards/callouts/code/tables for a connected "AI knowledge base" feel.
Author: AIRundown
Template: kadence
Version: 1.0.1
Text Domain: airundown-editorial
*/

/* =========================================================
   1. DESIGN TOKENS
   These map onto Kadence's own --global-palette-N variables
   as fallbacks, so changing brand color in the Kadence
   Customizer (Appearance > Customize > Colors) still works.
   Edit the fallback hex values below to set defaults.
   ========================================================= */
:root {
  /* Typography */
  --air-font-heading: "Manrope", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --air-font-body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --air-font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  /* Color — preserves Kadence/site brand palette when set in Customizer */
  --air-ink: var(--global-palette3, #111827);
  --air-text: var(--global-palette4, #334155);
  --air-muted: var(--global-palette5, #64748b);
  --air-border: var(--global-palette7, #e5e7eb);
  --air-surface: var(--global-palette8, #f8fafc);
  --air-surface-strong: var(--global-palette9, #ffffff);
  --air-accent: var(--global-palette1, #2563eb);
  --air-accent-hover: var(--global-palette2, #1d4ed8);

  /* Fluid type scale */
  --air-text-xs: clamp(0.74rem, 0.72rem + 0.05vw, 0.78rem);
  --air-text-sm: clamp(0.82rem, 0.80rem + 0.06vw, 0.88rem);
  --air-text-base: clamp(0.97rem, 0.95rem + 0.05vw, 1rem);
  --air-text-reading: clamp(1rem, 0.98rem + 0.08vw, 1.06rem);
  --air-h6: clamp(1rem, 0.98rem + 0.05vw, 1.08rem);
  --air-h5: clamp(1.06rem, 1.02rem + 0.10vw, 1.18rem);
  --air-h4: clamp(1.16rem, 1.08rem + 0.20vw, 1.34rem);
  --air-h3: clamp(1.30rem, 1.20rem + 0.32vw, 1.65rem);
  --air-h2: clamp(1.62rem, 1.42rem + 0.70vw, 2.15rem);
  --air-h1: clamp(2.05rem, 1.72rem + 1.30vw, 3.25rem);
  --air-hero: clamp(2.45rem, 1.95rem + 1.95vw, 4.15rem);

  /* Layout */
  --air-container: 1240px;
  --air-wide: 1080px;
  --air-reading: 780px;
  --air-narrow: 680px;
  --air-gutter: clamp(1.15rem, 3vw, 3rem);
  --air-section: clamp(3rem, 5vw, 5.5rem);
  --air-block-gap: clamp(1.15rem, 1.7vw, 1.75rem);

  /* Shape / effects */
  --air-radius-sm: 8px;
  --air-radius: 14px;
  --air-radius-lg: 20px;
  --air-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 20px rgba(15, 23, 42, 0.04);
  --air-shadow-hover: 0 12px 32px rgba(15, 23, 42, 0.09);
}

body {
  color: var(--air-text);
  font-family: var(--air-font-body);
  font-size: var(--air-text-base);
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* =========================================================
   2. FOUNDATION / TYPOGRAPHY
   ========================================================= */
:where(p, li, dd, dt, input, textarea, select, button) {
  font-family: var(--air-font-body);
}

:where(h1, h2, h3, h4, h5, h6, .entry-title, .site-title) {
  color: var(--air-ink);
  font-family: var(--air-font-heading);
  font-style: normal;
  text-wrap: balance;
}

h1, .entry-title {
  font-size: var(--air-h1);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.045em;
}

h2 {
  font-size: var(--air-h2);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.035em;
}

h3 {
  font-size: var(--air-h3);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.026em;
}

h4 {
  font-size: var(--air-h4);
  font-weight: 700;
  line-height: 1.30;
  letter-spacing: -0.018em;
}

h5 {
  font-size: var(--air-h5);
  font-weight: 700;
  line-height: 1.36;
}

h6 {
  font-size: var(--air-h6);
  font-weight: 700;
  line-height: 1.4;
}

:where(h1, h2, h3, h4, h5, h6)[id] {
  scroll-margin-top: 7rem;
}

p {
  margin-block: 0 1.2em;
}

:where(ul, ol) {
  padding-inline-start: 1.45em;
}

li + li {
  margin-top: 0.42em;
}

strong, b {
  color: color-mix(in srgb, var(--air-ink) 94%, transparent);
  font-weight: 700;
}

small, .entry-meta, .post-date, .posted-on, .byline, .cat-links, .tags-links {
  color: var(--air-muted);
  font-size: var(--air-text-sm);
  line-height: 1.5;
}

/* =========================================================
   3. LINKS
   ========================================================= */
a {
  text-underline-offset: 0.18em;
  text-decoration-thickness: 0.08em;
}

:where(.entry-content, .site-main) p a,
:where(.entry-content, .site-main) li a {
  color: var(--air-accent);
  font-weight: 550;
  text-decoration-color: color-mix(in srgb, var(--air-accent) 32%, transparent);
}

:where(.entry-content, .site-main) p a:hover,
:where(.entry-content, .site-main) li a:hover {
  color: var(--air-accent-hover);
  text-decoration-color: currentColor;
}

/* =========================================================
   4. HEADER / NAVIGATION
   ========================================================= */
:where(.site-header, #masthead) {
  font-family: var(--air-font-body);
}

:where(.site-title, .site-branding .site-title) {
  font-weight: 800;
  letter-spacing: -0.035em;
}

:where(.primary-menu-container a, .main-navigation a, .header-navigation a, .mobile-navigation a) {
  font-size: var(--air-text-sm);
  font-weight: 650;
  letter-spacing: -0.008em;
}

:where(.primary-menu-container a, .main-navigation a, .header-navigation a) {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* =========================================================
   5. CONTENT RHYTHM
   ========================================================= */
:where(.entry-content, .wp-site-blocks main) > :where(h2, h3, h4, h5, h6) {
  margin-top: clamp(2.2rem, 4vw, 3.6rem);
  margin-bottom: 0.7em;
}

:where(.entry-content, .wp-site-blocks main) > h2 + :where(p, ul, ol),
:where(.entry-content, .wp-site-blocks main) > h3 + :where(p, ul, ol) {
  margin-top: 0;
}

:where(.entry-content, .wp-site-blocks main) > :where(figure, blockquote, pre, table, .wp-block-table, .wp-block-image, .wp-block-code) {
  margin-block: clamp(1.6rem, 3vw, 2.5rem);
}

/* =========================================================
   6. READING SURFACES (single posts)
   Applied via body.air-single-content — see inc/body-classes.php
   ========================================================= */
body.air-single-content :where(article .entry-header, article .entry-content, article .entry-footer) {
  margin-inline: auto;
}

body.air-single-content article .entry-header {
  max-width: min(var(--air-wide), calc(100vw - (2 * var(--air-gutter))));
}

body.air-single-content article .entry-content {
  max-width: min(var(--air-reading), calc(100vw - (2 * var(--air-gutter))));
  font-size: var(--air-text-reading);
  line-height: 1.72;
}

body.air-single-content article .entry-content :where(h2, h3, h4, h5, h6) {
  line-height: 1.18;
}

body.air-single-content article .entry-content > p:first-of-type {
  color: color-mix(in srgb, var(--air-text) 90%, var(--air-ink));
}

body.air-single-content :where(.entry-meta, .entry-taxonomies) {
  font-variant-numeric: tabular-nums;
}

/* =========================================================
   7. HOMEPAGE / LANDING PAGES
   Applied via body.air-page-home / body.air-page-start-here
   ========================================================= */
body.air-page-home :where(.entry-content > h1, .entry-content > .wp-block-group:first-child h1) {
  font-size: var(--air-hero);
  line-height: 1.01;
  letter-spacing: -0.058em;
  max-width: 12ch;
}

body.air-page-home :where(.entry-content > p, .entry-content > .wp-block-group:first-child p) {
  max-width: 68ch;
}

body.air-page-home :where(.entry-content > .wp-block-group, .entry-content > section),
body.air-page-start-here :where(.entry-content > .wp-block-group, .entry-content > section) {
  margin-block: var(--air-section);
}

/* =========================================================
   8. CARDS / GROUPED SURFACES
   ========================================================= */
:where(.wp-block-group.has-background, .wp-block-column.has-background, .kt-inside-inner-col, .kb-section-dir-horizontal > .kt-inside-inner-col) {
  border-radius: var(--air-radius-lg);
}

:where(.wp-block-group.has-background, .wp-block-column.has-background) {
  border: 1px solid color-mix(in srgb, var(--air-border) 86%, transparent);
  box-shadow: var(--air-shadow-sm);
}

/* =========================================================
   9. BUTTONS
   ========================================================= */
:where(.wp-element-button, .wp-block-button__link, button, input[type="submit"], input[type="button"], .button) {
  border-radius: var(--air-radius-sm);
  font-family: var(--air-font-body);
  font-size: var(--air-text-sm);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.1;
  min-height: 44px;
  padding: 0.78rem 1.08rem;
  transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

:where(.wp-element-button, .wp-block-button__link, button, input[type="submit"], input[type="button"], .button):hover {
  transform: translateY(-1px);
}

/* =========================================================
   10. FORM CONTROLS / GLOSSARY SEARCH
   ========================================================= */
:where(input[type="text"], input[type="search"], input[type="email"], input[type="url"], textarea, select) {
  background: var(--air-surface-strong);
  border: 1px solid var(--air-border);
  border-radius: var(--air-radius-sm);
  color: var(--air-ink);
  font-size: 1rem;
  min-height: 46px;
  padding: 0.72rem 0.9rem;
}

:where(input, textarea, select, button, a):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--air-accent) 34%, transparent);
  outline-offset: 3px;
}

body.air-page-glossary input[type="search"] {
  width: min(100%, 620px);
  min-height: 50px;
  font-size: 1rem;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02);
}

body.air-page-glossary :where(.entry-content button, .entry-content .button) {
  min-width: 40px;
  min-height: 40px;
  padding: 0.55rem 0.72rem;
}

/* =========================================================
   11. BLOCKQUOTES / CALLOUTS
   ========================================================= */
:where(blockquote, .wp-block-quote) {
  margin-inline: 0;
  padding: 1.1rem 1.25rem;
  border: 0;
  border-left: 3px solid var(--air-accent);
  border-radius: 0 var(--air-radius) var(--air-radius) 0;
  background: color-mix(in srgb, var(--air-surface) 92%, var(--air-accent) 8%);
  color: var(--air-text);
}

:where(blockquote, .wp-block-quote) p:last-child {
  margin-bottom: 0;
}

/* =========================================================
   12. CODE
   ========================================================= */
:where(code, kbd, samp, pre) {
  font-family: var(--air-font-mono);
  font-variant-ligatures: none;
}

:not(pre) > code {
  border: 1px solid var(--air-border);
  border-radius: 6px;
  background: var(--air-surface);
  color: color-mix(in srgb, var(--air-ink) 92%, var(--air-accent));
  font-size: 0.88em;
  padding: 0.12em 0.36em;
}

:where(pre, .wp-block-code) {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid color-mix(in srgb, var(--air-border) 86%, transparent);
  border-radius: var(--air-radius);
  background: #0f172a;
  color: #e5edf8;
  box-shadow: var(--air-shadow-sm);
  font-size: clamp(0.80rem, 0.76rem + 0.12vw, 0.90rem);
  line-height: 1.65;
  padding: clamp(1rem, 2.5vw, 1.5rem);
  tab-size: 2;
}

pre code {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
}

/* =========================================================
   13. TABLES
   ========================================================= */
:where(table, .wp-block-table table) {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--air-border);
  border-radius: var(--air-radius);
  overflow: hidden;
  background: var(--air-surface-strong);
  font-size: var(--air-text-sm);
  line-height: 1.55;
}

:where(th, td) {
  padding: clamp(0.72rem, 1.6vw, 1rem);
  border-right: 0;
  border-bottom: 1px solid var(--air-border);
  text-align: left;
  vertical-align: top;
}

th {
  background: var(--air-surface);
  color: var(--air-ink);
  font-family: var(--air-font-heading);
  font-weight: 700;
}

tr:last-child > :where(th, td) {
  border-bottom: 0;
}

.wp-block-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* =========================================================
   14. IMAGES / FIGURES
   ========================================================= */
:where(.entry-content img, .post-thumbnail img, figure img) {
  height: auto;
  max-width: 100%;
}

:where(.entry-content figure img, .entry-content > img, .post-thumbnail img) {
  border-radius: var(--air-radius);
}

figcaption, .wp-element-caption {
  color: var(--air-muted);
  font-size: var(--air-text-xs);
  line-height: 1.5;
  margin-top: 0.65rem;
}

/* =========================================================
   15. SEPARATORS
   ========================================================= */
hr, .wp-block-separator {
  border: 0;
  border-top: 1px solid var(--air-border);
  margin-block: clamp(2rem, 4vw, 3.5rem);
}

/* =========================================================
   16. ARCHIVES
   ========================================================= */
body.air-archive-content :where(.entry-title, .archive-title, .page-title) {
  letter-spacing: -0.04em;
}

body.air-archive-content :where(article, .loop-entry) {
  border-bottom-color: var(--air-border);
}

/* =========================================================
   17. SELECTION
   ========================================================= */
::selection {
  background: color-mix(in srgb, var(--air-accent) 20%, white);
  color: var(--air-ink);
}

/* =========================================================
   18. RESPONSIVE: TABLET
   ========================================================= */
@media (max-width: 1023px) {
  :root {
    --air-container: 960px;
    --air-wide: 880px;
    --air-reading: 740px;
    --air-section: clamp(2.8rem, 6vw, 4.5rem);
  }

  body.air-single-content article .entry-content {
    line-height: 1.72;
  }

  :where(.wp-block-columns) {
    gap: clamp(1rem, 2.6vw, 1.6rem);
  }
}

/* =========================================================
   19. RESPONSIVE: MOBILE
   ========================================================= */
@media (max-width: 767px) {
  :root {
    --air-gutter: clamp(1rem, 5vw, 1.35rem);
    --air-section: clamp(2.3rem, 9vw, 3.6rem);
    --air-block-gap: 1.2rem;
  }

  body {
    line-height: 1.64;
  }

  h1, .entry-title {
    letter-spacing: -0.038em;
  }

  h2 {
    letter-spacing: -0.028em;
  }

  body.air-page-home :where(.entry-content > h1, .entry-content > .wp-block-group:first-child h1) {
    max-width: 14ch;
    line-height: 1.01;
    letter-spacing: -0.045em;
  }

  body.air-single-content article .entry-content {
    max-width: calc(100vw - (2 * var(--air-gutter)));
    line-height: 1.70;
  }

  :where(.wp-block-buttons) {
    gap: 0.7rem;
  }

  :where(.wp-block-button, .wp-block-button__link) {
    max-width: 100%;
  }

  :where(.wp-element-button, .wp-block-button__link, button, input[type="submit"], input[type="button"], .button) {
    min-height: 46px;
  }

  .wp-block-table {
    margin-inline: calc(-1 * var(--air-gutter));
    padding-inline: var(--air-gutter);
    width: calc(100% + (2 * var(--air-gutter)));
  }

  :where(pre, .wp-block-code) {
    border-radius: 10px;
  }

  :where(.entry-content figure.alignwide, .entry-content figure.alignfull) {
    max-width: 100vw;
  }
}

/* =========================================================
   20. VERY SMALL PHONES
   ========================================================= */
@media (max-width: 390px) {
  :root {
    --air-gutter: 1rem;
  }

  :where(.entry-content, .site-main) {
    overflow-wrap: anywhere;
  }
}

/* =========================================================
   21. LARGE SCREENS
   ========================================================= */
@media (min-width: 1440px) {
  :root {
    --air-container: 1320px;
    --air-wide: 1120px;
    --air-reading: 800px;
  }
}

/* =========================================================
   22. ACCESSIBILITY / MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* =========================================================
   23. PRINT
   ========================================================= */
@media print {
  body {
    color: #111;
    background: #fff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 11pt;
  }

  :where(.site-header, .site-footer, nav, .sidebar, .widget-area, .wp-block-buttons) {
    display: none !important;
  }

  body.air-single-content article .entry-content {
    max-width: none;
  }

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

/* =========================================================
   24. RELATED POSTS CAROUSEL
   Kadence's "Similar Posts" splide carousel overlays its
   prev/next arrows on top of the slide edges. Long titles
   were reaching down into the same vertical band as the
   arrow buttons. Clamp to 2 lines (matches the shortest
   real title already used in the carousel) so no title can
   grow tall enough to reach the arrows, instead of trying
   to reserve horizontal space around them.
   ========================================================= */
.entry-related-carousel .entry-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}