/*
Theme Name: Divi Child
Theme URI: https://www.elegantthemes.com/gallery/divi/
Description: Child theme for Divi 5
Author: Gaëtan Godin
Author URI: https://fishbucklake.com
Template: Divi
Version: 1.0
*/

/* =========================================================
   FBL DESIGN TOKENS (Global Variables)
   ========================================================= */
:root {
  /* Backgrounds */
  --fbl-bg-site: #000000;      /* main site background (Joomla-style black) */
  --fbl-bg-dark: #000000;      /* solid black (breadcrumbs, etc.) */
  --fbl-center-bg: grey;       /* center column background (intro text area) */

  /* Text & colors */
  --fbl-text-main: #f2f2f2;    /* default body text on dark */
  --fbl-gold: #ffd77a;         /* main gold */
  --fbl-gold-headings: #ffd700;/* heading gold (legacy match) */
  --fbl-gold-bright: #ffcc33;  /* brighter highlight gold */
  --fbl-teal: #ffd77a;         /* link color */
  --fbl-teal-light: #b5e7ff;   /* hover link color */
  --fbl-footer-bg: rgba(0, 0, 0, 0.55);
  --fbl-green: #4caf50;        /* breadcrumb line color */

  /* Typography */
  --fbl-font-main: system-ui, -apple-system, BlinkMacSystemFont,
                   "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --fbl-body-size: 1.15rem;    /* intro body text */
  --fbl-title-size: 1.55rem;   /* intro title */
  --fbl-bottom-size: 1.9rem;   /* intro bottom line */
  --fbl-line-height: 1.75;     /* consistent intro line spacing */
}

/* =========================================================
   DIVI 5 LIGHT/DARK AUTO TEXT PATCH (Prevents forced white text)
   ========================================================= */
.et_fb_auto_text_light,
.et_fb_auto_text_dark {
  color: inherit !important;
}

/* =========================================================
   FBL Gallery Grid Styles
   ========================================================= */
.fbl-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  align-items: stretch;
  margin: 20px 0;
}

.fbl-gallery-item {
  overflow: hidden;
  position: relative;
}

.fbl-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.fbl-gallery-item:hover img {
  transform: scale(1.05);
}

/* =========================================================
   FBL Slider Styles
   ========================================================= */
.fbl-slider {
  position: relative;
  overflow: hidden;
  margin: 30px 0;
}

.fbl-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.fbl-slide.is-active {
  position: relative;
  opacity: 1;
}

.fbl-slide img {
  width: 100%;
  display: block;
  object-fit: cover;
}

.fbl-prev,
.fbl-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  padding: 8px 12px;
  cursor: pointer;
  z-index: 10;
  font-size: 24px;
  line-height: 1;
}

.fbl-prev:hover,
.fbl-next:hover {
  background: rgba(0, 0, 0, 0.7);
}

.fbl-prev { left: 10px; }
.fbl-next { right: 10px; }

/* =========================================================
   FBL Classic Skin – Base
   (dark lake background, gold headings, light text)
   ========================================================= */
body.fbl-skin-classic {
  background-color: var(--fbl-bg-site);
  background-size: cover;
  color: var(--fbl-text-main);
  font-family: var(--fbl-font-main);
}

body.fbl-skin-classic #page-container {
  background: rgba(0, 0, 0, 0.65);
}

body.fbl-skin-classic #main-content,
body.fbl-skin-classic #main-content p {
  color: var(--fbl-text-main);
}

body.fbl-skin-classic h1,
body.fbl-skin-classic h2,
body.fbl-skin-classic h3,
body.fbl-skin-classic h4 {
  color: var(--fbl-gold-headings);
}

body.fbl-skin-classic a {
  color: var(--fbl-teal);
}

body.fbl-skin-classic a:hover {
  color: var(--fbl-teal-light);
}

/* keep some breathing room for non-hero content */
body.fbl-skin-classic .entry-content {
  padding: 1.5rem 2rem;
}

/* =========================================================
   FBL Side-menu Blocks (Your Experience / Our Facilities)
   ========================================================= */
.fbl-side-menu {
  background: transparent;
  padding: 0;
  margin: 0 0 1.5rem 0;
  text-align: left !important;
}

.fbl-side-menu h5 {
  margin: 0 0 0.5rem;
  font-style: italic;
  font-size: 0.95rem;
  text-transform: none;
  color: var(--fbl-gold-headings);
}

.fbl-side-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.fbl-side-menu li {
  margin: 0.15rem 0;
}

.fbl-side-menu a {
  display: inline-block;
  font-size: 0.95rem;
  color: var(--fbl-text-main);
  text-decoration: none;
}

.fbl-side-menu a:hover {
  color: var(--fbl-gold-headings);
  text-decoration: underline;
}

