/*
Theme Name: Swiss Theme
Theme URI: http://rocquett.com
Author: Delwin Holeman
Author URI: http://rocquett.com
Description: Swiss Theme 4.0 is a Full Site Editing WordPress theme, created for Client Name. For assistance contact <a href="https://rocquett.com">Rocquett Websites</a> | 706-338-1464 | <a href="mailto:service@rocquett.com">service@rocquett.com</a>
Version: 4.0

Based on Rocquett Swiss Theme

***NOTE*** See /wp-content/themes/swisstheme/readme.txt for full css and theme notes.

*/

/* Structure: base (mobile) styles first, then min-width breakpoints in ascending order
 * (tablet, desktop). Max-width overrides that cannot be inverted without duplicating
 * desktop values set elsewhere (block settings, WordPress layout CSS, Max Mega Menu)
 * are grouped at the end.
 * ============================================================================== */

/* ==============================================================================
   BASE
   ============================================================================== */

:root {
  /* Shared initial header height and banner overlap; adjust per project. */
  --swiss-header-height: 90px;
  --outline-button-color-light: #fff;
  --outline-button-color-dark: #000;
}

/*  Smooth Scroll */
html {
  scroll-behavior: smooth;
}

/*  Reduced motion prefs  */
@media screen and (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

[id] {
  scroll-margin-top: var(--swiss-header-height);
}

/* IMPORTANT NOTE TO OVERRIDE WP FSE SPECIFICITY INSIDE NORMAL TAGS
/* :root :where(.wp-block-paragraph) {
    font-size: 1.15rem;
    line-height: 1.6;
} */

/* ==============================================================================
   BLOCKS
   ============================================================================== */

/* Headings wrap naturally by default. Balancing is an opt-in block style. */
:where(h1, h2, h3, h4, h5, h6) {
  text-wrap: wrap;
}

/* Select Balanced in the Heading block's Styles, or add is-style-balanced. */
:is(h1, h2, h3, h4, h5, h6).is-style-balanced {
  text-wrap: balance;
}

/* I've no idea why when you add a background color to a column, WP by default adds padding to it... so weird - this get's rid of that */
:where(.wp-block-columns.has-background) {
  padding: initial;
}

/* Pull Quote */
.wp-block-pullquote blockquote {
  display: grid;
  gap: 20px;
}

.wp-block-pullquote cite {
  font-size: 80%;
  font-weight: 600;
}

/* Search Block */
.wp-block-search__input {
  border: 1px solid;
}

.wp-block-search__button {
  box-shadow: none;
  border: 1px solid var(--wp--preset--color--charcoal);
  border-radius: 0;
  color: white;
  padding: 0.4rem 1rem 0.5rem 1rem;
  font-weight: 500;
}

/* Keeps our titles link as the off black color in things like the query loop*/
.wp-block-post-title :where(a) {
  color: var(--wp--preset--color--charcoal);
}

.wp-block-image.size-full {
  line-height: 1;
}

.wp-block-query .wp-block-group {
  border: none !important;
}

/* Apply a smooth transition effect to all core WordPress buttons */
.wp-block-button__link {
  transition: all 0.2s ease-in-out;
}

.is-style-outline .wp-block-button__link {
  position: relative;
  background-color: transparent !important;
  border: 2px solid var(--outline-button-color-light);
  color: var(--outline-button-color-light) !important;
  overflow: hidden;
  z-index: 1;
  transition:
    color 0.3s ease,
    border-color 0.3s ease;
}

.is-style-outline .wp-block-button__link::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 2px solid var(--outline-button-color-light);
  background-color: var(
    --outline-button-color-light
  ); /* Fills with original color (White) */
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.is-style-outline .wp-block-button__link:hover {
  color: var(--outline-button-color-dark) !important;
  border-color: var(--outline-button-color-light) !important;
  box-shadow: inset 0 0 0 2px var(--outline-button-color-light) !important;
}

.is-style-outline .wp-block-button__link:hover::before {
  opacity: 1;
}

.wp-block-buttons.buttons-margintop-auto {
  margin-top: auto !important;
}

/* HOVER STATE FOR COVER BLOCK */

/* Target the inner overlay background and ensure smooth transition */
.hover-cover-overlay .wp-block-cover__background {
  transition:
    opacity 0.3s ease-in-out,
    background-color 0.3s ease-in-out;
}

/* Force a higher opacity level on hover */
.hover-cover-overlay:hover .wp-block-cover__background {
  opacity: 0.8 !important; /* Forces 90% opacity (darker than your original 70) */
}

/* Home three-column cover cards: same subtle zoom as the team grid portraits (team-grid.css). */
.wp-block-cover.greyscale-element .wp-block-cover__image-background {
  transition: transform 0.4s ease;
}

.wp-block-cover.greyscale-element:hover .wp-block-cover__image-background,
.wp-block-cover.greyscale-element:focus-within
  .wp-block-cover__image-background {
  transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
  .wp-block-cover.greyscale-element .wp-block-cover__image-background {
    transition: none;
  }

  .wp-block-cover.greyscale-element:hover .wp-block-cover__image-background,
  .wp-block-cover.greyscale-element:focus-within
    .wp-block-cover__image-background {
    transform: none;
  }
}

/* THREE COLUMN COVER */
/* Fixes the class name to target the true background image */
/* .greyscale-element img.wp-block-cover__image-background {
  filter: grayscale(100%) !important;
  -webkit-filter: grayscale(100%) !important;
} */

.wp-block-group.custom-edge-gradient {
  color: #fff;
  background: linear-gradient(to right, #163e64 0%, #163e64 100%);
}

/* ==============================================================================
   HEADER & NAVIGATION
   ============================================================================== */

header {
  position: relative; /* MIght need to be removed for Sticky Header */
  z-index: 9;
}

header.wp-block-template-part,
.wp-block-template-part[data-slug="header"] > * {
  margin-block-start: 0 !important;
}

/* HEADER HEIGHT */

/* .header-height {
  height: 100px;
} */

header.wp-block-template-part .header-height {
  height: var(--swiss-header-height);
  min-height: var(--swiss-header-height);
  max-height: var(--swiss-header-height);
  box-sizing: border-box;
}

/* Optional: Clean up alignment for the inner elements */
/* header.wp-block-template-part > .wp-block-group {
    height: 100%;
    align-items: center;
} */

/*  Navigation Block Breakpoint (mobile state; see 782px below). Credit: https://wpdocs.io/ */
body .wp-block-navigation__responsive-container-open:not(.always-shown) {
  display: block !important;
}

body
  .wp-block-navigation__responsive-container:not(.hidden-by-default):not(
    .is-menu-open
  ) {
  display: none !important;
}

/* LOGO and NAV / FOR ABOVE TOPNAV */
.mega-menu-wrap {
  margin-left: auto !important; /* Pushes the menu to the far right side */
  z-index: 9;
}

.header-transparent-centered .mega-menu-wrap {
  margin-left: 0 !important; /* Pushes the menu to the far right side */
}

/* In the block editor the Mega Menu location block is wrapped in
   .wp-block-maxmegamenu-location, which becomes the header row's flex child
   (the front end uses the bare .mega-menu-wrap).  */

.above-header .wp-block-maxmegamenu-location {
  margin-left: auto !important;
  z-index: 999;
}

.header-transparent-centered .wp-block-maxmegamenu-location {
  flex: 0 1 auto;
  min-width: 0;
}

.editor-styles-wrapper .header-transparent-centered .header-height {
  flex-wrap: nowrap;
}

/* HEADER NAV */

#mega-menu-wrap-max_mega_menu_1.mega-menu-wrap
  li.mega-menu-item
  > ul.mega-sub-menu {
  border-top: 11px solid transparent !important;
  background-clip: padding-box !important;
  margin-top: 0 !important;
}

/* Previously split across the min-width: 782px and max-width: 1260px queries,
   which together cover every width. */
.nav-mobile-cta-button {
  background-color: #d40027 !important;
}

/* Pages with no banner for the transparent header to float on (search results, the Privacy
   Policy page) get the same solid background as single team member pages (team-grid.css). */
.search header .header-transparent-centered,
.privacy-policy header .header-transparent-centered {
  background-color: #001337 !important;
}

/* Transparent header: force readable light text/icons over the hero it floats on,
   since the mega menu plugin otherwise renders its own dark link colors. */
.site-header-transparent .mega-menu-link,
.site-header-transparent .mega-menu-link > span,
.site-header-transparent .mega-menu-toggle,
.site-header-transparent .mega-indicator {
  color: var(--wp--preset--color--base) !important;
}

.site-header-transparent .mega-menu-item.mega-toggle-on > .mega-menu-link,
.site-header-transparent .mega-menu-link:hover {
  color: var(--wp--preset--color--contrast) !important;
}

/* Get sticky header in the correct spot when user admin par is across top. */

/* header.wp-block-template-part,
.wp-block-template-part:has(>.is-position-sticky) {
	position: sticky !important;
	top: var(--wp-admin--admin-bar--height, 0px) !important;
	margin-top: 0 !important;
	padding-top: 0 !important;
}

header .is-position-sticky {
	top: 0 !important;
	margin-top: 0 !important;
} */

/* ==============================================================================
   BANNERS
   ============================================================================== */

.banner-fullheight,
.banner-fullheight-short {
  min-height: 96vh;
  min-height: 96svh;
  margin-top: calc(-1 * var(--swiss-header-height)) !important;
}

.banner-fullheight-short {
  min-height: 66vh;
  min-height: 66svh;
  margin-bottom: 70px;
}

/* Line banner text up with the page content: the full-width group inside the cover
   already adds the global side padding, so drop the cover's own 1em side padding. */
.wp-block-cover.banner-fullheight,
.wp-block-cover.banner-fullheight-short {
  padding-left: 0;
  padding-right: 0;
}

/* Add banner-no-overlap to a banner used below a solid header or mid-page. */
.banner-fullheight.banner-no-overlap,
.banner-fullheight-short.banner-no-overlap {
  margin-top: 0 !important;
}

.banner-fullheight .wp-block-heading {
  padding-right: var(--wp--preset--spacing--5);
}

/* Short-banner main titles use the full available text width at every size. */
.banner-fullheight-short h1.wp-block-heading {
  padding-right: 0 !important;
}

/* ==============================================================================
   FOOTER
   ============================================================================== */

.site-footer {
  margin-top: 90px;
}

:root :where(.site-footer p) {
  line-height: 1.7 !important;
}

.footer-dark p.footer-text-normal {
  font-weight: 400;
}

.footer-column-title {
  text-transform: uppercase;
}

.copyright p a {
  text-decoration: none;
}

/* FOOTER NAV */

#mega-menu-wrap-max_mega_menu_3.mega-menu-wrap {
  margin-left: 0 !important; /* Pushes the menu to the far right side */
  margin-block-start: calc(var(--wp--preset--spacing--30) - 5px);
}

#mega-menu-wrap-max_mega_menu_3
  #mega-menu-max_mega_menu_3
  > li.mega-menu-item
  > a.mega-menu-link {
  color: var(--wp--preset--color--gray);
  font-weight: 500 !important;
}

#mega-menu-wrap-max_mega_menu_3
  #mega-menu-max_mega_menu_3
  > li.mega-menu-item
  > a.mega-menu-link:hover {
  color: var(--wp--preset--color--white);
}

/* ==============================================================================
   GRAVITY FORMS
   ============================================================================== */

/* Map Orbital buttons to the Swiss theme. Button style variables are
   generated from merged WordPress Global Styles in functions.php. */
.gform-theme--framework {
  --gf-ctrl-btn-bg-color-primary: var(
    --wp--preset--color--primary,
    inherit
  ) !important;
  --gf-ctrl-btn-color-primary: var(
    --wp--preset--color--white,
    inherit
  ) !important;
  --gf-ctrl-btn-bg-color-hover-primary: var(
    --wp--preset--color--dark-primary,
    inherit
  ) !important;
  --gf-ctrl-btn-color-hover-primary: var(
    --wp--preset--color--white,
    inherit
  ) !important;
  --gf-ctrl-btn-radius: var(--swiss-button-radius) !important;
  --gf-ctrl-btn-letter-spacing: var(--swiss-button-letter-spacing) !important;
  --gf-ctrl-btn-text-transform: var(--swiss-button-text-transform) !important;
  --gf-ctrl-btn-padding-y: var(
    --wp--style--spacing--padding--top,
    0.6rem
  ) !important;
  --gf-ctrl-btn-padding-x: var(
    --wp--style--spacing--padding--right,
    1.2rem
  ) !important;
}

/* Gravity Forms may render input or button controls. Apply these properties
   to the actual submit/navigation control, not its footer wrapper. */
.gform-theme--framework
  :is(.gform_footer, .gform_page_footer)
  :is(input, button):is(
    .gform_button,
    .gform_next_button,
    .gform_previous_button
  ) {
  border-radius: var(--swiss-button-radius) !important;
  letter-spacing: var(--swiss-button-letter-spacing) !important;
  text-transform: var(--swiss-button-text-transform) !important;
}

/* ==============================================================================
   TABLET: 768px - 991px only
   ============================================================================== */

@media (min-width: 768px) and (max-width: 991px) {
  /* Stack rows and columns in this range. */
  div.wp-block-group.is-layout-flex.wp-block-row,
  div.wp-block-columns.is-layout-flex {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  /* Optional: Add spacing between the stacked items */
  div.wp-block-group.is-layout-flex.wp-block-row > *,
  div.wp-block-columns.is-layout-flex > * {
    margin-block-start: var(--wp--style--block-gap, 1.5rem);
    margin-inline-start: 0 !important;
  }

  div.wp-block-columns.is-layout-flex > * {
    margin-block-start: 2rem;
  }
}

/* ==============================================================================
   TABLET AND UP: 782px+ (WordPress navigation breakpoint)
   ============================================================================== */

@media (min-width: 782px) {
  body .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: none !important;
  }

  body
    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(
      .is-menu-open
    ) {
    display: block !important;
  }

  .wp-block-group.custom-edge-gradient {
    background: linear-gradient(
      to right,
      #163e64 0%,
      #163e64 90%,
      #ffffff 90.01%,
      #ffffff 100%
    );
  }
}

/* ==============================================================================
   MAX-WIDTH OVERRIDES
   These replace desktop values that are set outside this file, so they stay as
   "up to" queries. Widest first.
   ============================================================================== */

/* Up to 1260px: Max Mega Menu mobile menu (header). */
@media (max-width: 1260px) {
  .wp-block-buttons.hide-m {
    display: none;
  }

  .nav-mobile-cta-button {
    margin-top: 10px !important;
  }

  .mega-menu-wrap .mega-menu li .mega-search-wrap {
    margin: 5px 0 50px !important;
    display: block !important;
  }

  li.mega-mobile-search .mega-search-wrap {
    position: relative !important;
    height: 60px;
  }

  .mega-menu-wrap
    .mega-menu
    li
    .mega-search.mega-search-open
    input::placeholder {
    color: rgb(68, 68, 68);
    font-size: var(--fs-mobile-menu);
  }

  li.mega-mobile-search .mega-search-wrap::after {
    content: "KOOP Strength & Wellness";
    display: block;
    width: 100%;
    color: #fff;
    text-align: center;
    padding-top: 14px;
    font-size: 1rem;
  }

  .mega-menu-wrap .mega-menu li.mega-mobile-search {
    border-bottom: 1px solid #fff;
  }

  #mega-menu-wrap-max_mega_menu_1 .mega-close {
    display: none !important;
  }
}

