/* ==========================================================================
   Kava Shots — theme layer
   Loads after Elementor so it can refine builder output. Everything here is
   either (a) styling the theme's own PHP templates, or (b) behaviour Elementor
   free can't express on its own: the mobile nav, sticky rail, aspect-ratio
   images and chip/tab treatments.
   ========================================================================== */

:root {
  --ks-cream: #efebdd;
  --ks-cream-alt: #f4f0e6;
  --ks-tan: #dcd6c4;
  --ks-ink: #12241c;
  --ks-acc: #46a55e;
  --ks-acc-dark: #3b8c4f;
  --ks-body: #3b4b41;
  --ks-muted: #6b7a6f;
  --ks-muted-2: #7c8172;
  --ks-on-dark: #b7c2b8;
  --ks-line: rgba(18, 36, 28, 0.14);
  --ks-line-dark: rgba(239, 235, 221, 0.16);
  --ks-display: 'Bricolage Grotesque', 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ks-sans: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --ks-wrap: 1240px;
  --ks-radius: 18px;
  --ks-header-h: 68px;
}

/* Nothing should ever push the page sideways. */
html,
body {
  overflow-x: hidden;
  max-width: 100%;
}

body {
  font-family: var(--ks-sans);
  background: var(--ks-cream);
  color: var(--ks-ink);
  line-height: 1.6;
}

.ks-site {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.ks-main {
  flex: 1 0 auto;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ks-display);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 0.5em;
}

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

