/*
Theme Name: RazenetFlex
Theme URI: https://example.com/customflex
Author: Razenet
Author URI: https://www.razenet.com
Description: A fully customizable, mobile-responsive WordPress theme. Supports fonts installed via Appearance > Fonts (Font Library) as well as fonts uploaded manually via FTP, independent heading/body font selection, a scalable or directly-set header font size, and multiple preset color themes.
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: customflex
Tags: custom-colors, custom-menu, translation-ready, threaded-comments, responsive-layout, custom-fonts
*/

/* -------------------------------------------------
   0. CSS Custom Properties (defaults; overridden inline
      by inc/customizer.php based on live Customizer values)
------------------------------------------------- */
:root{
  --cf-color-primary:#2563eb;
  --cf-color-secondary:#1e293b;
  --cf-color-accent:#f59e0b;
  --cf-color-background:#ffffff;
  --cf-color-surface:#f8fafc;
  --cf-color-text:#1e293b;
  --cf-color-text-muted:#64748b;
  --cf-color-border:#e2e8f0;

  --cf-font-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --cf-container-width:1200px;

  /* Per-heading-level font, size, and color (overridden inline by the
     Customizer — see inc/customizer.php) */
  --cf-h1-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --cf-h1-size:40px;
  --cf-h1-color:#1e293b;
  --cf-h1-opacity:1;
  --cf-h2-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --cf-h2-size:32px;
  --cf-h2-color:#1e293b;
  --cf-h2-opacity:1;
  --cf-h3-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --cf-h3-size:26px;
  --cf-h3-color:#1e293b;
  --cf-h3-opacity:1;
  --cf-h4-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --cf-h4-size:21px;
  --cf-h4-color:#1e293b;
  --cf-h4-opacity:1;
  --cf-h5-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --cf-h5-size:18px;
  --cf-h5-color:#1e293b;
  --cf-h5-opacity:1;
  --cf-h6-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --cf-h6-size:15px;
  --cf-h6-color:#1e293b;
  --cf-h6-opacity:1;

  /* Featured banner */
  --cf-banner-height:420px;
  --cf-banner-overlay-color:#000000;
  --cf-banner-overlay-opacity:0.45;
  --cf-banner-text-color:#ffffff;
  --cf-banner-shape-height:80px;
  --cf-banner-shape-color:#ffffff;

  /* Footer gradient background (off by default — .site-footer uses the
     solid --cf-color-secondary unless .cf-footer-gradient is present) */
  --cf-footer-gradient:linear-gradient(135deg,#1e293b 0%,#0f172a 100%);
  --cf-footer-text-color:#ffffff;
  --cf-footer-min-height:0px;

  /* Navigation menu */
  --cf-nav-bg:#ffffff;
  --cf-nav-text:#1e293b;
  --cf-nav-text-hover:#2563eb;
  --cf-nav-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --cf-nav-font-size:16px;
  --cf-nav-item-gap:6px;
  --cf-submenu-font-size-desktop:16px;
  --cf-submenu-font-size-mobile:16px;
  --cf-nav-mobile-bg:#ffffff;
  --cf-nav-mobile-text:#1e293b;

  /* Site background image (Customizer > Site Background) */
  --cf-bg-image:none;
  --cf-bg-size:cover;
  --cf-bg-repeat:no-repeat;
  --cf-bg-position:center;
  --cf-bg-attachment:scroll;
  --cf-mobile-bg-color:#ffffff;

  /* Header top bar (Customizer > Header Top Bar) */
  --cf-topbar-bg:#111827;
  --cf-topbar-text:#ffffff;
  --cf-topbar-booking-bg:#2563eb;
  --cf-topbar-booking-text:#ffffff;

  /* Boxed layout (Customizer > Page Layout) */
  --cf-boxed-width:1400px;
  --cf-boxed-min-height:0px;

  /* Dark mode: a lighter, softer near-black rather than pure #000/#111 —
     used both as html's own fallback background and as the mobile
     solid-color background's dark-mode value (see the mobile background
     override below), so the two stay visually consistent. */
  --cf-dark-surface:#1c1c1e;
}

/* -------------------------------------------------
   1. Reset / base
------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;height:100%;overflow-x:hidden;overflow-x:clip;}
body{
  margin:0;
  position:relative;
  background-color:var(--cf-color-background);
  color:var(--cf-color-text);
  font-family:var(--cf-font-body);
  font-size:16px;
  line-height:1.65;
  /* overflow-x:hidden (fallback for older browsers) turns body into a
     clipping/scroll container, which breaks position:sticky on anything
     inside it — the sticky header used to silently stop working because of
     this. overflow-x:clip achieves the same "no sideways scroll" result
     without that side effect, so it's declared second to win in browsers
     that support it (Chrome 90+, Safari 16+, Firefox 113+). */
  overflow-x:hidden;
  overflow-x:clip;
  max-width:100vw;
  min-height:100%;
  display:flex;
  flex-direction:column;
}

