/*
Theme Name: SWFHR Theme
Theme URI: https://swfhr.org/
Version: 1.12
Description: A child theme for South West Florida Horse Rescue
Author: Design TLC
Author URI: https://designtlc.com
Template: bb-theme
*/

/* Add your custom styles here... */
/* Put @import here for loading fonts */

/* ------------------ ROOT VARIABLES ------------------ */
:root {
  /* ------------------ Colors ------------------ */
  --white: #FFFFFF;
  --link-color: #368D97;
  --link-hover: #2E3192;
  --bg-color-dark: #000000;
  --bg-color-light: #e5e5e5;

  /* ------------------ Typefaces ------------------ */
  --font-body: 'Open Sans', sans-serif;
  --font-serif: 'Domine', serif;   /* H1 */
  --font-sans: 'Poppins', sans-serif; /* H2–H4 */

  /* ------------------ Type Sizes ------------------ */
  --size-default: 1rem;
  --h1-size: 3.4375rem; /* 55px */
  --h2-size: 2rem;      /* 32px */
  --h3-size: 1.875rem;  /* 30px */
  --h4-size: 1.25rem;   /* 20px */
  --body-size: 1.125rem;/* 18px */
}

/* ---- Fix fonts that render as bold in Firefox ------------------ */
@-moz-document url-prefix() {
  body {
    font-weight: lighter !important;
  }
}

/* ------------------ FONT STYLES and HEADINGS ------------------ */
html {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  font-weight: 400;
  font-size: 16px !important;
  hanging-punctuation: first last;
}

/* ------------------ RESPONSIVE STYLES ------------------ */

/* Desktop Special Range (min 1025px – max 1160px) */
@media only screen and (min-width: 1025px) and (max-width: 1160px) {
  /* Add desktop-specific overrides here if needed */
}

/* Tablet (≤ 1024px) */
@media only screen and (max-width: 1024px) {
  :root {
    --h1-size: 2.25rem;  /* 36px */
    --h2-size: 1.75rem;  /* 28px */
    --h3-size: 1.375rem; /* 22px */
    --h4-size: 1.125rem; /* 18px */
    --body-size: 1rem;   /* 16px */
  }

  .fl-menu .menu-heading > a {
    font-size: 1.5rem;
  }
}

/* Large Mobile (≤ 768px) */
@media only screen and (max-width: 768px) {
  :root {
    --h1-size: 2rem;      /* 32px */
    --h2-size: 1.5rem;    /* 24px */
    --h3-size: 1.25rem;   /* 20px */
    --h4-size: 1.125rem;  /* 18px */
    --body-size: 0.9375rem; /* 15px */
  }

  .fl-menu .menu-heading > a {
    font-size: 1.25rem;
  }
}

/* Small Mobile (≤ 468px) */
@media only screen and (max-width: 468px) {
  :root {
    --h1-size: 2rem;
    --h2-size: 1.5rem;
    --h3-size: 1.25rem;
    --h4-size: 1.125rem;
    --body-size: 0.9375rem;
  }

  .fl-menu .menu-heading > a {
    font-size: 1.125rem;
  }
}

/* ------------------ BUTTONS (Simplified, Unified) ------------------ */

/* Base layout shared by ALL BB buttons */
.fl-builder-content a.fl-button,
.fl-builder-content .fl-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;

  border-radius: 10px;
  text-decoration: none;

  transition: background-color 0.3s ease, transform 0.2s ease;
}

/* Unified padding for all button skins */
.fl-builder-content a.fl-button,
.fl-builder-content .fl-button {
  padding: 16px 32px !important;
  line-height: 1.2 !important;
}

/* Reset BB’s inner wrap padding (prevents extra height) */
.fl-builder-content .fl-button .fl-button-wrap {
  padding: 0 !important;
}

/* Hover motion only */
.fl-builder-content .fl-button:hover,
.fl-builder-content .fl-button:focus {
  transform: translateY(-2px);
  text-decoration: none !important;
  box-shadow: none !important;
}

/* Register button */
.fl-builder-content a.register-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 16px 32px !important;
  line-height: 1.2 !important;

  background-color: #368D97 !important;
  color: #ffffff !important;

  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;

  border-radius: 10px;
  border: none;
  text-decoration: none !important;
}

