/* Google Fonts ? Montserrat (headings) + Roboto (body) */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Roboto:wght@400;500;700&display=swap');

/* ?? Design Token Overrides ?????????????????????????? */
:root {
  /* Brand Colors ? coral red palette */
  --color-primary: #ff6b6b;
  --color-primary-dark: #ff4b4b;
  --color-primary-light: #FFE0E0;
  --color-primary-50: #FFF5F5;
  --color-primary-ring: rgba(255, 107, 107, 0.15);
  --color-primary-tint: rgba(255, 107, 107, 0.05);

  /* Secondary ? muted teal (mountain/outdoor feel) */
  --color-secondary: #2D8C7F;

  /* Accent ? warm amber */
  --color-accent: #F5A623;

  /* Error ? keep Nova defaults but add dark variant */
  --color-error-dark: #CC3333;
  --color-error-ring: rgba(204, 51, 51, 0.1);

  /* Typography ? Montserrat for display, Roboto for body */
  --font-family-display: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-family-base: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  /* Slightly more rounded borders to match PDMRO's soft aesthetic */
  --radius-md: 0.625rem;   /* 10px (was 8px) */
  --radius-lg: 0.875rem;   /* 14px (was 12px) */
  --radius-xl: 1.25rem;    /* 20px (was 16px) */
}

/* ?? Focus Ring ?????????????????????????????????????? */
/* Focus rings now use var(--color-primary-ring) from the tokens above.
   No extra overrides needed ? the variable cascade handles it. */

/* ?? Button Refinements ?????????????????????????????? */
/* PDMRO uses pill-shaped buttons */
.nova-btn,
.btn {
  border-radius: var(--radius-full);
}

.btn-cta {
  background-color: var(--color-primary);
  color: white;
  border-radius: 25px;
  padding: 10px 25px;
  font-size: 1.1rem;
  font-weight: bold;
  transition: background-color 0.3s;
}

.btn-cta:hover {
  background-color: var(--color-primary-dark);
  color: white;
}

.nova-btn-primary {
  background: var(--color-primary);
  color: #fff;
}

.nova-btn-primary:hover {
  background: var(--color-primary-dark);
}

/* Outline variant ? coral border */
.nova-btn-outline {
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
}

.nova-btn-outline:hover {
  background: var(--color-primary);
  color: #fff;
}

/* ?? Headings ? use Montserrat ??????????????????????? */
h1, h2, h3, h4, h5, h6,
.nova-collection-title,
.nova-product-card__title {
  font-family: var(--font-family-display);
}

/* ?? Bootstrap 5 Utility Overrides ???????????????????? */
.text-primary { color: var(--color-primary) !important; }
.bg-primary { background-color: var(--color-primary) !important; }
.btn-primary { background-color: var(--color-primary); border-color: var(--color-primary); }
.btn-primary:hover { background-color: var(--color-primary-dark); border-color: var(--color-primary-dark); }
.btn-outline-primary { color: var(--color-primary); border-color: var(--color-primary); }
.btn-outline-primary:hover { background-color: var(--color-primary); border-color: var(--color-primary); }

/* ?? Link Colors ????????????????????????????????????? */
a {
  color: var(--color-primary);
}

a:hover {
  color: var(--color-primary-dark);
}

/* ?? Navigation Accent ??????????????????????????????? */
/* Subtle coral underline on active/hovered nav links */
.nova-nav a.active,
.nova-nav a:hover {
  color: var(--color-primary) !important;
}

/* ?? Card Hover States ??????????????????????????????? */
/* Match PDMRO's card hover lift */
.nova-product-card:hover,
.card:hover {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  transform: translateY(-5px);
  transition: transform 0.3s, box-shadow 0.3s;
}

.card {
  transition: transform 0.3s, box-shadow 0.3s;
}

/* ?? Checkout & Form Elements ???????????????????????? */

/* Checkbox accent */
input[type="checkbox"] {
  accent-color: var(--color-primary);
}

/* ?? Badge/Pill Overrides ???????????????????????????? */
/* Keep semantic colors (success, error, warning) as-is from Nova defaults.
   Only the primary/accent colors change for PDMRO. */

/* ?? Mobile Responsive ??????????????????????????????? */
@media (max-width: 767.98px) {
  /* Responsive typography */
  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.5rem; }
  h3 { font-size: 1.25rem; }
  h4 { font-size: 1rem; }

  /* Safety net for user-uploaded images */
  img {
    max-width: 100%;
    height: auto;
  }

  /* Blog masthead */
  .masthead {
    background-size: cover;
    background-position: center;
    padding: 3rem 0;
  }

  .masthead .post-heading {
    padding: 2rem 0;
  }

  /* White text legibility on mobile */
  .white-text {
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
  }

  /* Article body padding */
  .articleBody {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  /* Table scroll on small screens */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ?? Top Banner Strip ???????????????????????????????? */
/* The template uses inline style="background: var(--color-gray-900)"
   so we override the variable within the banner's scope */
.nova-top-banner {
  --color-gray-900: #3d336a;
}

/* ?? Footer ?????????????????????????????????????????? */
/* Same technique ? override the variable within the footer scope */
.nova-footer {
  --color-gray-900: #3d336a;
  --color-gray-700: #3d336a;
    color: white;
}

.nova-footer,
.nova-footer p,
.nova-footer span,
.nova-footer li,
.nova-footer a {
  color: rgba(255, 255, 255, 0.85);
}

.nova-footer a:hover {
  color: rgb(212, 212, 212);
}

/* ?? PDMRO Animations ???????????????????????????????? */
@keyframes fadeInDown {
  0% { opacity: 0; transform: translateY(-20px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInUp {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ?? Print Styles ???????????????????????????????????? */
@media print {
  :root {
    --color-primary: #333;
    --color-primary-dark: #111;
  }
}

/* Emergency fix: give nova-carousel a positioning context */
.nova-carousel {
  position: relative !important;
  overflow: hidden !important;
  margin-bottom: 10px;
}

/* Fix duplicate post title in masthead ? hide the h2 */
body > header h2 {
  display: none !important;
}

.nova-carousel-track {
  height: auto !important;
  position: relative !important;
}

/* Non-active slides: absolute overlay (hidden via opacity) */
.nova-carousel-slide {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* Active slide: flows normally to drive the carousel height */
.nova-carousel-slide.active {
  position: relative !important;
  inset: auto !important;
  height: auto !important;
}

/* Images: full width, natural aspect ratio */
.nova-carousel-image {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
}

/* Keep controls and indicators in the right place */
.nova-carousel-control {
  top: 50% !important;
  transform: translateY(-50%) !important;
}

.nova-carousel-indicators {
  bottom: 16px !important;
}