/* =========================================================
   FBL Footer-style Bottom Grid (5 columns)
   ========================================================= */
.fbl-footer-grid {
  margin-top: 2.5rem;
}

.fbl-footer-grid .et_pb_column {
  background: var(--fbl-footer-bg);
  padding: 1rem 1.25rem;
  border-radius: 6px;
  margin-bottom: 1rem;
}

.fbl-footer-grid h5 {
  margin: 0 0 0.6rem;
  font-style: italic;
  font-size: 0.95rem;
  color: var(--fbl-gold-headings);
}

.fbl-footer-grid ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.fbl-footer-grid li {
  margin: 0.15rem 0;
}

.fbl-footer-grid a {
  color: var(--fbl-text-main);
  text-decoration: none;
}

.fbl-footer-grid a:hover {
  color: var(--fbl-gold-headings);
  text-decoration: underline;
}

/* =========================================================
   FBL SIDE MENUS — UNIVERSAL STYLES (Desktop + Mobile)
   ========================================================= */
.fbl-side-menu {
    background: transparent !important;
}

.fbl-side-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Root items */
.fbl-side-menu .et_pb_menu__menu .et-menu-nav > ul.et-menu {
    display: block !important;
}

.fbl-side-menu .et_pb_menu__menu .et-menu-nav .et-menu > li {
    display: block !important;
    margin-bottom: 4px;
}

/* Menu links */
.fbl-side-menu .et_pb_menu__menu a {
    display: block;
    padding: 3px 0;
    font-size: 16px;
    line-height: 1.3em;
    color: var(--fbl-gold-headings);
    text-decoration: none;
}

.fbl-side-menu .et_pb_menu__menu a:hover {
    color: #ffffff;
}

/* Submenu (Joomla-style open on desktop) */
.fbl-side-menu .sub-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: relative !important;
    padding-left: 12px;
    margin-top: 2px;
    background: transparent !important;
    box-shadow: none !important;
}

.fbl-side-menu .sub-menu a {
    font-size: 15px;
    color: var(--fbl-gold-headings);
}

.fbl-side-menu .sub-menu a:hover {
    color: #ffffff;
}

/* =========================================================
   DESKTOP BEHAVIOR (≥ 981px)
   ========================================================= */
@media (min-width: 981px) {
    /* Hide Divi's built-in hamburger on desktop */
    .fbl-side-menu .et_mobile_nav_menu {
        display: none !important;
    }

    /* Menus always visible */
    #fbl-left-menu,
    #fbl-right-menu {
        display: block !important;
    }
}

/* =========================================================
   MOBILE BEHAVIOR (≤ 980px)
   ========================================================= */
@media (max-width: 980px) {

    /* Hide Divi's default hamburger inside menu module */
    .fbl-side-menu .et_mobile_nav_menu {
        display: none !important;
    }

    /* Add a hamburger icon under row-1 headings */
    #fbl-left-heading::after,
    #fbl-right-heading::after {
        content: "\61"; /* Divi hamburger icon */
        font-family: "ETmodules";
        font-size: 28px;
        color: var(--fbl-gold-headings);
        display: block;
        margin-top: 0.35rem;
        cursor: pointer;
        width: fit-content;
        line-height: 1;
    }

    /* Menus start hidden on mobile */
    #fbl-left-menu,
    #fbl-right-menu {
        display: none !important;
    }

    /* When JS toggles .menu-open → menu becomes visible */
    #fbl-left-menu.menu-open,
    #fbl-right-menu.menu-open {
        display: block !important;
    }

    /* Mobile submenu indentation */
    .fbl-side-menu .sub-menu {
        padding-left: 15px;
    }
}
/* MOBILE ONLY: hide menus initially */
@media (max-width: 980px) {
    #fbl-left-menu,
    #fbl-right-menu {
        display: none !important;
    }

    /* When JS toggles the 'open' class */
    #fbl-left-menu.fbl-menu-open,
    #fbl-right-menu.fbl-menu-open {
        display: block !important;
    }
}
/* When JS adds .fbl-menu-open to the menu module wrapper, show the inner menu */
.fbl-menu-open .et_pb_menu__menu {
    display: block !important;
}
/* =========================================================
   FIX RIGHT MENU POSITION — attach dropdown to heading
   ========================================================= */