/* Site background image (Customizer > Site Background) lives on its own
   element rather than directly on body. This is what lets Dark Mode invert
   the actual page content without inverting this image along with it — a
   filter can't selectively un-invert "just the background" of an element
   that also renders other content, since filter flattens everything that
   element paints into one result. Keeping it separate, and only applying
   the dark-mode filter to #page (not body or html), solves that. */
.cf-bg-layer{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:var(--cf-bg-image, none);
  background-size:var(--cf-bg-size, cover);
  background-repeat:var(--cf-bg-repeat, no-repeat);
  background-position:var(--cf-bg-position, center);
  background-attachment:var(--cf-bg-attachment, scroll);
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--cf-color-primary);text-decoration:none;}
a:hover{text-decoration:underline;}
ul,ol{padding-left:1.25em;}

h1,h2,h3,h4,h5,h6{
  line-height:1.2;
  margin:0 0 .55em;
  font-weight:700;
}
h1{font-family:var(--cf-h1-font);font-size:var(--cf-h1-size);color:var(--cf-h1-color);opacity:var(--cf-h1-opacity);}
h2{font-family:var(--cf-h2-font);font-size:var(--cf-h2-size);color:var(--cf-h2-color);opacity:var(--cf-h2-opacity);}
h3{font-family:var(--cf-h3-font);font-size:var(--cf-h3-size);color:var(--cf-h3-color);opacity:var(--cf-h3-opacity);}
h4{font-family:var(--cf-h4-font);font-size:var(--cf-h4-size);color:var(--cf-h4-color);opacity:var(--cf-h4-opacity);}
h5{font-family:var(--cf-h5-font);font-size:var(--cf-h5-size);color:var(--cf-h5-color);opacity:var(--cf-h5-opacity);}
h6{font-family:var(--cf-h6-font);font-size:var(--cf-h6-size);color:var(--cf-h6-color);opacity:var(--cf-h6-opacity);}

p{margin:0 0 1.25em;}

.button,button,input[type="submit"],input[type="button"]{
  display:inline-block;
  background:var(--cf-color-primary);
  color:#fff;
  border:0;
  border-radius:6px;
  padding:.7em 1.4em;
  font-size:.95rem;
  cursor:pointer;
  transition:opacity .15s ease, transform .15s ease;
}
.button:hover,button:hover{opacity:.88;text-decoration:none;}

/* -------------------------------------------------
   2. Layout
------------------------------------------------- */
.cf-container{
  width:100%;
  max-width:var(--cf-container-width);
  margin:0 auto;
  padding:0 20px;
}

