/* =============================================================================
   DIY Solar Setup PH - site design
   Works with Astra (parent theme) + Elementor (free). Elementor sections use the
   "ds-*" classes in Advanced > CSS Classes, so text/images stay editable in Elementor
   while the look lives here.
   ========================================================================== */

:root {
  --ds-navy: #0B1B33;
  --ds-navy-2: #0F2342;
  --ds-navy-3: #17325C;
  --ds-amber: #F59E0B;
  --ds-amber-600: #D97706;
  --ds-amber-700: #B45309;
  --ds-amber-50: #FFFBEB;
  --ds-amber-100: #FEF3C7;
  --ds-sky: #0EA5E9;
  --ds-green: #16A34A;
  --ds-ink: #0F172A;
  --ds-text: #334155;
  --ds-muted: #64748B;
  --ds-line: #E2E8F0;
  --ds-soft: #F8FAFC;
  --ds-white: #FFFFFF;
  --ds-bg: #FFFFFF;          /* page background */
  --ds-surface: #FFFFFF;     /* cards, boxes, inputs */
  --ds-header: rgba(255, 255, 255, .92);
  --ds-border-strong: #CBD5E1;
  --ds-amber-line: var(--ds-amber-line);
  color-scheme: light;
  --ds-radius: 18px;
  --ds-radius-sm: 12px;
  --ds-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 8px 24px rgba(15, 23, 42, .06);
  --ds-shadow-lg: 0 20px 50px rgba(11, 27, 51, .14);
  --ds-max: 1180px;
  --ds-font: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ---------- Base ---------- */
body,
button,
input,
select,
textarea,
.ast-button,
.elementor-widget-text-editor,
.elementor-widget-heading .elementor-heading-title {
  font-family: var(--ds-font);
}
body { color: var(--ds-text); background: var(--ds-bg); -webkit-font-smoothing: antialiased; overflow-x: clip; }
h1, h2, h3, h4, h5, h6,
.entry-title,
.elementor-heading-title { color: var(--ds-ink); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
a { color: var(--ds-amber-700); }
a:hover { color: var(--ds-amber-600); }
::selection { background: var(--ds-amber-100); }
:focus-visible { outline: 3px solid var(--ds-amber); outline-offset: 2px; }

/* ---------- Header (Astra) ---------- */
.site-header .ast-primary-header-bar,
.main-header-bar { background: var(--ds-header); backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid var(--ds-line); }
.ast-sticky-active .main-header-bar { box-shadow: var(--ds-shadow); }
.site-header .custom-logo { max-height: 52px; width: auto; }
.main-header-menu .menu-link,
.ast-builder-menu .menu-item > .menu-link { color: var(--ds-ink); font-weight: 600; font-size: 15px; }
.main-header-menu .menu-item:hover > .menu-link,
.main-header-menu .current-menu-item > .menu-link { color: var(--ds-amber-700); }
/* Menu item with CSS class "ds-menu-cta" becomes a button (Appearance > Menus > CSS Classes) */
.main-header-menu .ds-menu-cta > .menu-link,
.ast-builder-menu .ds-menu-cta > .menu-link {
  background: var(--ds-amber); color: var(--ds-navy) !important; border-radius: 999px;
  padding: 11px 22px !important; line-height: 1.2 !important; height: auto !important; min-height: 0 !important; margin-left: 8px; font-weight: 800;
  box-shadow: 0 6px 16px rgba(245, 158, 11, .35); transition: transform .15s ease, background .15s ease;
}
.main-header-menu .ds-menu-cta > .menu-link:hover { background: #FBBF24; transform: translateY(-1px); }
.main-header-menu .ds-menu-cta { display: flex; align-items: center; }
@media (max-width: 921px) {
  .main-header-menu .ds-menu-cta > .menu-link { margin: 8px 16px; display: inline-flex; }
}

/* ---------- Buttons ---------- */
/* "a.ds-btn" = theme templates; ".elementor .ds-btn .elementor-button" = Elementor Button widget with class ds-btn. */
a.ds-btn,
.elementor .ds-btn .elementor-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 14px 26px; border-radius: 999px; font-family: var(--ds-font);
  font-weight: 800; font-size: 16px; line-height: 1.2; text-decoration: none; border: 2px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
a.ds-btn--primary,
.elementor .ds-btn--primary .elementor-button { background: var(--ds-amber); color: var(--ds-navy); box-shadow: 0 10px 24px rgba(245, 158, 11, .35); }
a.ds-btn--primary:hover,
.elementor .ds-btn--primary .elementor-button:hover { background: #FBBF24; color: var(--ds-navy); transform: translateY(-2px); }
a.ds-btn--ghost,
.elementor .ds-btn--ghost .elementor-button { background: transparent; color: var(--ds-ink); border-color: var(--ds-border-strong); }
a.ds-btn--ghost:hover,
.elementor .ds-btn--ghost .elementor-button:hover { border-color: var(--ds-ink); color: var(--ds-ink); background: rgba(255, 255, 255, .6); }
a.ds-btn--light,
.elementor .ds-btn--light .elementor-button { background: #fff; color: var(--ds-navy); }
a.ds-btn--light:hover,
.elementor .ds-btn--light .elementor-button:hover { background: var(--ds-amber-100); color: var(--ds-navy); }
a.ds-btn--outline-light,
.elementor .ds-btn--outline-light .elementor-button { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); }
a.ds-btn--outline-light:hover,
.elementor .ds-btn--outline-light .elementor-button:hover { border-color: #fff; color: #fff; }
.elementor .ds-btn .elementor-button .elementor-button-icon { font-size: 14px; }

/* ---------- Elementor layout helpers ---------- */
.elementor .e-con.ds-section {
  --padding-top: 96px; --padding-bottom: 96px; --padding-left: 20px; --padding-right: 20px;
  --content-width: var(--ds-max);
}
@media (max-width: 767px) {
  .elementor .e-con.ds-section { --padding-top: 64px; --padding-bottom: 64px; }
}
.elementor .e-con.ds-section--tight { --padding-top: 24px; }
.elementor .e-con.ds-section--soft { background: var(--ds-soft); }
.elementor .e-con.ds-section--dark { background: radial-gradient(1200px 500px at 85% -10%, rgba(245, 158, 11, .18), transparent 60%), var(--ds-navy); }
.ds-section--dark .elementor-heading-title,
.ds-section--dark h2, .ds-section--dark h3 { color: #fff; }
.ds-section--dark,
.ds-section--dark p,
.ds-section--dark .elementor-widget-text-editor { color: #CBD5E1; }

.elementor .e-con.ds-stack { --gap: 16px; --row-gap: 16px; }
.elementor .e-con.ds-center { --align-items: center; text-align: center; }
.elementor .e-con.ds-center .elementor-widget-text-editor,
.ds-center .ds-lead { margin-left: auto; margin-right: auto; }
.elementor .e-con.ds-row { --flex-direction: row; --flex-wrap: wrap; --gap: 14px; --column-gap: 14px; --row-gap: 14px; --align-items: center; }
.ds-center .e-con.ds-row,
.elementor .e-con.ds-row.ds-center,
.elementor .e-con.ds-center > .e-con.ds-row { --justify-content: center; justify-content: center; }

.elementor .e-con.ds-grid-2,
.elementor .e-con.ds-grid-3,
.elementor .e-con.ds-grid-4 {
  --display: grid; display: grid; gap: 24px; --padding-top: 0px; --padding-bottom: 0px; --padding-left: 0px; --padding-right: 0px;
}
.elementor .e-con.ds-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.elementor .e-con.ds-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.elementor .e-con.ds-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1024px) {
  .elementor .e-con.ds-grid-3,
  .elementor .e-con.ds-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .elementor .e-con.ds-grid-2,
  .elementor .e-con.ds-grid-3,
  .elementor .e-con.ds-grid-4 { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Typography helpers ---------- */
span.ds-eyebrow,
.ds-eyebrow .elementor-heading-title {
  display: inline-flex; align-items: center; gap: 8px; font-size: 13px !important; font-weight: 800 !important;
  letter-spacing: .12em !important; text-transform: uppercase; color: var(--ds-amber-700) !important; line-height: 1.4 !important;
}
.ds-eyebrow--pill .elementor-heading-title,
span.ds-eyebrow--pill {
  background: var(--ds-amber-100); padding: 7px 14px; border-radius: 999px;
}
.elementor-widget.ds-eyebrow--pill { align-self: flex-start; width: auto; max-width: 100%; }
.ds-center .elementor-widget.ds-eyebrow--pill { align-self: center; }
.ds-section--dark .ds-eyebrow .elementor-heading-title { color: #FCD34D !important; }
.ds-title-xl .elementor-heading-title { font-size: clamp(36px, 5.2vw, 60px) !important; line-height: 1.05 !important; letter-spacing: -0.035em !important; }
.ds-title-xl .elementor-heading-title span,
.ds-hl { color: var(--ds-amber); background: linear-gradient(transparent 62%, rgba(245, 158, 11, .22) 62%); }
.ds-title-lg .elementor-heading-title { font-size: clamp(28px, 3.6vw, 42px) !important; letter-spacing: -0.03em !important; }
.ds-lead,
.ds-lead p { font-size: 19px; line-height: 1.65; color: var(--ds-text); max-width: 640px; }
.ds-section--dark .ds-lead p { color: #CBD5E1; }
.ds-lead p:last-child,
.ds-muted p:last-child { margin-bottom: 0; }
.ds-muted, .ds-muted p { color: var(--ds-muted); font-size: 14px; }

/* ---------- Hero ---------- */
.elementor .e-con.ds-hero {
  --padding-top: 72px; --padding-bottom: 88px; --padding-left: 20px; --padding-right: 20px; --content-width: var(--ds-max);
  background:
    radial-gradient(900px 500px at 90% 0%, rgba(253, 230, 138, .55), transparent 60%),
    radial-gradient(700px 400px at 0% 100%, rgba(186, 230, 253, .45), transparent 60%),
    linear-gradient(180deg, #FFFDF7 0%, #FFFFFF 100%);
  position: relative; overflow: hidden;
}
.elementor .e-con.ds-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(15, 23, 42, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 23, 42, .04) 1px, transparent 1px);
  background-size: 44px 44px; mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
}
.elementor .e-con.ds-hero-grid {
  --display: grid; display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center;
  --padding-top: 0px; --padding-bottom: 0px; --padding-left: 0px; --padding-right: 0px; position: relative;
}
@media (max-width: 1024px) { .elementor .e-con.ds-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; } }
.elementor .e-con.ds-hero-copy { --gap: 22px; --row-gap: 22px; --padding-top: 0px; --padding-bottom: 0px; --padding-left: 0px; --padding-right: 0px; }
.ds-hero-points ul { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.ds-hero-points li { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ds-ink); font-size: 15px; }
.ds-hero-points li::before {
  content: ""; width: 20px; height: 20px; flex: 0 0 20px; border-radius: 50%;
  background: var(--ds-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'%3E%3Cpath d='M8.1 13.6 4.6 10l1.3-1.3 2.2 2.2 5.9-5.9 1.3 1.3z'/%3E%3C/svg%3E") center/14px no-repeat;
}

.ds-hero-art { position: relative; }
.ds-hero-art .ds-art-card {
  position: relative; border-radius: 28px; background: rgba(255, 255, 255, .7); border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: var(--ds-shadow-lg); padding: 18px; backdrop-filter: blur(6px);
}
.ds-hero-art svg { display: block; width: 100%; height: auto; }
.ds-chip {
  position: absolute; display: flex; align-items: center; gap: 10px; background: var(--ds-surface); border-radius: 14px;
  padding: 10px 14px; box-shadow: var(--ds-shadow-lg); font-size: 13px; color: var(--ds-muted); line-height: 1.25;
  animation: dsFloat 6s ease-in-out infinite;
}
.ds-chip strong { display: block; color: var(--ds-ink); font-size: 15px; font-weight: 800; }
.ds-chip i { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-style: normal; font-size: 17px; }
.ds-chip--a { top: 8%; left: -6%; }
.ds-chip--b { bottom: 18%; left: -8%; animation-delay: -2s; }
.ds-chip--c { bottom: -4%; right: 6%; animation-delay: -4s; }
.ds-chip--a i { background: #DBEAFE; }
.ds-chip--b i { background: #DCFCE7; }
.ds-chip--c i { background: var(--ds-amber-100); }
@keyframes dsFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (max-width: 767px) {
  .ds-chip { position: static; margin-top: 10px; animation: none; box-shadow: var(--ds-shadow); }
  .ds-hero-art .ds-hero-chips { display: grid; grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .ds-chip, .hs-dot { animation: none !important; } }
.hs-dot { animation: dsFlow 2.4s linear infinite; }
.hs-d2 { animation-delay: -1.2s; }
@keyframes dsFlow { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- Trust strip ---------- */
.elementor .e-con.ds-trust { --padding-top: 0px; --padding-bottom: 0px; --padding-left: 20px; --padding-right: 20px; --content-width: var(--ds-max); margin-top: -36px; position: relative; z-index: 2; }
.ds-trust-bar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: 22px; box-shadow: var(--ds-shadow-lg); overflow: hidden; }
.ds-trust-bar > div { padding: 22px 24px; display: flex; gap: 14px; align-items: center; }
.ds-trust-bar > div + div { border-left: 1px solid var(--ds-line); }
.ds-trust-bar b { display: block; color: var(--ds-ink); font-size: 16px; font-weight: 800; }
.ds-trust-bar span { color: var(--ds-muted); font-size: 13.5px; line-height: 1.4; }
.ds-trust-bar .ds-ico { flex: 0 0 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--ds-amber-50); color: var(--ds-amber-700); font-size: 20px; }
@media (max-width: 1024px) {
  .ds-trust-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds-trust-bar > div:nth-child(3) { border-left: 0; }
  .ds-trust-bar > div:nth-child(n+3) { border-top: 1px solid var(--ds-line); }
}
@media (max-width: 560px) {
  .ds-trust-bar { grid-template-columns: minmax(0, 1fr); }
  .ds-trust-bar > div + div { border-left: 0; border-top: 1px solid var(--ds-line); }
}

/* ---------- Section heads ---------- */
.elementor .e-con.ds-head { --gap: 14px; --row-gap: 14px; --padding-top: 0px; --padding-bottom: 0px; --padding-left: 0px; --padding-right: 0px; margin-bottom: 44px; max-width: 760px; }
.elementor .e-con.ds-head.ds-center { margin-left: auto; margin-right: auto; }

/* ---------- Feature cards (Icon Box widget) ---------- */
.elementor .ds-feature .elementor-icon-box-wrapper,
.elementor .ds-feature .elementor-icon-box-content { text-align: left !important; }
.elementor-widget.ds-feature {
  background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-radius); padding: 28px; height: 100%;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.elementor-widget.ds-feature:hover { transform: translateY(-4px); box-shadow: var(--ds-shadow-lg); border-color: var(--ds-amber-line); }
.ds-feature .elementor-icon-box-icon { margin-bottom: 18px !important; }
.ds-feature .elementor-icon {
  width: 56px; height: 56px; border-radius: 16px; display: grid !important; place-items: center;
  background: linear-gradient(135deg, var(--ds-amber-100), #FFEDD5); color: var(--ds-amber-700) !important; font-size: 24px !important;
}
.ds-feature .elementor-icon svg { width: 24px; height: 24px; fill: var(--ds-amber-700) !important; }
.ds-feature .elementor-icon i { color: var(--ds-amber-700) !important; }
.ds-feature .elementor-icon-box-title { font-size: 19px !important; margin: 0 0 8px !important; color: var(--ds-ink) !important; font-weight: 800 !important; }
.ds-feature .elementor-icon-box-description { color: var(--ds-muted) !important; font-size: 15px; line-height: 1.6; }

/* ---------- Steps ---------- */
.elementor .e-con.ds-steps { counter-reset: dsstep; }
.elementor .e-con.ds-step {
  --padding-top: 30px; --padding-bottom: 30px; --padding-left: 28px; --padding-right: 28px; --gap: 10px; --row-gap: 10px;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--ds-radius); position: relative;
}
.elementor .e-con.ds-step::before {
  counter-increment: dsstep; content: counter(dsstep) !important; display: grid !important; place-items: center;
  position: static !important; width: 46px !important; height: 46px !important; border-radius: 14px !important;
  opacity: 1 !important; mix-blend-mode: normal !important; border: 0 !important;
  font-weight: 800; font-size: 20px; color: var(--ds-navy); background: var(--ds-amber) !important; margin-bottom: 10px;
}
.ds-step .elementor-heading-title { color: #fff; font-size: 20px; }
.ds-step p { color: #CBD5E1; margin: 0; }

/* ---------- Setup (pricing-style) cards ---------- */
.elementor .e-con.ds-setup {
  --padding-top: 28px; --padding-bottom: 28px; --padding-left: 26px; --padding-right: 26px; --gap: 12px; --row-gap: 12px;
  background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-radius); position: relative;
  transition: transform .2s ease, box-shadow .2s ease;
}
.elementor .e-con.ds-setup:hover { transform: translateY(-4px); box-shadow: var(--ds-shadow-lg); }
.elementor .e-con.ds-setup--hot { border: 2px solid var(--ds-amber); box-shadow: 0 18px 40px rgba(245, 158, 11, .18); }
.elementor .e-con.ds-setup--hot::before {
  content: "Pinakasikat" !important; display: block !important; position: absolute !important; top: -13px !important; left: 24px !important;
  width: auto !important; height: auto !important; opacity: 1 !important; mix-blend-mode: normal !important; border: 0 !important;
  background: var(--ds-amber) !important; color: var(--ds-navy); font-size: 12px; font-weight: 800; line-height: 1.4;
  padding: 4px 12px; border-radius: 999px !important; letter-spacing: .04em; z-index: 2;
}
.ds-setup .ds-setup-emoji { font-size: 30px; line-height: 1; }
.ds-setup .elementor-heading-title { font-size: 19px; }
.ds-setup .ds-price .elementor-heading-title { font-size: 26px; color: var(--ds-amber-700); letter-spacing: -0.02em; }
.ds-setup ul { margin: 0; padding: 0; list-style: none; font-size: 14.5px; }
.ds-setup li { padding: 6px 0 6px 24px; position: relative; border-top: 1px dashed var(--ds-line); color: var(--ds-text); }
.ds-setup li::before { content: "⚡"; position: absolute; left: 0; top: 6px; font-size: 13px; }
.ds-setup .ds-btn { margin-top: auto; }
.elementor .ds-setup .ds-btn .elementor-button { width: 100%; min-height: 46px; font-size: 15px; }

/* ---------- Split / safety ---------- */
.elementor .e-con.ds-split { --display: grid; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; --padding-top: 0px; --padding-bottom: 0px; --padding-left: 0px; --padding-right: 0px; }
@media (max-width: 1024px) { .elementor .e-con.ds-split { grid-template-columns: minmax(0, 1fr); gap: 32px; } }
.ds-checklist ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ds-checklist li {
  background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: 14px; padding: 16px 18px 16px 54px; position: relative;
  color: var(--ds-text); font-size: 15.5px; line-height: 1.5; box-shadow: var(--ds-shadow);
}
.ds-checklist li strong { color: var(--ds-ink); }
.ds-checklist li::before {
  content: "!"; position: absolute; left: 16px; top: 15px; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  font-weight: 800; color: #fff; background: #DC2626; font-size: 14px;
}
.ds-checklist li.ok::before { content: "✓"; background: var(--ds-green); }
.ds-safety-badge {
  display: flex; gap: 16px; align-items: flex-start; background: var(--ds-amber-50); border: 1px solid var(--ds-amber-line); border-radius: var(--ds-radius); padding: 22px;
}
.ds-safety-badge .ds-ico { font-size: 28px; line-height: 1; }
.ds-safety-badge p { margin: 0; color: var(--ds-amber-700); font-size: 15px; }
.ds-safety-badge b { color: var(--ds-ink); display: block; margin-bottom: 4px; font-size: 16px; }

/* ---------- FAQ (native <details>, editable in the HTML widget) ---------- */
.ds-faq { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; }
.ds-faq details { background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: 16px; padding: 0 22px; transition: box-shadow .2s ease, border-color .2s ease; }
.ds-faq details[open] { box-shadow: var(--ds-shadow); border-color: var(--ds-amber-line); }
.ds-faq summary {
  list-style: none; cursor: pointer; padding: 20px 36px 20px 0; position: relative; font-weight: 700; color: var(--ds-ink); font-size: 17px;
}
.ds-faq summary::-webkit-details-marker { display: none; }
.ds-faq summary::after {
  content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; background: var(--ds-amber-100); color: var(--ds-amber-700); font-weight: 800; transition: transform .2s ease;
}
.ds-faq details[open] summary::after { content: "–"; }
.ds-faq details p { margin: 0 0 20px; color: var(--ds-text); line-height: 1.7; }

/* ---------- CTA band ---------- */
.elementor .e-con.ds-cta {
  --padding-top: 56px; --padding-bottom: 56px; --padding-left: 48px; --padding-right: 48px; --gap: 18px; --row-gap: 18px;
  border-radius: 28px; overflow: hidden; position: relative;
  background: radial-gradient(600px 300px at 100% 0%, rgba(245, 158, 11, .35), transparent 60%), linear-gradient(135deg, var(--ds-navy) 0%, var(--ds-navy-3) 100%);
}
@media (max-width: 767px) { .elementor .e-con.ds-cta { --padding-left: 24px; --padding-right: 24px; } }
.ds-cta .elementor-heading-title { color: #fff; }
.ds-cta p { color: #CBD5E1; }

/* ---------- Post cards (homepage + blog) ---------- */
.ds-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 1024px) { .ds-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ds-posts { grid-template-columns: minmax(0, 1fr); } }
.ds-card {
  display: flex; flex-direction: column; background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-radius);
  overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; position: relative; height: 100%;
  padding: 0 !important; margin: 0 !important; /* Astra pads <article class="post"> */
}
.ds-card:hover { transform: translateY(-4px); box-shadow: var(--ds-shadow-lg); }
.ds-card__media { aspect-ratio: 16 / 9; position: relative; overflow: hidden; background: var(--ds-cat, var(--ds-navy-2)); }
.ds-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.ds-card:hover .ds-card__media img { transform: scale(1.04); }
.ds-card__ph {
  position: absolute; inset: 0; display: grid; place-items: center;
  background:
    radial-gradient(240px 140px at 85% 10%, rgba(255, 255, 255, .25), transparent 70%),
    linear-gradient(135deg, var(--ds-cat, #0F2342) 0%, color-mix(in srgb, var(--ds-cat, #0F2342) 55%, #0B1B33) 100%);
}
.ds-card__ph span { font-size: 44px; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .25)); }
.ds-card__ph::after {
  content: ""; position: absolute; inset: 0; opacity: .18;
  background-image: linear-gradient(rgba(255, 255, 255, .5) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .5) 1px, transparent 1px);
  background-size: 26px 26px; transform: skewY(-8deg) scale(1.3);
}
.ds-card__body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.ds-card__tags { display: flex; gap: 8px; flex-wrap: wrap; }
.ds-badge {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; letter-spacing: .03em;
  padding: 5px 10px; border-radius: 999px; background: var(--ds-amber-100); color: var(--ds-amber-700); text-decoration: none; line-height: 1.2;
}
.ds-badge--tip { background: #DCFCE7; color: #166534; }
a.ds-badge:hover { filter: brightness(.96); color: var(--ds-amber-700); }
.ds-card__title { font-size: 19px; line-height: 1.3; margin: 0; }
.ds-card__title a { color: var(--ds-ink); text-decoration: none; }
.ds-card__title a::after { content: ""; position: absolute; inset: 0; } /* whole card clickable */
.ds-card__title a:hover { color: var(--ds-amber-700); }
.ds-card__excerpt { color: var(--ds-muted); font-size: 15px; line-height: 1.6; margin: 0; }
.ds-card__meta { margin-top: auto; display: flex; gap: 14px; align-items: center; color: var(--ds-muted); font-size: 13px; padding-top: 8px; }
.ds-card__tags a { position: relative; z-index: 2; }

.ds-card--featured { display: grid; grid-template-columns: 1.15fr 1fr; }
.ds-card--featured .ds-card__media { aspect-ratio: auto; min-height: 320px; }
.ds-card--featured .ds-card__body { padding: 36px; justify-content: center; gap: 14px; }
.ds-card--featured .ds-card__title { font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -0.02em; }
.ds-card--featured .ds-card__excerpt { font-size: 16.5px; }
.ds-card--featured .ds-card__ph span { font-size: 72px; }
@media (max-width: 860px) { .ds-card--featured { grid-template-columns: minmax(0, 1fr); } .ds-card--featured .ds-card__media { min-height: 220px; } .ds-card--featured .ds-card__body { padding: 24px; } }

/* ---------- Blog page ---------- */
.ds-blog-hero {
  background: radial-gradient(900px 420px at 90% -20%, rgba(245, 158, 11, .30), transparent 60%), linear-gradient(135deg, var(--ds-navy) 0%, var(--ds-navy-3) 100%);
  color: #CBD5E1; padding: 72px 20px 96px; position: relative; overflow: hidden;
}
.ds-blog-hero::before {
  content: ""; position: absolute; inset: 0; opacity: .08; pointer-events: none;
  background-image: linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px); background-size: 44px 44px;
}
.ds-wrap { max-width: var(--ds-max); margin: 0 auto; position: relative; }
.ds-blog-hero .ds-eyebrow { color: #FCD34D !important; }
.ds-blog-hero h1 { color: #fff; font-size: clamp(34px, 4.6vw, 54px); margin: 12px 0 14px; letter-spacing: -0.035em; }
.ds-blog-hero p { font-size: 18.5px; max-width: 620px; margin: 0; }
.ds-search { margin-top: 28px; display: flex; max-width: 560px; background: var(--ds-surface); border-radius: 999px; padding: 6px; box-shadow: var(--ds-shadow-lg); }
.ds-search input[type="search"] { flex: 1; border: 0 !important; background: transparent; padding: 10px 18px !important; font-size: 16px; color: var(--ds-ink); min-width: 0; box-shadow: none !important; }
.ds-search input[type="search"]:focus { outline: none; }
.ds-search button { border: 0; border-radius: 999px; background: var(--ds-amber); color: var(--ds-navy); font-weight: 800; padding: 12px 22px; cursor: pointer; font-size: 15px; }
.ds-search button:hover { background: #FBBF24; }

.ds-blog-body { padding: 0 20px 96px; }
.ds-chips { display: flex; gap: 10px; flex-wrap: wrap; margin: -26px 0 40px; position: relative; z-index: 2; }
.ds-chips a {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: var(--ds-surface); border: 1px solid var(--ds-line);
  color: var(--ds-ink); font-weight: 700; font-size: 14px; text-decoration: none; box-shadow: var(--ds-shadow); transition: all .15s ease;
}
.ds-chips a:hover { border-color: var(--ds-amber); color: var(--ds-amber-700); }
.ds-chips a.is-active { background: var(--ds-navy); color: #fff; border-color: var(--ds-navy); }
.ds-chips small { color: var(--ds-muted); font-weight: 600; }
.ds-chips a.is-active small { color: #94A3B8; }
.ds-blog-section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 56px 0 22px; }
.ds-blog-section-title h2 { margin: 0; font-size: 26px; }
.ds-blog-section-title span { color: var(--ds-muted); font-size: 14px; }
.ds-blog-body .ds-card--featured { margin-bottom: 8px; }
.ds-pagination { margin-top: 48px; display: flex; justify-content: center; }
.ds-pagination .nav-links { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.ds-pagination .page-numbers {
  min-width: 44px; height: 44px; padding: 0 14px; display: inline-grid; place-items: center; border-radius: 12px; border: 1px solid var(--ds-line);
  color: var(--ds-ink); font-weight: 700; text-decoration: none; background: var(--ds-surface);
}
.ds-pagination .page-numbers.current { background: var(--ds-navy); color: #fff; border-color: var(--ds-navy); }
.ds-pagination a.page-numbers:hover { border-color: var(--ds-amber); color: var(--ds-amber-700); }
.ds-empty { text-align: center; padding: 64px 20px; background: var(--ds-soft); border-radius: var(--ds-radius); }

.ds-inline-cta {
  margin-top: 64px; display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center; padding: 32px; border-radius: 24px;
  background: radial-gradient(500px 200px at 100% 0%, rgba(245, 158, 11, .35), transparent 60%), linear-gradient(135deg, var(--ds-navy) 0%, var(--ds-navy-3) 100%);
  color: #CBD5E1;
}
.ds-inline-cta h3 { color: #fff; margin: 0 0 6px; font-size: 22px; }
.ds-inline-cta p { margin: 0; }
.ds-inline-cta .ds-cta-ico { width: 64px; height: 64px; border-radius: 18px; background: rgba(255, 255, 255, .08); display: grid; place-items: center; font-size: 30px; }
@media (max-width: 767px) { .ds-inline-cta { grid-template-columns: 1fr; text-align: left; padding: 26px; } }

/* ---------- Single post ---------- */
.single-post .entry-content { font-size: 18px; line-height: 1.8; color: var(--ds-text); }
.single-post .entry-content h2 { font-size: 28px; margin: 1.8em 0 .6em; }
.single-post .entry-content h3 { font-size: 21px; margin: 1.5em 0 .5em; }
.single-post .entry-content blockquote {
  border: 0; border-left: 5px solid var(--ds-amber); background: var(--ds-amber-50); border-radius: 0 16px 16px 0;
  padding: 20px 24px; margin: 1.6em 0; font-style: normal; color: var(--ds-ink);
}
.single-post .entry-content blockquote p { margin: 0; }
.single-post .entry-content table { border-collapse: collapse; width: 100%; font-size: 15.5px; display: block; overflow-x: auto; }
.single-post .entry-content th { background: var(--ds-navy); color: #fff; font-weight: 700; }
.single-post .entry-content th,
.single-post .entry-content td { padding: 10px 14px; border: 1px solid var(--ds-line); text-align: left; }
.single-post .entry-content tr:nth-child(even) td { background: var(--ds-soft); }
.single-post .entry-content code { background: var(--ds-soft); border: 1px solid var(--ds-line); border-radius: 6px; padding: 2px 6px; font-size: .9em; }
.ds-post-cta { margin: 48px 0 8px; }

/* ---------- Footer ---------- */
.ds-footer { background: var(--ds-navy); color: #94A3B8; padding: 72px 20px 28px; font-size: 15px; }
.ds-footer a { color: #CBD5E1; text-decoration: none; }
.ds-footer a:hover { color: #FCD34D; }
.ds-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
@media (max-width: 900px) { .ds-footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ds-footer-grid { grid-template-columns: 1fr; } }
.ds-footer img { max-width: 260px; height: auto; }
.ds-footer h4, .ds-footer .ds-footer-h { color: #fff; font-weight: 800; line-height: 1.3; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; margin: 6px 0 16px; }
.ds-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ds-footer-about p { margin: 18px 0 0; max-width: 340px; line-height: 1.7; }
.ds-footer-bottom { border-top: 1px solid rgba(255, 255, 255, .1); margin-top: 48px; padding-top: 24px; display: flex; gap: 16px; flex-wrap: wrap; justify-content: space-between; font-size: 13.5px; }
.ds-footer-disclaimer { max-width: 760px; color: #94A3B8; line-height: 1.6; }

/* ---------- Calculator page polish ---------- */
.dsc-app { --dsc-primary: var(--ds-amber); --dsc-ink: var(--ds-ink); }
.dsc-app .dsc-btn-primary { border-radius: 999px; font-weight: 800; }

/* =============================================================================
   Dark mode. functions.php sets <html data-theme="dark|light"> before the page draws
   (visitor's choice from the toggle, else the phone/computer setting).
   ========================================================================== */
:root[data-theme="dark"] {
  --ds-bg: #0A1424;
  --ds-surface: #111D33;
  --ds-soft: #0F1A2E;
  --ds-header: rgba(10, 20, 36, .9);
  --ds-ink: #F1F5F9;
  --ds-text: #CBD5E1;
  --ds-muted: #94A3B8;
  --ds-line: #22324F;
  --ds-border-strong: #3A4F73;
  --ds-amber-50: rgba(245, 158, 11, .08);
  --ds-amber-100: rgba(245, 158, 11, .18);
  --ds-amber-700: #FBBF24;
  --ds-amber-600: #FCD34D;
  --ds-amber-line: rgba(245, 158, 11, .35);
  --ds-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
  --ds-shadow-lg: 0 20px 50px rgba(0, 0, 0, .45);
  color-scheme: dark;
}
html[data-theme="dark"] body,
html[data-theme="dark"] #page,
html[data-theme="dark"] .site-content,
html[data-theme="dark"] .ast-separate-container,
html[data-theme="dark"] .ast-separate-container .ast-article-single,
html[data-theme="dark"] .ast-separate-container .ast-article-post,
html[data-theme="dark"] .ast-plain-container .site-content,
html[data-theme="dark"] .ast-page-builder-template .site-content > .ast-container { background-color: var(--ds-bg); }
html[data-theme="dark"] .entry-content,
html[data-theme="dark"] .entry-content p,
html[data-theme="dark"] .entry-content li,
html[data-theme="dark"] .entry-meta,
html[data-theme="dark"] .entry-meta * { color: var(--ds-text); }
html[data-theme="dark"] .entry-title,
html[data-theme="dark"] .entry-content h1, html[data-theme="dark"] .entry-content h2,
html[data-theme="dark"] .entry-content h3, html[data-theme="dark"] .entry-content h4,
html[data-theme="dark"] .entry-content strong { color: var(--ds-ink); }
html[data-theme="dark"] .entry-content a:not(.dsc-btn):not(.elementor-button):not(.ds-btn) { color: var(--ds-amber-700); }
html[data-theme="dark"] .entry-content blockquote { background: var(--ds-surface); border-color: var(--ds-amber); color: var(--ds-text); }
html[data-theme="dark"] .entry-content table, html[data-theme="dark"] .entry-content td { border-color: var(--ds-line); }
html[data-theme="dark"] .entry-content tr:nth-child(even) td { background: var(--ds-soft); }
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="dark"] textarea,
html[data-theme="dark"] select { background-color: var(--ds-surface); color: var(--ds-ink); border-color: var(--ds-border-strong); }
html[data-theme="dark"] .elementor .e-con.ds-hero {
  background:
    radial-gradient(900px 500px at 90% 0%, rgba(245, 158, 11, .16), transparent 60%),
    radial-gradient(700px 400px at 0% 100%, rgba(14, 165, 233, .12), transparent 60%),
    linear-gradient(180deg, #0B1628 0%, var(--ds-bg) 100%);
}
html[data-theme="dark"] .elementor .e-con.ds-hero::before { background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px); }
html[data-theme="dark"] .ds-hero-art .ds-art-card { background: rgba(17, 29, 51, .7); border-color: var(--ds-line); }
html[data-theme="dark"] .elementor .ds-btn--ghost .elementor-button:hover { background: rgba(255, 255, 255, .06); }
html[data-theme="dark"] .ds-section--dark,
html[data-theme="dark"] .ds-cta,
html[data-theme="dark"] .ds-inline-cta,
html[data-theme="dark"] .ds-blog-hero { box-shadow: inset 0 0 0 1px var(--ds-line); }
html[data-theme="dark"] .ds-footer { border-top: 1px solid var(--ds-line); }
html[data-theme="dark"] .ds-chips a.is-active { background: var(--ds-amber); color: var(--ds-navy); border-color: var(--ds-amber); }
html[data-theme="dark"] .ds-chips a.is-active small { color: var(--ds-navy-3); }
html[data-theme="dark"] .ds-pagination .page-numbers.current { background: var(--ds-amber); color: var(--ds-navy); border-color: var(--ds-amber); }
html[data-theme="dark"] .ds-badge--tip { background: rgba(22, 163, 74, .18); color: #86EFAC; }
/* Astra mobile menu panel */
html[data-theme="dark"] .ast-mobile-header-content,
html[data-theme="dark"] .ast-builder-menu-mobile .main-navigation,
html[data-theme="dark"] .ast-mobile-popup-drawer .ast-mobile-popup-inner,
html[data-theme="dark"] .ast-header-break-point .main-header-menu { background-color: var(--ds-surface); }
html[data-theme="dark"] .ast-header-break-point .main-header-menu .menu-link { color: var(--ds-ink); border-color: var(--ds-line); }
html[data-theme="dark"] .ast-mobile-menu-trigger-minimal, html[data-theme="dark"] .menu-toggle { color: var(--ds-ink) !important; }
html[data-theme="dark"] .menu-toggle .ast-mobile-svg { fill: var(--ds-ink); }

/* Logo: the white version shows in dark mode. */
.custom-logo.ds-logo-dark { display: none; }
html[data-theme="dark"] .custom-logo:not(.ds-logo-dark) { display: none; }
html[data-theme="dark"] .custom-logo.ds-logo-dark { display: inline-block; }

/* Light/dark toggle (menu + footer). */
.ds-theme-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; min-height: 44px; padding: 0 12px;
  border: 1px solid var(--ds-line); border-radius: 999px; background: var(--ds-surface); color: var(--ds-ink);
  font: 600 14px var(--ds-font); cursor: pointer; transition: border-color .2s ease, transform .2s ease;
}
.ds-theme-toggle:hover { border-color: var(--ds-amber); transform: translateY(-1px); }
.ds-theme-toggle svg { width: 18px; height: 18px; }
.ds-theme-toggle .ds-ico-sun { display: none; }
html[data-theme="dark"] .ds-theme-toggle .ds-ico-sun { display: block; color: var(--ds-amber); }
html[data-theme="dark"] .ds-theme-toggle .ds-ico-moon { display: none; }
.main-header-menu .ds-menu-theme { display: flex; align-items: center; margin-left: 8px; }
.ds-menu-theme .ds-theme-label { display: none; }
.ast-header-break-point .main-header-menu .ds-menu-theme { padding: 12px 20px; margin: 0; }
.ast-header-break-point .ds-menu-theme .ds-theme-label { display: inline; }
.ds-footer .ds-theme-toggle { background: transparent; color: #CBD5E1; border-color: rgba(255, 255, 255, .18); }
html[data-theme="dark"] label, html[data-theme="dark"] legend { color: var(--ds-ink); }
html[data-theme="dark"] .ast-builder-menu .main-header-menu .menu-item:hover > .menu-link,
html[data-theme="dark"] .ast-builder-menu .main-header-menu .current-menu-item > .menu-link { color: var(--ds-amber); }
html[data-theme="dark"] .post-navigation,
html[data-theme="dark"] .post-navigation a,
html[data-theme="dark"] .post-navigation p,
html[data-theme="dark"] .ast-post-nav,
html[data-theme="dark"] .comments-area,
html[data-theme="dark"] .comments-area p,
html[data-theme="dark"] .comments-area span,
html[data-theme="dark"] .comments-area label { color: var(--ds-text); }
html[data-theme="dark"] .comments-area .comment-reply-title,
html[data-theme="dark"] .comments-area .comments-title { color: var(--ds-ink); }
html[data-theme="dark"] .ast-separate-container .comments-area .comment-respond,
html[data-theme="dark"] .ast-separate-container .comment-respond,
html[data-theme="dark"] .ast-separate-container .ast-comment-list li,
html[data-theme="dark"] .ast-separate-container .post-navigation { background-color: var(--ds-surface); }
.ds-theme-toggle--bar { min-width: 40px; min-height: 40px; padding: 0; margin-right: 6px; }
.ds-theme-toggle--bar .ds-theme-label { display: none !important; }

/* Hero: quick-pick setups that open the calculator result directly */
.ds-quick-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 6px; }
.ds-quick-row > span { font-weight: 700; color: var(--ds-ink); font-size: 14px; margin-right: 2px; }
.ds-quick { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--ds-border-strong); background: var(--ds-surface); color: var(--ds-ink); font-weight: 700; font-size: 14px; text-decoration: none; transition: border-color .15s, transform .15s; }
.ds-quick:hover, .ds-quick:focus-visible { border-color: var(--ds-amber); transform: translateY(-1px); color: var(--ds-ink); }

/* Accessibility: solid fallback color under the dark gradient boxes (contrast checkers read this). */
.elementor .e-con.ds-cta { background-color: #0F2342; }
/* Quick picks sit in their own group, so they are not inline links inside a sentence. */
.ds-quick-row .ds-quick-links { display: flex; flex-wrap: wrap; gap: 8px; }
/* Inline links inside small grey text are underlined so they don't rely on color alone. */
.ds-muted a { text-decoration: underline; text-underline-offset: 2px; }

/* Article tables on phones: readable cell width + a shadow on the edge that says "may kasunod pa, i-swipe". */
@media (max-width: 767px) {
  .single-post .entry-content table {
    -webkit-overflow-scrolling: touch;
    background:
      linear-gradient(to right, var(--ds-surface, #fff) 30%, rgba(255, 255, 255, 0)) left center / 40px 100% no-repeat local,
      linear-gradient(to left, var(--ds-surface, #fff) 30%, rgba(255, 255, 255, 0)) right center / 40px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, rgba(15, 35, 66, .22), transparent) left center / 14px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgba(15, 35, 66, .22), transparent) right center / 14px 100% no-repeat scroll;
  }
  .single-post .entry-content th, .single-post .entry-content td { min-width: 118px; }
  .single-post .entry-content th:first-child, .single-post .entry-content td:first-child { min-width: 130px; font-weight: 600; }
}