/* Hover state */
.fl-builder-content a.register-button:hover,
.fl-builder-content a.register-button:focus {
  background-color: #C53D3D !important;
  color: #ffffff !important;
  transform: translateY(-2px);
}

/* Fix hover text ONLY for this specific button */
.fl-builder-content a.fl-button.white-text:hover,
.fl-builder-content a.fl-button.white-text:focus {
  color: #ffffff !important;
}

/* Arrow link */
.arrow-link a {
  color: var(--link-color);
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;

  display: inline-flex;
  align-items: center;
  gap: 6px; /* space between text and arrow */
}

/* Add Font Awesome arrow */
.arrow-link a::after {
  font-family: "Font Awesome 6 Free"; /* or 5 Free depending on site */
  font-weight: 900;                  /* required for solid icons */
  content: "\f061";                  /* arrow-right */
  font-size: 0.9em;
  line-height: 1;
}

/* Hover styling */
.arrow-link a:hover {
  color: #C53D3D;
  text-decoration: none;
}

/* Form Submit Buttons */
.fl-builder-content button[type="submit"],
.fl-builder-content input[type="submit"],
.fl-builder-content .gform_button,
.fl-builder-content .wpforms-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;

  padding: 16px 32px !important;
  line-height: 1.2 !important;

  border-radius: 10px;
  border: none;

  transition: background-color 0.3s ease, transform 0.2s ease;
}

.fl-builder-content button[type="submit"]:hover,
.fl-builder-content input[type="submit"]:hover {
  transform: translateY(-2px);
}



/* ------------------ BASE TEXT ------------------ */
html,
body {
  font-family: var(--font-body);
  font-size: var(--body-size);
  line-height: 1.6;
  color: var(--body-color);
  font-weight: 400;
  margin: 0;
  padding: 0;
}

/* Links inside rich text */
.fl-builder-content .fl-rich-text a {
  text-decoration: none;
  color: var(--link-color);
  transition: color 0.3s ease;
}

.fl-builder-content .fl-rich-text a:hover,
.fl-builder-content .fl-rich-text a:focus {
  color: var(--link-hover) !important;
  text-decoration: none !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  background-image: none !important;
}

/* ------------------ HEADINGS ------------------ */
h1,
.fl-builder-content h1,
h1.fl-heading {
  font-family: var(--font-serif);
  font-size: var(--h1-size);
  font-weight: 700;
  line-height: 1.2;
  color: #000000;
  margin-bottom: 0.6em;
}

h2,
.fl-builder-content h2,
h2.fl-heading {
  font-family: var(--font-sans);
  font-size: var(--h2-size);
  font-weight: 600;
  line-height: 1.3;
  color: #2E3192;
  letter-spacing: 0.02em;
  margin-bottom: 0.5em;
}

h3,
.fl-builder-content h3,
h3.fl-heading {
  font-family: var(--font-sans);
  font-size: var(--h3-size);
  font-weight: 500;
  line-height: 1.4;
  color: #2E3192;
  margin-bottom: 0.5em;
}

h4,
.fl-builder-content h4,
h4.fl-heading {
  font-family: var(--font-sans);
  font-size: var(--h4-size);
  font-weight: 500;
  line-height: 1.5;
  color: var(--body-color);
  margin-bottom: 0.4em;
}

/* ------------------ HEADER ------------------ */
/* ------------------ FOOTER ------------------ */
.footer h2 {}
.fl-module.fl-module-heading.footer h2 {}

/* =============================== BASE MENU STYLES (DESKTOP) ================================ */

/* ---------- HEADER MENU ---------- */
.main-menu .menu > li > a {
  color: #2E3192;
  text-decoration: none;
}

.main-menu .menu > li > a:hover,
.main-menu .menu > li > a:focus {
  text-decoration: underline;
}

/* ---------- SIDEBAR MENU ---------- */
/* Sidebar links */
.sidebar-nav .fl-menu-accordion > li:not(.menu-heading) > a {
  padding-left: 20px;
  font-weight: 400;
  text-decoration: none;
}