@media (max-width: 980px) {

    /* Make heading the anchor point */
    #fbl-right-heading {
        position: relative !important;
        z-index: 50;
    }
    #fbl-right-menu.fbl-menu-open .et_pb_menu__menu {
      position: absolute !important;
      top: 2.6rem;        /* adjust if needed */
      right: 0;           /* keeps right-aligned! */
      width: max-content;
      z-index: 5000;

      background: rgba(0,0,0,0.95);
      padding: 10px 12px;
      border-radius: 0 0 6px 6px;

      display: block !important;
    }

    /* When menu is open → place the actual menu UL under the heading */
    #fbl-right-menu.fbl-menu-open .et_pb_menu__menu {
        position: absolute;
        top: 2.6rem;      /* adjust as needed */
        left: 0;
        width: 100%;
        z-index: 40;

        background: rgba(0,0,0,0.95);
        padding: 12px 0;
        border-radius: 0 0 6px 6px;

        display: block !important;
    }

    /* Prevent outer wrapper from affecting layout */
    #fbl-right-menu {
        position: relative; /* needed for absolute UL */
    }
}



/* =========================================================
   3-IMAGE STRIP — CLEAN + RESPONSIVE
   ========================================================= */
.fbl-image-strip {
  display: flex;
  justify-content: center;
  gap: 1.2rem;
  width: 100%;
  max-width: 480px;
  clear: both;
}

.fbl-image-strip img {
  max-width: 150px;
  height: auto;
  display: block;
  border-radius: 10px;
}

@media (max-width: 767px) {
  .fbl-image-strip {
    flex-direction: column;
    gap: 0.8rem;
    max-width: 100%;
  }

  .fbl-image-strip img {
    max-width: 120px;
  }
}

/* =========================================================
   INTRO TEXT BLOCK — LAYOUT & TYPOGRAPHY
   ========================================================= */
.fbl-text-block {
  position: relative;
  text-align: center;
  line-height: var(--fbl-line-height);
  clear: both;
  display: block;
  width: 100%;
  color: var(--fbl-gold);
}

/* Keep Divi auto light/dark from overriding intro text */
.fbl-text-block * {
  color: inherit !important;
}

/* Floating image — right of paragraphs */
.fbl-text-image {
  float: right;
  max-width: 300px;
  margin: 0 0 1rem 1rem;
  border-radius: 10px;
  display: block;
  height: auto;
}

/* Clear float after the block */
.fbl-text-block::after {
  content: "";
  display: block;
  clear: both;
}

@media (max-width: 767px) {
  .fbl-text-image {
    float: none;
    max-width: 100%;
    margin: 0 0 1rem 0;
  }
}

/* Title line (top) */
.fbl-text-title {
  font-weight: 700;
  text-decoration: underline;
  font-size: var(--fbl-title-size);
  line-height: 1.35;
  margin-bottom: 1.2rem;
  color: var(--fbl-gold);
}

/* Body paragraphs (middle) */
.fbl-text-body {
  font-size: var(--fbl-body-size);
  margin-bottom: 1.2rem;
  line-height: var(--fbl-line-height);
  color: var(--fbl-gold);
}

/* Bottom emphasis line */
.fbl-text-bottom {
  font-size: var(--fbl-bottom-size);
  font-weight: 700;
  margin-top: 1.4rem;
  line-height: 1.45;
  color: var(--fbl-gold-bright);
}

/* Mobile font tweaks */
@media (max-width: 767px) {
  .fbl-text-title {
    font-size: calc(var(--fbl-title-size) * 0.87);
  }

  .fbl-text-body {
    font-size: calc(var(--fbl-body-size) * 0.91);
  }

  .fbl-text-bottom {
    font-size: calc(var(--fbl-bottom-size) * 0.90);
  }
}
/* Outer wrapper (Divi width control) */
.fbl-breadcrumb-inner {
    width: 100% !important;
    display: block !important;
    position: relative;
    padding-bottom: 0.25rem;
    background: var(--fbl-bg-dark);
    text-align: left;
    overflow: visible !important;
}

/* Outer wrapper (Divi flex override) */
.fbl-breadcrumb-inner {
    width: 100% !important;
    display: block !important;
    position: relative;
    padding-bottom: 0.25rem;
    background: var(--fbl-bg-dark);
    text-align: left;
    flex: 0 0 auto !important;    /* REQUIRED fix */
}

/* Text wrapper */
.fbl-breadcrumb-content {
    display: inline-block !important;
    position: relative;
    font-size: 0.9rem;
    font-family: var(--fbl-font-main);
    color: var(--fbl-gold);
    min-width: 40% !important;    /* Your rule */
    max-width: 100%;
    white-space: nowrap;
    flex: 0 0 auto !important;    /* REQUIRED fix */
}

/* Underline = exact width of breadcrumb text */
.fbl-breadcrumb-content::after {
    content: "";
    display: block;
    height: 2px;
    width: 100% !important;       /* STRICT width match */
    background: var(--fbl-green);
    margin-top: -3px !important;
}

/* Mobile truncation */
@media (max-width: 480px) {
    .fbl-breadcrumb-content {
        max-width: 90%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}



.fbl-breadcrumb-dummy {
  color: #888;
  margin-left: 1rem;
  font-style: italic;
}