/*
Theme Name: Franklin Square Child
Template: franklin-square
Version: 1.0
*/
/* --- Final Optimized Blog Card Design --- */
.blog-card {
    background: #FAF7F5;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    transition: transform 0.3s ease;
    border: none !important;
}

/* Flexbox chain to push button to bottom */
.blog-card .inner-box {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    position: relative; /* Container for the hover line */
    border: none !important;
}

.blog-card__content {
    padding: 25px 25px 35px 25px; /* Extra bottom padding for the line */
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* --- Date Styling --- */
.blog-card .posted-info {
    font-size: 13px;
    color: #999;
    margin-bottom: 10px;
    background: transparent !important;
    font-weight: 400;
}

/* --- Title Styling --- */
.blog-card__content h3 {
    margin-bottom: 20px;
}

.blog-card__content h3 a {
    color: #997C60; /* Base Brand Brown */
    font-weight: 700;
    font-size: 22px;
    line-height: 1.3;
    text-decoration: none;
    transition: color 0.3s ease;
}

/* Updated hover state */
.blog-card__content h3 a:hover {
    color: #2E2623 !important;
}

/* --- Fixed Button Placement --- */
.blog-card__content .read-more {
    margin-top: auto !important; /* Pushes button to bottom */
    align-self: flex-start;
    padding: 8px 20px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: #a38970;
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.3s ease;
    border: none;
}

.blog-card__content .read-more:hover {
    background: #8e7660;
}

/* --- Hover Line Animation --- */
.blog-card .inner-box::after {
    content: '';
    position: absolute;
    left: 25px;
    right: 25px;
    bottom: 0;
    height: 2px;
    background: #000;
    transform: scaleX(0);
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    transform-origin: left;
}

.blog-card:hover .inner-box::after {
    transform: scaleX(1);
}

.blog-card:hover {
    transform: translateY(-5px);
}

/* --- Image Ratio --- */
.blog-card .image-box img {
    width: 100%;
    height: 210px;
    object-fit: cover;
    display: block;
}

/* --- Page Header --- */
.archive-header-banner {
    background-color: #FAF9F8;
    padding: 60px 20px;
    margin-top: 100px;
    margin-bottom: 40px;
    width: 100%;
    text-align: center;
}

.archive-header-banner h1 {
    font-size: 48px;
    font-weight: 700;
    color: #997C60;
    text-transform: capitalize;
    margin: 0;
}

/* --- Pagination Styling --- */
.page-nav {
    width: 100%;
    margin: 50px auto;
    display: block;
    text-align: center;
    clear: both;
    font-family: 'Inter', sans-serif;
}

.page-nav .page-numbers {
    display: inline-block;
    padding: 10px 18px;
    margin: 0 5px;
    background-color: #E1D9D0;
    color: #ffffff !important;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.page-nav a.page-numbers:hover {
    background-color: #997C60 !important;
    color: #ffffff !important;
}

.page-nav .page-numbers.current {
    background-color: transparent !important;
    color: #997C60 !important;
    padding: 10px 15px;
    cursor: default;
}

.page-nav .dots {
    background-color: transparent !important;
    color: #997C60 !important;
    padding: 10px 5px;
}

@media (max-width: 480px) {
    .page-nav .page-numbers {
        padding: 8px 12px;
        margin: 0 2px;
        font-size: 12px;
    }
}
/* =========================================================
   COMPLETE MEGA MENU CSS (FINAL)
   - Container-bounded mega menus (no overflow)
   - Services (menu-item-10845): 5 columns, headers bold, no cut-off
   - Treatments (menu-item-10974): 3 columns, headers bold
   - Nested columns locked (no popping / no extra toggles)
   - Underline animation: hover-only (no default underline on current item)
   Paste at the VERY BOTTOM of your CSS
   ========================================================= */


/* ------------------------------
   A) HOVER-ONLY UNDERLINE (TOP NAV)
   ------------------------------ */

/* remove underline for current/active items (prevents default underline showing) */
#primary-menu > li.current-menu-item > a::after,
#primary-menu > li.current-menu-ancestor > a::after,
#primary-menu > li.current_page_item > a::after,
#primary-menu > li.current_page_ancestor > a::after {
  width: 0 !important;
  opacity: 0 !important;
}

