/* dpc-components.css — reusable component styles. Load order: 5th. */

/* ---------- Skip link ---------- */
.dpc-skip-link {
  position: absolute;
  top: -100px;
  left: var(--dpc-space-4);
  z-index: var(--dpc-z-toast);
  background-color: var(--dpc-accent);
  color: var(--dpc-white);
  padding: var(--dpc-space-3) var(--dpc-space-4);
  border-radius: var(--dpc-radius-md);
  transition: top var(--dpc-transition);
}

.dpc-skip-link:focus {
  top: var(--dpc-space-2);
  color: var(--dpc-white);
  text-decoration: none;
}

/* ---------- Header ---------- */
.dpc-header {
  position: sticky;
  top: 0;
  z-index: var(--dpc-z-sticky);
  background-color: var(--dpc-bg-primary);
  border-bottom: 1px solid var(--dpc-border-light);
}

.dpc-header__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dpc-space-4);
  min-height: 3.5rem;
}

.dpc-header__logo:hover {
  text-decoration: none;
}

.dpc-header__logo-text {
  font-weight: var(--dpc-font-bold);
  font-size: var(--dpc-font-lg);
  color: var(--dpc-text-primary);
}

.dpc-header__toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.75rem;
  height: 2.75rem;
  padding: var(--dpc-space-2);
  border-radius: var(--dpc-radius-md);
}

.dpc-header__toggle-bar {
  display: block;
  width: 1.5rem;
  height: 2px;
  background-color: var(--dpc-text-primary);
  transition: transform var(--dpc-transition), opacity var(--dpc-transition);
}

.dpc-header__nav {
  display: none;
}

.dpc-header__nav--open {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: var(--dpc-bg-primary);
  border-bottom: 1px solid var(--dpc-border-light);
  box-shadow: var(--dpc-shadow-md);
}

.dpc-header__nav-list {
  display: flex;
  flex-direction: column;
  padding: var(--dpc-space-2) var(--dpc-space-4) var(--dpc-space-4);
  gap: var(--dpc-space-1);
}

.dpc-header__nav-link {
  display: block;
  padding: var(--dpc-space-3) var(--dpc-space-2);
  color: var(--dpc-text-secondary);
  font-weight: var(--dpc-font-medium);
  border-radius: var(--dpc-radius-sm);
}

.dpc-header__nav-link:hover {
  color: var(--dpc-accent);
  background-color: var(--dpc-bg-secondary);
  text-decoration: none;
}

@media (min-width: 768px) {
  .dpc-header__toggle {
    display: none;
  }

  .dpc-header__nav {
    display: block;
  }

  .dpc-header__nav-list {
    flex-direction: row;
    align-items: center;
    padding: 0;
    gap: var(--dpc-space-1);
  }
}

/* ---------- Buttons ---------- */
.dpc-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--dpc-space-2);
  font-weight: var(--dpc-font-medium);
  padding: var(--dpc-space-3) var(--dpc-space-6);
  border-radius: var(--dpc-radius-md);
  border: 1px solid transparent;
  transition: background-color var(--dpc-transition), color var(--dpc-transition), border-color var(--dpc-transition);
  text-align: center;
}

.dpc-button:hover {
  text-decoration: none;
}

.dpc-button--primary {
  background-color: var(--dpc-accent);
  color: var(--dpc-white);
}

.dpc-button--primary:hover {
  background-color: var(--dpc-accent-hover);
  color: var(--dpc-white);
}

.dpc-button--secondary {
  background-color: var(--dpc-bg-primary);
  color: var(--dpc-accent);
  border-color: var(--dpc-border);
}

.dpc-button--secondary:hover {
  background-color: var(--dpc-bg-secondary);
  color: var(--dpc-accent-hover);
}

.dpc-button--block {
  width: 100%;
}

/* ---------- Hero ---------- */
.dpc-hero__heading {
  font-size: var(--dpc-font-3xl);
}

.dpc-hero__subheading {
  margin-top: var(--dpc-space-4);
  font-size: var(--dpc-font-lg);
  color: var(--dpc-text-secondary);
  max-width: 46rem;
  margin-inline: auto;
}

@media (min-width: 768px) {
  .dpc-hero__heading {
    font-size: var(--dpc-font-4xl);
  }
}

/* ---------- Section headings ---------- */
.dpc-section__heading {
  font-size: var(--dpc-font-2xl);
  margin-bottom: var(--dpc-space-4);
  text-align: center;
}

.dpc-section__text {
  color: var(--dpc-text-secondary);
  max-width: 50rem;
}

