/*
Theme Name: SepoDesk
Theme URI: https://sepodesk.com
Author: Euneolink Solutions
Author URI: https://sepodesk.com
Description: Product theme for SepoDesk — a marketing and documentation front end that sits alongside the SepoDesk engine running as a WordPress plugin. Elementor-ready, no build step, no external dependencies.
Version: 1.10.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 8.1
License: Proprietary — Euneolink Solutions
License URI: https://sepodesk.com/sepodesk/docs/license
Text Domain: sepodesk
Tags: one-column, custom-menu, custom-logo, featured-images, threaded-comments, translation-ready, block-styles, wide-blocks
*/

/* ==========================================================================
   1. Design tokens
   ========================================================================== */

:root {
  --sd-ink: #0b3d33; /* brand green — same value the Chart component leads with */
  --sd-ink-soft: #123f35;
  --sd-green: #107d59; /* nudged from #12855f: 4.5:1 on paper panels */
  --sd-lime: #3ed598;
  --sd-body: #4b5b56;
  --sd-muted: #5f716a; /* was #7a8b85, which was 3.6:1 on white */
  --sd-line: #e4ebe8;
  --sd-line-soft: #edf3f0;
  --sd-mint: #eaf6f0;
  --sd-paper: #f7faf8;
  --sd-white: #ffffff;
  --sd-amber: #f2b33d;
  --sd-danger: #c0392b;

  /* Skin tokens. Everything colour-specific that isn't a palette entry above
     goes through these, so a skin (inc/skins.php) only has to redefine
     tokens, never rules. The -rgb triples feed rgba(var(--x), alpha). */
  --sd-accent-rgb: 62, 213, 152;
  --sd-ink-rgb: 11, 61, 51;
  --sd-mid-rgb: 16, 125, 89;
  --sd-on-accent: #0b3d33; /* text on the accent colour, dark in both modes */
  --sd-lime-h: #2fc489;
  --sd-card-hover: #c9e3d8;
  --sd-pre-fg: #dff0e8;

  --sd-font:
    "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  --sd-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  /* Headings follow the body font unless Typography picks another. */
  --sd-font-heading: var(--sd-font);
  --sd-mono:
    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --sd-width: 1180px;
  --sd-width-read: 720px;
  --sd-radius: 18px;
  --sd-radius-sm: 12px;
  /* Flat design: no drop shadows anywhere. Kept as tokens so a child theme
     can bring depth back in one place. */
  --sd-shadow: none;
  --sd-shadow-sm: none;
  --sd-header-h: 72px;
  --sd-ease: cubic-bezier(0.2, 0.7, 0.3, 1);

  /* Mobile drawer. All four are overwritten by the Customizer;
	   these are the fallbacks if that inline style ever fails to print. */
  --sd-menu-h: calc(100vh - var(--sd-header-h));
  --sd-menu-max-h: calc(100vh - var(--sd-header-h));
  --sd-menu-item-pad: 14px;
  --sd-menu-font: 16px;
  --sd-menu-gap: 2px;

  /* Role tokens. Light mode points them at the palette above; dark mode
	   repoints them at the bottom of this file. Anything whose meaning flips
	   between modes (a colour used as text here and as a background there)
	   goes through one of these. */
  --sd-bg: var(--sd-white);
  --sd-surface: var(--sd-white);
  --sd-surface-2: var(--sd-paper);
  --sd-heading: var(--sd-ink);
  --sd-text: var(--sd-body);
  --sd-border: var(--sd-line);
  --sd-btn-bg: var(--sd-ink);
  --sd-btn-fg: var(--sd-white);
  --sd-btn-bg-h: var(--sd-ink-soft);
  --sd-header-bg: rgba(255, 255, 255, 0.82);
  --sd-hero-from: #eef8f3;
  --sd-hero-grid: rgba(var(--sd-ink-rgb), 0.045);
  --sd-footer-bg: var(--sd-ink);
  --sd-cta-bg: var(--sd-ink);
}

/* Dark mode is opt-in per document: the no-flash script in <head> writes
   data-theme on <html> before first paint, so there is no light flash and the
   page cache can still store one HTML response for everyone. */
html {
  color-scheme: light;
}
html[data-theme="dark"] {
  color-scheme: dark;
}

@supports (height: 100dvh) {
  :root {
    --sd-menu-h: calc(100dvh - var(--sd-header-h));
    --sd-menu-max-h: calc(100dvh - var(--sd-header-h));
  }
}

/* ==========================================================================
   2. Reset and base
   ========================================================================== */

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

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

body {
  margin: 0;
  font-family: var(--sd-font);
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--sd-text);
  background: var(--sd-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}

body.sd-nav-open {
  overflow: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 0.6em;
  font-family: var(--sd-font-heading);
  color: var(--sd-heading);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.02em;
}

h1 {
  font-size: clamp(2.1rem, 1.4rem + 3vw, 3.4rem);
  letter-spacing: -0.035em;
}
h2 {
  font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem);
  letter-spacing: -0.03em;
}
h3 {
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.5rem);
}
h4 {
  font-size: 1.15rem;
}
h5,
h6 {
  font-size: 1rem;
}

/* The accent treatment: an <em> inside a heading becomes serif italic.
   Same rule the Elementor landing page uses, so headings match across both. */
h1 em,
h2 em,
h3 em,
.sd-em {
  font-family: var(--sd-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.005em;
}

p {
  margin: 0 0 1.15em;
}
p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--sd-green);
  text-decoration: none;
  transition: color 0.18s ease;
}
a:hover {
  color: var(--sd-ink);
}

img,
svg,
video,
iframe {
  max-width: 100%;
  height: auto;
}
img {
  display: block;
}

hr {
  border: 0;
  border-top: 1px solid var(--sd-border);
  margin: 2.5rem 0;
}

blockquote {
  margin: 1.8rem 0;
  padding: 0.3rem 0 0.3rem 1.4rem;
  border-left: 3px solid var(--sd-lime);
  color: var(--sd-heading);
  font-size: 1.1rem;
}
blockquote cite {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.85rem;
  font-style: normal;
  color: var(--sd-muted);
}

code,
kbd,
pre,
samp {
  font-family: var(--sd-mono);
  font-size: 0.9em;
}
code {
  background: var(--sd-mint);
  color: var(--sd-heading);
  padding: 0.15em 0.4em;
  border-radius: 5px;
}
pre {
  background: var(--sd-ink);
  color: var(--sd-pre-fg);
  padding: 1.2rem 1.4rem;
  border-radius: var(--sd-radius-sm);
  overflow-x: auto;
  line-height: 1.6;
}
pre code {
  background: none;
  color: inherit;
  padding: 0;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.6rem 0;
  font-size: 0.95rem;
}
th,
td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--sd-border);
}
th {
  color: var(--sd-heading);
  font-weight: 600;
  background: var(--sd-surface-2);
}

ul,
ol {
  padding-left: 1.3rem;
}
li {
  margin-bottom: 0.4rem;
}

::selection {
  background: var(--sd-lime);
  color: var(--sd-on-accent);
}

/* Focus — visible, and never removed */
:focus-visible {
  outline: 2px solid var(--sd-green);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ==========================================================================
   3. Layout helpers
   ========================================================================== */

.sd-wrap {
  width: 100%;
  max-width: var(--sd-width);
  margin: 0 auto;
  padding: 0 24px;
}
.sd-wrap--read {
  max-width: var(--sd-width-read);
}
.sd-section {
  padding: 76px 0;
}
.sd-section--tight {
  padding: 48px 0;
}
.sd-section--paper {
  background: var(--sd-surface-2);
  border-block: 1px solid var(--sd-border);
}
.sd-center {
  text-align: center;
}

.sd-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sd-green);
}
.sd-eyebrow::before {
  content: "";
  width: 18px;
  height: 1px;
  background: currentColor;
}

.sd-lede {
  font-size: 1.12rem;
  color: var(--sd-body);
  max-width: 62ch;
}
.sd-center .sd-lede {
  margin-inline: auto;
}

.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;
}
.screen-reader-text:focus {
  position: fixed !important;
  top: 12px;
  left: 12px;
  z-index: 100000;
  width: auto;
  height: auto;
  clip: auto;
  padding: 12px 20px;
  background: var(--sd-ink);
  color: #fff;
  border-radius: 999px;
  font-weight: 600;
}

/* ==========================================================================
   4. Buttons
   ========================================================================== */