/* Hover = underline only */
.sidebar-nav .fl-menu-accordion > li:not(.menu-heading) > a:hover,
.sidebar-nav .fl-menu-accordion > li:not(.menu-heading) > a:focus {
  background: transparent;
  text-decoration: underline;
}

/* Active page = bold */
.sidebar-nav .fl-menu-accordion li.current-menu-item > a,
.sidebar-nav .fl-menu-accordion li.current_page_item > a,
.sidebar-nav .fl-menu-accordion li.current-menu-ancestor > a {
  font-weight: 700;
  text-decoration: none;
}

/* ---------- SIDEBAR HEADING PILL ---------- */
.fl-menu-accordion > li.menu-heading > a,
.fl-menu-accordion > li.menu-heading > .fl-has-submenu-container > a {
  display: inline-block !important;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #2E3192 !important;
  background-color: #ffffff !important;
  border-radius: 0 10px 10px 0;
  padding: 12px 30px 12px 36px !important;
  margin-bottom: 1.25rem;
  line-height: 1.6;
  text-decoration: none !important;
}

/* SIDEBAR LINKS */
.fl-menu-accordion > li:not(.menu-heading) > a {
  padding-left: 36px;
  font-weight: 400;
  text-decoration: none;
}

.fl-menu-accordion > li:not(.menu-heading) > a:hover {
  text-decoration: underline;
}

.fl-menu-accordion li.current-menu-item > a {
  font-weight: 700;
}

/* Sidebar heading pill: stable on hover + never bold when active */
.fl-menu-accordion > li.menu-heading > a,
.fl-menu-accordion > li.menu-heading > .fl-has-submenu-container > a {
  font-weight: 600 !important; /* always keep original weight */
  background-color: #ffffff !important;
  color: #2E3192 !important;
  text-decoration: none !important;
}

/* Optional: explicit hover (keeps behavior obvious) */
.fl-menu-accordion > li.menu-heading > a:hover,
.fl-menu-accordion > li.menu-heading > .fl-has-submenu-container > a:hover {
  background-color: #ffffff !important;
  color: #2E3192 !important;
  text-decoration: none !important;
}

/* TABLET */
@media (min-width: 768px) and (max-width: 1024px) {
  /* Pill heading */
  .fl-menu-accordion > li.menu-heading > a,
  .fl-menu-accordion > li.menu-heading > .fl-has-submenu-container > a {
    font-size: 1.25rem; /* was 1.5rem on desktop */
    padding: 11px 26px 11px 30px; /* slightly tighter */
  }

  /* Sidebar links */
  .fl-menu-accordion > li:not(.menu-heading) > a {
    font-size: 1rem; /* keeps hierarchy */
  }
}

/* MOBILE - MAIN */
@media (max-width: 767px) {
  /* Remove ALL toggle buttons/arrows */
  .main-menu button,
  .main-menu .fl-menu-toggle,
  .main-menu svg {
    display: none !important;
  }

  /* Flyout background */
  .main-menu .fl-menu-mobile-flyout,
  .main-menu .fl-menu {
    background-color: #ffffff;
  }

  /* Header flyout links */
  .main-menu a {
    color: #000000 !important;
  }

  .main-menu a:hover {
    color: #368D97 !important;
  }
}

/* MOBILE - SIDEBAR */
@media (max-width: 767px) {
  .sidebar-nav .fl-menu-accordion {
    background-color: #368D97;
  }

  .sidebar-nav a {
    color: #ffffff;
  }

  .sidebar-nav a:hover {
    text-decoration: underline;
  }

  .fl-menu-accordion > li.menu-heading > a,
  .fl-menu-accordion > li.menu-heading > .fl-has-submenu-container > a {
    display: none !important;
    font-size: 1.25rem;
  }
}

/* Fix hover text color on Register button */
.fl-builder-content a.register-button:hover,
.fl-builder-content a.register-button:focus {
  color: #ffffff !important;
}

/* Featured image rounding — specific post module */
.rounded-featured-image .fl-post-image a,
.rounded-featured-image .fl-post-image img {
  border-radius: 10px;
  overflow: hidden;
}