/* ---------- Calculator ---------- */
.dpc-calc {
  background-color: var(--dpc-bg-secondary);
  padding-block: var(--dpc-space-8);
}

.dpc-calc__card {
  background-color: var(--dpc-bg-primary);
  border: 1px solid var(--dpc-border-light);
  border-radius: var(--dpc-radius-lg);
  box-shadow: var(--dpc-shadow-sm);
  padding: var(--dpc-space-6);
}

.dpc-calc__form-group {
  margin-bottom: var(--dpc-space-5);
}

.dpc-calc__label {
  display: block;
  margin-bottom: var(--dpc-space-2);
}

.dpc-calc__hint {
  display: block;
  font-size: var(--dpc-font-sm);
  color: var(--dpc-text-muted);
  font-weight: var(--dpc-font-normal);
  margin-top: var(--dpc-space-1);
}

.dpc-calc__input {
  display: block;
  width: 100%;
  font-family: inherit;
  font-size: var(--dpc-font-md);
  color: var(--dpc-text-primary);
  background-color: var(--dpc-bg-primary);
  border: 1px solid var(--dpc-border);
  border-radius: var(--dpc-radius-md);
  padding: var(--dpc-space-3) var(--dpc-space-3);
  box-sizing: border-box;
  min-height: 2.75rem;
  line-height: var(--dpc-leading-normal);
  transition: border-color var(--dpc-transition), box-shadow var(--dpc-transition);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* Ensure consistent text representation inside WebKit date controls */
.dpc-calc__input::-webkit-date-and-time-value {
  margin: 0;
  height: auto;
  min-height: 1.5em;
  text-align: left;
  font-family: inherit;
}

.dpc-calc__input::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.6;
  padding: 0;
  margin: 0;
  transition: opacity var(--dpc-transition);
}

.dpc-calc__input::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

.dpc-calc__input:focus {
  outline: none;
  border-color: var(--dpc-accent);
  box-shadow: var(--dpc-focus-ring);
}

/* Accessibility invalid/error visual styling */
.dpc-calc__input[aria-invalid="true"] {
  border-color: var(--dpc-error);
}

.dpc-calc__input[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px rgba(217, 48, 37, 0.4);
}

@media (min-width: 768px) {
  .dpc-calc__input {
    padding: var(--dpc-space-3) var(--dpc-space-4);
  }
}

.dpc-calc__radios {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dpc-space-2);
}

.dpc-calc__radio {
  position: relative;
  flex: 1 1 auto;
}

.dpc-calc__radio-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.dpc-calc__radio-label {
  display: block;
  text-align: center;
  padding: var(--dpc-space-2) var(--dpc-space-3);
  border: 1px solid var(--dpc-border);
  border-radius: var(--dpc-radius-md);
  font-size: var(--dpc-font-sm);
  font-weight: var(--dpc-font-medium);
  cursor: pointer;
  transition: border-color var(--dpc-transition), background-color var(--dpc-transition);
}

.dpc-calc__radio-input:checked + .dpc-calc__radio-label {
  border-color: var(--dpc-accent);
  background-color: var(--dpc-accent-light);
  color: var(--dpc-accent-hover);
}

.dpc-calc__radio-input:focus-visible + .dpc-calc__radio-label {
  box-shadow: var(--dpc-focus-ring);
}

.dpc-calc__error {
  display: block;
  margin-bottom: var(--dpc-space-4);
  color: var(--dpc-error);
  font-size: var(--dpc-font-sm);
  font-weight: var(--dpc-font-medium);
}

.dpc-calc__refine {
  margin-top: var(--dpc-space-4);
  border-top: 1px solid var(--dpc-border-light);
  padding-top: var(--dpc-space-4);
}

.dpc-calc__refine-summary {
  font-weight: var(--dpc-font-medium);
  color: var(--dpc-accent);
  cursor: pointer;
  list-style: none;
}

.dpc-calc__refine-summary::-webkit-details-marker {
  display: none;
}

.dpc-calc__refine-summary::before {
  content: '+ ';
}

.dpc-calc__refine[open] .dpc-calc__refine-summary::before {
  content: '\2212 ';
}

/* ---------- Autosuggest combobox ---------- */
.dpc-autosuggest {
  position: relative;
}

.dpc-autosuggest__list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  z-index: var(--dpc-z-dropdown);
  background-color: var(--dpc-bg-primary);
  border: 1px solid var(--dpc-border);
  border-radius: var(--dpc-radius-md);
  box-shadow: var(--dpc-shadow-md);
  max-height: 16rem;
  overflow-y: auto;
  padding: var(--dpc-space-1);
}

