/* ==========================================================================
   Colour themes for the public website.
   Chosen in Admin -> Site Settings -> SEO & Appearance -> Colour theme.
   The theme name is set on <html data-theme="...">.
   "classic" = original SnapFolio dark (no overrides).
   ========================================================================== */

/* ---------------------------------------------------------------
   IVORY & MAROON  (default) - soft warm cream, Assamese gamosa red
   --------------------------------------------------------------- */
html[data-theme="ivory"] {
  --background-color: #fbf8f3;
  --default-color: #4a423b;
  --heading-color: #2b1d17;
  --accent-color: #a3302f;
  --surface-color: #ffffff;
  --contrast-color: #ffffff;
  --nav-color: #6e645b;
  --nav-hover-color: #a3302f;
  --nav-mobile-background-color: #ffffff;
  --nav-dropdown-background-color: #ffffff;
  --nav-dropdown-color: #4a423b;
  --nav-dropdown-hover-color: #a3302f;
}
html[data-theme="ivory"] .light-background { --background-color: #f4ede3; --surface-color: #ffffff; }
html[data-theme="ivory"] .dark-background,
html[data-theme="ivory"] .header { --background-color: #ffffff; --default-color: #4a423b; --heading-color: #2b1d17; --surface-color: #fbf8f3; --contrast-color: #ffffff; }

/* ---------------------------------------------------------------
   SOFT BLUE - calm light blue-grey with royal blue
   --------------------------------------------------------------- */
html[data-theme="blue"] {
  --background-color: #f3f6fb;
  --default-color: #3c4a63;
  --heading-color: #15233f;
  --accent-color: #2457c5;
  --surface-color: #ffffff;
  --contrast-color: #ffffff;
  --nav-color: #5d6b85;
  --nav-hover-color: #2457c5;
  --nav-mobile-background-color: #ffffff;
  --nav-dropdown-background-color: #ffffff;
  --nav-dropdown-color: #3c4a63;
  --nav-dropdown-hover-color: #2457c5;
}
html[data-theme="blue"] .light-background { --background-color: #e8eef8; --surface-color: #ffffff; }
html[data-theme="blue"] .dark-background,
html[data-theme="blue"] .header { --background-color: #ffffff; --default-color: #3c4a63; --heading-color: #15233f; --surface-color: #f3f6fb; --contrast-color: #ffffff; }

/* ---------------------------------------------------------------
   SAGE GREEN - fresh soft green
   --------------------------------------------------------------- */
html[data-theme="sage"] {
  --background-color: #f4f8f5;
  --default-color: #3d4a42;
  --heading-color: #1a2b21;
  --accent-color: #2a7a57;
  --surface-color: #ffffff;
  --contrast-color: #ffffff;
  --nav-color: #5c6b62;
  --nav-hover-color: #2a7a57;
  --nav-mobile-background-color: #ffffff;
  --nav-dropdown-background-color: #ffffff;
  --nav-dropdown-color: #3d4a42;
  --nav-dropdown-hover-color: #2a7a57;
}
html[data-theme="sage"] .light-background { --background-color: #e7f0ea; --surface-color: #ffffff; }
html[data-theme="sage"] .dark-background,
html[data-theme="sage"] .header { --background-color: #ffffff; --default-color: #3d4a42; --heading-color: #1a2b21; --surface-color: #f4f8f5; --contrast-color: #ffffff; }

/* ---------------------------------------------------------------
   MIDNIGHT NAVY - soft dark blue with gold (not black)
   --------------------------------------------------------------- */
html[data-theme="navy"] {
  --background-color: #12223a;
  --default-color: #dbe4f0;
  --heading-color: #ffffff;
  --accent-color: #f0b44c;
  --surface-color: #182c49;
  --contrast-color: #1d1404;
  --nav-color: rgba(219, 228, 240, 0.7);
  --nav-hover-color: #f0b44c;
  --nav-mobile-background-color: #182c49;
  --nav-dropdown-background-color: #182c49;
  --nav-dropdown-color: #dbe4f0;
  --nav-dropdown-hover-color: #f0b44c;
}
html[data-theme="navy"] .light-background { --background-color: #0f1d32; --surface-color: #1b3150; }
html[data-theme="navy"] .dark-background,
html[data-theme="navy"] .header { --background-color: #182c49; --default-color: #dbe4f0; --heading-color: #ffffff; --surface-color: #1f3657; --contrast-color: #1d1404; }

/* ---------------------------------------------------------------
   Fixes shared by the light themes
   --------------------------------------------------------------- */
html[data-theme="ivory"] .header .header-container,
html[data-theme="blue"] .header .header-container,
html[data-theme="sage"] .header .header-container {
  box-shadow: 0 10px 30px rgba(40, 30, 20, 0.08);
}

/* soft card shadows read better than borders on light backgrounds */
html[data-theme="ivory"] .family .family-card,
html[data-theme="ivory"] .writings .pub-item,
html[data-theme="ivory"] .writings .pub-tab,
html[data-theme="ivory"] .inaugurator .inaugurator-card,
html[data-theme="blue"] .family .family-card,
html[data-theme="blue"] .writings .pub-item,
html[data-theme="blue"] .writings .pub-tab,
html[data-theme="blue"] .inaugurator .inaugurator-card,
html[data-theme="sage"] .family .family-card,
html[data-theme="sage"] .writings .pub-item,
html[data-theme="sage"] .writings .pub-tab,
html[data-theme="sage"] .inaugurator .inaugurator-card {
  box-shadow: 0 6px 22px rgba(40, 30, 20, 0.06);
}

/* gallery captions sit on a dark photo overlay: keep them white */
html[data-theme="ivory"] .portfolio .portfolio-wrap .portfolio-info .category,
html[data-theme="blue"] .portfolio .portfolio-wrap .portfolio-info .category,
html[data-theme="sage"] .portfolio .portfolio-wrap .portfolio-info .category {
  color: rgba(255, 255, 255, 0.85);
}

/* popup close button must be dark on a white popup */
html[data-theme="ivory"] .testimonial-modal .btn-close,
html[data-theme="blue"] .testimonial-modal .btn-close,
html[data-theme="sage"] .testimonial-modal .btn-close {
  filter: none;
}

html[data-theme="ivory"] .modal-backdrop.show,
html[data-theme="blue"] .modal-backdrop.show,
html[data-theme="sage"] .modal-backdrop.show {
  opacity: 0.55;
}

/* contact form fields on light backgrounds */
html[data-theme="ivory"] .contact .contact-form .form-control,
html[data-theme="blue"] .contact .contact-form .form-control,
html[data-theme="sage"] .contact .contact-form .form-control {
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 82%);
}