.sd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 28px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--sd-btn-bg);
  color: var(--sd-btn-fg);
  font-family: var(--sd-font);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
  cursor: pointer;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    transform 0.2s var(--sd-ease),
    box-shadow 0.2s ease;
}
.sd-btn:hover {
  background: var(--sd-btn-bg-h);
  color: var(--sd-btn-fg);
  transform: translateY(-1px);
}
.sd-btn--sm {
  padding: 11px 20px;
  font-size: 13.5px;
}
.sd-btn--lime {
  background: var(--sd-lime);
  color: var(--sd-on-accent);
}
.sd-btn--lime:hover {
  background: var(--sd-lime-h);
  color: var(--sd-on-accent);
}
.sd-btn--ghost {
  background: transparent;
  color: var(--sd-heading);
  border-color: var(--sd-border);
}
.sd-btn--ghost:hover {
  background: var(--sd-mint);
  color: var(--sd-heading);
}
.sd-btn--on-dark {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
}
.sd-btn--on-dark:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* ==========================================================================
   5. Announcement bar
   ========================================================================== */

.sd-announce {
  background: var(--sd-ink);
  color: rgba(255, 255, 255, 0.88);
  font-size: 13.5px;
  text-align: center;
  padding: 9px 24px;
}
.sd-announce a {
  color: var(--sd-lime);
  font-weight: 600;
}
.sd-announce a:hover {
  color: #fff;
  text-decoration: underline;
}

/* ==========================================================================
   6. Header
   ========================================================================== */

.sd-header {
  position: sticky;
  top: 0;
  z-index: 900;
  background: var(--sd-header-bg);
  backdrop-filter: saturate(150%) blur(12px);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid transparent;
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;
}
.sd-header.is-stuck {
  border-bottom-color: var(--sd-border);
}
.admin-bar .sd-header {
  top: 32px;
}
@media (max-width: 782px) {
  .admin-bar .sd-header {
    top: 46px;
  }
}

.sd-header__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: var(--sd-header-h);
}

.sd-brand {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  flex: 0 0 auto;
  line-height: 1.15;
}
.sd-brand img {
  max-height: 34px;
  width: auto;
}
.sd-brand__text {
  font-size: 19px;
  font-weight: 700;
  color: var(--sd-heading);
  letter-spacing: -0.03em;
}
.sd-brand__tag {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--sd-muted);
  letter-spacing: 0.01em;
}

.sd-nav {
  margin-left: auto;
}
.sd-nav ul {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.sd-nav li {
  margin: 0;
  position: relative;
}
.sd-nav a {
  display: block;
  padding: 9px 14px;
  border-radius: 999px;
  color: var(--sd-heading);
  font-size: 14.5px;
  font-weight: 500;
}
.sd-nav a:hover {
  background: var(--sd-mint);
}
.sd-nav .current-menu-item > a,
.sd-nav .current_page_item > a,
.sd-nav .current-menu-ancestor > a {
  background: var(--sd-mint);
  font-weight: 600;
}

/* Dropdowns */
.sd-nav ul ul {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 220px;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  padding: 8px;
  background: var(--sd-surface);
  border: 1px solid var(--sd-border);
  border-radius: 14px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    visibility 0.18s;
}
.sd-nav li:hover > ul,
.sd-nav li:focus-within > ul {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.sd-nav ul ul a {
  border-radius: 9px;
  font-size: 14px;
}

.sd-header__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}
.sd-header__link {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--sd-heading);
  padding: 9px 6px;
}
.sd-header__link:hover {
  color: var(--sd-green);
}

.sd-burger {
  display: none;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--sd-border);
  border-radius: 12px;
  cursor: pointer;
}
.sd-burger span {
  position: relative;
  display: block;
  width: 17px;
  height: 1.6px;
  background: var(--sd-heading);
  border-radius: 2px;
  transition:
    transform 0.22s var(--sd-ease),
    opacity 0.18s ease;
}
.sd-burger span::before,
.sd-burger span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 17px;
  height: 1.6px;
  background: var(--sd-heading);
  border-radius: 2px;
  transition:
    transform 0.22s var(--sd-ease),
    top 0.22s var(--sd-ease);
}
.sd-burger span::before {
  top: -5.5px;
}
.sd-burger span::after {
  top: 5.5px;
}
.sd-burger[aria-expanded="true"] span {
  background: transparent;
}
.sd-burger[aria-expanded="true"] span::before {
  top: 0;
  transform: rotate(45deg);
}
.sd-burger[aria-expanded="true"] span::after {
  top: 0;
  transform: rotate(-45deg);
}

@media (max-width: 979px) {
  .sd-burger {
    display: flex;
  }
  .sd-header__actions .sd-header__link {
    display: none;
  }

  /* The drawer is absolute, not fixed.
	   .sd-header carries backdrop-filter, and a filtered element becomes the
	   containing block for its fixed-position descendants — which is why the
	   old fixed drawer collapsed to the height of the header bar instead of
	   filling the screen. Absolute positioning against the sticky header is
	   the reliable way to sit underneath it. */
  .sd-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 20;
    margin: 0;
    padding: 20px 24px calc(20px + env(safe-area-inset-bottom, 0px));
    height: var(--sd-menu-h);
    max-height: var(--sd-menu-max-h);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    background: var(--sd-surface);
    border-top: 1px solid var(--sd-border);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition:
      opacity 0.22s ease,
      transform 0.22s var(--sd-ease),
      visibility 0.22s;
  }
  .sd-nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
  }
  /* A closed drawer is only faded out, so it still lies over the page.
     Make sure it can't catch a single tap meant for what's underneath. */
  .sd-nav:not(.is-open) {
    pointer-events: none;
  }

  /* "Fit content" mode — the drawer is only as tall as its links. */
  .sd-menu--auto .sd-nav {
    height: auto;
  }

  .sd-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sd-menu-gap);
  }
  .sd-nav a {
    padding: var(--sd-menu-item-pad) 16px;
    border-radius: 12px;
    font-size: var(--sd-menu-font);
  }
  /* Sub-menus follow the drawer. This used to say `visibility: visible`,
     which overrides a hidden parent, so the sub-menu links of a CLOSED drawer
     stayed clickable and focusable, invisibly covering the page. Tapping a
     card went to a menu link instead. `inherit` hides them with the drawer. */
  .sd-nav ul ul {
    position: static;
    opacity: 1;
    visibility: inherit;
    transform: none;
    box-shadow: none;
    border: 0;
    border-left: 2px solid var(--sd-border);
    border-radius: 0;
    margin: 2px 0 6px 16px;
    padding: 0 0 0 8px;
  }

  /* Anything the theme wants at the bottom of the open drawer. */
  .sd-nav__extra {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--sd-border);
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
  }
  .sd-nav__extra .sd-btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}
@media (min-width: 980px) {
  .sd-nav__extra {
    display: none;
  }
}

/* ==========================================================================
   7. Page hero
   ========================================================================== */

.sd-hero {
  position: relative;
  overflow: hidden;
  padding: 84px 0 64px;
  background: linear-gradient(180deg, var(--sd-hero-from) 0%, var(--sd-bg) 72%);
}
.sd-hero::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -600px;
  width: 1300px;
  height: 1050px;
  transform: translateX(-50%);
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(
    closest-side,
    rgba(var(--sd-accent-rgb), 0.34),
    rgba(var(--sd-accent-rgb), 0.08) 55%,
    rgba(var(--sd-accent-rgb), 0) 78%
  );
}
.sd-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--sd-hero-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--sd-hero-grid) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 0%, #000, transparent 75%);
  mask-image: radial-gradient(70% 60% at 50% 0%, #000, transparent 75%);
}
.sd-hero > * {
  position: relative;
  z-index: 2;
}
.sd-hero__title {
  margin-bottom: 0.35em;
}
.sd-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  justify-content: center;
  font-size: 13.5px;
  color: var(--sd-muted);
}

/* ==========================================================================
   8. Cards and post grid
   ========================================================================== */

.sd-grid {
  display: grid;
  gap: 26px;
}
.sd-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}
.sd-grid--2 {
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 979px) {
  .sd-grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 639px) {
  .sd-grid--3,
  .sd-grid--2 {
    grid-template-columns: 1fr;
  }
}