.dpc-autosuggest__option {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--dpc-space-2) var(--dpc-space-3);
  border-radius: var(--dpc-radius-sm);
  cursor: pointer;
}

.dpc-autosuggest__option--active,
.dpc-autosuggest__option:hover {
  background-color: var(--dpc-accent-light);
}

.dpc-autosuggest__option-name {
  color: var(--dpc-text-primary);
  font-weight: var(--dpc-font-medium);
}

.dpc-autosuggest__option-name mark {
  background-color: transparent;
  color: var(--dpc-accent-hover);
  font-weight: var(--dpc-font-bold);
}

.dpc-autosuggest__option-meta {
  color: var(--dpc-text-muted);
  font-size: var(--dpc-font-sm);
}

.dpc-autosuggest__empty {
  padding: var(--dpc-space-3);
  color: var(--dpc-text-muted);
  font-size: var(--dpc-font-sm);
}

/* ---------- Result block ---------- */
.dpc-result {
  margin-top: var(--dpc-space-2);
}

.dpc-result__headline {
  background-color: var(--dpc-accent-light);
  border: 1px solid var(--dpc-accent);
  border-radius: var(--dpc-radius-lg);
  padding: var(--dpc-space-6);
  text-align: center;
}

.dpc-result__due-label {
  font-size: var(--dpc-font-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--dpc-text-muted);
}

.dpc-result__due-date {
  font-size: var(--dpc-font-3xl);
  font-weight: var(--dpc-font-bold);
  color: var(--dpc-accent-hover);
  margin-top: var(--dpc-space-1);
}

.dpc-result__window {
  margin-top: var(--dpc-space-2);
  color: var(--dpc-text-secondary);
}

.dpc-result__confidence {
  display: block;
  margin-top: var(--dpc-space-2);
  font-size: var(--dpc-font-sm);
  color: var(--dpc-text-muted);
}

.dpc-result__countdown {
  margin-top: var(--dpc-space-4);
  display: inline-flex;
  align-items: baseline;
  gap: var(--dpc-space-2);
  background-color: var(--dpc-bg-primary);
  border: 1px solid var(--dpc-border-light);
  border-radius: var(--dpc-radius-full);
  padding: var(--dpc-space-2) var(--dpc-space-5);
}

.dpc-result__countdown-num {
  font-size: var(--dpc-font-2xl);
  font-weight: var(--dpc-font-bold);
  color: var(--dpc-accent);
  font-variant-numeric: tabular-nums;
}

.dpc-result__dates {
  margin-top: var(--dpc-space-6);
}

.dpc-result__date-card {
  background-color: var(--dpc-bg-primary);
  border: 1px solid var(--dpc-border-light);
  border-radius: var(--dpc-radius-md);
  padding: var(--dpc-space-4);
  text-align: center;
}

.dpc-result__date-card-label {
  font-size: var(--dpc-font-sm);
  color: var(--dpc-text-muted);
}

.dpc-result__date-card-value {
  font-weight: var(--dpc-font-bold);
  color: var(--dpc-text-primary);
  margin-top: var(--dpc-space-1);
}

.dpc-result__breed {
  margin-top: var(--dpc-space-6);
  background-color: var(--dpc-bg-secondary);
  border: 1px solid var(--dpc-border-light);
  border-radius: var(--dpc-radius-md);
  padding: var(--dpc-space-5);
}

.dpc-result__breed-heading {
  font-size: var(--dpc-font-lg);
  margin-bottom: var(--dpc-space-3);
}

.dpc-result__stat {
  display: flex;
  justify-content: space-between;
  gap: var(--dpc-space-4);
  padding: var(--dpc-space-2) 0;
  border-bottom: 1px solid var(--dpc-border-light);
}

.dpc-result__stat:last-of-type {
  border-bottom: 0;
}

.dpc-result__actions {
  margin-top: var(--dpc-space-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--dpc-space-3);
}

/* Risk badges */
.dpc-badge {
  display: inline-block;
  font-size: var(--dpc-font-xs);
  font-weight: var(--dpc-font-bold);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 2px var(--dpc-space-2);
  border-radius: var(--dpc-radius-sm);
}

.dpc-badge--low {
  background-color: var(--dpc-success-light);
  color: var(--dpc-success);
}

.dpc-badge--moderate {
  background-color: var(--dpc-warning-light);
  color: var(--dpc-warning-dark);
}

.dpc-badge--high {
  background-color: var(--dpc-error-light);
  color: var(--dpc-error);
}

