/*
Theme Name: Digital Synergies
Theme URI: https://digitalsynergies.com
Author: Digital Synergies, LLC
Description: Custom theme for Digital Synergies, LLC — IT and business consulting. Palette and geometry derived from the company logo.
Version: 1.9.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: digital-synergies
*/

/* ---------------------------------------------------------
   1. Tokens
   --------------------------------------------------------- */
:root {
  --navy:       #0A2E50;
  --navy-deep:  #06203A;
  --blue:       #0872BC;
  --blue-light: #2A93DC;
  --red:        #ED292D;
  --gray:       #87888C;
  --gray-line:  #D9DDE3;
  --paper:      #F5F6F8;
  --white:      #FFFFFF;

  --ink:        var(--navy);
  --ink-soft:   #47566B;

  --font-display: "IBM Plex Sans Condensed", "Arial Narrow", Arial, sans-serif;
  --font-body:    "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --wrap: 1120px;
  --gutter: clamp(20px, 5vw, 48px);
  --radius: 3px;
}

/* ---------------------------------------------------------
   2. Reset & base
   --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-soft);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--navy); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.12;
  margin: 0 0 0.5em;
}

h1 { font-size: clamp(2.4rem, 5.4vw, 4rem); }
h2 { font-size: clamp(1.85rem, 3.4vw, 2.7rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); letter-spacing: -0.01em; }

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

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

.ds-skip {
  position: absolute; left: -9999px;
  background: var(--navy); color: #fff;
  padding: 12px 20px; z-index: 999;
}
.ds-skip:focus { left: 12px; top: 12px; }

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

/* ---------------------------------------------------------
   3. Utility: eyebrow, buttons, wrap
   --------------------------------------------------------- */
.ds-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray);
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 1.1em;
}
.ds-eyebrow::before {
  content: "";
  width: 9px; height: 9px;
  background: var(--red);
  transform: rotate(45deg) translateY(-1px);
  flex: none;
}

.ds-btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 14px 28px;
  border-radius: var(--radius);
  border: 1.5px solid var(--blue);
  background: var(--blue);
  color: var(--white) !important;
  text-decoration: none;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.ds-btn:hover {
  background: var(--navy);
  border-color: var(--navy);
  transform: translateY(-1px);
}
.ds-btn--ghost {
  background: transparent;
  color: var(--white) !important;
  border-color: rgba(255,255,255,0.4);
}
.ds-btn--ghost:hover {
  background: rgba(255,255,255,0.1);
  border-color: var(--white);
}
.ds-btn--outline {
  background: transparent;
  color: var(--navy) !important;
  border-color: var(--gray-line);
}
.ds-btn--outline:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white) !important;
}

.ds-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  margin-top: 2rem;
}

/* ---------------------------------------------------------
   4. Header
   --------------------------------------------------------- */
.ds-header {
  border-bottom: 1px solid var(--gray-line);
  background: var(--white);
  position: sticky;
  top: 0;
  z-index: 100;
}
body.admin-bar .ds-header { top: 32px; }

.ds-header__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 16px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.ds-logo { display: block; flex: none; }
.ds-logo img { height: 55px; width: auto; }
.ds-logo--text {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--navy);
  text-decoration: none;
  letter-spacing: -0.02em;
}

.ds-nav ul {
  list-style: none;
  display: flex;
  gap: 30px;
  margin: 0;
  padding: 0;
}
.ds-nav a {
  font-size: 0.94rem;
  font-weight: 500;
  color: var(--navy);
  text-decoration: none;
  padding: 6px 0;
  display: block;
  border-bottom: 2px solid transparent;
  transition: border-color 0.18s ease, color 0.18s ease;
}
.ds-nav a:hover { color: var(--blue); border-bottom-color: var(--blue); }
.ds-nav .current-menu-item > a,
.ds-nav .current_page_item > a { border-bottom-color: var(--red); }

.ds-header__phone {
  font-family: var(--font-mono);
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--navy);
  text-decoration: none;
  white-space: nowrap;
}
.ds-header__phone:hover { color: var(--blue); }

.ds-toggle {
  display: none;
  background: none;
  border: 1px solid var(--gray-line);
  border-radius: var(--radius);
  padding: 9px 12px;
  cursor: pointer;
  color: var(--navy);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .ds-toggle { display: block; }
  .ds-header__inner { flex-wrap: wrap; }
  .ds-nav {
    flex-basis: 100%;
    display: none;
    order: 3;
  }
  .ds-nav.is-open { display: block; }
  .ds-nav ul {
    flex-direction: column;
    gap: 0;
    padding: 8px 0 12px;
  }
  .ds-nav a {
    padding: 11px 0;
    border-bottom: 1px solid var(--gray-line);
  }
  .ds-header__phone { display: none; }
}