/* Header top bar (Customizer > Header Top Bar) */
.cf-topbar{
  background:var(--cf-topbar-bg, #111827);
  color:var(--cf-topbar-text, #ffffff);
  font-size:.85rem;
}
.cf-topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px 20px;
  padding:8px 20px;
}
/* Top Bar Alignment (Customizer > Header Top Bar). Default is the
   space-between rule above (contact info one side, social the other) —
   these override it to group both together on one side instead. */
.cf-topbar-align-left .cf-topbar-inner{justify-content:flex-start;}
.cf-topbar-align-center .cf-topbar-inner{justify-content:center;}
.cf-topbar-align-right .cf-topbar-inner{justify-content:flex-end;}
.cf-topbar-contact{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px 20px;
}
.cf-topbar-item{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:inherit;
  opacity:.9;
}
.cf-topbar-item:hover{opacity:1;text-decoration:none;}
.cf-topbar-item svg{width:14px;height:14px;flex-shrink:0;fill:currentColor;}
.cf-topbar-social{
  display:flex;
  align-items:center;
  gap:12px;
}
.cf-topbar-social-link{
  display:inline-flex;
  color:inherit;
  opacity:.85;
}
.cf-topbar-social-link:hover{opacity:1;}
.cf-topbar-social-link svg{width:16px;height:16px;fill:currentColor;}

.cf-topbar-right{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:16px;
}
.cf-topbar-booking{
  display:inline-flex;
  align-items:center;
  background:var(--cf-topbar-booking-bg, #2563eb);
  color:var(--cf-topbar-booking-text, #ffffff);
  font-weight:600;
  font-size:.8rem;
  padding:6px 16px;
  border-radius:999px;
  white-space:nowrap;
  transition:opacity .15s ease;
}
.cf-topbar-booking:hover{opacity:.88;text-decoration:none;color:var(--cf-topbar-booking-text, #ffffff);}

.site-header{
  border-bottom:1px solid var(--cf-color-border);
  background:var(--cf-nav-bg);
  position:relative;
  z-index:100;
}
/* Sticky top bar + header: the WRAPPER around both sticks as one unit
   (see header.php for why — avoids needing to know the top bar's exact
   height to stack two independently-sticky elements without overlap). */
.cf-sticky-wrap.cf-sticky-active{
  position:sticky;
  top:0;
  z-index:200;
  box-shadow:0 2px 12px rgba(0,0,0,.06);
}
.site-header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 0;
}
.site-branding .site-title{
  margin:0;
  font-size:1.5rem;
}
.site-branding .site-title a{color:var(--cf-color-secondary);}
.site-branding .site-description{
  margin:2px 0 0;
  font-size:.85rem;
  color:var(--cf-color-text-muted);
}
.custom-logo{max-height:56px;width:auto;}

/* Primary nav */
.main-navigation{flex:1;}
.cf-nav-align-left .main-navigation ul{justify-content:flex-start;}
.cf-nav-align-center .main-navigation ul{justify-content:center;}
.cf-nav-align-right .main-navigation ul{justify-content:flex-end;}
.main-navigation ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:var(--cf-nav-item-gap);
}
.main-navigation li{position:relative;}
.main-navigation a{
  display:block;
  padding:10px 14px;
  color:var(--cf-nav-text);
  font-family:var(--cf-nav-font);
  font-size:var(--cf-nav-font-size);
  border-radius:6px;
  transition:color .15s ease, background-color .15s ease, border-color .15s ease;
}

/* Hover / active style variants (Customizer > Navigation Menu > Hover / Active Style) */
.cf-nav-style-pill .main-navigation a:hover,
.cf-nav-style-pill .main-navigation .current-menu-item > a{
  color:var(--cf-nav-text-hover);
  text-decoration:none;
  background:var(--cf-color-surface);
}
.cf-nav-style-plain .main-navigation a:hover,
.cf-nav-style-plain .main-navigation .current-menu-item > a{
  color:var(--cf-nav-text-hover);
  text-decoration:none;
}
.cf-nav-style-underline .main-navigation a{
  border-bottom:2px solid transparent;
  border-radius:0;
  padding-bottom:8px;
}
.cf-nav-style-underline .main-navigation a:hover,
.cf-nav-style-underline .main-navigation .current-menu-item > a{
  color:var(--cf-nav-text-hover);
  text-decoration:none;
  border-bottom-color:var(--cf-nav-text-hover);
}
.cf-nav-style-bordered .main-navigation a{border:1px solid transparent;}
.cf-nav-style-bordered .main-navigation a:hover,
.cf-nav-style-bordered .main-navigation .current-menu-item > a{
  color:var(--cf-nav-text-hover);
  text-decoration:none;
  border-color:var(--cf-nav-text-hover);
}
.cf-nav-style-rounded .main-navigation a{border-radius:999px;}
.cf-nav-style-rounded .main-navigation a:hover,
.cf-nav-style-rounded .main-navigation .current-menu-item > a{
  color:var(--cf-nav-text-hover);
  text-decoration:none;
  background:var(--cf-color-surface);
}
.cf-nav-style-solid .main-navigation a:hover,
.cf-nav-style-solid .main-navigation .current-menu-item > a{
  color:#fff;
  text-decoration:none;
  background:var(--cf-nav-text-hover);
}
.cf-nav-style-scale .main-navigation a{
  transform:scale(1);
  transition:color .15s ease, transform .15s ease;
}
.cf-nav-style-scale .main-navigation a:hover,
.cf-nav-style-scale .main-navigation .current-menu-item > a{
  color:var(--cf-nav-text-hover);
  text-decoration:none;
  transform:scale(1.08);
}

.main-navigation ul ul{
  display:none;
  position:absolute;
  top:100%;left:0;
  background:var(--cf-color-background);
  border:1px solid var(--cf-color-border);
  border-radius:8px;
  min-width:200px;
  padding:6px;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
}
.main-navigation li:hover > ul{display:block;}
.main-navigation ul ul li{width:100%;}
.main-navigation ul ul a{color:var(--cf-color-text);font-size:var(--cf-submenu-font-size-desktop, 16px);}

.menu-toggle{
  display:none;
  background:transparent;
  border:1px solid var(--cf-color-border);
  border-radius:6px;
  padding:8px 10px;
  color:var(--cf-color-text);
}
.menu-toggle .bar{
  display:block;
  width:22px;height:2px;
  background:var(--cf-color-text);
  margin:4px 0;
}

/* Content layout */
.site-content{padding:48px 0;min-height:50vh;}
#page{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  flex:1 0 auto;
  width:100%;
  min-width:0;
}
#content{
  flex:1 0 auto;
  min-width:0;
}
.site-footer{flex-shrink:0;}

/* Boxed layout (Customizer > Page Layout): constrains the whole site —
   header, content, and footer together — to a centered max-width panel on
   desktop, with the Site Background visible on either side. Reverts to
   full width automatically below 1025px, since a boxed layout mostly makes
   sense once there's real space on either side of the site to show. */
@media (min-width:1025px){
  body.cf-boxed{
    background-color:var(--cf-color-surface, #f1f5f9);
  }
  body.cf-boxed #page{
    max-width:var(--cf-boxed-width, 1400px);
    width:100%;
    margin:0 auto;
    min-height:var(--cf-boxed-min-height, 0);
    background:var(--cf-color-background);
    box-shadow:0 0 60px rgba(0,0,0,.14);
  }
}

/* Mobile background override (Customizer > Site Background > "Remove
   background image on mobile"): swaps the image for a plain solid color
   below the mobile breakpoint. Scoped to a body class so it only takes
   effect when explicitly turned on.
   Note: the actual image lives on .cf-bg-layer (a separate element from
   body — see the "Dark mode" section below for why), so hiding it means
   hiding that element specifically, not setting a background-image
   property on body that body no longer has. */
@media (max-width:782px){
  body.cf-mobile-bg-solid .cf-bg-layer{
    display:none;
  }
  body.cf-mobile-bg-solid{
    background-color:var(--cf-mobile-bg-color, #ffffff);
  }
  /* This background-color lives on body, which sits outside the #page
     element that dark mode's invert filter targets (see the "Dark mode"
     section below) — so without this rule, toggling dark mode on mobile
     with the image removed had no visible effect at all. Rather than
     trying to make the invert-filter trick reach an element outside its
     own scope, this just states directly what color it should be in dark
     mode, same as html's own dark-mode fallback background. */
  html.cf-dark body.cf-mobile-bg-solid{
    background-color:var(--cf-dark-surface, #1c1c1e);
  }
}

/* Logo alignment (Customizer > Navigation Menu > Logo Alignment /
   Logo Alignment (Mobile)). These are two independent settings — this
   block handles desktop only; the matching mobile-scoped version lives
   in the "3. Mobile responsive" section below, using the separate
   cf-logo-align-mobile-* classes. Center takes the logo out of the
   header's normal flex flow and positions it independently in the true
   horizontal center of the header, so it isn't affected by however wide
   the menu happens to be. Right simply swaps which side of the row the
   logo renders on. */
@media (min-width:1025px){
  body.cf-logo-align-center .site-header-inner{position:relative;}
  body.cf-logo-align-center .site-branding{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
  }
  body.cf-logo-align-right .site-branding{order:3;}
  body.cf-logo-align-right .menu-toggle{order:1;}
  body.cf-logo-align-right .main-navigation{order:2;}
}

.content-area{width:100%;}
.has-sidebar .site-main-wrap{
  display:flex;
  gap:48px;
  align-items:flex-start;
}
.has-sidebar .content-area{flex:1 1 0;min-width:0;}
.widget-area{flex:0 0 300px;}
.widget{margin-bottom:32px;}
.widget-title{font-size:1.05rem;margin-bottom:.75em;}

article.post,article.page{margin-bottom:56px;}
.entry-title a{color:var(--cf-color-secondary);}
.entry-meta{color:var(--cf-color-text-muted);font-size:.85rem;margin-bottom:1em;}
.entry-thumbnail{margin-bottom:1.5em;border-radius:10px;overflow:hidden;}

.site-footer{
  background:var(--cf-color-secondary);
  color:var(--cf-footer-text-color);
  padding:48px 0 24px;
  margin-top:48px;
  min-height:var(--cf-footer-min-height);
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.site-footer.cf-footer-gradient{background:var(--cf-footer-gradient);}
.site-footer a{color:var(--cf-footer-text-color);opacity:.85;}
.site-footer .footer-widgets{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:32px;
  margin-bottom:32px;
}
.footer-navigation ul{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:8px 20px;
  margin:0 0 20px;
  padding:0;
}
.footer-navigation a{padding:4px 0;}
.site-footer .site-info{
  padding-top:20px;
  font-size:.85rem;
  opacity:.75;
}

/* Footer alignment (Customizer > Footer > Footer Alignment) */
.cf-footer-align-left .site-info,
.cf-footer-align-left .footer-widgets,
.cf-footer-align-left .footer-navigation ul{text-align:left;justify-content:flex-start;justify-items:start;}

.cf-footer-align-center .site-info{text-align:center;}
.cf-footer-align-center .footer-widgets{justify-items:center;text-align:center;}
.cf-footer-align-center .footer-navigation ul{justify-content:center;}

.cf-footer-align-right .site-info{text-align:right;}
.cf-footer-align-right .footer-widgets{justify-items:end;text-align:right;}
.cf-footer-align-right .footer-navigation ul{justify-content:flex-end;}

/* -------------------------------------------------
   2b. Featured banner (image + overlapping header text)
------------------------------------------------- */
.cf-banner{
  position:relative;
  width:100%;
  height:var(--cf-banner-height);
  min-height:200px;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  overflow:hidden;
}
.cf-banner::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--cf-banner-overlay-color);
  opacity:var(--cf-banner-overlay-opacity);
}
.cf-banner-inner{
  position:relative;
  z-index:2;
  width:100%;
  height:100%;
  max-width:var(--cf-container-width);
  margin:0 auto;
  padding:0 20px;
  display:flex;
  min-width:0;
}
.cf-banner-inner .entry-title{
  color:var(--cf-banner-text-color);
  margin:0;
  max-width:100%;
  min-width:0;
  overflow-wrap:break-word;
  word-break:break-word;
  text-shadow:0 2px 12px rgba(0,0,0,.35);
}
/* Alignment lives on .cf-banner-inner (the actual flex container around the
   title), not on .cf-banner itself — .cf-banner-inner always spans the full
   width, so aligning the outer element had no visible effect. */
.cf-banner--center .cf-banner-inner{align-items:center;justify-content:center;text-align:center;}
.cf-banner--bottom-left .cf-banner-inner{align-items:flex-end;justify-content:flex-start;text-align:left;padding-bottom:40px;}
.cf-banner--bottom-center .cf-banner-inner{align-items:flex-end;justify-content:center;text-align:center;padding-bottom:40px;}

/* Banner mask shapes (wave / curve / angle / triangle / zigzag) */
.cf-banner-shape{
  position:absolute;
  left:0;
  width:100%;
  height:var(--cf-banner-shape-height);
  line-height:0;
  z-index:3;
  pointer-events:none;
  overflow:hidden;
}
.cf-banner-shape--bottom{bottom:-1px;}
.cf-banner-shape--top{top:-1px;}
.cf-banner-shape svg{
  width:100%;
  height:100%;
  display:block;
}
.cf-banner-shape path{fill:var(--cf-banner-shape-color);}

/* -------------------------------------------------
   2c. Primary navigation — submenu toggles (touch support)
------------------------------------------------- */
.main-navigation li.menu-item-has-children{position:relative;}
.main-navigation .submenu-toggle{
  background:transparent;
  border:0;
  cursor:pointer;
  padding:4px 8px;
  color:inherit;
  display:none;
}
.main-navigation .submenu-toggle .arrow{
  display:inline-block;
  border:solid currentColor;
  border-width:0 2px 2px 0;
  padding:3px;
  transform:rotate(45deg);
  transition:transform .15s ease;
}
.main-navigation li.submenu-open > .submenu-toggle .arrow{transform:rotate(-135deg);}

/* -------------------------------------------------
   3. Mobile responsive
------------------------------------------------- */
@media (max-width:782px){
  /* Location, Phone, Email, and the Book Now button all wrap together in
     the same row-wrapping flow — nothing is forced onto its own separate
     line unless it genuinely doesn't fit the screen width. (Social icons
     are the one exception: .cf-topbar-right keeps them grouped with the
     booking button as one unit, so if that unit wraps, it wraps as a
     whole rather than letting individual icons scatter mid-row.) */
  .cf-topbar-inner{align-items:flex-start;justify-content:flex-start;padding:10px 16px;row-gap:6px;}
  .cf-topbar-contact{flex-wrap:wrap;row-gap:6px;column-gap:16px;}
  .cf-topbar-right{row-gap:6px;}

  /* Per-item mobile visibility (Customizer > Header Top Bar). "Hide the
     entire top bar" wins outright over all the individual toggles below
     it, since there's nothing left to selectively show once the whole
     bar is gone. */
  body.cf-topbar-mobile-hide-all .cf-topbar{display:none;}
  body.cf-topbar-mobile-hide-location .cf-topbar-item-location{display:none;}
  body.cf-topbar-mobile-hide-phone .cf-topbar-item-phone{display:none;}
  body.cf-topbar-mobile-hide-email .cf-topbar-item-email{display:none;}
  body.cf-topbar-mobile-hide-hours .cf-topbar-item-hours{display:none;}
  body.cf-topbar-mobile-hide-social .cf-topbar-social{display:none;}
  body.cf-topbar-mobile-hide-booking .cf-topbar-booking{display:none;}

  /* Logo Alignment (Mobile) — same technique as the desktop version
     above, independent setting, independent classes. */
  body.cf-logo-align-mobile-center .site-header-inner{position:relative;}
  body.cf-logo-align-mobile-center .site-branding{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
  }
  body.cf-logo-align-mobile-right .site-branding{order:3;}
  body.cf-logo-align-mobile-right .menu-toggle{order:1;}
  body.cf-logo-align-mobile-right .main-navigation{order:2;}

  .menu-toggle{display:inline-flex;flex-direction:column;align-items:center;}

  /* Overlay dropdown: taken out of the header's flex flow entirely via
     position:absolute, anchored to .site-header (already position:relative
     at all breakpoints). This is what makes it span the header's true full
     width and float over the page content below, instead of being sized
     down to whatever flex space was left over next to the logo/toggle
     button, and instead of pushing the banner/content down when opened.

     Always laid out (position:absolute at all times, not display:none),
     hidden via opacity+visibility instead — display can't be transitioned,
     so an effect-free instant toggle was the only option under the old
     display:none/block approach. visibility:hidden keeps it out of the tab
     order and screen-reader focus exactly like display:none did, just
     with room for the opacity/transform to animate in and out. The
     transition-delay on visibility avoids a hidden-but-interactive gap:
     it flips to hidden only after the fade-out finishes closing, and to
     visible immediately when opening. */
  .main-navigation{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    width:100%;
    max-height:80vh;
    overflow-y:auto;
    background:var(--cf-nav-mobile-bg);
    color:var(--cf-nav-mobile-text);
    box-shadow:0 16px 32px rgba(0,0,0,.18);
    padding:8px 20px;
    z-index:150;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-10px);
    transition:opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
  }
  .main-navigation.is-open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0);
    transition:opacity .25s ease, transform .25s ease, visibility 0s linear 0s;
  }
  .main-navigation a{color:var(--cf-nav-mobile-text);}

  /* Mobile Menu Effect (Customizer > Navigation Menu). The block above is
     effectively "Dropdown" already (fade + slide down from the top edge)
     — these override just the closed-state transform for the other
     choices. "None" additionally kills the transition for an instant
     toggle, matching how this worked before effects existed. */
  .main-navigation.cf-menu-effect-none{transition:none;}
  .main-navigation.cf-menu-effect-none.is-open{transition:none;}
  .main-navigation.cf-menu-effect-fade{transform:none;}
  .main-navigation.cf-menu-effect-fade.is-open{transform:none;}
  .main-navigation.cf-menu-effect-slide-right{transform:translateX(30px);}
  .main-navigation.cf-menu-effect-slide-right.is-open{transform:translateX(0);}
  .main-navigation.cf-menu-effect-slide-left{transform:translateX(-30px);}
  .main-navigation.cf-menu-effect-slide-left.is-open{transform:translateX(0);}
  .main-navigation.cf-menu-effect-zoom{transform:scale(.94);}
  .main-navigation.cf-menu-effect-zoom.is-open{transform:scale(1);}

  .site-header-inner{flex-wrap:wrap;}
  .main-navigation ul{flex-direction:column;gap:0;justify-content:flex-start !important;}
  .main-navigation ul li{border-bottom:1px solid rgba(128,128,128,.15);}
  .main-navigation ul li:last-child{border-bottom:0;}
  .has-sidebar .site-main-wrap{flex-direction:column;}
  .widget-area{flex:1 1 auto;width:100%;}

  /* Mobile submenu toggle buttons + collapsible submenus.
     This is the ONLY place display is set for .main-navigation ul ul at
     this breakpoint — a leftover duplicate rule used to sit above this
     block also setting display:block unconditionally, which fought with
     the closed/open rules below it. Consolidated into one definitive
     pair: closed by default, open only when the JS-toggled
     .submenu-open class is present. !important on both sides removes
     any remaining ambiguity about which rule wins. */
  .main-navigation .submenu-toggle{display:inline-flex;position:absolute;right:0;top:0;}
  .main-navigation li.menu-item-has-children > a{padding-right:44px;}
  .main-navigation ul ul{
    display:none !important;
    position:static;
    box-shadow:none;
    border:0;
    padding-left:12px;
  }
  .main-navigation li.submenu-open > ul{display:block !important;}
  .main-navigation ul ul a{font-size:var(--cf-submenu-font-size-mobile, 16px);}

  .cf-banner{height:calc(var(--cf-banner-height) * 0.65);min-height:180px;}

  /* Fixed pixel heading sizes (set in the Customizer for desktop) don't
     shrink on their own for narrow screens — a 140px H1 that's fine on
     desktop will overflow a 375px-wide phone. clamp() lets each heading
     scale down with the viewport while never exceeding the size actually
     configured, and never going below a legible floor. */
  h1{font-size:clamp(28px, 11vw, var(--cf-h1-size));}
  h2{font-size:clamp(24px, 9vw, var(--cf-h2-size));}
  h3{font-size:clamp(20px, 7.5vw, var(--cf-h3-size));}
  h4{font-size:clamp(18px, 6.5vw, var(--cf-h4-size));}
  h5{font-size:clamp(16px, 5.5vw, var(--cf-h5-size));}
  h6{font-size:clamp(14px, 5vw, var(--cf-h6-size));}
}

