/* ==========================================================================
   DGTrack — component styles
   Everything here is scoped to a dgt- class so it can never collide with a
   plugin or with WordPress core. Layout, colour and type come from theme.json;
   this file only handles the pieces blocks can't express on their own.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Small typographic roles
   -------------------------------------------------------------------------- */

.dgt-eyebrow {
  font-family: var(--dgt-mono);
  font-size: .75rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--dgt-ink-faint);
  margin: 0;
}

.dgt-band .dgt-eyebrow,
.dgt-band .dgt-muted { color: var(--dgt-band-soft); }

.dgt-lede {
  font-size: 1.16rem;
  color: var(--dgt-ink-soft);
}

.dgt-band .dgt-lede { color: var(--dgt-band-soft); }

.dgt-muted { color: var(--dgt-ink-soft); }

.dgt-disclaim {
  font-size: .84rem;
  color: var(--dgt-ink-faint);
}

.dgt-mark {
  font-family: var(--dgt-mono);
  font-size: .8rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dgt-ink-faint);
  text-decoration: none;
}

/* The "confirm with your vet" note. Required wherever health guidance appears —
   see POSITIONING.md. Styled to read as a genuine caveat, not fine print. */
.dgt-note {
  border-left: 3px solid var(--dgt-accent);
  background: var(--dgt-surface-2);
  border-radius: 0 11px 11px 0;
  padding: 13px 16px;
  font-size: .92rem;
  color: var(--dgt-ink-soft);
}

.dgt-note strong { color: var(--dgt-ink); font-weight: 650; }

/* --------------------------------------------------------------------------
   2. Header
   -------------------------------------------------------------------------- */

.dgt-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--dgt-ground) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, box-shadow .25s ease;
}

/* JS adds this once the page has scrolled past the hero. */
.dgt-header.is-stuck {
  border-bottom-color: var(--dgt-line);
  box-shadow: 0 4px 20px -16px rgba(0, 0, 0, .5);
}

@supports not (backdrop-filter: blur(4px)) {
  .dgt-header { background: var(--dgt-ground); }
}

.dgt-header .wp-block-navigation {
  font-size: .93rem;
  font-weight: 550;
}

.dgt-header .wp-block-navigation a { text-decoration: none; color: var(--dgt-ink-soft); }
.dgt-header .wp-block-navigation a:hover { color: var(--dgt-ink); }
.dgt-header .wp-block-navigation .current-menu-item a { color: var(--dgt-ink); }

/* --------------------------------------------------------------------------
   3. Light / dark toggle
   -------------------------------------------------------------------------- */

.dgt-theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: var(--dgt-radius-pill);
  border: 1px solid var(--dgt-line);
  background: var(--dgt-surface);
  color: var(--dgt-ink-soft);
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease, transform .12s ease;
}

.dgt-theme-toggle:hover { border-color: var(--dgt-ink-faint); color: var(--dgt-ink); }
.dgt-theme-toggle:active { transform: translateY(1px); }
.dgt-theme-toggle:focus-visible { outline: 2px solid var(--dgt-accent); outline-offset: 2px; }
.dgt-theme-toggle svg { width: 17px; height: 17px; display: block; }

/* Show the icon for the mode you'd switch *to*. */
.dgt-theme-toggle .dgt-icon-moon { display: block; }
.dgt-theme-toggle .dgt-icon-sun { display: none; }

:root[data-theme="dark"] .dgt-theme-toggle .dgt-icon-moon { display: none; }
:root[data-theme="dark"] .dgt-theme-toggle .dgt-icon-sun { display: block; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .dgt-theme-toggle .dgt-icon-moon { display: none; }
  :root:not([data-theme]) .dgt-theme-toggle .dgt-icon-sun { display: block; }
}

/* --------------------------------------------------------------------------
   4. Google Play button
   -------------------------------------------------------------------------- */

.dgt-play {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 11px 20px 11px 17px;
  border-radius: 12px;
  background: var(--dgt-accent);
  color: var(--dgt-accent-ink);
  text-decoration: none;
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.2;
  border: 1px solid transparent;
  transition: transform .12s ease, box-shadow .2s ease;
  box-shadow: var(--dgt-shadow);
}

.dgt-play:hover { transform: translateY(-1px); box-shadow: var(--dgt-shadow-lift); text-decoration: none; }
.dgt-play:active { transform: translateY(0); }
.dgt-play:focus-visible { outline: 2px solid var(--dgt-accent); outline-offset: 3px; }
.dgt-play svg { width: 21px; height: 21px; flex: none; }
.dgt-play small { display: block; font-size: .72rem; font-weight: 500; opacity: .82; letter-spacing: .02em; }