/* ---------------------------------------------------------
   5. Section scaffolding (used by page content blocks)
   --------------------------------------------------------- */
.ds-section {
  padding: clamp(56px, 8vw, 104px) var(--gutter);
}
.ds-section > * {
  max-width: var(--wrap);
  margin-left: auto;
  margin-right: auto;
}
.ds-section--paper { background: var(--paper); }
.ds-section--navy  { background: var(--navy); color: rgba(255,255,255,0.82); }
.ds-section--navy h2,
.ds-section--navy h3 { color: var(--white); }
.ds-section--navy .ds-eyebrow { color: rgba(255,255,255,0.6); }

.ds-lede {
  font-size: clamp(1.05rem, 1.7vw, 1.22rem);
  line-height: 1.6;
  max-width: 60ch;
}

/* ---------------------------------------------------------
   6. Hero — signature diagonal systems field
   --------------------------------------------------------- */
.ds-hero {
  position: relative;
  background: var(--navy);
  color: rgba(255,255,255,0.8);
  padding: clamp(72px, 11vw, 140px) var(--gutter) clamp(64px, 9vw, 120px);
  overflow: hidden;
}
.ds-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(45deg,
      rgba(255,255,255,0.045) 0 2px,
      transparent 2px 26px),
    radial-gradient(120% 90% at 88% 8%,
      rgba(8,114,188,0.42) 0%,
      transparent 62%);
  pointer-events: none;
}
.ds-hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--wrap);
  margin: 0 auto;
}
.ds-hero h1 {
  color: var(--white);
  max-width: 17ch;
  margin-bottom: 0.4em;
}
.ds-hero .ds-eyebrow { color: rgba(255,255,255,0.62); }
.ds-hero .ds-lede { color: rgba(255,255,255,0.82); }

.ds-hero__mark {
  position: absolute;
  right: -60px;
  bottom: -80px;
  width: 420px;
  opacity: 0.13;
  z-index: 0;
  pointer-events: none;
}
@media (max-width: 900px) { .ds-hero__mark { display: none; } }

/* ---------------------------------------------------------
   7. Focus-area grid
   --------------------------------------------------------- */
.ds-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--gray-line);
  border: 1px solid var(--gray-line);
  margin-top: 2.8rem !important;
}
@media (max-width: 720px) {
  .ds-grid { grid-template-columns: 1fr; }
}
.ds-grid > div,
.ds-grid__card {
  background: var(--white);
  padding: clamp(26px, 3.4vw, 40px);
  transition: background 0.2s ease;
  position: relative;
}
.ds-grid > div::before,
.ds-grid__card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 3px;
  background: var(--blue);
  transition: width 0.28s ease;
}
.ds-grid > div:hover::before,
.ds-grid__card:hover::before { width: 100%; }
.ds-grid h3 { margin-bottom: 0.55em; }
.ds-grid p { font-size: 0.98rem; margin: 0; }

/* ---------------------------------------------------------
   8. Ledger (credentials)
   --------------------------------------------------------- */
.ds-split {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(36px, 6vw, 80px);
  align-items: start;
}
@media (max-width: 860px) {
  .ds-split { grid-template-columns: 1fr; }
}

.ds-ledger { border-top: 2px solid var(--navy); }
.ds-ledger__row {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 20px 0;
  border-bottom: 1px solid var(--gray-line);
}
.ds-ledger__num {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4vw, 2.9rem);
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
  letter-spacing: -0.03em;
  flex: none;
  min-width: 3.2ch;
}
.ds-ledger__label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  line-height: 1.45;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray);
}

/* ---------------------------------------------------------
   8b. Founder block, timeline, credentials
   --------------------------------------------------------- */
.ds-founder {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: clamp(32px, 5vw, 68px);
  align-items: start;
}
@media (max-width: 880px) {
  .ds-founder { grid-template-columns: 1fr; max-width: 560px; }
}

.ds-founder__photo { margin: 0; }
.ds-founder__photo .wp-block-image { margin: 0; }
.ds-founder__photo img {
  width: 100%;
  aspect-ratio: 880 / 1100;   /* reserves space; width/height attrs can't be
                                 used without breaking block validation */
  object-fit: cover;
  border-radius: var(--radius);
  display: block;
}
.ds-founder__caption {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 2px solid var(--navy);
}
.ds-founder__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: -0.01em;
}
.ds-founder__role {
  margin: 5px 0 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gray);
}