.ks-entry a:not(.ks-btn) {
  color: var(--ks-acc-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Accessibility -------------------------------------------------------- */

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ks-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999999;
  padding: 12px 20px;
  background: var(--ks-ink);
  color: var(--ks-cream);
  border-radius: 0 0 10px 0;
  font-weight: 700;
}

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

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 3px solid var(--ks-acc);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Layout helpers ------------------------------------------------------- */

.ks-wrap {
  width: 100%;
  max-width: var(--ks-wrap);
  margin: 0 auto;
  padding: 0 40px;
}

.ks-wrap--narrow {
  max-width: 860px;
}

.ks-eyebrow {
  font-family: var(--ks-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ks-muted);
  margin: 0 0 12px;
}

.ks-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 24px;
  border: 1.5px solid var(--ks-ink);
  border-radius: 100px;
  font-size: 14.5px;
  font-weight: 700;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.ks-btn:hover {
  background: var(--ks-ink);
  color: var(--ks-cream);
}

.ks-btn--solid {
  background: var(--ks-acc);
  border-color: var(--ks-acc);
  color: var(--ks-ink);
}

.ks-btn--solid:hover {
  background: var(--ks-acc-dark);
  border-color: var(--ks-acc-dark);
  color: var(--ks-ink);
}

/* ==========================================================================
   Elementor refinements
   ========================================================================== */

/* Fixed-ratio media. Elementor's image widget has no crop control in free,
   so the ratio is enforced here and the token classes come from the builder. */
.ks-ratio img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ks-ratio-16-10 img { aspect-ratio: 16 / 10; }
.ks-ratio-4-3 img   { aspect-ratio: 4 / 3; }
.ks-ratio-1-1 img   { aspect-ratio: 1 / 1; }
.ks-ratio-21-9 img  { aspect-ratio: 21 / 9; }

@media (max-width: 767px) {
  /* Ultra-wide crops get too letterboxed on a phone. */
  .ks-ratio-21-9 img { aspect-ratio: 16 / 9; }
}

/* Headings that link shouldn't look like links until hovered. */
.elementor-widget-heading a {
  transition: color 0.2s ease;
}

.elementor-widget-heading a:hover {
  color: var(--ks-acc-dark);
}

/* Chip rows (topic tags, region traits). */
.ks-chips .elementor-icon-list-items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ks-chips .elementor-icon-list-item {
  background: rgba(18, 36, 28, 0.06);
  border: 1px solid var(--ks-line);
  border-radius: 100px;
  padding: 6px 14px !important;
  margin: 0 !important;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.ks-chips .elementor-icon-list-item:hover {
  background: rgba(70, 165, 94, 0.16);
  border-color: rgba(70, 165, 94, 0.5);
}

/* Checklist rows. */
.ks-checks .elementor-icon-list-item {
  align-items: flex-start;
}

.ks-checks .elementor-icon-list-icon {
  margin-top: 4px;
}

/* Breadcrumbs. */
.ks-breadcrumb .elementor-icon-list-items {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
}

.ks-breadcrumb .elementor-icon-list-item:not(:last-child)::after {
  content: '/';
  margin-left: 10px;
  color: var(--ks-muted-2);
}

/* Sticky sidebar rail — Elementor's sticky effect is Pro-only. */
@media (min-width: 1025px) {
  .ks-rail > .elementor-widget-wrap,
  .ks-rail > .elementor-element-populated {
    position: sticky;
    top: calc(var(--ks-header-h) + 24px);
    align-self: flex-start;
  }
}

/* Tabs — the timeline and regions explorer. */
.ks-tabs .elementor-tab-title {
  border-radius: 10px 10px 0 0;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.ks-tabs .elementor-tab-content {
  line-height: 1.6;
}

.ks-tabs .elementor-tab-content h3 {
  font-size: 24px;
  margin-bottom: 10px;
}

.ks-tabs .ks-tab-kicker {
  font-family: var(--ks-display);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ks-acc);
  margin-bottom: 10px;
}

.ks-tabs .ks-tab-traits {
  margin-top: 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ks-muted);
}

/* Dark bands need light tab chrome. */
.ks-dark .ks-tabs .elementor-tab-title,
.ks-dark .ks-tabs .elementor-tab-content {
  color: var(--ks-on-dark);
  border-color: var(--ks-line-dark) !important;
}

.ks-dark .ks-tabs .elementor-tab-title.elementor-active {
  color: var(--ks-cream);
}

.ks-dark .ks-tabs .elementor-tab-content h3 {
  color: var(--ks-cream);
}

/* ==========================================================================
   Dynamic widgets (registered by the theme, rendered from WordPress)
   ========================================================================== */

.ks-widget-empty {
  padding: 20px;
  border: 1px dashed var(--ks-line);
  border-radius: 12px;
  color: var(--ks-muted);
  font-size: 14px;
  text-align: center;
}

/* --- Nav menu --------------------------------------------------------- */

.ks-menu__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ks-menu--vertical .ks-menu__list {
  flex-direction: column;
  align-items: stretch;
}

.ks-menu a {
  display: block;
  color: var(--ks-ink);
  transition: color 0.2s ease;
  white-space: nowrap;
}

.ks-menu .current-menu-item > a,
.ks-menu .current_page_item > a {
  color: var(--ks-acc-dark);
}

/* Sub-menus: hover-open on desktop, always-open inside the mobile panel. */
.ks-menu .sub-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 1025px) {
  .ks-menu__list > .menu-item-has-children {
    position: relative;
  }

  .ks-menu__list > .menu-item-has-children > .sub-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    min-width: 210px;
    padding: 8px;
    background: var(--ks-cream-alt);
    border: 1px solid var(--ks-line);
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(18, 36, 28, 0.12);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
    z-index: 60;
  }

  .ks-menu__list > .menu-item-has-children:hover > .sub-menu,
  .ks-menu__list > .menu-item-has-children:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }

  .ks-menu .sub-menu a {
    padding: 9px 12px;
    border-radius: 9px;
    white-space: normal;
  }

  .ks-menu .sub-menu a:hover {
    background: rgba(70, 165, 94, 0.12);
  }
}

/* --- Featured post ---------------------------------------------------- */

.ks-feature__media {
  display: block;
  aspect-ratio: 1.6;
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 18px;
  background: var(--ks-ink);
}

.ks-feature__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.ks-feature:hover .ks-feature__media img {
  transform: scale(1.03);
}

.ks-feature__cat,
.ks-feed__cat {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ks-acc-dark);
  margin: 0 0 8px;
}

.ks-feature__title {
  font-family: var(--ks-display);
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.03;
  margin: 0 0 12px;
  text-wrap: balance;
}

.ks-feature__title a:hover {
  color: var(--ks-acc-dark);
}

.ks-feature__excerpt {
  font-size: clamp(15.5px, 2vw, 17px);
  line-height: 1.55;
  color: var(--ks-body);
  margin: 0 0 12px;
  max-width: 60ch;
}

.ks-feature__meta,
.ks-feed__meta {
  font-size: 12.5px;
  color: var(--ks-muted);
  margin: 0;
}

/* --- Post feed -------------------------------------------------------- */

.ks-feed {
  display: grid;
  gap: 28px;
}