/* The state before the app is published. Honest rather than a dead link. */
.dgt-play.is-pending {
  background: transparent;
  color: var(--dgt-ink-soft);
  border-color: var(--dgt-line);
  box-shadow: none;
  cursor: default;
}

.dgt-play.is-pending:hover { transform: none; box-shadow: none; }

.dgt-band .dgt-play {
  background: var(--dgt-band-ink);
  color: var(--dgt-band);
}

.dgt-band .dgt-play.is-pending {
  background: transparent;
  color: var(--dgt-band-soft);
  border-color: rgba(156, 196, 185, .34);
}

/* --------------------------------------------------------------------------
   5. Numbered steps
   -------------------------------------------------------------------------- */

.dgt-step {
  display: grid;
  grid-template-columns: 2.1em 1fr;
  gap: 16px;
  align-items: start;
}

.dgt-step-n {
  font-family: var(--dgt-mono);
  font-size: .82rem;
  font-weight: 700;
  color: var(--dgt-accent);
  padding-top: 3px;
  font-variant-numeric: tabular-nums;
  margin: 0;
}

/* WordPress gives every flow-layout group a top margin on its non-first child.
   That's right for stacked prose and wrong inside a grid, where `gap` already
   handles the spacing — without this the columns sit unevenly. The class is
   doubled up so the rule outranks core's :where() layout styles without
   resorting to !important. */
.wp-block-group.dgt-step > *,
.wp-block-group.dgt-grid2 > *,
.wp-block-group.dgt-grid3 > * {
  margin-block-start: 0;
}

/* --------------------------------------------------------------------------
   6. Block components — owned by the DGTrack Core plugin

   The reminder demo, the day ledger, the at-a-glance strip and the pricing
   tiers are all styled in dgtrack-core/assets/blocks.css, not here. They read
   the same --dgt-* variables this theme defines, but they have to keep working
   if the theme is ever changed, so the plugin carries their styles with it.
   Don't restate those rules in this file — one source per component.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   7. Feature grid
   -------------------------------------------------------------------------- */

.dgt-grid2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  gap: 30px 34px;
}

.dgt-grid3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 26px 30px;
}

.dgt-feat {
  border-top: 1px solid var(--dgt-line);
  padding-top: 18px;
}

.dgt-feat h3 { margin: 0; }
.dgt-feat p { color: var(--dgt-ink-soft); font-size: .97rem; margin: 5px 0 0; }

.dgt-band .dgt-feat { border-top-color: rgba(156, 196, 185, .24); }
.dgt-band .dgt-feat p { color: var(--dgt-band-soft); }

/* --------------------------------------------------------------------------
   8. Feature catalogue tables (the /features/ page)
   -------------------------------------------------------------------------- */

.dgt-table-wrap { overflow-x: auto; }

.dgt-cat {
  width: 100%;
  border-collapse: collapse;
  font-size: .94rem;
  min-width: 460px;
}

.dgt-cat th,
.dgt-cat td {
  text-align: left;
  padding: 11px 14px 11px 0;
  border-bottom: 1px solid var(--dgt-line);
  vertical-align: top;
}

.dgt-cat th {
  font-family: var(--dgt-mono);
  font-size: .72rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--dgt-ink-faint);
  font-weight: 500;
}

.dgt-cat td:first-child { font-weight: 600; white-space: nowrap; }
.dgt-cat td:nth-child(2) { color: var(--dgt-ink-soft); }
.dgt-cat td:last-child { padding-right: 0; text-align: right; white-space: nowrap; }

.dgt-pill {
  display: inline-block;
  font-family: var(--dgt-mono);
  font-size: .66rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: var(--dgt-radius-pill);
  background: var(--dgt-surface-2);
  color: var(--dgt-ink-faint);
  border: 1px solid var(--dgt-line);
}

.dgt-pill.is-premium {
  background: var(--dgt-accent);
  color: var(--dgt-accent-ink);
  border-color: transparent;
}

/* --------------------------------------------------------------------------
   9. FAQ — core/details block
   -------------------------------------------------------------------------- */

.wp-block-details {
  border-bottom: 1px solid var(--dgt-line);
  padding: 15px 0;
}

.wp-block-details summary {
  cursor: pointer;
  font-weight: 640;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}