/* show underline only on hover */
#primary-menu > li:hover > a::after {
  width: 100% !important;
  opacity: 1 !important;
}


/* ------------------------------
   B) CONTAINER-BOUNDED MEGA MENU BASE
   ------------------------------ */

/* make header container the positioning reference */
header .container {
  position: relative;
}

/* allow submenu to align to container edges */
#primary-menu > li.menu-item-has-children {
  position: static;
}

/* base hide (top-level dropdown panel) */
#primary-menu > li.menu-item-has-children > .sub-menu {
  display: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* base show (top-level dropdown panel) */
#primary-menu > li.menu-item-has-children:hover > .sub-menu {
  display: grid !important;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;

  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;

  background: #ffffff;
  box-shadow: 0px 10px 30px rgba(0,0,0,0.15);
  border-top: 4px solid #AF9C87;
	border-radius: 14px;
  z-index: 9999;

  /* default spacing; each menu below can override */
  padding: 28px 24px;
  gap: 18px;
}

/* safety: prevent clipping inside dropdown */
#primary-menu > li.menu-item-has-children:hover > .sub-menu,
#primary-menu > li.menu-item-has-children:hover > .sub-menu * {
  box-sizing: border-box;
}

/* each column container */
#primary-menu > li.menu-item-has-children > .sub-menu > li {
  list-style: none !important;
  min-width: 0 !important;
  overflow: visible !important;
}

/* ------------------------------
   C) COLUMN HEADERS (2nd LEVEL) – BASE STYLE
   (menu-specific tweaks below)
   ------------------------------ */

#primary-menu > li.menu-item-has-children > .sub-menu > li > a,
#primary-menu > li.menu-item-has-children > .sub-menu > li > span {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;

  color: #000000 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;

  margin: 0 0 10px 0 !important;
  padding: 0 0 8px 0 !important;
  border-bottom: 1px solid rgba(0,0,0,0.08) !important;

  background: transparent !important;
  text-indent: 0 !important;
  height: auto !important;
  max-height: none !important;
}

/* if header title text is wrapped, force it visible/bold too */
#primary-menu > li.menu-item-has-children > .sub-menu > li > a *,
#primary-menu > li.menu-item-has-children > .sub-menu > li > span * {
  opacity: 1 !important;
  visibility: visible !important;
  color: #000000 !important;
  font-weight: 700 !important;
  text-indent: 0 !important;
}

/* ------------------------------
   D) LOCK NESTED COLUMNS (3rd LEVEL LISTS)
   ------------------------------ */

/* keep nested lists visible inside columns; no hover pop/slide */
#primary-menu .sub-menu .sub-menu {
  display: block !important;
  position: static !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  transition: none !important;
  pointer-events: auto !important;

  padding: 0 !important;
  margin: 6px 0 0 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  width: auto !important;
}

/* child links */
#primary-menu .sub-menu .sub-menu li a {
  display: block !important;
  padding: 4px 0 !important;

  font-size: 14px !important;
  font-weight: 400 !important;
  color: #555 !important;

  white-space: normal !important;
  overflow-wrap: anywhere;

  transition: color 0.2s ease !important;
}

/* child hover: color only */
#primary-menu .sub-menu .sub-menu li a:hover {
  color: #997C60 !important;
  text-decoration: underline;
  background: transparent !important;
  transform: none !important;
  opacity: 1 !important;
}


/* ------------------------------
   E) SERVICES MEGA MENU (menu-item-10845)
   - 5 columns
   - headers one line, NO cut-off
   - tighter gap to increase usable column width
   ------------------------------ */

#primary-menu li#menu-item-10845:hover > .sub-menu {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 14px !important;
  padding: 28px 24px !important;
}

/* services headers: force ONE LINE, but DO NOT truncate */
#primary-menu li#menu-item-10845 > .sub-menu > li > a,
#primary-menu li#menu-item-10845 > .sub-menu > li > span,
#primary-menu li#menu-item-10845 > .sub-menu > li > a *,
#primary-menu li#menu-item-10845 > .sub-menu > li > span * {
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: unset !important;
}

/* slight font reduction on narrower desktops to prevent collisions */
@media (max-width: 1350px) {
  #primary-menu li#menu-item-10845 > .sub-menu > li > a,
  #primary-menu li#menu-item-10845 > .sub-menu > li > span {
    font-size: 14px !important;
  }
}