.sd-card {
  display: flex;
  flex-direction: column;
  background: var(--sd-surface);
  border: 1px solid var(--sd-border);
  border-radius: var(--sd-radius);
  overflow: hidden;
  transition:
    transform 0.3s var(--sd-ease),
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}
.sd-card:hover {
  transform: translateY(-5px);
  border-color: var(--sd-card-hover);
}
.sd-card__media {
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--sd-mint);
  overflow: hidden;
}
.sd-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--sd-ease);
}
.sd-card:hover .sd-card__media img {
  transform: scale(1.04);
}
.sd-card__body {
  padding: 24px 24px 26px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.sd-card__title {
  font-size: 1.16rem;
  margin-bottom: 0.5rem;
  line-height: 1.35;
}
.sd-card__title a {
  color: var(--sd-heading);
}
.sd-card__title a:hover {
  color: var(--sd-green);
}
.sd-card__excerpt {
  font-size: 14.8px;
  margin-bottom: 1rem;
}
.sd-card__foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  color: var(--sd-muted);
}

.sd-tag {
  display: inline-block;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--sd-mint);
  color: var(--sd-heading);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.sd-tag--lime {
  background: var(--sd-lime);
  color: var(--sd-on-accent);
}

/* ==========================================================================
   9. Single post / page content
   ========================================================================== */

.sd-content {
  font-size: 17px;
}
.sd-content > * + * {
  margin-top: 1.2em;
}
.sd-content h2 {
  margin-top: 2.2em;
}
.sd-content h3 {
  margin-top: 1.8em;
}
.sd-content figure {
  margin: 2rem 0;
}
.sd-content figcaption {
  margin-top: 0.7rem;
  font-size: 13.5px;
  color: var(--sd-muted);
  text-align: center;
}
.sd-content img {
  border-radius: var(--sd-radius-sm);
}
/* Links inside running text are underlined, so they don't rely on colour
   alone to stand out from the words around them (WCAG 1.4.1). Buttons, cards
   and navigation keep the clean, underline-free look. */
.sd-content :where(p, li, td, dd, blockquote, figcaption) a:not(.sd-btn):not(.wp-element-button) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.sd-content ul li::marker {
  color: var(--sd-green);
}
.sd-content .alignwide {
  width: min(100vw - 48px, 1040px);
  margin-inline: calc(50% - min(50vw - 24px, 520px));
}
.sd-content .alignfull {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  max-width: none;
}
.alignleft {
  float: left;
  margin: 0.4rem 1.6rem 1rem 0;
}
.alignright {
  float: right;
  margin: 0.4rem 0 1rem 1.6rem;
}
.aligncenter {
  margin-inline: auto;
}
.wp-caption {
  max-width: 100%;
}

.sd-featured {
  margin: 0 0 40px;
  border-radius: var(--sd-radius);
  overflow: hidden;
}

.sd-entry-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  font-size: 13.5px;
  color: var(--sd-muted);
}
.sd-entry-meta a {
  color: var(--sd-muted);
}
.sd-entry-meta a:hover {
  color: var(--sd-green);
}

.sd-post-foot {
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--sd-border);
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}
.sd-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sd-postnav {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr 1fr;
  margin-top: 40px;
}
@media (max-width: 639px) {
  .sd-postnav {
    grid-template-columns: 1fr;
  }
}
.sd-postnav a {
  display: block;
  padding: 20px 22px;
  border: 1px solid var(--sd-border);
  border-radius: var(--sd-radius-sm);
  background: var(--sd-surface);
  transition:
    border-color 0.2s ease,
    transform 0.2s var(--sd-ease);
}
.sd-postnav a:hover {
  border-color: var(--sd-card-hover);
  transform: translateY(-2px);
}
.sd-postnav small {
  display: block;
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sd-muted);
  margin-bottom: 6px;
}
.sd-postnav strong {
  color: var(--sd-heading);
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.4;
}
.sd-postnav .is-next {
  text-align: right;
}

/* ==========================================================================
   10. Changelog / releases
   ========================================================================== */

.sd-release {
  position: relative;
  padding: 0 0 40px 30px;
  border-left: 2px solid var(--sd-border);
}
.sd-release:last-child {
  border-left-color: transparent;
  padding-bottom: 0;
}
.sd-release::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--sd-lime);
  box-shadow: 0 0 0 4px rgba(var(--sd-accent-rgb), 0.22);
}
.sd-release__ver {
  font-family: var(--sd-mono);
  font-size: 13px;
  color: var(--sd-green);
  font-weight: 600;
}
.sd-release__title {
  font-size: 1.3rem;
  margin: 4px 0 6px;
}
.sd-release__date {
  font-size: 12.5px;
  color: var(--sd-muted);
}

/* ==========================================================================
   11. Sidebar and widgets
   ========================================================================== */

.sd-layout {
  display: grid;
  gap: 48px;
  grid-template-columns: minmax(0, 1fr) 300px;
  align-items: start;
}
.sd-layout--single {
  grid-template-columns: minmax(0, 1fr);
  max-width: var(--sd-width-read);
  margin-inline: auto;
}
@media (max-width: 979px) {
  .sd-layout {
    grid-template-columns: 1fr;
  }
}

.sd-sidebar {
  position: sticky;
  top: calc(var(--sd-header-h) + 24px);
}
.widget {
  padding: 24px;
  margin-bottom: 20px;
  background: var(--sd-surface-2);
  border: 1px solid var(--sd-border);
  border-radius: var(--sd-radius-sm);
  font-size: 14.8px;
}
.widget:last-child {
  margin-bottom: 0;
}
.widget-title {
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sd-heading);
  margin-bottom: 14px;
}
.widget ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.widget li {
  margin-bottom: 9px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--sd-border);
}
.widget li:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}
.widget a {
  color: var(--sd-body);
}
.widget a:hover {
  color: var(--sd-green);
}

/* ==========================================================================
   12. Forms
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
select,
textarea {
  width: 100%;
  padding: 12px 15px;
  font-family: var(--sd-font);
  font-size: 15px;
  color: var(--sd-heading);
  background: var(--sd-surface);
  border: 1px solid var(--sd-border);
  border-radius: 11px;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--sd-green);
  box-shadow: 0 0 0 3px rgba(var(--sd-mid-rgb), 0.14);
}
textarea {
  min-height: 150px;
  resize: vertical;
}
label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--sd-heading);
}

input[type="submit"],
button[type="submit"],
.wp-block-search__button {
  width: auto;
  padding: 13px 26px;
  background: var(--sd-btn-bg);
  color: var(--sd-btn-fg);
  border: 0;
  border-radius: 999px;
  font-family: var(--sd-font);
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}
input[type="submit"]:hover,
button[type="submit"]:hover {
  background: var(--sd-ink-soft);
}

.sd-searchform {
  display: flex;
  gap: 8px;
}
.sd-searchform input[type="search"] {
  flex: 1;
}

/* ==========================================================================
   13. Comments
   ========================================================================== */

.sd-comments {
  margin-top: 56px;
  padding-top: 36px;
  border-top: 1px solid var(--sd-border);
}
.comment-list {
  list-style: none;
  padding: 0;
  margin: 0 0 40px;
}
.comment-list ol.children {
  list-style: none;
  padding-left: 26px;
  margin-top: 20px;
}
.comment-body {
  padding: 22px 24px;
  margin-bottom: 18px;
  background: var(--sd-surface-2);
  border: 1px solid var(--sd-border);
  border-radius: var(--sd-radius-sm);
}
.comment-author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.comment-author img {
  border-radius: 50%;
}
.comment-author .fn {
  font-weight: 600;
  color: var(--sd-ink);
  font-style: normal;
}
.comment-metadata {
  font-size: 12.5px;
  color: var(--sd-muted);
}
.comment-reply-link {
  font-size: 13px;
  font-weight: 600;
}
.comment-form p {
  margin-bottom: 16px;
}
.comment-form .comment-form-cookies-consent {
  display: flex;
  gap: 9px;
  align-items: flex-start;
}
.comment-form .comment-form-cookies-consent input {
  width: auto;
}
.comment-form .comment-form-cookies-consent label {
  font-weight: 400;
  font-size: 13.5px;
}

/* ==========================================================================
   14. Pagination
   ========================================================================== */

.sd-pagination {
  margin-top: 48px;
  display: flex;
  justify-content: center;
}
.sd-pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.sd-pagination .page-numbers {
  display: grid;
  place-items: center;
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--sd-border);
  border-radius: 11px;
  color: var(--sd-heading);
  font-size: 14.5px;
  font-weight: 500;
  transition:
    border-color 0.18s ease,
    background 0.18s ease;
}
.sd-pagination .page-numbers:hover {
  background: var(--sd-mint);
}
.sd-pagination .page-numbers.current {
  background: var(--sd-btn-bg);
  border-color: var(--sd-btn-bg);
  color: var(--sd-btn-fg);
  font-weight: 600;
}
.sd-pagination .dots {
  border-color: transparent;
}