.wp-block-details summary::-webkit-details-marker { display: none; }

.wp-block-details summary::after {
  content: "+";
  font-family: var(--dgt-mono);
  color: var(--dgt-ink-faint);
  font-size: 1.1rem;
  flex: none;
}

.wp-block-details[open] summary::after { content: "–"; }

.wp-block-details summary:focus-visible {
  outline: 2px solid var(--dgt-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.wp-block-details p {
  margin-top: 10px;
  color: var(--dgt-ink-soft);
  font-size: .97rem;
}

.dgt-band .wp-block-details { border-bottom-color: rgba(156, 196, 185, .24); }
.dgt-band .wp-block-details p { color: var(--dgt-band-soft); }

/* --------------------------------------------------------------------------
   10. Legal documents
   -------------------------------------------------------------------------- */

.dgt-legal { font-size: 1.02rem; }
.dgt-legal h2 { margin-top: 2.4em; scroll-margin-top: 90px; }
.dgt-legal h3 { margin-top: 1.8em; scroll-margin-top: 90px; }
.dgt-legal p,
.dgt-legal ul,
.dgt-legal ol { color: var(--dgt-ink-soft); }
.dgt-legal li { margin-bottom: .4em; }
.dgt-legal strong { color: var(--dgt-ink); }

.dgt-legal-meta {
  font-family: var(--dgt-mono);
  font-size: .78rem;
  letter-spacing: .06em;
  color: var(--dgt-ink-faint);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}

.dgt-toc {
  background: var(--dgt-surface);
  border: 1px solid var(--dgt-line);
  border-radius: var(--dgt-radius);
  padding: 20px 22px;
}

.dgt-toc ol {
  margin: 10px 0 0;
  padding-left: 1.3em;
  font-size: .93rem;
  columns: 2;
  column-gap: 28px;
}

.dgt-toc li { margin-bottom: .35em; break-inside: avoid; }
.dgt-toc a { color: var(--dgt-ink-soft); text-decoration: none; }
.dgt-toc a:hover { color: var(--dgt-accent); text-decoration: underline; }

@media (max-width: 600px) {
  .dgt-toc ol { columns: 1; }
}

/* --------------------------------------------------------------------------
   11. Footer
   -------------------------------------------------------------------------- */

.dgt-footer {
  border-top: 1px solid var(--dgt-line);
  font-size: .87rem;
  color: var(--dgt-ink-faint);
}

.dgt-footer .wp-block-navigation { font-size: .87rem; }
.dgt-footer .wp-block-navigation a { text-decoration: none; color: var(--dgt-ink-soft); }
.dgt-footer .wp-block-navigation a:hover { color: var(--dgt-accent); text-decoration: underline; }

/* --------------------------------------------------------------------------
   12. Scroll reveal
   The hidden state is applied only when JavaScript is running, so the page is
   fully readable if the script fails or is blocked.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .dgt-js .dgt-reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .65s cubic-bezier(.22, .61, .36, 1),
                transform .65s cubic-bezier(.22, .61, .36, 1);
  }

  .dgt-js .dgt-reveal.is-in {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   13. Store notice — shown while the shop is being stocked
   -------------------------------------------------------------------------- */

.dgt-store-notice {
  background: var(--dgt-amber-bg);
  border: 1px solid var(--dgt-amber-line);
  border-radius: var(--dgt-radius);
  padding: 16px 18px;
  font-size: .95rem;
  color: var(--dgt-ink-soft);
}

.dgt-store-notice strong { color: var(--dgt-ink); }

/* --------------------------------------------------------------------------
   14. WooCommerce — light touch, enough to stop it looking foreign
   -------------------------------------------------------------------------- */

.woocommerce ul.products li.product a img { border-radius: var(--dgt-radius); }
.woocommerce ul.products li.product .price { color: var(--dgt-ink); font-weight: 600; }
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info { border-top-color: var(--dgt-accent); }

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  background: var(--dgt-accent);
  color: var(--dgt-accent-ink);
  border-radius: 10px;
  font-weight: 600;
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
  background: var(--dgt-accent);
  color: var(--dgt-accent-ink);
  filter: brightness(1.08);
}

/* --------------------------------------------------------------------------
   15. Accessibility helpers
   -------------------------------------------------------------------------- */

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

.dgt-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 18px;
  background: var(--dgt-accent);
  color: var(--dgt-accent-ink);
  border-radius: 0 0 10px 0;
  text-decoration: none;
  font-weight: 600;
}

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