.ks-feed--list,
.ks-feed--compact {
  grid-template-columns: 1fr;
  gap: 0;
}

.ks-feed--grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ks-feed--list .ks-feed__item {
  display: grid;
  grid-template-columns: 216px 1fr;
  gap: 24px;
  align-items: center;
  padding: 22px 0;
}

.ks-feed--compact .ks-feed__item {
  padding: 16px 0;
}

.ks-feed--divided .ks-feed__item + .ks-feed__item {
  border-top: 1px solid var(--ks-line);
}

.ks-feed--list .ks-feed__media {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
  background: var(--ks-ink);
}

.ks-feed--grid .ks-feed__item {
  display: flex;
  flex-direction: column;
  background: var(--ks-cream-alt);
  border: 1px solid var(--ks-line);
  border-radius: var(--ks-radius);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.ks-feed--grid .ks-feed__item:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(18, 36, 28, 0.1);
}

.ks-feed--grid .ks-feed__media {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--ks-ink);
}

.ks-feed--grid .ks-feed__body {
  padding: 20px 20px 24px;
}

.ks-feed__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.ks-feed__item:hover .ks-feed__media img {
  transform: scale(1.04);
}

.ks-feed__title {
  font-family: var(--ks-display);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.01em;
  margin: 0 0 9px;
  text-wrap: balance;
}

.ks-feed__title a {
  transition: color 0.2s ease;
}

.ks-feed__title a:hover {
  color: var(--ks-acc-dark);
}

.ks-feed__excerpt {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ks-body);
  margin: 0 0 10px;
  max-width: 62ch;
}

/* --- Compact list (sidebar rails) ------------------------------------- */

.ks-list__heading {
  font-family: var(--ks-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ks-muted-2);
  margin: 0 0 12px;
}

.ks-list__items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ks-list__item + .ks-list__item {
  border-top: 1px solid var(--ks-line);
}

.ks-list__link {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 12px 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  transition: color 0.2s ease;
}

.ks-list__link:hover {
  color: var(--ks-acc-dark);
}

.ks-list__num {
  font-family: var(--ks-display);
  font-weight: 800;
  font-size: 13px;
  color: var(--ks-acc);
  min-width: 20px;
}

@media (max-width: 767px) {
  .ks-feed--list .ks-feed__item {
    grid-template-columns: 1fr !important;
    gap: 14px;
  }

  .ks-feed--grid {
    grid-template-columns: 1fr !important;
  }

  .ks-feature__media {
    aspect-ratio: 16 / 10;
  }
}

/* ==========================================================================
   Header (Elementor template + theme-provided mobile behaviour)
   ========================================================================== */

.ks-site-header {
  position: sticky;
  top: 0;
  z-index: 500;
  background: var(--ks-cream);
}

.ks-header {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.ks-header .elementor-container {
  align-items: center;
}

.ks-logo {
  font-family: var(--ks-display);
}

/* The hamburger is injected by theme.js so the Elementor template stays
   free of markup widgets. */
.ks-nav-toggle {
  display: none;
  position: absolute;
  right: 0;
  /* Pinned to the first row so it stays beside the logo when the panel opens,
     rather than drifting to the middle of the expanded header. */
  top: 0;
  z-index: 20;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1.5px solid var(--ks-line);
  border-radius: 12px;
  background: var(--ks-cream-alt);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
}

.ks-nav-toggle .ks-bar {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--ks-ink);
  transition: transform 0.25s ease, opacity 0.2s ease;
}

.ks-nav-open .ks-nav-toggle .ks-bar:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.ks-nav-open .ks-nav-toggle .ks-bar:nth-child(2) {
  opacity: 0;
}

.ks-nav-open .ks-nav-toggle .ks-bar:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