/* ==========================================================================
   15. Call to action band
   ========================================================================== */

.sd-cta {
  position: relative;
  overflow: hidden;
  padding: 88px 0;
  background: var(--sd-cta-bg);
  color: rgba(255, 255, 255, 0.78);
  text-align: center;
}
.sd-cta::before {
  content: "";
  position: absolute;
  right: -160px;
  bottom: -260px;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    rgba(var(--sd-accent-rgb), 0.3),
    rgba(var(--sd-accent-rgb), 0)
  );
  pointer-events: none;
}
.sd-cta > * {
  position: relative;
  z-index: 2;
}
.sd-cta h2 {
  color: #fff;
}
.sd-cta .sd-eyebrow {
  color: var(--sd-lime);
}
.sd-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 30px;
}

/* ==========================================================================
   16. Footer
   ========================================================================== */

.sd-footer {
  background: var(--sd-footer-bg);
  color: rgba(255, 255, 255, 0.68);
  padding: 68px 0 0;
  font-size: 14.8px;
}
.sd-footer a {
  color: rgba(255, 255, 255, 0.68);
}
.sd-footer a:hover {
  color: var(--sd-lime);
}
.sd-footer__cols {
  display: grid;
  gap: 40px;
  grid-template-columns: 1.6fr repeat(3, 1fr);
}
@media (max-width: 979px) {
  .sd-footer__cols {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 519px) {
  .sd-footer__cols {
    grid-template-columns: 1fr;
  }
}

.sd-footer .sd-brand__text {
  color: #fff;
}
.sd-footer .sd-brand__tag {
  color: rgba(255, 255, 255, 0.68);
}
.sd-footer__about {
  margin-top: 16px;
  max-width: 34ch;
}
.sd-footer .widget,
.sd-footer__col {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
}
.sd-footer .widget-title,
.sd-footer__heading {
  color: #fff;
  font-size: 12px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  margin-bottom: 16px;
  font-weight: 600;
}
.sd-footer .widget li {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 10px;
}
.sd-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sd-footer li {
  margin-bottom: 10px;
}

.sd-footer__bottom {
  margin-top: 56px;
  padding: 22px 0 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  font-size: 13.5px;
}
.sd-footer__social {
  display: flex;
  gap: 8px;
}
.sd-footer__social a {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  transition:
    background 0.2s ease,
    border-color 0.2s ease;
}
.sd-footer__social a:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
}
.sd-footer__social svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

/* ==========================================================================
   17. 404 and empty states
   ========================================================================== */

.sd-empty {
  text-align: center;
  padding: 80px 0;
}
.sd-empty__code {
  font-family: var(--sd-serif);
  font-style: italic;
  font-size: clamp(5rem, 3rem + 12vw, 11rem);
  line-height: 0.9;
  color: var(--sd-heading);
  opacity: 0.12;
  margin-bottom: -0.15em;
}

/* ==========================================================================
   18. Elementor and block editor interop
   ========================================================================== */

/* Elementor sets its own container width; keep the theme out of its way. */
.elementor-page .sd-main {
  padding: 0;
}
.elementor-page .sd-hero {
  display: none;
}

.sd-template-canvas .sd-header,
.sd-template-canvas .sd-footer,
.sd-template-canvas .sd-announce {
  display: none;
}

.wp-block-button__link {
  border-radius: 999px;
  font-weight: 600;
}
.wp-block-quote {
  border-left: 3px solid var(--sd-lime);
}
.has-sd-ink-color {
  color: var(--sd-ink);
}
.has-sd-ink-background-color {
  background-color: var(--sd-ink);
}
.has-sd-lime-color {
  color: var(--sd-lime);
}
.has-sd-lime-background-color {
  background-color: var(--sd-lime);
}
.has-sd-mint-background-color {
  background-color: var(--sd-mint);
}
.has-sd-paper-background-color {
  background-color: var(--sd-paper);
}

/* ==========================================================================
   19. Motion preferences
   ========================================================================== */

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

/* ==========================================================================
   20. Print
   ========================================================================== */

@media print {
  .sd-header,
  .sd-footer,
  .sd-announce,
  .sd-cta,
  .sd-sidebar,
  .sd-postnav,
  .sd-comments {
    display: none !important;
  }
  body {
    font-size: 12pt;
    color: #000;
  }
  .sd-layout {
    display: block;
  }
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #555;
  }
}

/* ==========================================================================
   21. Theme toggle control
   ========================================================================== */

.sd-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--sd-border);
  border-radius: 12px;
  color: var(--sd-heading);
  cursor: pointer;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}
.sd-theme-toggle:hover {
  background: var(--sd-mint);
  border-color: var(--sd-green);
}
.sd-theme-toggle svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Show the sun in dark mode, the moon in light mode. */
.sd-theme-toggle .sd-icon-sun {
  display: none;
}
html[data-theme="dark"] .sd-theme-toggle .sd-icon-sun {
  display: block;
}
html[data-theme="dark"] .sd-theme-toggle .sd-icon-moon {
  display: none;
}

/* Inside the mobile drawer it reads as a labelled row, not a bare icon. */
.sd-nav__extra .sd-theme-toggle {
  width: auto;
  height: auto;
  gap: 9px;
  padding: 13px 18px;
  border-radius: 999px;
  font-family: var(--sd-font);
  font-size: 14.5px;
  font-weight: 600;
}
.sd-theme-toggle__label {
  display: none;
}
.sd-nav__extra .sd-theme-toggle__label {
  display: inline;
}
.sd-nav__extra .sd-theme-toggle .sd-theme-toggle__label::after {
  content: attr(data-light);
}
html[data-theme="dark"]
  .sd-nav__extra
  .sd-theme-toggle
  .sd-theme-toggle__label::after {
  content: attr(data-dark);
}

/* Theme swaps are instant, deliberately.
   Changing data-theme on <html> already invalidates the computed style of
   every node in the document. The previous version layered a 280ms colour
   transition on top of that with a `*` selector, so every element on the page
   started animating in the same frame — under a backdrop-filtered sticky
   header, which has to recomposite for every one of those frames. On a long
   page that locks the main thread.
   Suppressing transitions for the single frame of the swap costs nothing and
   stops anything half-animating into the new palette. */
html.sd-theme-switching,
html.sd-theme-switching *,
html.sd-theme-switching *::before,
html.sd-theme-switching *::after {
  transition: none !important;
}

/* ==========================================================================
   22. Dark mode
   --------------------------------------------------------------------------
   Only the role tokens are repointed here, plus the handful of rules whose
   colour means something different in the dark (a green that was a page
   background is now a text colour). Everything else inherits.
   ========================================================================== */

html[data-theme="dark"] {
  --sd-ink: #d9ece4;
  --sd-ink-soft: #cfe5db;
  --sd-green: #4cc79a;
  --sd-body: #9fb5ae;
  --sd-muted: #7d938c;
  --sd-line: rgba(255, 255, 255, 0.1);
  --sd-line-soft: rgba(255, 255, 255, 0.06);
  --sd-mint: rgba(var(--sd-accent-rgb), 0.12);
  --sd-paper: #0e1c19;

  --sd-bg: #08110f;
  --sd-surface: #0e1c19;
  --sd-surface-2: #0b1714;
  --sd-heading: #eaf6f0;
  --sd-text: #9fb5ae;
  --sd-border: rgba(255, 255, 255, 0.1);

  --sd-btn-bg: var(--sd-lime);
  --sd-btn-fg: var(--sd-on-accent);
  --sd-btn-bg-h: #63e0ae;

  --sd-header-bg: rgba(8, 17, 15, 0.78);
  --sd-hero-from: #0c1b18;
  --sd-hero-grid: rgba(255, 255, 255, 0.035);
  --sd-footer-bg: #060e0c;
  --sd-cta-bg: #0c1b18;

}