/* ------------------------------
   F) TREATMENTS MEGA MENU (menu-item-10974)
   - 3 columns
   - comfortable spacing
   ------------------------------ */

#primary-menu li#menu-item-10974:hover > .sub-menu {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 32px !important;
  padding: 30px !important;
}

/* treatments headers: keep one line (ellipsis allowed if extreme) */
#primary-menu li#menu-item-10974 > .sub-menu > li > a,
#primary-menu li#menu-item-10974 > .sub-menu > li > span {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* laptop spacing tighten */
@media (max-width: 1199px) {
  #primary-menu li#menu-item-10974:hover > .sub-menu {
    gap: 22px !important;
    padding: 22px !important;
  }
}


/* ------------------------------
   G) MOBILE OVERRIDE (ALL MENUS)
   ------------------------------ */

@media (max-width: 991px) {
  /* stack dropdown content */
  #primary-menu > li.menu-item-has-children:hover > .sub-menu {
    display: block !important;
    position: relative;
    left: auto;
    right: auto;
    width: 100%;
    max-width: 100%;
    box-shadow: none;
    border-top: none;
    padding: 15px !important;
  }

  /* allow header wrapping on mobile */
  #primary-menu > li.menu-item-has-children > .sub-menu > li > a,
  #primary-menu > li.menu-item-has-children > .sub-menu > li > span {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
  }
}
/* =========================================================
   UNIFORM COLUMN HEADERS (SERVICES + TREATMENTS)
   Goal:
   1) Same font-size / weight / line-height
   2) Same underline length/alignment
   3) Same header block height so columns line up uniformly
   Applies ONLY to:
   - Services:   menu-item-10845
   - Treatments: menu-item-10974
   Paste at VERY BOTTOM of your CSS
   ========================================================= */

/* 1) Make the header row a uniform block across BOTH menus */
#primary-menu li#menu-item-10845 > .sub-menu > li > a,
#primary-menu li#menu-item-10845 > .sub-menu > li > span,
#primary-menu li#menu-item-10974 > .sub-menu > li > a,
#primary-menu li#menu-item-10974 > .sub-menu > li > span {
  display: block !important;

  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;

  /* Uniform header height so the divider lines align */
  min-height: 22px !important;

  /* Uniform spacing */
  margin: 0 0 12px 0 !important;
  padding: 0 0 8px 0 !important;

  /* Uniform divider */
  border-bottom: 1px solid rgba(0,0,0,0.10) !important;

  color: #292f3b !important;
  background: transparent !important;
}

/* 2) Force any wrapped inner elements to inherit the same header styling */
#primary-menu li#menu-item-10845 > .sub-menu > li > a *,
#primary-menu li#menu-item-10845 > .sub-menu > li > span *,
#primary-menu li#menu-item-10974 > .sub-menu > li > a *,
#primary-menu li#menu-item-10974 > .sub-menu > li > span * {
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  color: #292f3b !important;
}

/* 3) Keep headers single-line on desktop, without overlap into other columns */
@media (min-width: 992px) {
  #primary-menu li#menu-item-10845 > .sub-menu > li > a,
  #primary-menu li#menu-item-10845 > .sub-menu > li > span,
  #primary-menu li#menu-item-10974 > .sub-menu > li > a,
  #primary-menu li#menu-item-10974 > .sub-menu > li > span {
    white-space: nowrap !important;
    overflow: hidden !important;      /* prevents visual “uneven spacing” from overlap */
    text-overflow: clip !important;   /* no ellipsis */
  }
}

/* 4) Mobile: allow wrapping so nothing breaks */
@media (max-width: 991px) {
  #primary-menu li#menu-item-10845 > .sub-menu > li > a,
  #primary-menu li#menu-item-10845 > .sub-menu > li > span,
  #primary-menu li#menu-item-10974 > .sub-menu > li > a,
  #primary-menu li#menu-item-10974 > .sub-menu > li > span {
    white-space: normal !important;
    overflow: visible !important;
  }
}
/* =========================================================
   SERVICES (menu-item-10845) — FORCE EVEN HEADER HEIGHTS
   Goal: every column header block has identical height so
   the divider line +s and the first child row align.
   Paste at VERY BOTTOM of your CSS.
   ========================================================= */