@media (max-width: 1024px) {
  .ks-header {
    position: relative;
  }

  .ks-nav-toggle {
    display: flex;
  }

  .ks-header .elementor-container {
    position: relative;
  }

  /* Reserve the toggle's space and give the logo row a matching height so the
     two sit on the same line. */
  .ks-header .ks-header-brand {
    min-height: 44px;
    justify-content: center;
    padding-right: 56px;
  }

  /* Collapse the nav + CTA columns into a dropdown panel. */
  .ks-header .ks-header-nav,
  .ks-header .ks-header-cta {
    display: none;
    width: 100%;
  }

  .ks-header.ks-nav-open .ks-header-nav,
  .ks-header.ks-nav-open .ks-header-cta {
    display: block;
  }

  .ks-header.ks-nav-open .ks-header-nav {
    border-top: 1px solid var(--ks-line);
    margin-top: 14px;
    padding-top: 14px;
  }

  /* The WP menu becomes a stacked panel. */
  .ks-header .ks-menu__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .ks-header .ks-menu__list > li {
    border-bottom: 1px solid var(--ks-line);
  }

  .ks-header .ks-menu__list > li:last-child {
    border-bottom: 0;
  }

  .ks-header .ks-menu a {
    padding: 13px 4px;
    white-space: normal;
  }

  /* Sub-menus stay open and indented rather than hovering. */
  .ks-header .ks-menu .sub-menu {
    padding-left: 14px;
    border-left: 2px solid var(--ks-line);
    margin: 0 0 8px 4px;
  }

  .ks-header .ks-menu .sub-menu a {
    padding: 9px 4px;
    font-size: 0.95em;
    color: var(--ks-muted);
  }

  .ks-header .ks-header-cta {
    padding-top: 10px;
  }

  .ks-header .ks-header-cta .elementor-button {
    width: 100%;
    justify-content: center;
  }

  /* Utility bar links wrap centred on small screens. */
  .ks-utility .ks-utility-links .elementor-icon-list-items {
    justify-content: center;
  }
}

@media (max-width: 767px) {
  .ks-utility {
    text-align: center;
  }
}

/* ==========================================================================
   Theme templates: archive, single, 404
   ========================================================================== */

.ks-archive-head {
  padding: 56px 0 30px;
}

.ks-archive-title {
  font-size: clamp(30px, 6vw, 50px);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0 0 14px;
}

.ks-archive-sub {
  font-size: clamp(16px, 2.2vw, 18px);
  color: var(--ks-body);
  max-width: 620px;
  margin: 0;
}

.ks-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 30px;
  padding-bottom: 60px;
}

.ks-card {
  display: flex;
  flex-direction: column;
  background: var(--ks-cream-alt);
  border: 1px solid var(--ks-line);
  border-radius: var(--ks-radius);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.ks-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(18, 36, 28, 0.1);
}

.ks-card__media {
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--ks-ink);
  overflow: hidden;
}

.ks-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.ks-card:hover .ks-card__media img {
  transform: scale(1.04);
}

.ks-card__placeholder {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--ks-ink), var(--ks-acc));
}

.ks-card__body {
  padding: 20px 20px 24px;
}

.ks-card__cat {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ks-acc-dark);
  margin: 0 0 7px;
}

.ks-card__title {
  font-size: 21px;
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 9px;
}

.ks-card__excerpt {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ks-body);
  margin: 0 0 12px;
}

.ks-card__meta {
  font-size: 12.5px;
  color: var(--ks-muted);
  margin: 0;
}

/* Pagination */
.ks-pagination,
.pagination {
  padding: 0 0 70px;
}

.ks-pagination .page-numbers,
.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  margin: 0 4px 8px;
  border: 1px solid var(--ks-line);
  border-radius: 100px;
  font-weight: 700;
  font-size: 14px;
}

.ks-pagination .page-numbers.current,
.pagination .page-numbers.current {
  background: var(--ks-ink);
  border-color: var(--ks-ink);
  color: var(--ks-cream);
}

/* Single post (classic-editor fallback styling) */
.ks-post-head {
  padding: 50px 0 10px;
}

.ks-post-title {
  font-size: clamp(30px, 6vw, 52px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.98;
  margin: 0 0 16px;
}

.ks-post-standfirst {
  font-size: clamp(16.5px, 2.4vw, 20px);
  line-height: 1.55;
  color: var(--ks-body);
  margin: 0 0 16px;
}

.ks-post-meta {
  font-size: 13.5px;
  color: var(--ks-muted);
  margin: 0;
}

.ks-post-hero {
  margin: 28px 0 0;
}

.ks-post-hero img {
  width: 100%;
  border-radius: 22px;
  display: block;
}

.ks-entry {
  padding: 30px 0 60px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--ks-body);
}

.ks-entry h2 {
  font-size: clamp(24px, 4vw, 34px);
  margin: 1.5em 0 0.5em;
  color: var(--ks-ink);
}

.ks-entry h3 {
  font-size: clamp(20px, 3vw, 25px);
  margin: 1.4em 0 0.45em;
  color: var(--ks-ink);
}