html[data-theme="dark"] .sd-announce {
  background: var(--sd-footer-bg);
  border-bottom: 1px solid var(--sd-border);
}
html[data-theme="dark"] .sd-hero::before {
  background: radial-gradient(
    closest-side,
    rgba(var(--sd-accent-rgb), 0.17),
    rgba(var(--sd-accent-rgb), 0.05) 55%,
    rgba(var(--sd-accent-rgb), 0) 78%
  );
}
html[data-theme="dark"] .sd-card:hover {
  border-color: rgba(var(--sd-accent-rgb), 0.32);
}
html[data-theme="dark"] .sd-card__media {
  background: var(--sd-surface);
}
html[data-theme="dark"] .sd-btn--on-dark {
  border-color: rgba(255, 255, 255, 0.28);
}
html[data-theme="dark"] pre {
  background: var(--sd-footer-bg);
  border: 1px solid var(--sd-border);
}
html[data-theme="dark"] code {
  background: rgba(var(--sd-accent-rgb), 0.12);
}
html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus {
  box-shadow: 0 0 0 3px rgba(var(--sd-accent-rgb), 0.2);
}
html[data-theme="dark"] ::selection {
  background: var(--sd-lime);
  color: var(--sd-on-accent);
}
html[data-theme="dark"] .sd-empty__code {
  opacity: 0.16;
}
html[data-theme="dark"] .sd-featured {
}

/* Media sits a touch bright against a dark page, but a filter on every image
   re-rasterises each one and gives it its own compositing layer — paid on the
   same frame as the theme swap. A cheaper border does the same job visually.
   If you do want the filter back, apply it to a single wrapper, not to img. */
