/*
Theme Name: Empty Classic Menu Theme
Theme URI: https://example.com/
Author: You
Author URI: https://example.com/
Description: Minimal starter theme with classic (old-style) WordPress menus.
Version: 1.0.99
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: empty-classic-menu-theme
*/

/* Basic layout */
body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; line-height: 1.5; }
.site-header { padding: 14px 22px; border-bottom: 1px solid rgba(0,0,0,.12); }
.site-title a { text-decoration: none; color: inherit; font-weight: 600; }
.site-main { padding: 22px; max-width: 960px; margin: 0 auto; }
.site-footer { padding: 14px 22px; border-top: 1px solid rgba(0,0,0,.12); }

/* "Old style" classic menu (ul/li) */
.site-nav { margin-top: 10px; }
.site-nav ul.menu,
.site-nav ul { /* covers wp_nav_menu + wp_page_menu fallbacks */
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav ul.menu > li,
.site-nav ul > li {
  display: inline-block;
  position: relative;
  margin-right: 14px;
}

.site-nav a {
  display: inline-block;
  padding: 6px 8px;
  text-decoration: none;
  color: inherit;
  border-radius: 4px;
}

.site-nav a:hover,
.site-nav .current-menu-item > a,
.site-nav .current_page_item > a {
  background: rgba(0,0,0,.07);
}

/* Dropdowns */
.site-nav ul ul {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  min-width: 200px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.12);
  padding: 6px 0;
  z-index: 999;
}

.site-nav ul ul li {
  display: block;
  margin: 0;
}

.site-nav ul ul a {
  display: block;
  padding: 8px 10px;
  border-radius: 0;
}

.site-nav li:hover > ul {
  display: block;
}

/* Small screens: stack menu items */
@media (max-width: 640px) {
  .site-nav ul.menu > li,
  .site-nav ul > li {
    display: block;
    margin: 6px 0;
  }
  .site-nav ul ul {
    position: static;
    border: 0;
    padding: 0;
  }
  .site-nav li:hover > ul { display: block; }
}