.ks-entry img,
.ks-entry iframe {
  max-width: 100%;
  border-radius: 14px;
}

.ks-entry blockquote {
  margin: 1.6em 0;
  padding: 22px 26px;
  background: rgba(70, 165, 94, 0.08);
  border-left: 4px solid var(--ks-acc);
  border-radius: 0 16px 16px 0;
  font-family: var(--ks-display);
  font-size: 20px;
  line-height: 1.4;
  color: var(--ks-ink);
}

/* Tables scroll inside their own box rather than widening the page. */
.ks-entry .wp-block-table,
.ks-entry figure.wp-block-table {
  margin: 1.6em 0;
  overflow-x: auto;
  max-width: 100%;
}

.ks-entry table {
  width: 100%;
  min-width: 460px;
  border-collapse: collapse;
  font-size: 15.5px;
}

.ks-entry th,
.ks-entry td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--ks-line);
  text-align: left;
  vertical-align: top;
}

.ks-entry thead th {
  font-family: var(--ks-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ks-muted-2);
  border-bottom: 2px solid var(--ks-ink);
}

/* --- Article block styles used by the imported post content ----------- */

.ks-entry .ks-standfirst {
  font-size: clamp(17px, 2.4vw, 20px);
  line-height: 1.55;
  color: var(--ks-ink);
  font-weight: 500;
  margin-bottom: 1.4em;
}

.ks-entry .ks-lede {
  font-size: clamp(16.5px, 2.2vw, 18.5px);
  line-height: 1.6;
  color: var(--ks-ink);
}

.ks-entry .ks-kicker {
  font-family: var(--ks-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ks-acc-dark);
  margin-bottom: 0.4em;
}

.ks-entry .ks-fineprint {
  font-size: 13.5px;
  color: var(--ks-muted-2);
}

.ks-entry .ks-note {
  background: var(--ks-tan);
  border-radius: 20px;
  padding: 26px 28px;
  margin: 1.8em 0;
}

.ks-entry .ks-note h3 {
  margin-top: 0;
  font-size: clamp(19px, 2.6vw, 23px);
}

.ks-entry .ks-note > *:last-child {
  margin-bottom: 0;
}

.ks-entry .ks-note--warn {
  background: rgba(232, 179, 61, 0.14);
  border: 1px solid rgba(232, 179, 61, 0.5);
}

.ks-entry .ks-note-link {
  margin-top: -0.8em;
  font-weight: 700;
}

.ks-entry .ks-author {
  background: var(--ks-cream-alt);
  border: 1px solid var(--ks-line);
  border-radius: 18px;
  padding: 24px 26px;
}

.ks-entry .ks-author h3 {
  margin-top: 0;
  font-size: 19px;
}

.ks-entry ul,
.ks-entry ol {
  padding-left: 1.3em;
  margin: 1.1em 0;
}

.ks-entry li {
  margin-bottom: 0.5em;
}

.ks-entry .wp-block-separator {
  border: 0;
  border-top: 1px solid var(--ks-line);
  margin: 2.4em 0;
}

@media (max-width: 600px) {
  .ks-entry .ks-note,
  .ks-entry .ks-author {
    padding: 20px 18px;
    border-radius: 16px;
  }
}

/* Post navigation */
.ks-post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 20px 0 50px;
}

.ks-post-nav__link {
  display: block;
  padding: 20px;
  background: var(--ks-cream-alt);
  border: 1px solid var(--ks-line);
  border-radius: var(--ks-radius);
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.ks-post-nav__link:hover {
  border-color: var(--ks-acc);
  transform: translateY(-2px);
}

.ks-post-nav__link--next {
  text-align: right;
}

.ks-post-nav__label {
  display: block;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ks-muted);
  margin-bottom: 6px;
}

.ks-post-nav__title {
  display: block;
  font-family: var(--ks-display);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
}

/* 404 + empty states */
.ks-404,
.ks-empty {
  padding: 90px 40px 110px;
  text-align: center;
}

.ks-404__title {
  font-size: clamp(28px, 6vw, 48px);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0 0 16px;
}

.ks-404__text {
  font-size: 17px;
  color: var(--ks-body);
  max-width: 520px;
  margin: 0 auto 28px;
}

.ks-404__actions {
  margin-top: 26px;
}

