/* ==========================================================================
   ShowDogsWest Liquid — component styles.

   Every rule here is lifted from the <style> blocks in the static design
   (dogs/*.html). The static pages repeated the same declarations on all 24
   files and only varied the blob colours; here each component is declared
   once and the per-page colour variation is expressed as CSS variables that
   .theme-* classes on <body> override.

   Load order (see functions.php): reset -> fontawesome -> utilities -> theme.
   This file must come last so components beat the generated utilities, which
   is exactly the precedence the inline <style> blocks had over the Tailwind
   CDN output.
   ========================================================================== */

/* ---------------------------------------------- missing tailwind utilities -- */
/* The pre-compiled utilities.css doesn't include every Tailwind class the
   upgraded nav walker now emits. Patch them here so the menu renders properly. */

.space-x-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(1.5rem * var(--tw-space-x-reverse));
  margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
}

.font-semibold { font-weight: 600; }

.rounded-2xl { border-radius: 1rem; }

.from-emerald-500\/20 { --tw-gradient-from: rgba(16,185,129,.2); --tw-gradient-to: rgba(16,185,129,0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.to-teal-500\/20 { --tw-gradient-to: rgba(20,184,166,.2); }
.from-amber-500\/20 { --tw-gradient-from: rgba(245,158,11,.2); --tw-gradient-to: rgba(245,158,11,0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.to-orange-500\/20 { --tw-gradient-to: rgba(249,115,22,.2); }
.from-blue-500\/20 { --tw-gradient-from: rgba(59,130,246,.2); --tw-gradient-to: rgba(59,130,246,0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.to-purple-500\/20 { --tw-gradient-to: rgba(168,85,247,.2); }
.from-rose-500\/20 { --tw-gradient-from: rgba(244,63,94,.2); --tw-gradient-to: rgba(244,63,94,0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.to-pink-500\/20 { --tw-gradient-to: rgba(236,72,153,.2); }

.border-emerald-500\/30 { border-color: rgba(16,185,129,.3); }
.border-amber-500\/30 { border-color: rgba(245,158,11,.3); }
.border-blue-500\/30 { border-color: rgba(59,130,246,.3); }
.border-rose-500\/30 { border-color: rgba(244,63,94,.3); }

.text-rose-400 { --tw-text-opacity: 1; color: rgb(251 113 133 / var(--tw-text-opacity, 1)); }
.text-amber-400 { --tw-text-opacity: 1; color: rgb(251 191 36 / var(--tw-text-opacity, 1)); }

.bg-blue-500\/10 { background-color: rgba(59,130,246,.1); }
.bg-emerald-500\/10 { background-color: rgba(16,185,129,.1); }
.bg-orange-500\/10 { background-color: rgba(249,115,22,.1); }
.bg-red-500\/10 { background-color: rgba(239,68,68,.1); }
.bg-purple-500\/10 { background-color: rgba(168,85,247,.1); }
.bg-pink-500\/10 { background-color: rgba(236,72,153,.1); }
.bg-teal-500\/10 { background-color: rgba(20,184,166,.1); }

.w-72 { width: 18rem; }
.w-10 { width: 2.5rem; }
.h-10 { height: 2.5rem; }
.rounded-xl { border-radius: 0.75rem; }

.text-text-shadow { text-shadow: 0 0 10px rgba(255,255,255,0.3); }

.order-1 { order: 1; }
.order-2 { order: 2; }
.order-3 { order: 3; }

@media (min-width: 1024px) {
  .lg\:row-span-2 { grid-row: span 2 / span 2; }
}

/* Toggle switch (food calculator) */
.toggle-switch-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 3.5rem !important;
  height: 1.75rem !important;
  user-select: none;
  flex-shrink: 0;
}

.toggle-checkbox {
  position: absolute;
  top: 2px !important;
  left: 2px !important;
  right: auto !important;
  width: 1.5rem !important;
  height: 1.5rem !important;
  border-radius: 9999px !important;
  background-color: #ffffff !important;
  border: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  cursor: pointer;
  z-index: 10;
  margin: 0 !important;
  outline: none !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  transform: translateX(0) !important;
}

.toggle-checkbox:checked {
  transform: translateX(1.75rem) !important;
  right: auto !important;
}

.toggle-label {
  display: block;
  width: 3.5rem !important;
  height: 1.75rem !important;
  background-color: rgba(255, 255, 255, 0.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 9999px !important;
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease !important;
  margin: 0 !important;
}

.toggle-checkbox:checked + .toggle-label {
  background-color: #10b981 !important;
  border-color: #10b981 !important;
}

/* Range Slider (Weight Assessment Tool) */
input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  background: transparent;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  height: 34px;
  width: 34px;
  border-radius: 50%;
  background: #ffffff;
  cursor: pointer;
  margin-top: -13px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
  border: 3px solid #10b981;
  transition: all 0.2s;
}
input[type=range]::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  border-color: #34d399;
}
input[type=range]::-moz-range-thumb {
  height: 34px;
  width: 34px;
  border-radius: 50%;
  background: #ffffff;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
  border: 3px solid #10b981;
  transition: all 0.2s;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 8px;
  cursor: pointer;
  background: linear-gradient(to right, #3b82f6, #06b6d4, #10b981, #f59e0b, #ef4444);
  border-radius: 99px;
  border: 1px solid rgba(255,255,255,0.2);
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 8px;
  cursor: pointer;
  background: linear-gradient(to right, #3b82f6, #06b6d4, #10b981, #f59e0b, #ef4444);
  border-radius: 99px;
  border: 1px solid rgba(255,255,255,0.2);
}

/* Responsive Tab Text: Hide on Mobile, Show on Desktop */
.tab-text {
  display: none;
}
@media (min-width: 640px) {
  .tab-text {
    display: inline;
  }
}

/* Vaccine Scheduler Tabs & Lifestyle Checkbox Styling */
.tab-content {
  display: none;
  animation: fadeIn 0.4s ease-in-out;
}
.tab-content.active {
  display: block;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.lifestyle-checkbox:checked + div {
  border-color: #14b8a6 !important;
  background-color: rgba(20, 184, 166, 0.15) !important;
}
.lifestyle-checkbox:checked + div i {
  color: #14b8a6 !important;
}
.lifestyle-checkbox:checked + div .check-icon {
  opacity: 1 !important;
  transform: scale(1) !important;
}

:root {
  --glass-bg: rgba(255, 255, 255, 0.08);
  --glass-border: rgba(255, 255, 255, 0.15);
  --glass-highlight: rgba(255, 255, 255, 0.25);

  --surface: #0f172a; /* slate-900 */
  --ink: #f8fafc;
  --ink-muted: #cbd5e1;
  --accent: #3b82f6;

  /* Blob palette. Overridden per section below. */
  --blob-1: linear-gradient(135deg, #3b82f6, #8b5cf6);
  --blob-2: linear-gradient(135deg, #ec4899, #f43f5e);
  --blob-3: linear-gradient(135deg, #10b981, #3b82f6);
}

html {
  scroll-behavior: smooth;
}

html,
body {
  font-family: 'Poppins', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background-color: var(--surface);
  color: var(--ink);
  overflow-x: clip;
  position: relative;
}

body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* The design animates blurred blobs, scales cards on hover and slides
   dropdowns. Honour a reduced-motion preference by stilling all of it. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ------------------------------------------------------------------ blobs -- */

.blob-wrap {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  z-index: -1;
  opacity: 0.85;
  will-change: transform;
  animation: float 20s infinite alternate cubic-bezier(0.4, 0, 0.2, 1);
}

.blob-1 {
  width: 500px;
  height: 500px;
  background: var(--blob-1);
  top: -100px;
  left: -100px;
}

.blob-2 {
  width: 600px;
  height: 600px;
  background: var(--blob-2);
  bottom: -200px;
  right: -100px;
  animation-duration: 25s;
}

.blob-3 {
  width: 400px;
  height: 400px;
  background: var(--blob-3);
  top: 40%;
  left: 30%;
  animation-duration: 30s;
  animation-delay: -5s;
}

@keyframes float {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(30px, -50px) scale(1.1); }
  66%  { transform: translate(-20px, 20px) scale(0.9); }
  100% { transform: translate(0, 0) scale(1); }
}

/* A 90px blur over a 600px element is one of the most expensive things a
   phone GPU can be asked to paint. Shrink the blobs and drop the third. */
@media (max-width: 767px) {
  .blob   { filter: blur(60px); animation: none; will-change: auto; }
  .blob-1 { width: 280px; height: 280px; }
  .blob-2 { width: 320px; height: 320px; }
  .blob-3 { display: none; }
}

/* Per-section blob palettes, matching the per-page colours in the static
   design. sdw_section_slug() puts the matching class on <body>. */
.theme-dogs    { --blob-1: linear-gradient(135deg, #3b82f6, #2563eb); --blob-2: linear-gradient(135deg, #0ea5e9, #6366f1); }
.theme-cats    { --blob-1: linear-gradient(135deg, #a855f7, #7c3aed); --blob-2: linear-gradient(135deg, #ec4899, #a855f7); }
.theme-tools   { --blob-1: linear-gradient(135deg, #10b981, #059669); --blob-2: linear-gradient(135deg, #14b8a6, #3b82f6); }
.theme-article { --blob-1: linear-gradient(135deg, #1d4ed8, #7e22ce); --blob-2: linear-gradient(135deg, #0f766e, #0369a1); }
.theme-stories { --blob-1: linear-gradient(135deg, #ec4899, #8b5cf6); --blob-2: linear-gradient(135deg, #f43f5e, #ec4899); }
.theme-trust   { --blob-1: linear-gradient(135deg, #2563eb, #f59e0b); --blob-2: linear-gradient(135deg, #3b82f6, #0ea5e9); }
.theme-legal   { --blob-1: linear-gradient(135deg, #14b8a6, #0d9488); --blob-2: linear-gradient(135deg, #64748b, #14b8a6); }
.theme-medical { --blob-1: linear-gradient(135deg, #e11d48, #be123c); --blob-2: linear-gradient(135deg, #f43f5e, #fb7185); }

/* ------------------------------------------------------------------ glass -- */

.liquid-glass {
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
}

.liquid-glass-dropdown {
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.5);
}

.liquid-glass-card {
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.liquid-glass-card:hover {
  transform: translateY(-4px);
  border-color: var(--glass-highlight);
  box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.35);
}

/* Backdrop-filter on a dozen cards at once is heavy, and Firefox only
   recently shipped it. Fall back to a flat translucent fill. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .liquid-glass,
  .liquid-glass-card { background: rgba(30, 41, 59, 0.85); }
  .liquid-glass-dropdown { background: rgba(15, 23, 42, 0.98); }
}

/* --------------------------------------------------------- nav-link effect -- */

.nav-link {
  position: relative;
  padding-bottom: 0.25rem;
}

/* Gradient underline effect */
.nav-link::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: 0;
  left: 50%;
  background: linear-gradient(90deg, #3b82f6, #a855f7);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateX(-50%);
  border-radius: 2px;
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 80%;
  box-shadow: 0 0 8px rgba(59, 130, 246, 0.6);
}

.nav-link.active {
  color: #fff;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

/* ------------------------------------------------------------- dropdowns -- */

.dropdown-menu {
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px) scale(0.98);
  transform-origin: top;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.group:hover .dropdown-menu,
.group:focus-within .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

/* Dropdown item hover with border-left indicator */
.dropdown-item {
  position: relative;
  transition: all 0.2s ease;
  border-left: 2px solid transparent;
}

.dropdown-item:hover {
  background-color: rgba(255, 255, 255, 0.05);
  border-left-color: #3b82f6;
  padding-left: 1.5rem;
}

/* --------------------------------------------------------------- inputs -- */

.glass-input {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  color: var(--ink);
  border-radius: 0.75rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-input:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
}

.glass-input::placeholder { color: #94a3b8; }

/* Native select/option popups are drawn by the OS, so the dark theme has to
   be restated or options render as black-on-black on Windows. */
select.glass-input option {
  background: #1e293b;
  color: var(--ink);
}

/* ----------------------------------------------------------- line clamps -- */

.line-clamp-1,
.line-clamp-2,
.line-clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-1 { -webkit-line-clamp: 1; }
.line-clamp-2 { -webkit-line-clamp: 2; }
.line-clamp-3 { -webkit-line-clamp: 3; }

/* ------------------------------------------------------------ scrollbars -- */

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #0f172a; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 4px; }

.sidebar-scroll::-webkit-scrollbar { width: 4px; }
.sidebar-scroll::-webkit-scrollbar-track { background: transparent; }
.sidebar-scroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 4px; }

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ---------------------------------------------------------------- tabs -- */

.tab-content { display: none; }
.tab-content.active { display: block; }

/* ------------------------------------------------------- article typography -- */

/* .article-content is what the editor's output gets wrapped in. The static
   design also used .article-prose on tool pages; both share these rules. */

.article-content p,
.article-prose p {
  font-family: 'Merriweather', Georgia, 'Times New Roman', serif;
  font-size: 1.125rem;
  line-height: 1.8;
  color: #cbd5e1;
  margin-bottom: 1.5rem;
}

.article-content h2,
.article-prose h2 {
  font-family: 'Poppins', sans-serif;
  font-size: 1.875rem;
  font-weight: 700;
  color: #ffffff;
  margin-top: 3rem;
  margin-bottom: 1rem;
}

.article-content h3,
.article-prose h3 {
  font-family: 'Poppins', sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: #e2e8f0;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.article-content h4,
.article-prose h4 {
  font-family: 'Poppins', sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: #e2e8f0;
  margin-top: 1.75rem;
  margin-bottom: 0.75rem;
}

.article-content ul,
.article-content ol,
.article-prose ul,
.article-prose ol {
  font-family: 'Merriweather', Georgia, serif;
  font-size: 1.125rem;
  line-height: 1.8;
  color: #cbd5e1;
  margin-bottom: 1.5rem;
  padding-left: 1.5rem;
}

.article-content li,
.article-prose li { margin-bottom: 0.5rem; }

.article-content ul li,
.article-prose ul li { list-style-type: disc; }

.article-content ol li,
.article-prose ol li { list-style-type: decimal; }

.article-content ul li::marker,
.article-prose ul li::marker { color: var(--accent); }

.article-content a,
.article-prose a {
  color: #60a5fa;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.article-content a:hover,
.article-prose a:hover { color: #93c5fd; }

.article-content blockquote,
.article-prose blockquote {
  font-family: 'Merriweather', Georgia, serif;
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.7;
  color: #e2e8f0;
  border-left: 4px solid var(--accent);
  margin: 2rem 0;
  background: linear-gradient(to right, rgba(59, 130, 246, 0.1), transparent);
  padding: 1.5rem;
  border-radius: 0 0.5rem 0.5rem 0;
}

.article-content img,
.article-prose img {
  max-width: 100%;
  height: auto;
  border-radius: 1rem;
  margin: 2rem 0;
}

.article-content figcaption,
.article-prose figcaption {
  font-size: 0.875rem;
  color: #94a3b8;
  text-align: center;
  margin-top: -1rem;
  margin-bottom: 2rem;
}

.drop-cap::first-letter {
  font-family: 'Poppins', sans-serif;
  font-size: 4.5rem;
  font-weight: 700;
  color: var(--accent);
  float: left;
  line-height: 1;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
}

/* Wide tables in post content scroll inside themselves rather than pushing
   the page sideways on phones. sdw_wrap_tables() adds the wrapper. */
.table-scroll {
  overflow-x: auto;
  margin-bottom: 1.5rem;
  -webkit-overflow-scrolling: touch;
}

.article-content table,
.article-prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.article-content th,
.article-content td,
.article-prose th,
.article-prose td {
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 0.75rem 1rem;
  text-align: left;
}

.article-content th,
.article-prose th {
  background: rgba(255, 255, 255, 0.06);
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  color: #ffffff;
}

/* ----------------------------------------------------------------- sapo -- */

.sapo {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 2rem;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
}

.sapo::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: #eab308;
  box-shadow: 0 0 10px rgba(234, 179, 8, 0.6);
}

.sapo-title {
  color: #fde047;
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Poppins', sans-serif;
}

.sapo p {
  font-size: 1.15rem !important;
  color: #f8fafc !important;
  margin-bottom: 0 !important;
}

/* -------------------------------------------------------- takeaway box -- */

.takeaway-box {
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-top: 4px solid var(--accent);
  border-radius: 16px;
  padding: 2rem;
  margin-bottom: 2.5rem;
  position: relative;
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.5);
}

/* Oversized watermark glyph. The static design asked for font-family
   "FontAwesome", which is the Font Awesome 4 name and matches nothing in a
   FA6 build — the glyph silently fell back to a tofu box. Corrected to the
   FA6 family and weight the bundled subset actually declares. */
.takeaway-box::after {
  content: '\f0eb';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 5rem;
  color: rgba(255, 255, 255, 0.03);
  pointer-events: none;
  transform: rotate(15deg);
}

.takeaway-title {
  font-family: 'Poppins', sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.takeaway-icon {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1rem;
  color: #ffffff;
}

/* ------------------------------------------------------ table of contents -- */

/* Numbered entries with a blue counter and a slide-in left rule on hover,
   matching cap-nhat-css-va-sidebar.html. H3 rows nest as "1.1." children. */

.toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: toc;
}

.toc li {
  margin-bottom: 0.75rem;
}

.toc li:not(.toc-h3) {
  counter-increment: toc;
  counter-reset: tocsub;
}

.toc li.toc-h3 {
  counter-increment: tocsub;
  margin-left: 0.75rem;
  padding-left: 1.25rem;
  border-left: 1px solid rgba(255, 255, 255, 0.05);
  margin-bottom: 0.5rem;
}

.toc a {
  display: flex;
  gap: 0.4rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #94a3b8;
  text-decoration: none;
  border-left: 2px solid transparent;
  padding-left: 0.75rem;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.toc a::before {
  content: counter(toc) ".";
  font-weight: 600;
  color: #60a5fa;
  flex-shrink: 0;
}

.toc a:hover,
.toc a:focus-visible,
.toc a.is-active {
  color: #60a5fa;
  border-left-color: #60a5fa;
}

.toc .toc-h3 a {
  font-size: 0.75rem;
  color: #64748b;
  border-left: 0;
  padding-left: 0;
}

.toc .toc-h3 a::before {
  content: counter(toc) "." counter(tocsub) ".";
  color: rgba(96, 165, 250, 0.8);
  font-weight: 500;
}

.toc .toc-h3 a:hover,
.toc .toc-h3 a:focus-visible {
  color: #60a5fa;
}

/* ------------------------------------------------- article page components -- */

/* Category pill in the article header. */
.cat-pill {
  display: inline-block;
  background: rgba(59, 130, 246, 0.2);
  color: #93c5fd;
  border: 1px solid rgba(59, 130, 246, 0.3);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.cat-pill:hover,
.cat-pill:focus-visible {
  background: rgba(59, 130, 246, 0.4);
  color: #ffffff;
}

/* Round social share actions in the byline row. */
.share-btn {
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  cursor: pointer;
  border: 0;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.share-btn:active {
  transform: scale(0.92);
}

.share-btn--fb {
  background: rgba(24, 119, 242, 0.2);
  color: #6ba6f8;
}

.share-btn--fb:hover,
.share-btn--fb:focus-visible {
  background: #1877f2;
  color: #ffffff;
}

.share-btn--x {
  background: rgba(29, 161, 242, 0.2);
  color: #5cb8f5;
}

.share-btn--x:hover,
.share-btn--x:focus-visible {
  background: #1da1f2;
  color: #ffffff;
}

.share-btn--copy {
  background: rgba(255, 255, 255, 0.1);
  color: #cbd5e1;
}

.share-btn--copy:hover,
.share-btn--copy:focus-visible {
  background: #ffffff;
  color: #0f172a;
}

/* Featured-image caption overlaid on the photo. */
.figcap-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  padding: 1.5rem 1rem 0.75rem;
  font-size: 0.75rem;
  color: #cbd5e1;
  text-align: center;
}

/* Uppercase section headings inside the sidebar panel. */
.sidebar-heading {
  font-family: 'Poppins', sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  color: #e2e8f0;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}

/* Read Next thumbnails. */
.read-next-thumb {
  width: 5rem;
  height: 5rem;
  border-radius: 0.5rem;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
  transition: border-color 0.2s ease;
}

.group:hover .read-next-thumb {
  border-color: #60a5fa;
}

.read-next-thumb--empty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.25);
  font-size: 1.5rem;
  background: rgba(255, 255, 255, 0.05);
}

/* "View all articles" button in the author box. */
.author-more-btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 0.5rem;
  transition: background-color 0.2s ease;
}

.author-more-btn:hover,
.author-more-btn:focus-visible {
  background: #2563eb;
}

/* Toast confirming the copy-link action. */
.sdwl-toast {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: rgba(37, 99, 235, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(96, 165, 250, 0.5);
  color: #ffffff;
  font-weight: 500;
  padding: 0.75rem 1.5rem;
  border-radius: 0.75rem;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  transform: translateY(2.5rem);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.sdwl-toast.is-visible {
  transform: translateY(0);
  opacity: 1;
}

/* Headings are scroll targets; keep them clear of the fixed header. */
.article-content h2[id],
.article-content h3[id] {
  scroll-margin-top: 7rem;
}

/* --------------------------------------------------------- web stories -- */

.story-card {
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.story-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.story-progress-container {
  display: flex;
  gap: 4px;
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  z-index: 30;
}

.story-progress-bar {
  flex: 1;
  height: 3px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
  overflow: hidden;
}

.story-progress-fill {
  height: 100%;
  width: 0;
  background: #ffffff;
  border-radius: 2px;
}

/* ------------------------------------------------------------ WP glue -- */

/* WordPress core markup the static design never had to style. */

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  background-color: #1e293b;
  clip: auto !important;
  clip-path: none;
  color: var(--ink);
  display: block;
  font-size: 0.875rem;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
  border-radius: 0.5rem;
}

.alignwide  { max-width: 1100px; margin-left: auto; margin-right: auto; }
.alignfull  { max-width: none; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignleft  { float: left; margin: 0 1.5rem 1rem 0; }
.alignright { float: right; margin: 0 0 1rem 1.5rem; }

.wp-caption { max-width: 100%; }
.wp-caption-text {
  font-size: 0.875rem;
  color: #94a3b8;
  text-align: center;
}

.sticky-post-badge {
  background: rgba(234, 179, 8, 0.9);
  color: #0f172a;
}

/* Admin bar offsets the fixed header. */
body.admin-bar .fixed.top-0 { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar .fixed.top-0 { top: 46px; }
}

/* --- DESKTOP MENU ENHANCEMENTS (c_p_nh_t_menu_premium.html) --- */
.nav-link {
    position: relative;
    padding-bottom: 0.25rem;
}
/* Gradient Underline Effect */
.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 50%;
    background: linear-gradient(90deg, #3b82f6, #a855f7);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateX(-50%);
    border-radius: 2px;
}
.nav-link:hover::after, .nav-link.active::after {
    width: 80%;
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.6);
}
.nav-link.active {
    color: #fff !important;
    text-shadow: 0 0 10px rgba(255,255,255,0.3);
}

/* Dropdown Enhancements */
.group:hover .dropdown-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) scale(1) !important;
    pointer-events: auto !important;
}
.dropdown-menu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px) scale(0.98);
    transform-origin: top;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: none;
}
/* Dropdown Item Hover */
.dropdown-item {
    position: relative;
    transition: all 0.2s ease;
    border-left: 2px solid transparent;
}
.dropdown-item:hover {
    background-color: rgba(255, 255, 255, 0.05);
    border-left-color: #3b82f6;
    padding-left: 1.5rem !important; /* Slight indent on hover */
}

/* Policy Prose Typography */
.policy-prose {
    font-family: 'Merriweather', Georgia, serif;
    color: #cbd5e1;
    line-height: 1.8;
    font-size: 1.05rem;
}
.policy-prose h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.65rem;
    font-weight: 700;
    color: #ffffff;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 0.5rem;
}
.policy-prose p {
    margin-bottom: 1.25rem;
}
.policy-prose ul {
    list-style-type: disc;
    padding-left: 1.5rem;
    margin-bottom: 1.25rem;
}
.policy-prose li {
    margin-bottom: 0.5rem;
}
.policy-prose a {
    color: #60a5fa;
    text-decoration: underline;
}
.policy-prose a:hover {
    color: #93c5fd;
}

.about-prose p {
    font-family: 'Merriweather', Georgia, serif;
    font-size: 1.05rem;
    line-height: 1.8;
    color: #cbd5e1;
    margin-bottom: 1.25rem;
}

/* Author Prose Typography */
.author-prose p {
    font-family: 'Merriweather', Georgia, serif;
    font-size: 1.05rem;
    line-height: 1.8;
    color: #cbd5e1;
    margin-bottom: 1.5rem;
}
.author-prose h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: white;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

/* Glass Form Inputs */
.glass-input {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--glass-border);
    color: white;
    transition: all 0.3s ease;
}
.glass-input:focus {
    outline: none;
    border-color: #3b82f6;
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
}
.glass-input::placeholder {
    color: #94a3b8;
}
select.glass-input option {
    background-color: #1e293b;
    color: white;
}

/* ==========================================================================
   Tool-page utility patch (added 2026-07-23).

   The precompiled utilities.css was generated before the tool templates
   (age / food / weight / vaccination) and their JS were finalised, so a
   handful of classes used in the static markup and in the JS-injected
   timeline / result markup never made it into the build. They are declared
   here (theme.css loads last, after utilities.css) so the tool pages render
   as designed. Arbitrary-value classes use [class~="..."] attribute
   selectors to avoid brittle backslash escaping; specificity still matches a
   single class, so normal utility precedence is preserved.
   ========================================================================== */

/* Species-tab label: hidden on mobile (icon + "Dog"/"Cat" only), revealed
   from the sm breakpoint up so desktop shows the full label. */
@media (min-width: 640px) {
    .sm\:inline { display: inline; }
    .sm\:pt-4 { padding-top: 1rem; }
    .sm\:text-xs { font-size: 0.75rem; line-height: 1rem; }
}
@media (min-width: 768px) {
    .md\:py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
}

/* Vaccination timeline (markup injected by vaccine.js) */
[class~="-left-[17px]"] { left: -17px; }
.bottom-3 { bottom: 0.75rem; }
.w-0\.5 { width: 0.125rem; }
.w-3\.5 { width: 0.875rem; }
.h-3\.5 { height: 0.875rem; }
.ring-4 { box-shadow: 0 0 0 4px var(--tw-ring-color, #0f172a); }
[class~="ring-[#0f172a]"] { --tw-ring-color: #0f172a; }
.bg-gray-500 { background-color: #6b7280; }
.bg-emerald-500\/5 { background-color: rgba(16, 185, 129, 0.05); }
.border-blue-500\/50 { border-color: rgba(59, 130, 246, 0.5); }
.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}
.hover\:bg-blue-700:hover { background-color: #1d4ed8; }
.last\:mb-0:last-child { margin-bottom: 0; }

/* Arbitrary box-shadows used by the calculators / timeline */
[class~="shadow-[0_0_20px_rgba(59,130,246,0.15)]"] { box-shadow: 0 0 20px rgba(59, 130, 246, 0.15); }
[class~="shadow-[0_0_30px_rgba(16,185,129,0.15)]"] { box-shadow: 0 0 30px rgba(16, 185, 129, 0.15); }
[class~="shadow-[0_0_30px_rgba(255,255,255,0.05)]"] { box-shadow: 0 0 30px rgba(255, 255, 255, 0.05); }

/* ==========================================================================
   Tool-page utility patch #2 (2026-07-23) — "More Health Tools" rounded
   sidebar design, healthy-weight promo glow, and the reference vaccination
   timeline. These arbitrary/utility classes were absent from the precompiled
   utilities.css, causing the MHT widget to render square-cornered & flat
   (image-2.jpg) instead of the desired rounded, filled cards (image.jpg).
   Attribute selectors keep specificity at a single class; theme.css loads
   after utilities.css so precedence is preserved. Scoped to this theme only.
   ========================================================================== */

/* --- More Health Tools: outer container + link cards --- */
[class~="rounded-[28px]"] { border-radius: 28px; }
[class~="bg-[#121929]"] { background-color: #121929; }
[class~="bg-[#1a2336]"] { background-color: #1a2336; }
[class~="hover:bg-[#222d45]"]:hover { background-color: #222d45; }
.border-slate-700\/50 { border-color: rgba(51, 65, 85, 0.5); }
.border-slate-700\/60 { border-color: rgba(51, 65, 85, 0.6); }
.md\:p-7 { }
@media (min-width: 768px) { .md\:p-7 { padding: 1.75rem; } }
.space-y-3\.5 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.875rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.875rem * var(--tw-space-y-reverse));
}
.hover\:border-white\/20:hover { border-color: rgba(255, 255, 255, 0.2); }
.hover\:-translate-y-0\.5:hover { transform: translateY(-0.125rem); }
.hover\:scale-105:hover { transform: scale(1.05); }
.hover\:shadow-xl:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.35), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
}

/* --- More Health Tools: per-tool icon-box surfaces --- */
[class~="bg-[#382b17]"] { background-color: #382b17; }
[class~="bg-[#2d2244]"] { background-color: #2d2244; }
[class~="bg-[#1a2e4c]"] { background-color: #1a2e4c; }
[class~="bg-[#153434]"] { background-color: #153434; }

/* --- Healthy-weight promo widget glow --- */
[class~="shadow-[0_0_20px_rgba(16,185,129,0.1)]"] { box-shadow: 0 0 20px rgba(16, 185, 129, 0.1); }
[class~="hover:shadow-[0_0_30px_rgba(16,185,129,0.3)]"]:hover { box-shadow: 0 0 30px rgba(16, 185, 129, 0.3); }

/* --- Reference vaccination timeline (markup injected by vaccine.js) --- */
[class~="shadow-[0_0_10px_rgba(16,185,129,0.5)]"] { box-shadow: 0 0 10px rgba(16, 185, 129, 0.5); }
[class~="shadow-[0_0_15px_rgba(59,130,246,0.8)]"] { box-shadow: 0 0 15px rgba(59, 130, 246, 0.8); }
[class~="shadow-[0_0_15px_rgba(20,184,166,0.2)]"] { box-shadow: 0 0 15px rgba(20, 184, 166, 0.2); }
[class~="shadow-[0_0_15px_rgba(168,85,247,0.2)]"] { box-shadow: 0 0 15px rgba(168, 85, 247, 0.2); }

/* Reference timeline connector line (vaccine.js relies on this pseudo-element
   instead of a JS-injected div). Mirrors design-source vaccination-schedule. */
.timeline-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 20px;
    height: 100%;
    width: 2px;
    background: rgba(255, 255, 255, 0.1);
}

/* ------------------------------------------------- mobile menu fixes -- */
/* The mobile walker renders <li> inside a <div> wrapper, so the ul/menu
   reset never reaches them and UA bullets leak in. Kill them explicitly. */
#mobile-menu li {
  list-style: none;
}
#mobile-menu li::marker {
  content: none;
}

/* iOS renders the glass panel too transparent (backdrop-filter + opacity
   transition), letting page content bleed through the menu. Use a solid
   surface instead of relying on compiled utility opacity. */
#mobile-menu {
  background: #0f172a;
}

/* ------------------------------------- live search overlay + takeaways -- */

/* Utilities the compiled Tailwind subset does not include. */
.z-40 {
  z-index: 40;
}

.line-clamp-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

/* Bullet list inside the Key Takeaways card. */
.takeaway-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.takeaway-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  color: #e2e8f0;
  line-height: 1.6;
}

.takeaway-list li > i {
  color: #3b82f6;
  margin-top: 0.3rem;
  flex-shrink: 0;
}
