/*
Theme Name: Dixon Massage Template
Author: You
Version: 2.4
Description: Centered-stack theme with banner + overlapping menu, repeating background, and full Customizer controls (sliders + number boxes).
*/

:root{
  /* Layout */
  --wrap: 980px;
  --pageMarginTop: 24px;
  --pageMarginBottom: 24px;
  --menuOverlap: 22px;
  --menuHeight: 44px;
  --menuRadius: 3px;
  --panelRadius: 3px;
  --footerRadius: 3px;
  --dropdownRadius: 3px;

  --panelMarginTop: 14px;
  --footerMarginTop: 18px;

  --panelPaddingV: 20px;
  --panelPaddingH: 22px;

  /* Menu spacing + type */
  --menuPadY: 12px;
  --menuPadX: 16px;
  --menuFontSize: 14px;
  --dropdownMinWidth: 220px;
  --menuJustify: flex-start;      /* flex-start | center | flex-end */
  --menuFill: 0;                 /* 0 or 1 */
  --menuBarWidthPct: 100;        /* 50-100 */
  --submenuBg: rgba(63,86,96,1);
  --submenuGap: 0px;
  --submenuDividerWidth: 0px;
  --submenuDividerColor: rgba(255,255,255,.18);
  --submenuToggleEnabled: 1;
  --mobileMenuEnabled: 0;
  --bodyFont: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  --bodyFontSize: 16px;
  --bodyLineHeight: 1.6;
  --bodyTextColor: #222222;
  --bodyLinkColor: #0b5cab;
  --bodyLinkHoverColor: #084b8a;
  --headingFont: inherit;
  --headingColor: #111111;
  --h1Size: 32px;
  --h2Size: 26px;
  --h3Size: 22px;
  --bodyGapBelow: 0px;
  --imgRadius: 0px;
  --footerFont: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  --footerFontSize: 14px;
  --footerLineHeight: 1.4;
  --footerTextColor: #222222;
  --footerAlign: left;
  --footerPadV: 10px;
  --footerPadH: 14px;
  --footerGapAbove: 0px;

  /* Colors */
  --menuBg: #3f5660;
  --menuText: #ffffff;
  --menuHoverBg: rgba(255,255,255,.12);

  --panelBg: rgba(255,255,255,.92);
  --footerBg: rgba(255,255,255,.92);

  /* Shadows */
  --shadowMenu: none;
  --shadowPanel: none;
  --shadowDropdown: none;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family: Arial, Helvetica, sans-serif;
  /* background is controlled by the Customizer; defaults fallback to theme image */
  background: url("images/bg.png") repeat;
}

/* Centered stack */
.site-wrap{
  width: min(var(--wrap), calc(100% - 24px));
  margin: var(--pageMarginTop) auto var(--pageMarginBottom);
}

/* Header / banner */
.site-header{ position: relative; }

/* Banner image container */
.site-banner{
  width: 100%;
  line-height: 0;
  display: block;
}

.site-banner img{
  width: 100%;
  height: auto;
  display:block;
  border: 0;
}

/* Menu overlaps the bottom of the banner */
.main-nav{
  position: relative;
  margin-top: calc(var(--menuOverlap) * -1);
  z-index: 10;
}

/* Menu bar */
.main-nav .menu{
  list-style: none;
  margin: 0;
  padding: 0;
  min-height: var(--menuHeight);
  display: flex;
  gap: 0;
  background: var(--submenuBg);
  border-radius: var(--dropdownRadius);
  box-shadow: var(--shadowMenu);
}

.main-nav .menu > li{ position: relative; }

.main-nav .menu > li > a{
  display:block;
  padding: var(--menuPadY) var(--menuPadX);
  color: var(--menuText);
  text-decoration:none;
  font-size: var(--menuFontSize);
  white-space: nowrap;
}

.main-nav .menu > li:hover > a,
.main-nav .menu > li:focus-within > a{
  background: var(--menuHoverBg);
}

/* Dropdown */
.main-nav .menu li ul{
  display:none;
  position:absolute;
  top: calc(100% + var(--submenuGap));
  left: 0;
  min-width: var(--dropdownMinWidth);
  margin: 0;
  padding: 6px 0;
  list-style:none;
  background: var(--menuBg);
  border-radius: var(--dropdownRadius);
  box-shadow: var(--shadowDropdown);
}

.main-nav .menu li:hover > ul,
.main-nav .menu li:focus-within > ul{
  display:block;
}

.main-nav .menu li ul li a{
  display:block;
  padding: 10px 14px;
  color: var(--menuText);
  text-decoration:none;
  font-size: var(--menuFontSize);
}