/* Video width control */
.wp-block-video.is-style-constrained video,
.wp-block-embed.is-style-constrained iframe {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.wp-block-video.is-style-fullwidth video,
.wp-block-embed.is-style-fullwidth iframe,
.wp-block-video.alignfull,
.wp-block-embed.alignfull {
  max-width: none;
  width: 100%;
}


/* ===== True edge-to-edge for Gutenberg alignfull =====
   This makes blocks with .alignfull span the full viewport width,
   even inside the centered .site-main container.
*/
body { overflow-x: hidden; }

/* Make alignfull break out of centered container */
.site-main .alignfull,
.site-main .wp-block-video.alignfull,
.site-main .wp-block-embed.alignfull,
.site-main .wp-block-cover.alignfull,
.site-main .wp-block-image.alignfull,
.site-main .wp-block-group.alignfull {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Keep inner media stretching */
.site-main .alignfull video,
.site-main .alignfull iframe,
.site-main .alignfull img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
}

/* Optional: a "wide" alignment (not full width) */
.site-main .alignwide {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* Header top row (logo left, phone right) */
.header-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.header-logo .custom-logo{ max-height: 60px; width:auto; display:block; }
.header-logo a.site-title{ font-weight:600; text-decoration:none; color:inherit; }
.header-phone a{ text-decoration:none; color:inherit; opacity:0.9; }
.header-phone a:hover{ text-decoration:underline; }

/* Nav alignment controls */
.site-nav.nav-align-left ul.menu { text-align:left; }
.site-nav.nav-align-center ul.menu { text-align:center; }
.site-nav.nav-align-right ul.menu { text-align:right; }

/* Ensure inline-block items respect text-align */
.site-nav ul.menu > li { float:none; } /* keep classic inline-block behavior */

/* Legal links in footer */
.legal-nav { margin-bottom: 10px; }
.legal-links{
  list-style:none;
  margin:0 0 10px 0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.legal-links a{
  text-decoration:none;
  color:inherit;
  opacity:0.9;
}
.legal-links a:hover{ text-decoration:underline; }

/* ===== Logo style options ===== */
.header-logo img.custom-logo{
  max-width: var(--logo-max-width, 180px);
  height: auto;
}

/* Alignment */
.header-logo-align-left { text-align: left; }
.header-logo-align-center { text-align: center; }
.header-logo-align-right { text-align: right; }

/* Logo opacity (0..1) */
.header-logo img.custom-logo{
  opacity: var(--logo-opacity, 1);
}

/* ===== Sticky header ===== */
.has-sticky-header .site-header{
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #fff;
  /* subtle separation when sticking */
  box-shadow: 0 1px 0 rgba(0,0,0,.10);
}

/* Footer menu */
.footer-nav { margin-bottom: 10px; }
.footer-menu{
  list-style:none;
  margin:0 0 10px 0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.footer-menu a{
  text-decoration:none;
  color:inherit;
  opacity:0.9;
}
.footer-menu a:hover{ text-decoration:underline; }

/* ===== Sticky footer =====
   If enabled, footer is fixed to bottom. Adds padding so content isn't hidden.
*/
.has-sticky-footer .site-footer{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  background: #fff;
  box-shadow: 0 -1px 0 rgba(0,0,0,.10);
}

.has-sticky-footer .site-main{
  padding-bottom: 120px; /* simple safe space; adjust if footer grows */
}

/* Footer menu alignment */
.footer-nav.footer-align-left .footer-menu { justify-content: flex-start; text-align: left; }
.footer-nav.footer-align-center .footer-menu { justify-content: center; text-align: center; }
.footer-nav.footer-align-right .footer-menu { justify-content: flex-end; text-align: right; }

/* ===== Hamburger menu (mobile) ===== */
.menu-toggle{
  display:none;
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(0,0,0,.12);
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
}

.menu-toggle-bars{
  width: 22px;
  height: 14px;
  display:inline-block;
  position: relative;
}
.menu-toggle-bars::before,
.menu-toggle-bars::after,
.menu-toggle-bars{
  background: currentColor;
}
.menu-toggle-bars{
  background: currentColor;
  height: 2px;
  top: 6px;
}
.menu-toggle-bars::before,
.menu-toggle-bars::after{
  content:"";
  position:absolute;
  left:0;
  width:22px;
  height:2px;
}
.menu-toggle-bars::before{ top:-6px; }
.menu-toggle-bars::after{ top:6px; }

/* Mobile behavior */
@media (max-width: 640px){
  .menu-toggle{ display:inline-flex; align-items:center; gap:10px; }

  /* Hide nav by default on mobile */
  .site-nav ul.menu{ display:none; }
  .site-header.is-menu-open .site-nav ul.menu{ display:block; }

  /* Make stacked menu */
  .site-nav ul.menu > li{ display:block; margin: 6px 0; }
  .site-nav ul ul{ position: static; border: 0; padding: 0; display:block; } /* keep submenus readable */
}

/* ===== Responsive header layout (logo + hamburger row, phone on 2nd line on mobile) ===== */
.header-top{
  flex-wrap: wrap;
}

/* Put logo and hamburger on the first row */
.header-logo{ flex: 1 1 auto; min-width: 160px; }
.header-actions{ flex: 0 0 auto; display:flex; align-items:center; justify-content:flex-end; }

/* Phone can wrap to next line when needed */
.header-phone{ flex: 1 1 100%; margin-top: 6px; text-align: right; }

/* Make logo adapt on small screens */
.header-logo img.custom-logo{
  max-width: min(var(--logo-max-width, 180px), 70vw);
}

/* Mobile behavior */
@media (max-width: 640px){
  /* Keep header sticky if enabled; phone goes to 2nd line */
  .header-top{ row-gap: 6px; }
  .header-phone{ text-align: left; } /* nicer on mobile */
  .header-logo img.custom-logo{
    max-width: min(var(--logo-max-width, 180px), 60vw);
  }

  /* Hamburger sits next to logo (same row) */
  .menu-toggle{ margin-top: 0; }
}


/* ===== Header phone positioning ===== */
/* Desktop & tablet: phone stays on first line */
.header-phone{
  flex: 0 0 auto;
  margin-top: 0;
  align-self: center;
}

/* Mobile: phone moves to second line */
@media (max-width: 640px){
  .header-phone{
    flex: 1 1 100%;
    margin-top: 6px;
    order: 3;
  }
}

/* Snow overlay canvas */
#empty-cmt-snow-canvas{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9999; /* above sticky header/footer */
}

/* Background colors from Customizer */
.site-header{ background: var(--header-bg, #ffffff); }
.site-footer{ background: var(--footer-bg, #ffffff); }
body{ background: var(--page-bg, #ffffff); }

/* ===== Theme color variables ===== */
body{
  background-color: var(--page-bg, #ffffff);
  background-image: var(--page-bg-image, none);
  background-attachment: fixed;
}

.site-header{
  background-color: var(--header-bg, #ffffff);
  background-image: var(--header-bg-image, none);
  color: var(--header-fg, #111111);
}
.site-header a{ color: inherit; }

.site-footer{
  background-color: var(--footer-bg, #ffffff);
  background-image: var(--footer-bg-image, none);
  color: var(--footer-fg, #111111);
}
.site-footer a{ color: inherit; }

/* Transparent header overlay on selected pages */
.has-transparent-header .site-header{
  background-color: transparent;
  background-image: none;
  box-shadow: none;
}

/* When sticky + transparent: turn solid after scroll */
.has-transparent-header.has-sticky-header.is-scrolled .site-header{
  background-color: var(--header-bg-solid, #ffffff);
  background-image: var(--header-bg-image, none);
  box-shadow: 0 1px 0 rgba(0,0,0,.10);
}


/* ===== Header background fix =====
   Ensure the selected header background applies to the whole header area
   (top row + nav), not just the navigation bar.
*/
.site-header{
  background-color: var(--header-bg, #ffffff);
  background-image: var(--header-bg-image, none);
}

/* Make inner sections inherit the header background */
.site-header .header-top,
.site-header .site-nav{
  background: transparent; /* inherits from .site-header */
}

/* If something sets a background on the nav, force it to be transparent */
.site-header .site-nav{
  background-color: transparent !important;
  background-image: none !important;
}


/* ===== Footer background fix =====
   Ensure the selected footer background applies to the whole footer area
   (menu + copyright), not just inner elements.
*/
.site-footer{
  background-color: var(--footer-bg, #ffffff);
  background-image: var(--footer-bg-image, none);
}

/* Make inner footer elements inherit the footer background */
.site-footer .footer-nav,
.site-footer .footer-menu,
.site-footer small{
  background: transparent;
}

/* Guard against any inner background overrides */
.site-footer *{
  background-color: transparent;
  background-image: none;
}


/* Mobile: remove box around hamburger button */
@media (max-width: 640px){
  .menu-toggle{
    border: 0;
    background: transparent;
    border-radius: 0;
    padding: 6px 6px;
  }
}


/* ===== Mobile hamburger: absolutely no box ===== */
@media (max-width: 640px){
  .menu-toggle,
  .menu-toggle:focus,
  .menu-toggle:active{
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    border-radius: 0 !important;
  }

  .header-actions{
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
  }
}


/* ===== Touch devices: remove any default button styling for hamburger =====
   Targets phones/tablets reliably (regardless of CSS pixel width).
*/
@media (hover: none) and (pointer: coarse){
  .menu-toggle{
    -webkit-appearance: none !important;
    appearance: none !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    border-radius: 0 !important;
  }
  .menu-toggle:focus,
  .menu-toggle:active{
    outline: none !important;
    box-shadow: none !important;
  }
}

/* Extra safety: if any rule adds a border radius/box on small screens */
@media (max-width: 1024px){
  .menu-toggle{
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }
}

/* ===== Sticky footer: hide when virtual keyboard is open (mobile) ===== */
body.keyboard-open.has-sticky-footer .site-footer{
  display: none !important;
}
body.keyboard-open.has-sticky-footer .site-main{
  padding-bottom: 0 !important;
}

/* Sticky footer disabled on mobile (smartphones) */
.no-sticky-footer-mobile.has-sticky-footer .site-footer{
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  box-shadow: none !important;
}
.no-sticky-footer-mobile.has-sticky-footer .site-main{
  padding-bottom: 0 !important;
}

/* ===== Page body background image (content area only) ===== */
.site-main{
  position: relative;
}
.site-main::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--page-body-bg-image, none);
  background-size: var(--page-body-bg-size, cover);
  background-repeat: var(--page-body-bg-repeat, no-repeat);
  background-position: var(--page-body-bg-position, center center);
  background-attachment: var(--page-body-bg-attachment, scroll);
  opacity: var(--page-body-bg-opacity, 1);
  pointer-events: none;
  z-index: 0;
}
.site-main > *{
  position: relative;
  z-index: 1;
}


/* ===== Full-width video/embed block styles ===== */
/* Make the block itself break out to the viewport width */
.site-main .wp-block-video.is-style-fullwidth,
.site-main .wp-block-embed.is-style-fullwidth,
.site-main .wp-block-group.is-style-fullwidth {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Ensure video/iframes fill their wrappers */
.site-main .wp-block-video video,
.site-main .wp-block-embed iframe,
.site-main .wp-block-embed__wrapper iframe,
.site-main video {
  width: 100% !important;
  max-width: 100% !important;
  height: auto;
  display: block;
}

/* Responsive aspect ratio for embed wrappers (when applicable) */
.site-main .wp-block-embed__wrapper {
  max-width: 100%;
}

/* Constrained style: keep it centered with a max width */
.site-main .wp-block-video.is-style-constrained video,
.site-main .wp-block-embed.is-style-constrained iframe {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

/* Override any constrained defaults when fullwidth is selected */
.site-main .wp-block-video.is-style-fullwidth video,
.site-main .wp-block-embed.is-style-fullwidth iframe {
  max-width: none !important;
}


/* ===== Homepage: force videos/embeds to full viewport width =====
   Applies to both "Posts page" (home) and a static front page (front-page).
*/
body.home .site-main .wp-block-video,
body.home .site-main .wp-block-embed,
body.front-page .site-main .wp-block-video,
body.front-page .site-main .wp-block-embed{
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

body.home .site-main .wp-block-video video,
body.home .site-main .wp-block-embed iframe,
body.home .site-main .wp-block-embed__wrapper iframe,
body.front-page .site-main .wp-block-video video,
body.front-page .site-main .wp-block-embed iframe,
body.front-page .site-main .wp-block-embed__wrapper iframe{
  width: 100% !important;
  max-width: none !important;
  display: block;
  height: auto;
}

/* ===== Homepage video fit helpers ===== */
body.home .site-main .wp-block-video,
body.front-page .site-main .wp-block-video,
body.home .site-main .wp-block-embed,
body.front-page .site-main .wp-block-embed{
  /* allow JS to set a smaller width if needed */
  margin-left: auto;
  margin-right: auto;
}

body.home .site-main .wp-block-video video,
body.front-page .site-main .wp-block-video video{
  object-fit: cover;
}


/* If JS sets an inline width, override the homepage fullwidth rule */
body.home .site-main .wp-block-video[style*="width:"],
body.home .site-main .wp-block-embed[style*="width:"],
body.front-page .site-main .wp-block-video[style*="width:"],
body.front-page .site-main .wp-block-embed[style*="width:"]{
  width: auto !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}


/* ===== Homepage smart-fit video width (height-aware) ===== */
body.home .site-main .wp-block-video,
body.home .site-main .wp-block-embed,
body.front-page .site-main .wp-block-video,
body.front-page .site-main .wp-block-embed{
  /* Break out to viewport and then cap by computed fit width */
  width: min(100vw, var(--home-video-fit-width, 100vw)) !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

/* Center the media inside the breakout area when width is reduced */
body.home .site-main .wp-block-video.is-home-video-fitted,
body.home .site-main .wp-block-embed.is-home-video-fitted,
body.front-page .site-main .wp-block-video.is-home-video-fitted,
body.front-page .site-main .wp-block-embed.is-home-video-fitted{
  display: flex;
  justify-content: center;
}

body.home .site-main .wp-block-video.is-home-video-fitted video,
body.front-page .site-main .wp-block-video.is-home-video-fitted video{
  width: 100% !important;
  height: auto;
  object-fit: cover;
  display: block;
}

body.home .site-main .wp-block-embed.is-home-video-fitted iframe,
body.front-page .site-main .wp-block-embed.is-home-video-fitted iframe{
  width: 100% !important;
  display: block;
}



/* For embeds, keep a sensible aspect ratio so browsers can size the iframe well */
body.home .site-main iframe,
body.front-page .site-main iframe{
  aspect-ratio: 16 / 9;
}

/* When the block is forced full-width, center its contents */
body.home .site-main .wp-block-video,
body.home .site-main .wp-block-embed,
body.front-page .site-main .wp-block-video,
body.front-page .site-main .wp-block-embed{
  display: flex;
  justify-content: center;
}



/* Ensure the actual media fills the block when in fullwidth mode */
body.home .site-main .wp-block-video video,
body.front-page .site-main .wp-block-video video,
body.home .site-main .wp-block-embed iframe,
body.front-page .site-main .wp-block-embed iframe{
  width: 100% !important;
  max-width: 100% !important;
  height: auto;
  display: block;
}

/* If height is limiting, JS adds .cmt-fit-by-height and sets --cmt-fit-w */
body.home .site-main .wp-block-video.cmt-fit-by-height,
body.front-page .site-main .wp-block-video.cmt-fit-by-height,
body.home .site-main .wp-block-embed.cmt-fit-by-height,
body.front-page .site-main .wp-block-embed.cmt-fit-by-height{
  width: var(--cmt-fit-w, 100vw) !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* When fitting by height, cap height so the entire video remains visible */
body.home .site-main .wp-block-video.cmt-fit-by-height video,
body.front-page .site-main .wp-block-video.cmt-fit-by-height video,
body.home .site-main .wp-block-embed.cmt-fit-by-height iframe,
body.front-page .site-main .wp-block-embed.cmt-fit-by-height iframe{
  max-height: calc(100vh - 20px) !important; /* extra safety; JS already computed fit */
  width: 100% !important;
  height: auto !important;
  object-fit: cover;
}


/* ===== Homepage hero video: always full width, but capped by available height =====
   Keeps the video edge-to-edge even on very wide screens.
   If height is limited (sticky header/footer, small viewport), we letterbox (contain) instead of shrinking width.
*/
body.home .site-main .wp-block-video,
body.front-page .site-main .wp-block-video,
body.home .site-main .wp-block-embed,
body.front-page .site-main .wp-block-embed{
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

/* Video block: cap height and let the video scale inside without cropping */
body.home .site-main .wp-block-video,
body.front-page .site-main .wp-block-video{
  max-height: var(--cmt-available-h, 80vh);
  overflow: hidden;
}

body.home .site-main .wp-block-video video,
body.front-page .site-main .wp-block-video video{
  width: 100% !important;
  height: 100% !important;
  max-height: var(--cmt-available-h, 80vh) !important;
  object-fit: cover;
  display: block;
}

/* Embed block (iframe): keep full width, cap height, contain via wrapper */
body.home .site-main .wp-block-embed,
body.front-page .site-main .wp-block-embed{
  max-height: var(--cmt-available-h, 80vh);
  overflow: hidden;
}

body.home .site-main .wp-block-embed iframe,
body.front-page .site-main .wp-block-embed iframe{
  width: 100% !important;
  height: var(--cmt-available-h, 80vh) !important;
  max-height: var(--cmt-available-h, 80vh) !important;
  display: block;
}