/* Make the Services grid align items consistently */
#primary-menu li#menu-item-10845:hover > .sub-menu{
  align-items: start !important;
}

/* Force every Services header to the SAME fixed height */
#primary-menu li#menu-item-10845 > .sub-menu > li > a,
#primary-menu li#menu-item-10845 > .sub-menu > li > span{
  display: flex !important;
  align-items: center !important;     /* centers single-line headers vertically */
  height: 44px !important;           /* uniform header height across all columns */
  min-height: 44px !important;
  max-height: 44px !important;

  margin: 0 0 12px 0 !important;
  padding: 0 0 8px 0 !important;      /* keeps your divider spacing consistent */
  border-bottom: 1px solid rgba(0,0,0,0.10) !important;

  line-height: 1.2 !important;
  white-space: normal !important;     /* allows 2-line headers inside fixed height */
  overflow: hidden !important;        /* prevents header height from expanding */
}

/* Ensure wrapped header text still renders nicely inside the fixed height */
#primary-menu li#menu-item-10845 > .sub-menu > li > a *,
#primary-menu li#menu-item-10845 > .sub-menu > li > span *{
  line-height: 1.2 !important;
}

/* Mobile: don’t force fixed header height */
@media (max-width: 991px){
  #primary-menu li#menu-item-10845 > .sub-menu > li > a,
  #primary-menu li#menu-item-10845 > .sub-menu > li > span{
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

/* =========================================
   NAVBAR TABS — FORCE BLACK TEXT
   Home, Services, Treatments, Blog, About
   Paste at VERY BOTTOM of your CSS
   ========================================= */

/* Base state */
#primary-menu > li > a {
  color: #000000 !important;
}

/* Hover state */
#primary-menu > li > a:hover {
  color: #000000 !important;
}

/* Active / current page state */
#primary-menu > li.current-menu-item > a,
#primary-menu > li.current-menu-ancestor > a,
#primary-menu > li.current_page_item > a,
#primary-menu > li.current_page_ancestor > a {
  color: #000000 !important;
}

/* If theme applies color via span or inner elements */
#primary-menu > li > a *,
#primary-menu > li.current-menu-item > a *,
#primary-menu > li.current-menu-ancestor > a * {
  color: #000000 !important;
}

/* Footer background override (child theme only) */
footer {
  background-color: #997C60 !important;
}

footer .copyright {
  background-color: #997C60 !important;
}
/* === Footer color + cleanup (child theme) === */

/* 1. Force all footer text to white */
footer,
footer p,
footer a,
footer li,
footer h1,
footer h2,
footer h3,
footer h4,
footer h5,
footer h6,
footer i {
  color: #FFFFFF !important;
}

/* 2. Remove bullet points / list markers in footer */
footer ul {
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

footer ul li::marker {
  content: none !important;
}

/* 3. Subscribe button background + text */
footer .footer-subscribe-button {
  background-color: #E1D9D0 !important;
  color: #2E2623 !important;
  border: none !important;
}

footer .footer-subscribe-button:hover {
  background-color: #d2c7bc !important;
  color: #2E2623 !important;
}

/* 4. Icons inherit white cleanly */
footer i {
  color: #FFFFFF !important;
}


.custom-logo-link, .custom-logo { display: inline-block !important; visibility: visible !important; opacity: 1 !important; }
.custom-logo { height: auto; max-height: 60px; width: auto; }

/* --- FIX FOR RESOURCES SUBMENU (ID 11946) --- */
@media (min-width: 992px) {
    /* 1. Make the dropdown wider so the text has more runway */
    li#menu-item-11946:hover > .sub-menu {
        min-width: 350px !important; /* Increased width */
        width: auto !important;
        padding: 15px !important;
        right: 0 !important; /* Aligns it to the right edge of the parent so it doesn't go off-screen */
        left: auto !important;
    }

    /* 2. Fix the text wrap and font size */
    li#menu-item-11946 .sub-menu li a {
        white-space: normal !important; /* Allows long text to wrap to a 2nd line */
        word-wrap: break-word !important;
        line-height: 1.4 !important;
        font-size: 14px !important; /* Slightly smaller to help it fit */
        padding: 8px 12px !important;
        display: block !important;
    }
}