/* =============================================
   FONT GROUP CSS VARIABLES
   Lindsey's Little Pet Care - Font Switcher
   ============================================= */

:root {
  /* ===== FONT GROUPS ===== */

  /* Display - H1, hero text, large headlines */
  --font-display: 'Baloo 2', 'Fredoka', 'Quicksand', 'Comfortaa', 'Poppins', cursive, sans-serif;

  /* Heading - H2, H3, H4, section titles */
  --font-heading: 'Baloo 2', Georgia, 'EB Garamond', 'Playfair Display', 'Merriweather', 'Lora', serif;

  /* Body - Paragraphs, lists, general content */
  --font-body: 'Nunito Sans', Georgia, Garamond, 'Crimson Pro', 'Source Sans 3', 'Inter', sans-serif;

  /* UI - Buttons, navigation, form elements */
  --font-ui: 'Nunito Sans', 'Inter', 'DM Sans', 'Work Sans', 'Manrope', -apple-system, sans-serif;

  /* ===== TEXT COLORS (per font group) ===== */
  --text-color-display: #1a1a1a;
  --text-color-heading: #1a1a1a;
  --text-color-body: #333333;
  --text-color-ui: #333333;
  --text-color-primary: #333333;  /* legacy fallback */
  --text-color-muted: #6b7280;

  /* ===== NAVBAR COLORS ===== */
  --navbar-bg: #5271ff;
  --navbar-text: #ffffff;

  /* ===== FOOTER COLORS ===== */
  --footer-bg: #5271ff;
  --footer-text: #ffffff;
  --footer-heading: #ffffff;
  --footer-link: #ffffff;
}

/* =============================================
   FONT GROUP APPLICATION
   ============================================= */

/* ----- DISPLAY GROUP -----
   H1, hero text, large headlines
   Eye-catching headlines that grab attention
*/
h1,
.hero-title,
.page-title,
.display-text,
.hero-section h1,
.hero-section-contents h1,
.cta-heading {
  font-family: var(--font-display);
}

/* ----- HEADING GROUP -----
   H2, H3, H4, section titles
   Section organization and hierarchy
*/
h2,
h3,
h4,
h5,
h6,
.section-title,
.card-title,
.aboutus-option-title,
.services-contents h3,
.testimonial-informations .username,
.achievement-number,
.font-modal-title {
  font-family: var(--font-heading);
}

/* ----- BODY GROUP -----
   Paragraphs, lists, captions
   Maximum readability for content
*/
body {
  font-family: var(--font-body);
  color: var(--text-color-primary);
}

p,
li,
span:not(.icon-text):not(.font-group-icon),
.paragraph,
.paragraph-no-margin,
.caption,
.description,
.testimonial-box p,
td,
th,
blockquote,
.aboutus-option-contents p,
.whyus-option,
.services-box p,
.cta-paragraph {
  font-family: var(--font-body);
}

/* ----- UI GROUP -----
   Buttons, navigation, inputs
   Interface clarity and usability
*/
button,
.primary-button,
.header-button-wrapper,
.font-reset-btn,
.font-switcher-btn,
input,
select,
textarea,
.header-navigations-item-wrapper,
.navigation-item-text,
.header-button-text,
.primary-button-text,
.dropdown-item,
nav a,
.nav-link,
.mobile-link,
label,
.form-label,
.whyu-tab,
.font-category-tab,
.font-modal-tab,
.font-category-pill,
.menu-dropdown-items a {
  font-family: var(--font-ui);
}

/* =============================================
   TEXT COLOR APPLICATION (per font group)
   ============================================= */

/* Display group color */
h1,
.hero-title,
.page-title,
.display-text,
.hero-section h1,
.hero-section-contents h1,
.cta-heading {
  color: var(--text-color-display);
}

/* Heading group color */
h2, h3, h4, h5, h6,
.section-title,
.card-title,
.aboutus-option-title,
.services-contents h3,
.testimonial-informations .username,
.achievement-number,
.font-modal-title {
  color: var(--text-color-heading);
}

/* Body group color */
body,
p,
li,
span:not(.icon-text):not(.font-group-icon),
td,
th,
blockquote,
.paragraph,
.paragraph-no-margin,
.caption:not(.text-muted),
.description,
.testimonial-box p,
.aboutus-option-contents p,
.whyus-option,
.services-box p,
.cta-paragraph {
  color: var(--text-color-body);
}

/* UI group color */
button,
.primary-button-text,
.header-button-text,
.dropdown-item,
.menu-dropdown-items a,
.whyu-tab,
.font-category-tab,
.font-modal-tab,
.font-category-pill {
  color: var(--text-color-ui);
}

/* =============================================
   NAVBAR — dedicated color controls
   ============================================= */

.header-section {
  background-color: var(--navbar-bg) !important;
}

.header-navigations-item-wrapper,
.header-navigations-item-wrapper .navigation-item-text,
.header-navigations-item-wrapper .icon,
.header-navigations-item-wrapper svg path,
.header-login-link,
.header-login-link .header-login-icon,
.header-login-link .header-login-text,
.header-login-link svg path,
nav a,
.nav-link,
.mobile-menu-wrapper .mobile-link,
.mobile-menu-wrapper .icon {
  color: var(--navbar-text) !important;
  fill: var(--navbar-text) !important;
}

/* Mobile navbar: background follows admin navbar-bg */
.mobile-menu-wrapper {
  background-color: var(--navbar-bg) !important;
}

/* Navbar img icons: use CSS filter to match --navbar-text color */
.header-navigations-item-wrapper .icon img,
.mobile-menu-wrapper .icon img {
  filter: brightness(0) invert(1) !important;
}

/* Remove Webflow active-page tan bubble on current nav item */
.header-navigations-item-wrapper.w--current {
  background-color: transparent !important;
}

/* Remove circle bubble behind user/login icon in navbar */
.header-button-icon-wrapper,
.header-login-icon {
  background-color: transparent !important;
}

/* =============================================
   FOOTER — dedicated color controls
   ============================================= */

.footer {
  background-color: var(--footer-bg) !important;
}

.footer h2,
.footer .footer-mission-title {
  color: var(--footer-heading) !important;
}

.footer p,
.footer .paragraph-no-margin,
.footer .footer-tagline,
.footer .caption,
.footer .footer-copyright-text {
  color: var(--footer-text) !important;
}

.footer h5,
.footer .footer-column-header {
  color: var(--footer-heading) !important;
}

.footer a:not(.primary-button),
.footer .footer-list-wrapper a,
.footer .footer-list-wrapper .caption,
.footer .footer-link-text {
  color: var(--footer-link) !important;
}

.footer .icon,
.footer svg path,
.footer .footer-column .icon svg path {
  color: var(--footer-link) !important;
  fill: var(--footer-link) !important;
}

/* Muted text stays independent */
.text-muted,
.font-group-elements,
.font-option-category,
.color-value {
  color: var(--text-color-muted);
}

/* =============================================
   IMPORTANT: Section title color override
   Keep brand orange for section titles
   ============================================= */
.section-title {
  color: #f88e24 !important;
}