/* Search form */
.ks-searchform {
  display: flex;
  gap: 10px;
  max-width: 460px;
  margin: 0 auto;
}

.ks-searchform__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 13px 18px;
  border: 1px solid var(--ks-line);
  border-radius: 100px;
  background: var(--ks-cream-alt);
  font-family: inherit;
  font-size: 15px;
  color: var(--ks-ink);
}

.ks-searchform__submit {
  flex: 0 0 auto;
  padding: 13px 22px;
  border: 0;
  border-radius: 100px;
  background: var(--ks-ink);
  color: var(--ks-cream);
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
}

/* Comments */
.ks-comments {
  padding: 20px 0 70px;
}

.ks-comments__title {
  font-size: 24px;
  margin-bottom: 20px;
}

.ks-comments__list {
  list-style: none;
  padding: 0;
  margin: 0 0 30px;
}

.ks-comments__list .children {
  list-style: none;
  padding-left: 24px;
}

.ks-comments .comment-body {
  padding: 18px 0;
  border-bottom: 1px solid var(--ks-line);
}

.ks-comments input[type='text'],
.ks-comments input[type='email'],
.ks-comments input[type='url'],
.ks-comments textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--ks-line);
  border-radius: 12px;
  background: var(--ks-cream-alt);
  font-family: inherit;
  font-size: 15px;
}

.ks-comments .submit {
  padding: 13px 26px;
  border: 0;
  border-radius: 100px;
  background: var(--ks-acc);
  color: var(--ks-ink);
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
}

/* ==========================================================================
   Fallback header/footer (only render when Elementor is inactive)
   ========================================================================== */

.ks-fallback-header {
  border-bottom: 1px solid var(--ks-line);
  background: var(--ks-cream);
}

.ks-fallback-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  max-width: var(--ks-wrap);
  margin: 0 auto;
  padding: 16px 40px;
}

.ks-fallback-brand {
  font-family: var(--ks-display);
  font-size: 21px;
  font-weight: 700;
}

.ks-fallback-toggle {
  display: none;
  flex-direction: column;
  gap: 4px;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--ks-line);
  border-radius: 12px;
  background: var(--ks-cream-alt);
  cursor: pointer;
}

.ks-fallback-toggle .ks-bar {
  width: 18px;
  height: 2px;
  background: var(--ks-ink);
  border-radius: 2px;
}

.ks-fallback-menu,
.ks-fallback-footer-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-weight: 600;
  font-size: 14.5px;
}

.ks-fallback-footer {
  background: var(--ks-ink);
  color: var(--ks-on-dark);
  padding: 50px 0 40px;
}

.ks-fallback-footer .ks-fallback-inner {
  flex-direction: column;
  align-items: flex-start;
}

.ks-fallback-brand-line {
  font-family: var(--ks-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--ks-cream);
  margin: 0;
}

.ks-fallback-legal {
  font-size: 13px;
  color: rgba(239, 235, 221, 0.55);
  margin: 0;
}

@media (max-width: 1024px) {
  .ks-fallback-toggle {
    display: flex;
  }

  .ks-fallback-nav {
    display: none;
    width: 100%;
  }

  .ks-fallback-nav.is-open {
    display: block;
  }

  .ks-fallback-menu {
    flex-direction: column;
    gap: 0;
  }

  .ks-fallback-menu li {
    padding: 12px 0;
    border-bottom: 1px solid var(--ks-line);
  }
}

/* ==========================================================================
   Responsive scale
   ========================================================================== */

@media (max-width: 1024px) {
  .ks-wrap {
    padding: 0 24px;
  }

  .ks-post-nav {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .ks-wrap {
    padding: 0 16px;
  }

  .ks-card-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .ks-archive-head {
    padding: 38px 0 22px;
  }

  .ks-404,
  .ks-empty {
    padding: 60px 16px 80px;
  }

  .ks-searchform {
    flex-direction: column;
    border-radius: 16px;
  }

  .ks-searchform__submit {
    width: 100%;
  }

  /* Elementor stacks columns here; tighten the inherited gaps. */
  .elementor-section.elementor-section-boxed > .elementor-container {
    flex-wrap: wrap;
  }
}

@media (max-width: 400px) {
  :root {
    --ks-radius: 14px;
  }
}

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

/* Print */
@media print {
  .ks-site-header,
  .ks-site-footer,
  .ks-post-nav,
  .ks-comments {
    display: none !important;
  }
}