/* Horizontal ledger for full-width placement under a founder block. */
.ds-ledger--row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 36px;
  border-top: 2px solid var(--navy);
  margin-top: clamp(36px, 5vw, 60px) !important;
}
.ds-ledger--row .ds-ledger__row {
  display: block;
  border-bottom: none;
  padding: 22px 0 0;
}
.ds-ledger--row .ds-ledger__label { display: block; margin-top: 6px; }
@media (max-width: 720px) {
  .ds-ledger--row { grid-template-columns: 1fr; }
  .ds-ledger--row .ds-ledger__row {
    display: flex; align-items: baseline; gap: 18px;
    padding: 16px 0; border-bottom: 1px solid var(--gray-line);
  }
  .ds-ledger--row .ds-ledger__label { margin-top: 0; }
}

/* Career timeline — a real chronological sequence, so ordering carries meaning. */
.ds-timeline { border-top: 2px solid var(--navy); margin-top: 2rem; }
.ds-timeline__row {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 8px 28px;
  padding: 22px 0;
  border-bottom: 1px solid var(--gray-line);
}
@media (max-width: 640px) {
  .ds-timeline__row { grid-template-columns: 1fr; gap: 4px; }
}
.ds-timeline__when {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  color: var(--gray);
  padding-top: 5px;
}
.ds-timeline__what h4 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: -0.01em;
  margin: 0 0 3px;
}
.ds-timeline__what p {
  font-size: 0.95rem;
  color: var(--ink-soft);
  margin: 0;
}
.ds-timeline__when { margin: 0; }
.ds-timeline__row--current .ds-timeline__when { color: var(--red); }

/* Credential chips */
.ds-creds {
  list-style: none;
  padding: 0;
  margin: 1.6rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.ds-creds li {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.05em;
  color: var(--navy);
  background: var(--paper);
  border: 1px solid var(--gray-line);
  border-left: 3px solid var(--blue);
  padding: 9px 14px;
  border-radius: var(--radius);
}

/* ---------------------------------------------------------
   9. Service blocks
   --------------------------------------------------------- */
.ds-service {
  border-top: 2px solid var(--navy);
  padding-top: 30px;
  margin-top: 3rem !important;
}
.ds-service:first-of-type { margin-top: 2.4rem !important; }
.ds-service ul {
  list-style: none;
  padding: 0;
  margin: 1.6rem 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2px 32px;
}
.ds-service li {
  padding: 11px 0 11px 20px;
  border-bottom: 1px solid var(--gray-line);
  position: relative;
  font-size: 0.97rem;
}
.ds-service li::before {
  content: "";
  position: absolute;
  left: 0; top: 20px;
  width: 7px; height: 7px;
  background: var(--blue);
  transform: rotate(45deg);
}

/* Ordered sequences read top to bottom, never across columns. */
.ds-service--steps ul { grid-template-columns: 1fr; }
.ds-service--steps li { padding-top: 14px; padding-bottom: 14px; }
.ds-service--steps li::before { top: 23px; background: var(--red); }
.ds-service--steps strong {
  font-family: var(--font-display);
  color: var(--navy);
  font-weight: 600;
}

/* ---------------------------------------------------------
   10. Contact cards
   --------------------------------------------------------- */
.ds-contact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  margin-top: 2.6rem !important;
}
.ds-contact > div,
.ds-contact__card {
  border: 1px solid var(--gray-line);
  border-top: 3px solid var(--blue);
  padding: 30px;
  background: var(--white);
}
.ds-contact__label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gray);
  font-weight: 500;
  margin: 0 0 10px;
}
.ds-contact__value,
.ds-contact__value a {
  overflow-wrap: anywhere;
  font-family: var(--font-display);
  font-size: 1.32rem;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  letter-spacing: -0.01em;
  margin: 0;
}
.ds-contact__value a:hover { color: var(--blue); }

/* ---------------------------------------------------------
   10b. Special offer block
   --------------------------------------------------------- */
.ds-offer {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
@media (max-width: 880px) {
  .ds-offer { grid-template-columns: 1fr; max-width: 540px; }
}

.ds-offer__art {
  margin: 0;
  background: var(--paper);
  border: 1px solid var(--gray-line);
  border-top: 3px solid var(--red);
  border-radius: var(--radius);
  padding: clamp(18px, 2.6vw, 30px);
}
.ds-offer__art .wp-block-image { margin: 0; }
.ds-offer__art img {
  width: 100%;
  aspect-ratio: 900 / 1350;
  object-fit: cover;
  border-radius: 2px;
  display: block;
}
.ds-offer__caption {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--gray-line);
}
.ds-offer__caption p {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gray);
}