html[data-theme="dark"] .sd-card__media,
html[data-theme="dark"] .sd-featured {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* The footer and CTA are dark in both modes, so they only need the surround
   softening — their own text colours already assume a dark background. */
html[data-theme="dark"] .sd-footer {
  border-top: 1px solid var(--sd-border);
}
html[data-theme="dark"] .sd-cta::before {
  background: radial-gradient(
    closest-side,
    rgba(var(--sd-accent-rgb), 0.16),
    rgba(var(--sd-accent-rgb), 0)
  );
}

/* Elementor pages carry their own light palette. Anything the page author has
   not themed keeps working; these two stop the theme's chrome clashing. */
html[data-theme="dark"] .elementor-page .sd-cta,
html[data-theme="dark"] .elementor-page .sd-hero {
  background: var(--sd-bg);
}

/* One toggle at a time: when the drawer repeats the header actions, the
   header's own icon button steps aside on small screens. */
@media (max-width: 979px) {
  .sd-menu-actions .sd-header__actions .sd-theme-toggle {
    display: none;
  }
}

/* ==========================================================================
   23. Editor-applied dark-mode overrides
   --------------------------------------------------------------------------
   Four classes you can type into any block or Elementor element's CSS Classes
   field. They do nothing in light mode — whatever colour you picked in the
   editor stands. They only take effect once <html data-theme="dark"> is set.

       on-dark-mode-light-text         text goes light
       on-dark-mode-dark-text          text goes dark
       on-dark-mode-light-background   background goes light
       on-dark-mode-dark-background    background goes dark

   Combine them. A section you gave a light background in the editor, which
   should stay light in dark mode, needs its text forced dark too:

       class="on-dark-mode-light-background on-dark-mode-dark-text"

   The text classes reach the element and its text descendants, so putting one
   on a wrapper fixes the heading and the paragraph inside it in one go.

   !important is deliberate, not laziness: the block editor writes custom
   colours as inline style attributes, and nothing but !important outranks an
   inline style. It's safe here because every rule is scoped to dark mode, so
   light mode is never touched.
   ========================================================================== */

html[data-theme="dark"] {
  --sd-on-dark-light-text: #eaf6f0;
  --sd-on-dark-dark-text: #0a1613;
  --sd-on-dark-light-bg: #f2f7f5;
  --sd-on-dark-dark-bg: #0c1815;
}

/* --- text, on the element and everything textual inside it --------------- */
/* :where() contributes no specificity, so this stays at the weight of
   `html[data-theme="dark"] .class` and is easy to override if you need to. */

html[data-theme="dark"]
  .on-dark-mode-light-text
  :where(
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    ul,
    ol,
    li,
    dl,
    dt,
    dd,
    span,
    strong,
    b,
    em,
    i,
    small,
    blockquote,
    figcaption,
    label,
    td,
    th,
    summary,
    cite,
    address,
    .elementor-heading-title,
    .elementor-widget-text-editor,
    .elementor-icon-list-text,
    .elementor-image-box-title,
    .elementor-image-box-description
  ) {
  color: var(--sd-on-dark-light-text) !important;
}

html[data-theme="dark"]
  .on-dark-mode-dark-text
  :where(
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    ul,
    ol,
    li,
    dl,
    dt,
    dd,
    span,
    strong,
    b,
    em,
    i,
    small,
    blockquote,
    figcaption,
    label,
    td,
    th,
    summary,
    cite,
    address,
    .elementor-heading-title,
    .elementor-widget-text-editor,
    .elementor-icon-list-text,
    .elementor-image-box-title,
    .elementor-image-box-description
  ) {
  color: var(--sd-on-dark-dark-text) !important;
}

/* Links inside a forced block take the forced colour and keep their
   underline, so they stay legible and still read as links. Delete these two
   rules if you'd rather links kept the theme accent. */
html[data-theme="dark"] .on-dark-mode-light-text :where(a),
html[data-theme="dark"] .on-dark-mode-dark-text :where(a) {
  color: inherit !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* List markers and the icon-list ticks follow the text. */
html[data-theme="dark"] .on-dark-mode-light-text :where(li)::marker,
html[data-theme="dark"]
  .on-dark-mode-light-text
  :where(.elementor-icon-list-icon)
  i,
html[data-theme="dark"]
  .on-dark-mode-light-text
  :where(.elementor-icon-list-icon)
  svg {
  color: var(--sd-on-dark-light-text) !important;
  fill: var(--sd-on-dark-light-text) !important;
}

html[data-theme="dark"] .on-dark-mode-dark-text :where(li)::marker,
html[data-theme="dark"]
  .on-dark-mode-dark-text
  :where(.elementor-icon-list-icon)
  i,
html[data-theme="dark"]
  .on-dark-mode-dark-text
  :where(.elementor-icon-list-icon)
  svg {
  color: var(--sd-on-dark-dark-text) !important;
  fill: var(--sd-on-dark-dark-text) !important;
}

/* --- background, on the element only ------------------------------------- */
/* Elementor paints section and column backgrounds on a child overlay, so the
   nested selectors below are needed as well as the element itself. */

html[data-theme="dark"] .on-dark-mode-light-background,
html[data-theme="dark"] .on-dark-mode-light-background > .elementor-widget-wrap,
html[data-theme="dark"] .on-dark-mode-light-background > .elementor-container,
html[data-theme="dark"]
  .on-dark-mode-light-background
  > .elementor-background-overlay {
  background-color: var(--sd-on-dark-light-bg) !important;
  background-image: none !important;
}

html[data-theme="dark"] .on-dark-mode-dark-background,
html[data-theme="dark"] .on-dark-mode-dark-background > .elementor-widget-wrap,
html[data-theme="dark"] .on-dark-mode-dark-background > .elementor-container,
html[data-theme="dark"]
  .on-dark-mode-dark-background
  > .elementor-background-overlay {
  background-color: var(--sd-on-dark-dark-bg) !important;
  background-image: none !important;
}

/* --- the element itself, declared last ----------------------------------- */
/* Same specificity as the descendant rules above but later in the file, so a
   nested element carrying its own class beats the wrapper's rule. That covers
   one level of nesting, which is as far as source order can take it: a
   grandchild still follows the outermost wrapper. Put the class directly on
   the element if you need to break out deeper than that. */

html[data-theme="dark"] .on-dark-mode-light-text {
  color: var(--sd-on-dark-light-text) !important;
}

html[data-theme="dark"] .on-dark-mode-dark-text {
  color: var(--sd-on-dark-dark-text) !important;
}

/* ==========================================================================
   24. Full-width layouts
   --------------------------------------------------------------------------
   Two ways to get edge-to-edge sections at the top, middle or end of a page:

   - Elementor pages render with no wrapper (page.php → .sd-edge), so an
     Elementor section or container set to "Full Width" fills the screen.
   - The "Cover — full-width sections" page template (.sd-flow) lays block
     content out like the block editor does: normal blocks in the 720px
     reading column, "Wide" at 1040px, "Full width" edge to edge with no gap
     between two full-width blocks in a row.
   ========================================================================== */

/* overflow-x: clip, not hidden — clip doesn't create a scroll container, so
   the sticky blog sidebar inside .sd-main keeps working. It stops a 100vw
   full-width block adding a sideways scrollbar on Windows. */
.sd-main {
  overflow-x: clip;
}

.sd-edge {
  display: block;
}

.sd-flow > * {
  width: min(100% - 48px, var(--sd-width-read));
  margin-inline: auto;
  margin-block: 0;
}
.sd-flow > * + * {
  margin-top: 1.2em;
}
.sd-flow > .alignwide {
  width: min(100% - 48px, 1040px);
  margin-inline: auto;
}

/* Apps and plugin output — shortcodes, plugin blocks, embeds, tables, forms —
   get the site width (in line with the header) instead of the 720px reading
   column. Text-like blocks keep the reading width. "Content width" in the
   Page layout panel overrides this for the whole page. */
.sd-flow > :not(.alignfull):not(.alignwide):not(.alignleft):not(.alignright):not(:is(p, h1, h2, h3, h4, h5, h6, ul, ol, dl, hr, pre, blockquote, address, .wp-block-heading, .wp-block-list, .wp-block-quote, .wp-block-pullquote, .wp-block-verse, .wp-block-code, .wp-block-preformatted, .wp-block-separator, .wp-block-spacer, .wp-block-buttons, .wp-block-image, .wp-block-details, .wp-block-more, .wp-block-read-more, .wp-block-footnotes)) {
  width: min(100% - 48px, calc(var(--sd-width) - 48px));
}

/* Page layout → Content width. */
.sd-width-reading .sd-flow > :not(.alignfull):not(.alignwide):not(.alignleft):not(.alignright) {
  width: min(100% - 48px, var(--sd-width-read));
}
.sd-width-wide .sd-flow > :not(.alignfull):not(.alignwide):not(.alignleft):not(.alignright) {
  width: min(100% - 48px, 1040px);
}
.sd-width-site .sd-flow > :not(.alignfull):not(.alignwide):not(.alignleft):not(.alignright) {
  width: min(100% - 48px, calc(var(--sd-width) - 48px));
}
/* Apps nested inside other blocks. WordPress limits everything inside a
   Group (and any "constrained" block) to its content size, and many plugins
   size themselves to the same value. This theme's content size is 720px, so
   an app inside a Group, or one sized that way, stayed at reading width
   whatever the page was set to. On full-width templates the content size
   follows the page's choice instead (site width on Auto), and only text is
   held back to the reading column, wherever it sits. */
.sd-flow {
  --wp--style--global--content-size: calc(var(--sd-width) - 48px);
}
.sd-width-reading .sd-flow {
  --wp--style--global--content-size: var(--sd-width-read);
}
.sd-width-wide :is(.sd-flow, .sd-content) {
  --wp--style--global--content-size: 1040px;
}
.sd-width-site :is(.sd-flow, .sd-content) {
  --wp--style--global--content-size: calc(var(--sd-width) - 48px);
}
body:not(.sd-width-wide):not(.sd-width-site) .sd-flow .is-layout-constrained > :is(p, h1, h2, h3, h4, h5, h6, ul, ol, dl, hr, pre, blockquote, address, .wp-block-heading, .wp-block-list, .wp-block-quote, .wp-block-pullquote, .wp-block-verse, .wp-block-code, .wp-block-preformatted, .wp-block-separator, .wp-block-buttons, .wp-block-image, .wp-block-details):not(.alignwide):not(.alignfull) {
  max-width: var(--sd-width-read);
}

/* Default page template: the same choice widens its content column. */
.sd-width-wide .sd-section > .sd-wrap--read {
  max-width: 1088px;
}
.sd-width-site .sd-section > .sd-wrap--read {
  max-width: var(--sd-width);
}
.sd-flow > .alignfull {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

/* Breathing room around full-width blocks, none between two of them. */
.sd-flow > .alignfull + *,
.sd-flow > * + .alignfull {
  margin-top: clamp(48px, 6vw, 88px);
}
.sd-flow > .alignfull + .alignfull {
  margin-top: 0;
}

/* When the page doesn't open or close on a full-width block, give the first
   and last ordinary blocks the space the page hero would have given them. */
.sd-flow > :first-child:not(.alignfull) {
  margin-top: 72px;
}
.sd-flow > :last-child:not(.alignfull) {
  margin-bottom: 72px;
}

/* Floated images keep their own width inside the reading column. */
.sd-flow > .alignleft,
.sd-flow > .alignright {
  width: auto;
  max-width: min(50%, 360px);
}

/* Side padding inside full-width groups and covers, so their text doesn't
   touch the screen edge on a phone. An inline padding set in the editor still
   wins, because inline styles outrank this. */
/* --- Section content follows the site width ------------------------------
   A full-width section's background runs edge to edge, but what's inside it
   lines up with the header: centred, at most --sd-width wide. Without this,
   a section whose content isn't constrained (Elementor "Full Width"
   containers, a Group with "Inner blocks use content width" off, Columns,
   Cover) starts at the left edge of the screen and leaves the right side
   empty on a wide monitor.

   The padding grows with the screen: 24px on a phone, and on a wide screen
   exactly enough to centre a --sd-width column. Padding you set yourself in
   the editor still wins (inline styles outrank this).

   Turn it off per page: Page layout → Section content → Edge to edge. */
:root {
  /* Used only as padding on a top-level section, where 100% is the page width
     without the scrollbar (100vw would include it and sit a few px off). */
  --sd-section-gutter: max(24px, calc((100% - var(--sd-width)) / 2 + 24px));
}

body:not(.sd-content-edge) .sd-flow > .alignfull:where(.wp-block-group, .wp-block-columns, .wp-block-cover, .wp-block-media-text) {
  padding-inline: var(--sd-section-gutter);
}
body.sd-content-edge .sd-flow > .alignfull:where(.wp-block-group, .wp-block-columns) {
  padding-inline: 24px;
}
/* A full-width Group with its content width switched off: hold its children
   to the site width too, instead of letting text run the whole screen. */
body:not(.sd-content-edge) .sd-flow > .alignfull.is-layout-flow > :not(.alignfull) {
  max-width: calc(var(--sd-width) - 48px);
  margin-inline: auto;
}

/* Elementor. Boxed sections and containers already centre themselves; these
   cover the Full Width ones at the top level of the page. */
body:not(.sd-content-edge) .sd-edge .elementor > .e-con-full,
body:not(.sd-content-edge) .sd-edge .elementor > .elementor-section-wrap > .e-con-full {
  padding-left: max(var(--padding-left, 10px), var(--sd-section-gutter)) !important;
  padding-right: max(var(--padding-right, 10px), var(--sd-section-gutter)) !important;
}
body:not(.sd-content-edge) .sd-edge .elementor-top-section.elementor-section-full_width > .elementor-container {
  max-width: calc(var(--sd-width) - 48px);
  margin-inline: auto;
}

/* Full-bleed photos shouldn't inherit the rounded corners content images get. */
.sd-content .wp-block-cover__image-background,
.sd-content .wp-block-cover__video-background,
.sd-flow > .alignfull img {
  border-radius: 0;
}

/* The page already opens right under the header on a cover page. */
.sd-cover-page .sd-main,
.sd-edge-page .sd-main {
  padding: 0;
}

/* Backgrounds for the SepoDesk block patterns. Classes rather than palette
   presets, because preset colours are fixed values and wouldn't follow dark
   mode — these go through the role tokens, so they do. */
.sd-band-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--sd-hero-from) 0%, var(--sd-bg) 78%);
}
.sd-band-hero::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -560px;
  width: 1300px;
  height: 1000px;
  transform: translateX(-50%);
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(
    closest-side,
    rgba(var(--sd-accent-rgb), 0.3),
    rgba(var(--sd-accent-rgb), 0.07) 55%,
    rgba(var(--sd-accent-rgb), 0) 78%
  );
}
.sd-band-hero > * {
  position: relative;
  z-index: 1;
}
.sd-band-soft {
  background: var(--sd-surface-2);
  border-block: 1px solid var(--sd-border);
}
html[data-theme="dark"] .sd-band-hero::before {
  opacity: 0.5;
}

/* ==========================================================================
   25. Page layout options
   --------------------------------------------------------------------------
   Driven by body classes from inc/layout.php (the Page layout panel).
   ========================================================================== */

/* Sections reached from a menu link stop clear of the sticky header. */
:where([id]) {
  scroll-margin-top: calc(var(--sd-header-h) + 16px);
}

/* --- Transparent header ---------------------------------------------------
   The header stays sticky and in the flow, but a negative bottom margin lets
   the first section slide up underneath it. It turns solid on scroll
   (.is-stuck, from theme.js) and while the mobile drawer is open. */
.sd-header-overlay .sd-header {
  margin-bottom: calc(var(--sd-header-h) * -1);
}
.sd-header-overlay .sd-header:not(.is-stuck):not(.is-menu-open) {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: transparent;
  box-shadow: none;
}