@media (max-width:480px){
  .cf-container{padding:0 16px;}
}

/* -------------------------------------------------
   4. Dark mode (Customizer > Dark Mode Toggle)
   Technique: invert the page's colors via a CSS filter, then re-invert
   photos/video/the banner back to normal so they don't look like photo
   negatives. This works with whatever colors are already set elsewhere in
   the Customizer, rather than needing a completely separate dark palette
   defined for every customizable color in the theme.

   The filter is applied to #page specifically — not html or body — which
   is what keeps the Site Background image (painted on the separate
   .cf-bg-layer element, a sibling of #page) out of the inversion
   entirely, since it was never inside the filtered element to begin with.
   The toggle button lives outside #page for the same reason, so it no
   longer needs a counter-invert either — it was never in the inverted
   region in the first place.
------------------------------------------------- */
html.cf-dark{
  background:var(--cf-dark-surface, #1c1c1e);
}
html.cf-dark #page{
  filter:invert(1) hue-rotate(180deg);
}
html.cf-dark img,
html.cf-dark video,
html.cf-dark svg,
html.cf-dark iframe,
html.cf-dark .cf-banner,
html.cf-dark #wpadminbar{
  filter:invert(1) hue-rotate(180deg);
}

.cf-darkmode-toggle{
  position:fixed;
  z-index:9999;
  width:52px;
  height:52px;
  border-radius:50%;
  background:var(--cf-darkmode-btn-bg, var(--cf-color-primary, #2563eb));
  color:var(--cf-darkmode-btn-icon, #ffffff);
  border:0;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 4px 16px rgba(0,0,0,.25);
  transition:transform .15s ease;
}
.cf-darkmode-toggle:hover{transform:scale(1.06);}
.cf-darkmode-toggle .cf-darkmode-icon{width:24px;height:24px;fill:currentColor;}
.cf-darkmode-toggle .cf-darkmode-icon-sun{display:none;}
html.cf-dark .cf-darkmode-toggle .cf-darkmode-icon-moon{display:none;}
html.cf-dark .cf-darkmode-toggle .cf-darkmode-icon-sun{display:block;}

.cf-darkmode-position-bottom-right{bottom:24px;right:24px;}
.cf-darkmode-position-bottom-left{bottom:24px;left:24px;}
.cf-darkmode-position-top-right{top:24px;right:24px;}
.cf-darkmode-position-top-left{top:24px;left:24px;}

@media (max-width:782px){
  .cf-darkmode-toggle{width:46px;height:46px;}
  .cf-darkmode-toggle.cf-darkmode-position-bottom-right,
  .cf-darkmode-toggle.cf-darkmode-position-bottom-left{bottom:16px;}
  .cf-darkmode-toggle.cf-darkmode-position-top-right,
  .cf-darkmode-toggle.cf-darkmode-position-top-left{top:16px;}
  .cf-darkmode-toggle.cf-darkmode-position-bottom-right,
  .cf-darkmode-toggle.cf-darkmode-position-top-right{right:16px;}
  .cf-darkmode-toggle.cf-darkmode-position-bottom-left,
  .cf-darkmode-toggle.cf-darkmode-position-top-left{left:16px;}
}