.ds-offer h2 { margin-bottom: 0.3em; }

/* The parenthetical is the punchline — it has to read as a footnote, not a header. */
.ds-offer__fineprint {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--gray);
  margin: 0 0 1.5em !important;
}

.ds-offer__terms {
  list-style: none;
  padding: 0;
  margin: 1.8rem 0 0;
  border-top: 1px solid var(--gray-line);
}
.ds-offer__terms li {
  padding: 13px 0 13px 22px;
  border-bottom: 1px solid var(--gray-line);
  position: relative;
  font-size: 0.97rem;
}
.ds-offer__terms li::before {
  content: "";
  position: absolute;
  left: 0; top: 21px;
  width: 7px; height: 7px;
  background: var(--blue);
  transform: rotate(45deg);
}

/* ---------------------------------------------------------
   11. CTA band
   --------------------------------------------------------- */
.ds-cta { text-align: center; }
.ds-cta h2 { max-width: 22ch; margin-inline: auto; }
.ds-cta p { max-width: 52ch; margin-inline: auto; font-size: 1.1rem; }
.ds-cta .ds-actions { justify-content: center; }

/* ---------------------------------------------------------
   12. Interior page header + content
   --------------------------------------------------------- */
.ds-pagehead {
  background: var(--navy);
  padding: clamp(52px, 7vw, 88px) var(--gutter);
  position: relative;
  overflow: hidden;
}
.ds-pagehead::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(45deg,
    rgba(255,255,255,0.045) 0 2px, transparent 2px 26px);
  pointer-events: none;
}
.ds-pagehead__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.ds-pagehead h1 { color: var(--white); margin: 0; }

.ds-entry { padding: clamp(48px, 6vw, 76px) var(--gutter); }
.ds-entry__inner { max-width: var(--wrap); margin: 0 auto; }
.ds-entry__inner > h2 { margin-top: 2.2em; }
.ds-entry__inner > h2:first-child { margin-top: 0; }
.ds-entry .ds-lede { margin-bottom: 1.6em; }

/* Page content that supplies its own .ds-section blocks gets no double padding */
.ds-entry--flush { padding: 0; }
.ds-entry--flush .ds-entry__inner { max-width: none; }

/* ---------------------------------------------------------
   13. Footer
   --------------------------------------------------------- */
.ds-footer {
  background: var(--navy-deep);
  color: rgba(255,255,255,0.62);
  padding: clamp(48px, 6vw, 72px) var(--gutter) 32px;
  font-size: 0.93rem;
}
.ds-footer__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
}
@media (max-width: 780px) {
  .ds-footer__inner { grid-template-columns: 1fr; gap: 32px; }
}
.ds-footer h4 {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin: 0 0 14px;
}
.ds-footer a { color: var(--white); text-decoration: none; }
.ds-footer a:hover { color: var(--blue-light); text-decoration: underline; }
.ds-footer ul { list-style: none; margin: 0; padding: 0; }
.ds-footer li { margin-bottom: 9px; }
.ds-footer__logo {
  background: var(--white);
  padding: 12px 16px;
  border-radius: var(--radius);
  display: inline-block;
  margin-bottom: 18px;
}
.ds-footer__logo img { height: 34px; width: auto; }
.ds-footer__bottom {
  max-width: var(--wrap);
  margin: 42px auto 0;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,0.13);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  justify-content: space-between;
  font-size: 0.84rem;
  color: rgba(255,255,255,0.45);
}

/* ---------------------------------------------------------
   14. Motion
   --------------------------------------------------------- */