/* Light text, for a transparent header over a dark image or band. */
.sd-header-overlay--light .sd-header:not(.is-stuck):not(.is-menu-open) :is(.sd-brand__text, .sd-header__link) {
  color: #fff;
}
.sd-header-overlay--light .sd-header:not(.is-stuck):not(.is-menu-open) .sd-brand__tag {
  color: rgba(255, 255, 255, 0.82);
}
.sd-header-overlay--light .sd-header:not(.is-stuck):not(.is-menu-open) .sd-theme-toggle,
.sd-header-overlay--light .sd-header:not(.is-stuck):not(.is-menu-open) .sd-burger {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.45);
}
.sd-header-overlay--light .sd-header:not(.is-stuck):not(.is-menu-open) .sd-burger span,
.sd-header-overlay--light .sd-header:not(.is-stuck):not(.is-menu-open) .sd-burger span::before,
.sd-header-overlay--light .sd-header:not(.is-stuck):not(.is-menu-open) .sd-burger span::after {
  background: #fff;
}
/* The header button would vanish into a band of its own colour, so it takes
   the accent colour until the header turns solid. */
.sd-header-overlay--light .sd-header:not(.is-stuck):not(.is-menu-open) .sd-header__actions .sd-btn {
  background: var(--sd-lime);
  color: var(--sd-on-accent);
}
.sd-header-overlay--light .sd-header:not(.is-stuck):not(.is-menu-open) .sd-header__actions .sd-btn:hover {
  background: var(--sd-lime-h);
}
@media (min-width: 980px) {
  .sd-header-overlay--light .sd-header:not(.is-stuck) .sd-nav > ul > li > a {
    color: #fff;
  }
  .sd-header-overlay--light .sd-header:not(.is-stuck) .sd-nav > ul > li > a:hover,
  .sd-header-overlay--light .sd-header:not(.is-stuck) .sd-nav > ul > li.current-menu-item > a,
  .sd-header-overlay--light .sd-header:not(.is-stuck) .sd-nav > ul > li > a.is-current {
    background: rgba(255, 255, 255, 0.16);
  }
}

/* --- Full-screen first section -------------------------------------------- */
.sd-first-full .sd-flow > .alignfull:first-child,
.sd-first-full .sd-edge .elementor > :first-child,
.sd-first-full .sd-edge .elementor > .elementor-section-wrap > :first-child {
  min-height: calc(100vh - var(--sd-header-h));
  min-height: calc(100svh - var(--sd-header-h));
}
.sd-header-overlay.sd-first-full .sd-flow > .alignfull:first-child,
.sd-header-overlay.sd-first-full .sd-edge .elementor > :first-child,
.sd-header-overlay.sd-first-full .sd-edge .elementor > .elementor-section-wrap > :first-child,
.sd-no-header.sd-first-full .sd-flow > .alignfull:first-child,
.sd-no-header.sd-first-full .sd-edge .elementor > :first-child {
  min-height: 100vh;
  min-height: 100svh;
}
/* Block content: centre whatever is inside vertically. (Elementor sections
   and the core Cover block already manage their own alignment.) */
.sd-first-full .sd-flow > .alignfull:first-child:not(.wp-block-cover) {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* --- Pages without a header ----------------------------------------------- */
.sd-home-link {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--sd-border);
  border-radius: 999px;
  background: var(--sd-surface);
  color: var(--sd-heading);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.2;
}
.sd-home-link:hover {
  background: var(--sd-mint);
  color: var(--sd-heading);
}
.admin-bar .sd-home-link {
  top: 48px;
}
@media (max-width: 782px) {
  .admin-bar .sd-home-link {
    top: 62px;
  }
}

/* --- Minimal footer ------------------------------------------------------- */
.sd-footer--minimal {
  padding-top: 0;
}
.sd-footer--minimal .sd-footer__bottom {
  margin-top: 0;
  border-top: 0;
}

/* --- Forced light or dark ------------------------------------------------- */
html[data-sd-forced] .sd-theme-toggle {
  display: none !important;
}

/* --- One-page navigation -------------------------------------------------- */
.sd-nav a.is-current {
  background: var(--sd-mint);
  font-weight: 600;
}

/* --- Back to top ---------------------------------------------------------- */
.sd-to-top {
  position: fixed;
  right: 20px;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 800;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--sd-btn-bg);
  color: var(--sd-btn-fg);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition:
    opacity 0.2s ease,
    transform 0.2s var(--sd-ease),
    visibility 0.2s,
    background 0.2s ease;
}
.sd-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.sd-to-top:hover {
  background: var(--sd-btn-bg-h);
}
#sd-main:focus {
  outline: none; /* focused by script only (back to top), never by Tab */
}
.sd-to-top svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body.sd-nav-open .sd-to-top {
  visibility: hidden;
}

/* ==========================================================================
   26. Section patterns
   --------------------------------------------------------------------------
   Classes used by inc/patterns/*.html. Flat: borders and tints, no shadows.
   Everything goes through the skin tokens, so it follows the skin and dark
   mode. Usable on any block via Advanced → Additional CSS class(es).
   ========================================================================== */

.sd-kicker {
  margin-bottom: 0.4em !important;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sd-green);
}
.sd-muted {
  color: var(--sd-muted);
}
/* A label sits tight on the heading it introduces. */
.sd-kicker + :is(h1, h2, h3, h4) {
  margin-top: 0.15em !important;
}

/* Panels: features, plans, quotes, the contact form box. */
.sd-panel {
  height: 100%;
  padding: 28px 28px 30px;
  background: var(--sd-surface);
  border: 1px solid var(--sd-border);
  border-radius: var(--sd-radius);
}
.sd-panel > * + * {
  margin-top: 0.8em;
}
.sd-panel > :first-child {
  margin-top: 0;
}
.sd-panel h3 {
  margin-bottom: 0;
  font-size: 1.2rem;
}
.sd-panel--featured {
  background: var(--sd-mint);
  border: 2px solid var(--sd-green);
}
.sd-band-soft .sd-panel {
  background: var(--sd-bg);
}

.sd-stat {
  margin-bottom: 0 !important;
  font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.2rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--sd-heading);
}
.sd-stat + p {
  margin-top: 0.5em !important;
  color: var(--sd-muted);
}

.sd-price {
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--sd-heading);
}

.sd-quote {
  font-size: 1.05rem;
  color: var(--sd-heading);
}

.sd-logos {
  gap: 18px 44px !important;
  margin-top: 18px !important;
}
.sd-logo {
  margin: 0 !important;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--sd-muted);
}

.sd-content .sd-rounded img {
  border-radius: var(--sd-radius);
}
.sd-avatar {
  max-width: 160px;
  margin-inline: auto !important;
}
.sd-content .sd-avatar img {
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
}

/* Columns: even gaps, and stacked columns get breathing room on phones. */
.sd-flow .wp-block-columns {
  gap: 24px;
}
.sd-flow .wp-block-columns + *,
.sd-flow * + .wp-block-columns {
  margin-top: 40px;
}

/* FAQ — native <details>, so it opens with Enter/Space and announces its state. */
.sd-faq .wp-block-details {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--sd-border);
}
.sd-faq .wp-block-details:first-of-type {
  margin-top: 28px;
  border-top: 1px solid var(--sd-border);
}
.sd-faq summary {
  position: relative;
  padding: 20px 40px 20px 0;
  list-style: none;
  cursor: pointer;
  font-weight: 600;
  color: var(--sd-heading);
}
.sd-faq summary::-webkit-details-marker {
  display: none;
}
.sd-faq summary::after {
  content: "+";
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--sd-green);
}
.sd-faq details[open] summary::after {
  content: "–";
}
.sd-faq details > :not(summary) {
  margin: 0 0 20px;
}

/* ==========================================================================
   27. Post headers (inc/post-header.php)
   --------------------------------------------------------------------------
   Classic, Wide, Overlay, Split and No image. Flat: no shadows. The cover
   image keeps its focal point (object-position) whenever it's cropped.
   ========================================================================== */

.sd-ph__term {
  margin-bottom: 14px;
}
.sd-ph__title {
  margin: 0 0 0.35em;
}
.sd-ph__lede {
  max-width: 62ch;
  margin: 0 0 16px;
  font-size: 1.12rem;
}
.sd-ph__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-size: 13.5px;
  color: var(--sd-muted);
}
.sd-center .sd-ph__meta {
  justify-content: center;
}
.sd-center .sd-ph__lede {
  margin-inline: auto;
}