.dpc-badge--unknown {
  background-color: var(--dpc-bg-tertiary);
  color: var(--dpc-text-muted);
}

/* ---------- Callout aside ---------- */
.dpc-callout {
  background-color: var(--dpc-warning-light);
  border: 1px solid var(--dpc-warning);
  border-radius: var(--dpc-radius-sm);
  padding: var(--dpc-space-4);
  margin-block: var(--dpc-space-4);
}

.dpc-callout--info {
  background-color: var(--dpc-accent-light);
  border-color: var(--dpc-accent);
}

.dpc-callout p {
  margin: 0;
}

/* ---------- Checklist / timeline ---------- */
.dpc-checklist {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--dpc-space-3);
}

.dpc-checklist__item {
  display: flex;
  gap: var(--dpc-space-3);
  align-items: baseline;
}

.dpc-checklist__item::before {
  content: '\2713';
  color: var(--dpc-success);
  font-weight: var(--dpc-font-bold);
  flex-shrink: 0;
}

.dpc-timeline__card {
  background-color: var(--dpc-bg-primary);
  border: 1px solid var(--dpc-border-light);
  border-radius: var(--dpc-radius-md);
  padding: var(--dpc-space-4);
}

.dpc-timeline__week {
  font-size: var(--dpc-font-sm);
  font-weight: var(--dpc-font-bold);
  color: var(--dpc-accent);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.dpc-timeline__dates {
  font-size: var(--dpc-font-sm);
  color: var(--dpc-text-muted);
  margin-bottom: var(--dpc-space-2);
}

/* ---------- Breadcrumbs ---------- */
.dpc-breadcrumbs {
  padding-block: var(--dpc-space-4) 0;
}

.dpc-breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dpc-space-2);
  font-size: var(--dpc-font-sm);
  color: var(--dpc-text-muted);
}

.dpc-breadcrumbs__item:not(:last-child)::after {
  content: '/';
  margin-left: var(--dpc-space-2);
  color: var(--dpc-text-muted);
}

.dpc-breadcrumbs__current {
  color: var(--dpc-text-secondary);
}

/* ---------- Content (SEO copy) ---------- */
.dpc-content h2 {
  font-size: var(--dpc-font-2xl);
  margin-top: var(--dpc-space-10);
  margin-bottom: var(--dpc-space-4);
}

.dpc-content h3 {
  font-size: var(--dpc-font-xl);
  margin-top: var(--dpc-space-6);
  margin-bottom: var(--dpc-space-3);
}

.dpc-content h4 {
  font-size: var(--dpc-font-lg);
  margin-top: var(--dpc-space-5);
  margin-bottom: var(--dpc-space-2);
}

.dpc-content p,
.dpc-content ul,
.dpc-content ol {
  margin-bottom: var(--dpc-space-4);
}

.dpc-content ul,
.dpc-content ol {
  padding-left: var(--dpc-space-6);
}

.dpc-content li {
  margin-bottom: var(--dpc-space-2);
}

.dpc-content a,
.dpc-references a {
  overflow-wrap: break-word;
  word-break: break-word;
}

.dpc-content table {
  margin-bottom: var(--dpc-space-6);
  font-size: var(--dpc-font-sm);
}

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

/* Breed index list (grouped breed-page links) */
.dpc-content ul.dpc-breed-index {
  list-style: none;
  padding-left: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--dpc-space-2);
}

@media (min-width: 480px) {
  .dpc-content ul.dpc-breed-index {
    grid-template-columns: 1fr 1fr;
    gap: var(--dpc-space-2) var(--dpc-space-5);
  }
}

.dpc-breed-index li {
  margin-bottom: 0;
}

/* FAQ */
.dpc-faq__item {
  border: 1px solid var(--dpc-border-light);
  border-radius: var(--dpc-radius-md);
  margin-bottom: var(--dpc-space-3);
  background-color: var(--dpc-bg-primary);
}

.dpc-faq__summary {
  padding: var(--dpc-space-4);
  font-weight: var(--dpc-font-medium);
  color: var(--dpc-text-primary);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: var(--dpc-space-4);
}

.dpc-faq__summary::-webkit-details-marker {
  display: none;
}

.dpc-faq__summary::after {
  content: '+';
  color: var(--dpc-accent);
  font-weight: var(--dpc-font-bold);
}

.dpc-faq__item[open] .dpc-faq__summary::after {
  content: '\2212';
}

.dpc-faq__answer {
  padding: 0 var(--dpc-space-4) var(--dpc-space-4);
}