@keyframes dsRise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.ds-hero__inner > * {
  animation: dsRise 0.62s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.ds-hero__inner > *:nth-child(1) { animation-delay: 0.04s; }
.ds-hero__inner > *:nth-child(2) { animation-delay: 0.12s; }
.ds-hero__inner > *:nth-child(3) { animation-delay: 0.20s; }
.ds-hero__inner > *:nth-child(4) { animation-delay: 0.28s; }

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

/* ---------------------------------------------------------
   15. Editor / block safety nets
   --------------------------------------------------------- */
.alignwide, .alignfull { max-width: none; }
.wp-block-image img { border-radius: var(--radius); }

/* ---------------------------------------------------------
   16. Core block compatibility
   Page content is built from native WordPress blocks, so these
   rules map the theme's look onto core's own wrapper classes.
   --------------------------------------------------------- */

/* Groups are pure layout containers here — no inherited vertical spacing.
   Only the block axis is reset: `margin: 0` would also wipe the inline
   auto-margins that centre max-width containers like .ds-hero__inner. */
.wp-block-group { margin-block: 0; }

/* Images used as framed figures inside our components. */
.wp-block-image { margin: 0; }

/* Lists inside our components lose the browser's bullets and indent;
   the component rules supply their own markers. */
.ds-service .wp-block-list,
.ds-creds.wp-block-list,
.ds-offer__terms.wp-block-list {
  list-style: none;
  padding-left: 0;
}

/* Buttons — core ships a pill-shaped dark default; override it fully.
   Two-class selector so it beats core's single-class rules. */
.wp-block-button .wp-block-button__link {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 14px 28px;
  border-radius: var(--radius);
  border: 1.5px solid var(--blue);
  background-color: var(--blue);
  color: var(--white);
  text-decoration: none;
  transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.wp-block-button .wp-block-button__link:hover {
  background-color: var(--navy);
  border-color: var(--navy);
  color: var(--white);
  transform: translateY(-1px);
}

.wp-block-button.ds-btn--ghost .wp-block-button__link {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--white);
}
.wp-block-button.ds-btn--ghost .wp-block-button__link:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: var(--white);
}

.wp-block-button.ds-btn--outline .wp-block-button__link {
  background-color: transparent;
  border-color: var(--gray-line);
  color: var(--navy);
}
.wp-block-button.ds-btn--outline .wp-block-button__link:hover {
  background-color: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}

/* Button row spacing (core gives .wp-block-buttons a small default gap). */
.wp-block-buttons.ds-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  margin-top: 2rem;
}

/* The founder and offer blocks are grids, not flex containers. */
.wp-block-group.ds-founder,
.wp-block-group.ds-offer,
.wp-block-group.ds-grid,
.wp-block-group.ds-contact,
.wp-block-group.ds-ledger--row { display: grid; }
.wp-block-group.ds-offer__caption { display: flex; }

/* Card bodies inside the focus grid. */
.ds-grid__card > h3 { margin-bottom: 0.55em; }
.ds-grid__card > p:last-child { margin-bottom: 0; }


/* ---------------------------------------------------------
   17. Survive WordPress re-serialisation
   The block editor rewrites markup on save: it can add layout classes
   (is-layout-flow / is-layout-constrained) and, in some versions, an
   inner wrapper div. Either breaks a layout that assumes direct children.
   These rules make the components indifferent to both.
   --------------------------------------------------------- */

/* If an inner container appears, make it transparent to layout so the real
   children still become grid/flex items of the component. */
.ds-grid > .wp-block-group__inner-container,
.ds-contact > .wp-block-group__inner-container,
.ds-founder > .wp-block-group__inner-container,
.ds-offer > .wp-block-group__inner-container,
.ds-ledger--row > .wp-block-group__inner-container,
.ds-timeline > .wp-block-group__inner-container,
.ds-timeline__row > .wp-block-group__inner-container,
.ds-offer__caption > .wp-block-group__inner-container,
.ds-founder__caption > .wp-block-group__inner-container {
  display: contents;
}

/* Core's constrained-layout rules cap child width and auto-centre them.
   Inside our components the component owns the layout, so undo that.
   Core uses :where() (zero specificity), so a plain class wins on order. */
.ds-grid > *,
.ds-contact > *,
.ds-founder > *,
.ds-offer > *,
.ds-ledger--row > *,
.ds-timeline > *,
.ds-timeline__row > * {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* Re-assert the grids in case a layout class tries to set display. */
.ds-grid { display: grid; }
.ds-contact { display: grid; }
.ds-founder { display: grid; }
.ds-offer { display: grid; }
.ds-ledger--row { display: grid; }
.ds-offer__caption { display: flex; }
.ds-timeline__row { display: grid; }


/* ---------------------------------------------------------
   18. Centring that cannot be overridden
   WordPress injects per-block layout CSS into the page *after* the theme
   stylesheet, and classifies groups inconsistently — one section gets
   "constrained" (centred), its neighbour gets "flow" (not centred). These
   two-class selectors win on specificity rather than source order, so the
   constrained containers centre regardless of what core decides.
   --------------------------------------------------------- */
.ds-hero .ds-hero__inner {
  max-width: var(--wrap);
  margin-inline: auto;
}
.ds-section > .wp-block-group,
.ds-section > .wp-block-group__inner-container > .wp-block-group {
  max-width: var(--wrap);
  margin-inline: auto;
}
.ds-pagehead .ds-pagehead__inner,
.ds-entry .ds-entry__inner,
.ds-footer .ds-footer__inner {
  margin-inline: auto;
}