.sd-ph__figure {
  margin: 0;
}
.sd-ph__figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--sd-radius);
  object-fit: cover;
}
.sd-ph__figure figcaption {
  margin-top: 10px;
  font-size: 13px;
  color: var(--sd-muted);
  text-align: center;
}

/* --- Classic and Wide: image under the title ------------------------------ */
.sd-ph--classic,
.sd-ph--wide {
  padding-bottom: 40px;
}
.sd-ph--classic + .sd-ph__below img {
  max-height: min(70vh, 560px);
}
.sd-ph--wide + .sd-ph__below img {
  aspect-ratio: 21 / 9;
}
@media (max-width: 767px) {
  .sd-ph--wide + .sd-ph__below img {
    aspect-ratio: 4 / 3;
  }
}
.sd-ph__below + .sd-section {
  padding-top: 48px;
}

/* --- Split: text left, image right ----------------------------------------- */
.sd-ph__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}
.sd-ph--split .sd-ph__figure img {
  max-height: 560px;
}
@media (max-width: 899px) {
  .sd-ph__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
}

/* --- Overlay: title on top of the image ------------------------------------ */
.sd-ph--overlay {
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: #111; /* behind the image while it loads */
  color: #fff;
}
.sd-ph--h-medium {
  min-height: clamp(380px, 54vh, 580px);
}
.sd-ph--h-tall {
  min-height: clamp(460px, 74vh, 860px);
}
.sd-ph--h-full {
  min-height: calc(100vh - var(--sd-header-h));
  min-height: calc(100svh - var(--sd-header-h));
}
.sd-header-overlay .sd-ph--h-full {
  min-height: 100vh;
  min-height: 100svh;
}
.sd-ph--at-center {
  align-items: center;
}

.sd-ph__media,
.sd-ph__scrim {
  position: absolute;
  inset: 0;
}
.sd-ph__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

/* The scrim makes white text readable on any photo, a white one included:
   at least 4.5:1 wherever the text can sit. Bottom-left text gets a gradient
   that's darkest under the text; centred text gets an even wash. */
.sd-ph__scrim {
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.82) 0%,
    rgba(0, 0, 0, 0.66) 45%,
    rgba(0, 0, 0, 0.3) 78%,
    rgba(0, 0, 0, 0.22) 100%
  );
}
.sd-ph--at-center .sd-ph__scrim {
  background: rgba(0, 0, 0, 0.6);
}
/* Under a transparent site header, the top darkens too so the menu reads. */
.sd-header-overlay .sd-ph--overlay .sd-ph__scrim {
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.72) 0, rgba(0, 0, 0, 0) 160px),
    linear-gradient(
      to top,
      rgba(0, 0, 0, 0.82) 0%,
      rgba(0, 0, 0, 0.66) 45%,
      rgba(0, 0, 0, 0.3) 78%,
      rgba(0, 0, 0, 0.22) 100%
    );
}
.sd-header-overlay .sd-ph--at-center .sd-ph__scrim {
  background: rgba(0, 0, 0, 0.6);
}

.sd-ph__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-block: 56px 64px;
}
.sd-header-overlay .sd-ph__inner {
  padding-top: calc(var(--sd-header-h) + 40px);
}
.sd-ph--overlay .sd-ph__text {
  max-width: 820px;
}
.sd-ph--overlay .sd-ph__text.sd-center {
  margin-inline: auto;
}
.sd-ph--overlay .sd-ph__title {
  color: #fff;
}
.sd-ph--overlay .sd-ph__lede {
  color: rgba(255, 255, 255, 0.92);
}
.sd-ph--overlay .sd-ph__meta {
  color: rgba(255, 255, 255, 0.88);
}
.sd-ph--overlay .sd-ph__meta a {
  color: inherit;
}
.sd-ph__credit {
  position: absolute;
  right: 16px;
  bottom: 14px;
  z-index: 1;
  max-width: 60%;
  font-size: 12px;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.86);
  text-align: right;
}
.sd-ph__figure .sd-ph__credit {
  position: static;
  max-width: none;
  font-size: inherit;
  color: inherit;
  text-align: inherit;
}

/* --- Reading progress ----------------------------------------------------- */
.sd-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: 3px;
  pointer-events: none;
}
.admin-bar .sd-progress {
  top: 32px;
}
@media (max-width: 782px) {
  .admin-bar .sd-progress {
    top: 46px;
  }
}
.sd-progress span {
  display: block;
  height: 100%;
  background: var(--sd-green);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* ==========================================================================
   28. Editorial post header
   --------------------------------------------------------------------------
   Big day number and month in a left column, a large serif title (the
   Typography "Accent" font, upright), a byline row of author | categories
   between hairlines, a drop cap, and the article text aligned under the
   title rather than centred on the page.
   ========================================================================== */

.sd-ed {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 0 72px;
  width: min(100% - 48px, 1040px);
  margin-inline: auto;
}
.sd-ph--editorial {
  padding: 88px 0 8px;
}

/* --- Date column ---------------------------------------------------------- */
.sd-ed__date time {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.sd-ed__day {
  font-family: var(--sd-serif);
  font-size: clamp(4.2rem, 2.8rem + 3.4vw, 7rem);
  font-weight: 400;
  font-style: normal;
  line-height: 0.9;
  letter-spacing: -0.02em;
  /* Soft, but still 3:1 or better against the page: large text carries the
     date, so it isn't decorative. */
  color: color-mix(in srgb, var(--sd-muted) 78%, var(--sd-bg));
}
.sd-ed__rule {
  display: block;
  width: 56px;
  height: 1px;
  margin: 18px 0 14px;
  background: var(--sd-heading);
  opacity: 0.55;
}
.sd-ed__month {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--sd-green);
}

/* --- Title, byline -------------------------------------------------------- */
.sd-ed__title {
  margin: 0;
  font-family: var(--sd-serif);
  font-size: clamp(2.5rem, 1.5rem + 3.8vw, 4.75rem);
  font-weight: 400;
  font-style: normal;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--sd-heading);
}
.sd-ed__lede {
  margin: 22px 0 0;
  font-size: 1.15rem;
}
.sd-ed__byline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  margin-top: 44px;
  border-top: 1px solid var(--sd-border);
}
.sd-ed__author {
  padding: 30px 32px 30px 0;
  font-family: var(--sd-serif);
  font-size: 1.55rem;
  line-height: 1.3;
  color: var(--sd-green);
}
.sd-ed__author a {
  color: inherit;
}
.sd-ed__author a:hover {
  color: var(--sd-heading);
}
.sd-ed__terms {
  padding: 30px 0 30px 48px;
  border-left: 1px solid var(--sd-border);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sd-muted);
}
.sd-ed__terms a {
  color: inherit;
}
.sd-ed__terms a:hover {
  color: var(--sd-heading);
}
.sd-ed__figure {
  margin-top: 36px;
}

/* --- The article lines up under the title -------------------------------- */
.sd-ph-layout-editorial .sd-ph + .sd-section {
  padding-top: 40px;
}
.sd-ph-layout-editorial .sd-section > .sd-wrap--read {
  max-width: none;
  width: min(100% - 48px, 1040px);
  padding: 0 0 0 calc(180px + 72px);
}
.sd-ph-layout-editorial .sd-section > .sd-wrap--read > * {
  max-width: var(--sd-width-read);
}

/* Drop cap on the opening paragraph. */
.sd-ph-layout-editorial .sd-content > p:first-of-type::first-letter {
  float: left;
  margin: 0.06em 0.12em 0 0;
  font-family: var(--sd-serif);
  font-size: 4.4em;
  font-weight: 400;
  font-style: normal;
  line-height: 0.82;
  color: var(--sd-green);
}

/* --- Narrow screens: one column, date on a single line ------------------ */
@media (max-width: 899px) {
  .sd-ed {
    grid-template-columns: minmax(0, 1fr);
  }
  .sd-ph--editorial {
    padding-top: 48px;
  }
  .sd-ed__date time {
    flex-direction: row;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 18px;
    text-align: left;
  }
  .sd-ed__day {
    font-size: 2.6rem;
  }
  .sd-ed__rule {
    display: none;
  }
  .sd-ed__byline {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 28px;
  }
  .sd-ed__author {
    padding: 20px 0 12px;
  }
  .sd-ed__terms {
    padding: 0 0 20px;
    border-left: 0;
  }
  .sd-ph-layout-editorial .sd-section > .sd-wrap--read {
    padding-left: 0;
  }
}