/* Up to 768px (48rem): phones. */
@media (max-width: 48rem) {
  /* Service pages: the row of section link buttons under the banner (class page-links-buttons
     on the Buttons block) lines up left with the content on phones; centred from 769px up. */
  .wp-block-buttons.page-links-buttons {
    justify-content: flex-start !important;
  }

  /* Header menu (Max Mega Menu location 1): no pill background on hover/tap in the mobile
     menu. The Top Nav theme's custom CSS grows it on hover; the +/- animation stays. */
  body
    #mega-menu-wrap-max_mega_menu_1
    #mega-menu-max_mega_menu_1
    > li:hover
    > a.mega-menu-link::before {
    transform: scale(0) !important;
  }

  /* Important also overrides padding saved in existing page instances. */
  .banner-fullheight .wp-block-heading,
  .banner-fullheight-short .wp-block-heading,
  .banner-fullheight p.has-medium-large-font-size,
  .banner-fullheight-short p.has-medium-large-font-size {
    padding-right: 0 !important;
  }

  .banner-fullheight-short {
    min-height: 86vh;
    min-height: 86svh;
    margin-bottom: 70px;
  }
}

@media (max-width: 768px) {
  /* Footer Nav (Max Mega Menu location 3): Max Mega Menu hard-codes padding: 0 10px on
   * top-level mobile links, with no theme setting for it. */
  body
    #mega-menu-wrap-max_mega_menu_3
    #mega-menu-max_mega_menu_3
    > li.mega-menu-item
    > a.mega-menu-link {
    padding: 0;
  }

  #mega-menu-wrap-max_mega_menu_1
    #mega-menu-max_mega_menu_1
    > li.mega-menu-flyout
    ul.mega-sub-menu {
    padding-left: 10px !important;
  }

  #mega-menu-wrap-max_mega_menu_1
    #mega-menu-max_mega_menu_1
    li.mega-menu-item.mega-toggle-on
    > ul.mega-sub-menu {
    padding-bottom: 10px !important;
    border-top: none !important;
  }

  /* Footer: space below the social icons and the footer menu once the columns stack. */
  .site-footer .wp-block-social-links,
  .site-footer #mega-menu-wrap-max_mega_menu_3 {
    margin-bottom: 45px;
  }
}

@media (min-width: 769px) and (max-width: 1023px) {
  #mega-menu-wrap-max_mega_menu_1
    #mega-menu-max_mega_menu_1
    > li
    > a.mega-menu-link {
    padding: 8px 10px !important;
  }
}