.main-nav .menu li ul li a:hover{ background: var(--menuHoverBg); }

/* Content panel (this is the BODY area for each page/post) */
.content-panel{
  font-family: var(--bodyFont);
  font-size: var(--bodyFontSize);
  line-height: var(--bodyLineHeight);
  color: var(--bodyTextColor);

  background: var(--panelBg);
  margin-top: var(--panelMarginTop);
  padding: var(--panelPaddingV) var(--panelPaddingH);
  border-radius: var(--panelRadius);
  box-shadow: var(--shadowPanel);

  margin-bottom: var(--bodyGapBelow);
}

.content-panel h1, .content-panel h2, .content-panel h3{ margin-top: 0; }

/* Footer */
.site-footer{
  font-family: var(--footerFont);
  font-size: var(--footerFontSize);
  line-height: var(--footerLineHeight);
  color: var(--footerTextColor);
  text-align: var(--footerAlign);
  padding: var(--footerPadV) var(--footerPadH);

  margin-top: var(--footerGapAbove);
  background: var(--footerBg);
  padding: 14px 22px;
  border-radius: var(--footerRadius);
  box-shadow: var(--shadowPanel);
  font-size: 13px;
}

/* Mobile */
@media (max-width: 720px){
  .main-nav .menu{ flex-wrap: wrap; }
  .main-nav .menu li ul{ position: static; box-shadow: none; border-radius: 0; }
}


/* If enabled, make top-level menu items stretch evenly across the bar */
.main-nav .menu > li{
  flex: calc(var(--menuFill)) 0 auto;
}
.main-nav .menu > li > a{
  text-align: center;
}


/* Submenu toggle buttons (for touch/mobile) */
.main-nav .submenu-toggle{
  background: transparent;
  border: 0;
  color: var(--menuText);
  cursor: pointer;
  padding: var(--menuPadY) 10px;
  font-size: var(--menuFontSize);
  line-height: 1;
}

.main-nav .menu > li{
  display: flex;
  align-items: stretch;
}
.main-nav .menu > li > a{
  flex: 1 1 auto;
}

/* Open state for touch */
.main-nav .menu li.dmt-open > ul{
  display:block;
}


/* Mobile menu toggle (hamburger) */
.dmt-menu-toggle{
  display: none;
  width: 100%;
  background: var(--menuBg);
  color: var(--menuText);
  border: 0;
  padding: 12px 14px;
  font-size: var(--menuFontSize);
  border-radius: var(--menuRadius);
  box-shadow: var(--shadowMenu);
  cursor: pointer;
}
.dmt-menu-toggle .dmt-burger{
  display:inline-block;
  margin-right: 10px;
  font-weight: 700;
}

/* Mobile mode: show hamburger, hide horizontal menu until opened */
@media (max-width: 720px){
  /* Only if enabled via CSS var */
  .main-nav[data-mobile-menu="1"] .dmt-menu-toggle{
    display: block;
  }
  .main-nav[data-mobile-menu="1"] .menu{
    display: none;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    border-radius: var(--menuRadius);
  }
  .main-nav[data-mobile-menu="1"].dmt-mobile-open .menu{
    display: flex;
  }
  .main-nav[data-mobile-menu="1"] .menu > li{
    display: block;
    flex: 0 0 auto;
  }
  .main-nav[data-mobile-menu="1"] .menu > li > a{
    text-align: left;
    width: 100%;
  }
  /* Submenus in mobile: stack under parent */
  .main-nav[data-mobile-menu="1"] .menu li ul{
    position: static;
    min-width: 100%;
    border-radius: var(--dropdownRadius);
    box-shadow: var(--shadowDropdown);
  }
}

/* Body typography controls (content area only) */
.content-panel a{ color: var(--bodyLinkColor); }
.content-panel a:hover{ color: var(--bodyLinkHoverColor); }

.content-panel h1,
.content-panel h2,
.content-panel h3,
.content-panel h4,
.content-panel h5,
.content-panel h6{
  font-family: var(--headingFont);
  color: var(--headingColor);
  margin-top: 0.6em;
  margin-bottom: 0.35em;
}
.content-panel h1{ font-size: var(--h1Size); }
.content-panel h2{ font-size: var(--h2Size); }
.content-panel h3{ font-size: var(--h3Size); }

/* Remove bottom margin from last element in body content to avoid phantom gap */
.content-panel > *:last-child{
  margin-bottom: 0 !important;
}


/* Global image rounded corners (content area only) */
.content-panel img{
  border-radius: var(--imgRadius);
}