.dpc-faq__answer p {
  margin: 0;
}

/* References */
ol.dpc-references {
  padding-left: var(--dpc-space-6);
}

/* ---------- Related tools ---------- */
.dpc-related-tools {
  padding-block: var(--dpc-space-8);
}

.dpc-related-tools__list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--dpc-space-4);
}

.dpc-related-tools__link {
  font-weight: var(--dpc-font-medium);
}

/* ---------- Contact ---------- */
.dpc-contact {
  padding-block: var(--dpc-space-8);
  text-align: center;
}

.dpc-contact__text {
  max-width: 40rem;
  margin: var(--dpc-space-3) auto var(--dpc-space-5);
}

/* ---------- Legal pages ---------- */
.dpc-legal {
  padding-block: var(--dpc-space-8);
}

.dpc-legal h1 {
  font-size: var(--dpc-font-3xl);
  margin-bottom: var(--dpc-space-2);
}

.dpc-legal__updated {
  color: var(--dpc-text-muted);
  font-size: var(--dpc-font-sm);
  margin-bottom: var(--dpc-space-6);
}

.dpc-legal h2 {
  font-size: var(--dpc-font-xl);
  margin-top: var(--dpc-space-8);
  margin-bottom: var(--dpc-space-3);
}

.dpc-legal h3 {
  font-size: var(--dpc-font-lg);
  margin-top: var(--dpc-space-5);
  margin-bottom: var(--dpc-space-2);
}

.dpc-legal p,
.dpc-legal ul {
  margin-bottom: var(--dpc-space-4);
}

.dpc-legal ul {
  padding-left: var(--dpc-space-6);
}

/* ---------- Footer ---------- */
.dpc-footer {
  background-color: var(--dpc-bg-secondary);
  border-top: 1px solid var(--dpc-border-light);
  margin-top: var(--dpc-space-12);
  padding-block: var(--dpc-space-8);
}

.dpc-footer__container {
  display: flex;
  flex-direction: column;
  gap: var(--dpc-space-4);
  align-items: center;
  text-align: center;
}

.dpc-footer__nav-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--dpc-space-4);
}

.dpc-footer__nav-link {
  color: var(--dpc-text-secondary);
  font-size: var(--dpc-font-sm);
}

.dpc-footer__nav-link:hover {
  color: var(--dpc-accent);
}

.dpc-footer__copyright {
  color: var(--dpc-text-muted);
  font-size: var(--dpc-font-sm);
}

/* ---------- Back-to-top ---------- */
.dpc-back-to-top {
  position: fixed;
  right: var(--dpc-space-5);
  bottom: var(--dpc-space-5);
  z-index: var(--dpc-z-sticky);
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--dpc-radius-full);
  background-color: var(--dpc-accent);
  color: var(--dpc-white);
  box-shadow: var(--dpc-shadow-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--dpc-font-xl);
  line-height: 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.5rem);
  transition: opacity var(--dpc-transition), transform var(--dpc-transition), visibility var(--dpc-transition);
}

.dpc-back-to-top--visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dpc-back-to-top:hover {
  background-color: var(--dpc-accent-hover);
}

/* ---------- Print Styles ---------- */
@media print {
  /* Hide unnecessary elements when a result is visible */
  body.dpc-has-result .dpc-header,
  body.dpc-has-result .dpc-footer,
  body.dpc-has-result .dpc-hero,
  body.dpc-has-result .dpc-breadcrumbs,
  body.dpc-has-result .dpc-content,
  body.dpc-has-result .dpc-related-tools,
  body.dpc-has-result .dpc-back-to-top,
  body.dpc-has-result .dpc-skip-link,
  body.dpc-has-result .dpc-calc__card,
  body.dpc-has-result .dpc-section__heading {
    display: none;
  }

  /* Adjust calculator container layout to print results cleanly */
  body.dpc-has-result .dpc-calc {
    padding: 0;
    margin: 0;
  }

  body.dpc-has-result .dpc-section__container {
    padding: 0;
    margin: 0;
    max-width: 100%;
  }

  body.dpc-has-result .dpc-calc__grid {
    display: block;
  }

  body.dpc-has-result .dpc-result {
    display: block;
    width: 100%;
    box-shadow: none;
    border: none;
    padding: 0;
    margin: 0;
  }

  /* Hide print and calendar export actions from the printout */
  body.dpc-has-result .dpc-result__actions {
    display: none;
  }

  /* Optimize background and text contrast for print */
  body.dpc-has-result {
    background-color: var(--dpc-white);
    color: var(--dpc-black);
  }
}