/*
Theme Name:        GOS Group
Theme URI:         https://gos.fi
Description:       Full Site Editing block theme for GOS Group.
Version:           1.0.2
Requires at least: 6.9
Tested up to:      6.9
Requires PHP:      8.3
GitHub Theme URI:  https://github.com/lmandcreative/gos-group-wp
Primary branch:    main
Author:            LM Someco
Author URI:        https://lmsomeco.fi
License:           GNU General Public License v2 or later
License URI:       http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       gos-group-wp
Tags:              full-site-editing, block-patterns, custom-colors, custom-typography, one-column, two-columns, blog, business
*/

/* =============================================================================
  Base
============================================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.blog,
body.single-post {
  background-color: #fff !important;
}

/* =============================================================================
  Header
============================================================================= */

header.wp-block-template-part {
  position: sticky;
  z-index: 9999;
  top: 0;
}

body.admin-bar header.wp-block-template-part {
  top: 32px !important;
}

@media screen and (max-width: 768px) {
  body.admin-bar header.wp-block-template-part {
    top: 0px !important;
  }
}

.site-header {
  /* Must match WP-generated .wp-container-3 { z-index: 10 } on the same element.
    The backdrop (z-index:5) and submenu (z-index:200) are resolved within this
    stacking context. position:sticky always creates a stacking context regardless. */
  z-index: 10;
  /*position: fixed;*/
  position: relative;
  width: 100%;
}

.site-header .wp-block-navigation__responsive-container-open,
.site-header .wp-block-navigation__responsive-container-close {
  color: var(--wp--preset--color--primary);
}

/* Scroll lock when mega-menu is open (desktop) */
body.mega-menu-open {
  overflow: hidden;
}

/* Backdrop sits inside the header stacking context (position:sticky creates one).
  z-index: 5 puts it above header bar elements (auto) but below the submenu (200).
  position: fixed makes it cover the full viewport visually. */
#mega-menu-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  width: 100vw !important;
  max-width: none !important;
  background: rgba(14, 34, 82, 0.25);
  z-index: 10;
  pointer-events: none;
  margin-top: 0;
}

body.mega-menu-open #mega-menu-backdrop {
  display: block;
  pointer-events: auto;
}

/* Nav items: ALL CAPS, letter-spaced */
.site-header__nav .wp-block-navigation-item__content {
  font-family: var(--wp--preset--font-family--ppwatch);
  font-weight: 500;
  /*font-size: 0.8125rem;*/
  /*letter-spacing: 0.07em;*/
  text-transform: uppercase;
  color: var(--wp--preset--color--black);
  padding: 0.35rem 0;
  border-bottom: 1px solid transparent;
  transition:
    color 0.2s,
    border-color 0.2s;
}

.site-header__nav .wp-block-navigation-item__content:hover,
.site-header__nav .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
  color: var(--wp--preset--color--primary);
}

.site-header__nav
  .wp-block-navigation__container
  > .wp-block-navigation-item
  > .wp-block-navigation-item__content {
  font-size: 0.8125rem;
}

/* Border-bottom highlight: desktop top-level items only */
@media (min-width: 1201px) {
  .site-header__nav
    .wp-block-navigation__container
    > .wp-block-navigation-item
    > .wp-block-navigation-item__content:hover,
  li.wp-block-navigation-item.has-small-font-size.has-child.wp-block-navigation-submenu.open-on-click:hover,
  li.wp-block-navigation-item.has-small-font-size.has-child.wp-block-navigation-submenu.open-on-hover-click:hover,
  .site-header__nav
    .wp-block-navigation__container
    > .wp-block-navigation-item.current-menu-item
    > .wp-block-navigation-item__content {
    border-bottom-color: var(--wp--preset--color--primary);
  }

  /* For has-child items the link is pointer-events:none and a toggle button
    sits on top — target the toggle for the active border on those items. */
  .site-header__nav
    .wp-block-navigation__container
    > .wp-block-navigation-item.has-child.current-menu-item
    > .wp-block-navigation-submenu__toggle,
  .site-header__nav
    .wp-block-navigation__container
    > .wp-block-navigation-item.has-child.current-menu-ancestor
    > .wp-block-navigation-submenu__toggle {
    border-bottom: 1px solid var(--wp--preset--color--primary) !important;
  }
}

/* Top-level items with submenus: the toggle button is a transparent overlay
  covering the entire nav item, so clicking the label text is a real button
  click — no JS interception needed, no unreliable programmatic events. */
@media (min-width: 1201px) {
  .site-header__nav .wp-block-navigation__container > .wp-block-navigation-item.has-child {
    position: relative;
  }

  /* Link text: pointer clicks fall through to the button overlay.
    padding-right reserves space for the arrow so it doesn't overlap the text.
    Only applies in hover mode where the content is a separate <a> element. */
  .site-header__nav
    .wp-block-navigation__container
    > .wp-block-navigation-item.has-child
    > .wp-block-navigation-item__content:not(.wp-block-navigation-submenu__toggle) {
    pointer-events: none;
    position: relative;
    z-index: 0;
    padding-right: 1.25rem !important;
  }

  /* Toggle button: transparent full-area overlay. The SVG arrow sits in the
    padding-right area to the right of the text — not overlapping it.
    Only applies in hover mode where the toggle is a separate button from the content. */
  .site-header__nav
    .wp-block-navigation__container
    > .wp-block-navigation-item.has-child
    > .wp-block-navigation-submenu__toggle:not(.wp-block-navigation-item__content) {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    color: var(--wp--preset--color--primary) !important;
    z-index: 1;
  }
  /* toggle button border-bottom hover */
  .site-header__nav
    .wp-block-navigation__container
    > .wp-block-navigation-item.has-child
    > .wp-block-navigation-submenu__toggle:hover {
    border-bottom: 1px solid var(--wp--preset--color--primary) !important;
  }
  /* add border-bottom to toggle button when submenu is open */
  .site-header__nav
    .wp-block-navigation__container
    > .wp-block-navigation-item.has-child
    > .wp-block-navigation-submenu__toggle[aria-expanded="true"] {
    border-bottom: 1px solid var(--wp--preset--color--primary) !important;
  }

  /* Click mode: toggle IS the content button — restore pointer events and normal positioning */
  .site-header__nav
    .wp-block-navigation__container
    > .wp-block-navigation-item.has-child
    > .wp-block-navigation-item__content.wp-block-navigation-submenu__toggle {
    pointer-events: auto !important;
    position: relative !important;
    background: transparent !important;
    border-bottom: 1px solid transparent !important;
    cursor: pointer !important;
    padding-right: 1.25rem !important;
  }

  .site-header__nav
    .wp-block-navigation__container
    > .wp-block-navigation-item.has-child
    > .wp-block-navigation-item__content.wp-block-navigation-submenu__toggle[aria-expanded="true"] {
    color: var(--wp--preset--color--primary) !important;
  }

  .site-header__nav
    .wp-block-navigation__container
    > .wp-block-navigation-item.has-child
    > .wp-block-navigation-item__content.wp-block-navigation-submenu__toggle::after {
    content: "";
    width: 100%;
    height: 1px;
    background-color: transparent !important;
    position: absolute;
    left: 0;
    bottom: -1px;
    transition: background-color 0.2s;
  }

  .site-header__nav
    .wp-block-navigation__container
    > .wp-block-navigation-item.has-child:hover
    > .wp-block-navigation-item__content.wp-block-navigation-submenu__toggle[aria-expanded="false"]::after,
  .site-header__nav
    .wp-block-navigation__container
    > .wp-block-navigation-item.has-child
    > .wp-block-navigation-item__content.wp-block-navigation-submenu__toggle[aria-expanded="true"]::after {
    background-color: var(--wp--preset--color--primary) !important;
  }

  /* Click mode: position the icon span for top-level has-child items */
  .site-header__nav
    .wp-block-navigation__container
    > .wp-block-navigation-item.has-child
    > span.wp-block-navigation__submenu-icon {
    position: absolute !important;
    right: 0 !important;
    top: 40% !important;
    transform: translateY(-50%) !important;
    pointer-events: none !important;
    color: var(--wp--preset--color--primary) !important;
    z-index: 0 !important;
  }
}

/* GOS HFP button */
.gos-hfp-btn .wp-block-button__link {
  font-family: var(--wp--preset--font-family--ppwatch) !important;
  font-weight: 500 !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  /*border-radius: 4px !important;*/
  padding: 0.45rem 1rem !important;
  transition:
    background-color 0.2s,
    color 0.2s;
}

.gos-hfp-btn .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--primary) !important;
  color: #fff !important;
}

/* Language toggle */
.site-header__lang {
  cursor: pointer;
  user-select: none;
  opacity: 0.8;
  transition: opacity 0.2s;
}

.site-header__lang:hover {
  opacity: 1;
}

/* =============================================================================
  Mega-menu dropdown — desktop only
============================================================================= */

@media (min-width: 1201px) {
  /* Hide hamburger on desktop */
  .site-header__nav .wp-block-navigation__responsive-container-open {
    display: none !important;
  }

  /* Ensure desktop nav is visible */
  .site-header__nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: block !important;
    position: relative !important;
  }

  /* Full-width rosa panel for top-level header dropdowns */
  .site-header__nav
    .wp-block-navigation__container
    > .wp-block-navigation-item.has-child
    > .wp-block-navigation__submenu-container {
    z-index: 200 !important; /* above backdrop (150); works because header has no stacking context */
    background-color: var(--wp--preset--color--rosa) !important;
    border: none !important;
    border-radius: 16px 16px 16px 16px !important;
    box-shadow: 0 8px 32px rgba(14, 34, 82, 0.12) !important;
    padding: 2.5rem !important;
    align-items: baseline !important;
    /* Center the mega-menu panel in the viewport */
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    top: 80px !important;
    transform: translateX(-50%) !important;
    width: min(92vw, 1460px) !important;
    max-width: 1460px !important;
    display: grid !important;
    grid-template-columns: repeat(12, 1fr) !important;
    gap: 0 2.5rem !important;
  }

  body.admin-bar
    .site-header__nav
    .wp-block-navigation__container
    > .wp-block-navigation-item.has-child
    > .wp-block-navigation__submenu-container {
    top: 112px !important;
  }

  .site-header__nav
    .wp-block-navigation__container
    > .wp-block-navigation-item.has-child
    > .wp-block-navigation__submenu-container
    > .wp-block-navigation-item.has-child:not(.cta-submenu),
  .site-header__nav
    .wp-block-navigation__container
    > .wp-block-navigation-item.has-child
    > .wp-block-navigation__submenu-container.four-col
    > .wp-block-navigation-item {
    grid-column: span 3;
  }

  .site-header__nav
    .wp-block-navigation__container
    > .wp-block-navigation-item.has-child
    > .wp-block-navigation__submenu-container.three-col
    > .wp-block-navigation-item {
    grid-column: span 4;
  }

  .site-header__nav
    .wp-block-navigation__container
    > .wp-block-navigation-item.has-child
    > .wp-block-navigation__submenu-container.twelve-col
    > .wp-block-navigation-item {
    grid-column: span 12;
  }

  .twelve-col
    > .wp-block-navigation-item > ul {
      flex-direction:row;
      gap: 1em;
    }
    .twelve-col
    > .wp-block-navigation-item > ul li {
      width: auto!important;
    }

  .site-header__nav
    .wp-block-navigation__container
    > .wp-block-navigation-item.has-child
    > .wp-block-navigation__submenu-container
    > .wp-block-navigation-item.special {
    grid-column: span 4;
    margin-top: 1rem !important;
  }

  /* Column headings (all second-level submenu parents) */
  .site-header__nav
    .wp-block-navigation__container
    > .wp-block-navigation-item.has-child
    > .wp-block-navigation__submenu-container
    > .wp-block-navigation-item:not(.cta-submenu)
    > .wp-block-navigation-item__content {
    font-family: var(--wp--preset--font-family--manrope);
    font-weight: 700 !important;
    /*font-size: 1rem !important;*/
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--wp--preset--color--primary-dark) !important;
    border-bottom: 1px solid var(--wp--preset--color--border);
    padding-bottom: 0.75rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    width: 100% !important;
  }

  .site-header__nav
    .wp-block-navigation__container
    > .wp-block-navigation-item.has-child
    > .wp-block-navigation__submenu-container
    > .wp-block-navigation-item:not(.cta-submenu)
    > .wp-block-navigation-item__content
    > .wp-block-navigation-item__label {
    font-size: 1rem !important;
  }

  /* Arrow after each column heading */
  .site-header__nav
    .wp-block-navigation__container
    > .wp-block-navigation-item.has-child
    > .wp-block-navigation__submenu-container
    > .wp-block-navigation-item
    > .wp-block-navigation-item__content::after {
    content: "→";
    display: inline-block;
    font-size: 1rem;
    margin-left: auto;
  }

  /* Submenu child links */
  .site-header__nav
    .wp-block-navigation__container
    > .wp-block-navigation-item.has-child
    > .wp-block-navigation__submenu-container
    > .wp-block-navigation-item
    > .wp-block-navigation__submenu-container
    .wp-block-navigation-item__content {
    font-family: var(--wp--preset--font-family--manrope) !important;
    font-weight: 500 !important;
    /*font-size: 0.9375rem !important;*/
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--wp--preset--color--primary-dark) !important;
    transition: color 0.2s;
  }

  .site-header__nav
    .wp-block-navigation__container
    > .wp-block-navigation-item.has-child
    > .wp-block-navigation__submenu-container
    .wp-block-navigation-item__content:hover {
    color: var(--wp--preset--color--primary) !important;
  }

  /* Third-level links: remove hover and focus styling */
  .site-header__nav
    .wp-block-navigation__container
    > .wp-block-navigation-item.has-child
    > .wp-block-navigation__submenu-container
    > .wp-block-navigation-item.has-child
    > .wp-block-navigation__submenu-container
    .wp-block-navigation-item__content {
    color: var(--wp--preset--color--primary-dark) !important;
    transition: none !important;
  }

  .site-header__nav
    .wp-block-navigation__container
    > .wp-block-navigation-item.has-child
    > .wp-block-navigation__submenu-container
    > .wp-block-navigation-item.has-child
    > .wp-block-navigation__submenu-container
    .wp-block-navigation-item__content:hover,
  .site-header__nav
    .wp-block-navigation__container
    > .wp-block-navigation-item.has-child
    > .wp-block-navigation__submenu-container
    > .wp-block-navigation-item.has-child
    > .wp-block-navigation__submenu-container
    .wp-block-navigation-item__content:focus {
    color: var(--wp--preset--color--primary-dark) !important;
  }

  /* Third-level links inside mega-menu columns are always listed (no extra click). */
  .site-header__nav
    .wp-block-navigation__container
    > .wp-block-navigation-item.has-child
    > .wp-block-navigation__submenu-container
    > .wp-block-navigation-item.has-child:not(.cta-submenu)
    > .wp-block-navigation__submenu-container {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    opacity: 1 !important;
    overflow: visible !important;
    visibility: visible !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    grid-column: unset !important;
  }

  /* Hide nested toggles in mega-menu columns, links are listed directly.
    In click mode the toggle IS the content button, so exclude it. */
  .site-header__nav
    .wp-block-navigation__container
    > .wp-block-navigation-item.has-child
    > .wp-block-navigation__submenu-container
    > .wp-block-navigation-item.has-child
    > .wp-block-navigation-submenu__toggle:not(.wp-block-navigation-item__content) {
    display: none !important;
  }

  /* Click mode: hide the icon span for second-level has-child items in mega-menu */
  .site-header__nav
    .wp-block-navigation__container
    > .wp-block-navigation-item.has-child
    > .wp-block-navigation__submenu-container
    > .wp-block-navigation-item.has-child
    > span.wp-block-navigation__submenu-icon {
    display: none !important;
  }

  /* Disable hover-open for all nested items (second and third level). */
  .site-header__nav
    .wp-block-navigation__submenu-container
    .wp-block-navigation-item.has-child:hover
    > .wp-block-navigation__submenu-container,
  .site-header__nav
    .wp-block-navigation__submenu-container
    .wp-block-navigation-item.has-child:focus-within
    > .wp-block-navigation__submenu-container {
    height: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
    width: 0 !important;
    position: absolute !important;
    z-index: -1 !important;
  }

  /* Keep third-level submenu containers always visible (override hover-hide). */
  .site-header__nav
    .wp-block-navigation__container
    > .wp-block-navigation-item.has-child
    > .wp-block-navigation__submenu-container
    > .wp-block-navigation-item.has-child:hover
    > .wp-block-navigation__submenu-container,
  .site-header__nav
    .wp-block-navigation__container
    > .wp-block-navigation-item.has-child
    > .wp-block-navigation__submenu-container
    > .wp-block-navigation-item.has-child:focus-within
    > .wp-block-navigation__submenu-container {
    height: auto !important;
    opacity: 1 !important;
    overflow: visible !important;
    visibility: visible !important;
    width: 100% !important;
    position: static !important;
    z-index: auto !important;
  }

  /* First level opens on toggle only (not hover). */
  .site-header__nav
    .wp-block-navigation__container
    > .wp-block-navigation-item.open-on-click:hover
    > .wp-block-navigation__submenu-container,
  .site-header__nav
    .wp-block-navigation__container
    > .wp-block-navigation-item.open-on-click:focus-within
    > .wp-block-navigation__submenu-container {
    height: 0 !important;
    min-width: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
    width: 0 !important;
  }

  .site-header__nav
    .wp-block-navigation__container
    > .wp-block-navigation-item.open-on-click
    > .wp-block-navigation-submenu__toggle[aria-expanded="true"]
    ~ .wp-block-navigation__submenu-container {
    height: auto !important;
    min-width: 200px !important;
    opacity: 1 !important;
    overflow: visible !important;
    visibility: visible !important;
    width: 100vw !important;
  }

  /* Flyout positioning for deeper nested levels */
  .wp-block-navigation
    .has-child
    .wp-block-navigation__submenu-container
    .wp-block-navigation__submenu-container {
    left: 100%;
    top: -1px;
    background-color: transparent;
  }

  /* Hover background for mega-menu — 3rd level items only */
  .site-header__nav
    .wp-block-navigation__container
    > .wp-block-navigation-item.has-child
    > .wp-block-navigation__submenu-container
    > .wp-block-navigation-item.has-child
    > .wp-block-navigation__submenu-container
    li:hover {
    background-color: rgba(14, 34, 82, 0.05) !important;
  }
  .mobile-only {
    display: none !important;
  }
} /* end @media (min-width: 1201px) */

/* Flex-column reset for submenu list items (all breakpoints) */
.wp-block-navigation__submenu-container.wp-block-navigation-submenu li {
  flex-direction: column !important;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  align-items: flex-start;
  /*border-bottom: solid 1px rgba(14, 34, 82, 0.1) !important;*/
  border-bottom: 1px solid rgba(14, 34, 82, 0.06) !important;
  width: 100% !important;
  height: auto !important;
}
/* hover border bottom color change for submenu list items */
.wp-block-navigation__submenu-container.wp-block-navigation-submenu li:hover {
  border-bottom-color: rgba(14, 34, 82, 0.1) !important;
  width: 100% !important;
}

/* icon */

.wp-block-navigation .wp-block-navigation__submenu-icon svg {
  display: inline-block;
  stroke: currentColor;
  height: auto;
  margin-top: 0.075em;
  width: auto;
}

header .site-header__utils.desktop-only {
  gap: 16px !important;
}

header
  .site-header__utils.desktop-only
  .wp-block-button.search-button.is-style-search
  > .wp-block-button__link {
  padding: 1em 0 !important;
}

@media screen and (min-width: 1460px) and (max-width: 1540px) {
  header .site-header__logo,
  header .site-header__utils {
    flex-basis: 16em !important;
  }
}

@media screen and (min-width: 1201px) and (max-width: 1460px) {
  header .site-header__logo {
    flex-basis: 7em !important;
  }

  header .site-header__utils {
    flex-basis: 13em !important;
  }
}

/* =============================================================================
  Footer
============================================================================= */

footer.wp-block-template-part {
  margin-block-start: 0 !important;
}

footer.wp-block-template-part > .site-footer {
  position: relative;
  overflow: hidden;
}

footer.wp-block-template-part a.footer-link:hover {
}

/* =============================================================================
  Mobile overlay menu
============================================================================= */

@media (max-width: 1200px) {
  /* Override WP's 600px breakpoint: force hamburger button visible */
  .site-header__nav .wp-block-navigation__responsive-container-open {
    display: flex !important;
  }

  /* Hide the desktop nav (WP shows it as position:relative at 600px+) unless menu is open */
  .site-header__nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none !important;
    position: fixed !important;
  }

  /* Overlay panel: solid rosa background, full screen, scrollable */
  .site-header__nav .wp-block-navigation__responsive-container {
    background-color: var(--wp--preset--color--rosa) !important;
    padding: 1.5rem 1.5rem 3rem !important;
    overflow-y: auto !important;
  }

  /* When open: force full-screen solid cover so page content is hidden */
  .site-header__nav .wp-block-navigation__responsive-container.is-menu-open {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    z-index: 1000 !important;
    background-color: var(--wp--preset--color--rosa) !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Close button */
  .site-header__nav .wp-block-navigation__responsive-container-close {
    color: var(--wp--preset--color--primary) !important;
  }

  /* Top-level items: full-width rows with a bottom separator */
  .site-header__nav .wp-block-navigation__responsive-container .wp-block-navigation__container {
    width: 100% !important;
  }

  .site-header__nav
    .wp-block-navigation__responsive-container
    .wp-block-navigation__container
    > .wp-block-navigation-item {
    position: relative !important;
    width: 100% !important;
    border-bottom: 1px solid rgba(14, 34, 82, 0.12) !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }
  .site-header__nav
    .wp-block-navigation__container
    > .wp-block-navigation-item.has-child
    > .wp-block-navigation__submenu-container
    > .wp-block-navigation-item
    > .wp-block-navigation-item__content::after {
    content: "→";
    margin-left: auto;
  }

  /* Nav item link text: left-aligned, takes remaining space */
  .site-header__nav
    .wp-block-navigation__responsive-container
    .wp-block-navigation__container
    > .wp-block-navigation-item
    > .wp-block-navigation-item__content {
    flex: 1 !important;
    text-align: left !important;
    padding: 1rem 0 !important;
  }

  /* Items with children: link text is non-interactive — toggle overlay handles the click.
    In click mode the content IS the toggle, so exclude it. */
  .site-header__nav
    .wp-block-navigation__responsive-container
    .wp-block-navigation__container
    > .wp-block-navigation-item.has-child
    > .wp-block-navigation-item__content:not(.wp-block-navigation-submenu__toggle) {
    pointer-events: none !important;
    position: relative !important;
    z-index: 0 !important;
  }

  /* Toggle button: transparent full-row overlay, chevron on the right — same pattern as desktop.
    In click mode the toggle IS the content button, so exclude it. */
  .site-header__nav
    .wp-block-navigation__responsive-container
    .wp-block-navigation__container
    > .wp-block-navigation-item.has-child
    > .wp-block-navigation-submenu__toggle:not(.wp-block-navigation-item__content) {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    height: 3.5rem !important; /* matches link padding + line-height */
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-shrink: 0 !important;
    color: var(--wp--preset--color--primary) !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    z-index: 1 !important;
  }

  /* Click mode: toggle IS the content button on mobile */
  .site-header__nav
    .wp-block-navigation__responsive-container
    .wp-block-navigation__container
    > .wp-block-navigation-item.has-child
    > .wp-block-navigation-item__content.wp-block-navigation-submenu__toggle {
    flex: 1 !important;
    text-align: left !important;
    padding: 1rem 0 !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 1 !important;
    pointer-events: auto !important;
  }

  /* Hide second-level toggle buttons — 3rd level items are always shown when
  the top-level opens; no second accordion needed.
  In click mode the toggle IS the content button, so exclude it. */
  .site-header__nav
    .wp-block-navigation__responsive-container
    .wp-block-navigation__submenu-container
    .wp-block-navigation-submenu__toggle:not(.wp-block-navigation-item__content) {
    display: none !important;
  }

  /* Click mode: hide icon span for nested items on mobile */
  .site-header__nav
    .wp-block-navigation__responsive-container
    .wp-block-navigation__submenu-container
    > .wp-block-navigation-item.has-child
    > span.wp-block-navigation__submenu-icon {
    display: none !important;
  }

  /* All submenu containers: hidden by default.
  Using display:none !important — WP's own mobile CSS sets height/opacity/visibility
  without !important so it can't beat this. */
  .site-header__nav
    .wp-block-navigation__responsive-container
    .wp-block-navigation__submenu-container {
    display: none !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 0 0 1rem !important;
    margin: 0 !important;
    grid-template-columns: none !important;
    min-width: 0 !important;
  }

  /* When top-level toggle is expanded: show the first-level submenu */
  .site-header__nav
    .wp-block-navigation__responsive-container
    .wp-block-navigation__container
    > .wp-block-navigation-item.has-child
    > .wp-block-navigation-submenu__toggle[aria-expanded="true"]
    ~ .wp-block-navigation__submenu-container {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    padding: 0 !important;
  }

  /* Click-mode hardening: reveal submenu based on expanded toggle state on parent
    so DOM sibling order changes do not break mobile opening. */
  .site-header__nav
    .wp-block-navigation__responsive-container
    .wp-block-navigation__container
    > .wp-block-navigation-item.has-child:has(
      > .wp-block-navigation-submenu__toggle[aria-expanded="true"]
    )
    > .wp-block-navigation__submenu-container {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    padding: 0 !important;
  }

  /* Also show all nested (third-level) submenu containers inside an open top-level —
  no second-level click required, they are always listed (like in the desktop view). */
  .site-header__nav
    .wp-block-navigation__responsive-container
    .wp-block-navigation__container
    > .wp-block-navigation-item.has-child
    > .wp-block-navigation-submenu__toggle[aria-expanded="true"]
    ~ .wp-block-navigation__submenu-container
    .wp-block-navigation__submenu-container {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    padding: 0 !important;
  }

  .site-header__nav
    .wp-block-navigation__responsive-container
    .wp-block-navigation__container
    > .wp-block-navigation-item.has-child:has(
      > .wp-block-navigation-submenu__toggle[aria-expanded="true"]
    )
    > .wp-block-navigation__submenu-container
    .wp-block-navigation__submenu-container {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    padding: 0 !important;
  }

  /* Second-level item: bold heading */
  .site-header__nav
    .wp-block-navigation__responsive-container
    .wp-block-navigation__submenu-container
    > .wp-block-navigation-item
    > .wp-block-navigation-item__content {
    font-family: var(--wp--preset--font-family--manrope) !important;
    font-weight: 700 !important;
    font-size: 0.9375rem !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--wp--preset--color--primary-dark) !important;
    padding: 0.75rem 0 !important;
    border-bottom: 1px solid rgba(14, 34, 82, 0.06) !important;
    align-items: start !important;
    width: 100% !important;
  }

  .site-header__nav
    .wp-block-navigation__responsive-container
    .wp-block-navigation__submenu-container
    > .wp-block-navigation-item
    > .wp-block-navigation-item__content
    > .wp-block-navigation-item__label {
    font-size: 0.9375rem !important;
  }

  /* Third-level item: normal weight, indented */
  .site-header__nav
    .wp-block-navigation__responsive-container
    .wp-block-navigation__submenu-container
    .wp-block-navigation__submenu-container
    > .wp-block-navigation-item
    > .wp-block-navigation-item__content {
    font-family: var(--wp--preset--font-family--manrope) !important;
    font-weight: 400 !important;
    font-size: 0.875rem !important;
    color: var(--wp--preset--color--primary-dark) !important;
    padding: 0.625rem 0 !important;
    /*border-bottom: 1px solid rgba(14, 34, 82, 0.06) !important;*/
    align-items: start !important;
    width: 100% !important;
  }

  .site-header__nav
    .wp-block-navigation__responsive-container
    .wp-block-navigation__submenu-container
    .wp-block-navigation__submenu-container
    > .wp-block-navigation-item
    > .wp-block-navigation-item__content
    > .wp-block-navigation-item__label {
    font-size: 0.875rem !important;
  }
  .wp-block-navigation .wp-block-navigation-item {
    align-items: center;
    background-color: inherit;
    display: flex;
    position: relative;
    align-items: start !important;
  }
  .desktop-only {
    display: none !important;
  }
  .has-small-font-size.wp-block-navigation-item.special.wp-block-button__link.has-primary-dark-color.has-red-background-color.has-text-color.has-background.has-link-color.wp-element-button.wp-block-navigation-link {
    background-color: #ff5c39 !important;
    margin: 10px;
  }

  .wp-block-navigation__responsive-container-content
    > ul.wp-block-navigation__container
    > li.wp-block-navigation-submenu
    > ul.wp-block-navigation__submenu-container
    > li.wp-block-navigation-item {
    margin-bottom: 12px !important;
  }

  .wp-block-navigation__responsive-container-content
    > ul.wp-block-navigation__container
    > li.wp-block-navigation-submenu
    > ul.wp-block-navigation__submenu-container
    > li.wp-block-navigation-item
    > ul.wp-block-navigation__submenu-container
    li:last-of-type {
    border-bottom: 0 !important;
  }

  .wp-block-navigation-item.open-on-click
    .wp-block-navigation-submenu__toggle
    + .wp-block-navigation__submenu-icon {
    display: inline-block !important;
  }
} /* end @media (max-width: 1200px) */

.special {
  content: none;
}

.site-header__nav
  .wp-block-navigation__responsive-container
  .wp-block-navigation__submenu-container
  > li.cta-submenu {
  grid-column: span 12 !important;
  border-bottom: none !important;
  margin-top: 1rem !important;
}

.site-header__nav
  .wp-block-navigation__responsive-container
  .wp-block-navigation__submenu-container
  > li.cta-submenu
  > button.wp-block-navigation-submenu__toggle {
  display: none !important;
}

.site-header__nav
  .wp-block-navigation__responsive-container
  .wp-block-navigation__submenu-container
  > li.cta-submenu
  > ul.cta-submenu.wp-block-navigation-submenu {
  display: flex !important;
  flex-direction: row !important;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
  align-items: center;
  gap: 8px 24px !important;
  max-width: 100% !important;
  border: none !important;
  height: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  position: static !important;
  width: 100% !important;
}

.site-header__nav
  .wp-block-navigation__responsive-container
  .wp-block-navigation__submenu-container
  > li.cta-submenu
  > ul.cta-submenu.wp-block-navigation-submenu
  > li.wp-block-navigation-item.special {
  display: inline-block !important;
  margin: 0 !important;
  width: unset !important;
  border-bottom: none !important;
}

.site-header__nav
  .wp-block-navigation__responsive-container
  .wp-block-navigation__submenu-container
  > li.cta-submenu
  > ul.cta-submenu.wp-block-navigation-submenu
  > li.wp-block-navigation-item.special
  > .wp-block-navigation-item__content {
  justify-content: flex-start !important;
  padding: 16px !important;
  text-align: left !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  font-size: 14px !important;
  background-color: transparent !important;
  font-family: var(--wp--preset--font-family--ppwatch) !important;
  border: 1px solid rgba(0, 0, 0, 0.18) !important;
}

.no-click {
  pointer-events: none !important;
}

li.has-small-font-size.wp-block-navigation-item.special.no-click.wp-block-navigation-link {
  border-bottom: none !important;
  padding-top: 40px;
  font-family: var(--wp--preset--font-family--ppwatch) !important;
}

li.has-small-font-size.wp-block-navigation-item.special.no-click.wp-block-navigation-link
  > a.wp-block-navigation-item__content {
  border-bottom: none !important;
  font-family: var(--wp--preset--font-family--ppwatch) !important;
}

.site-header__nav
  .wp-block-navigation__container
  > .wp-block-navigation-item.has-child
  > .wp-block-navigation__submenu-container
  > .wp-block-navigation-item.special
  > .wp-block-navigation-item__content::after {
  content: none !important;
}

li.has-small-font-size.wp-block-navigation-item.special.wp-block-button__link.has-primary-dark-color.has-red-background-color.has-text-color.has-background.has-link-color.wp-element-button.wp-block-navigation-link
  a {
  justify-content: center;
  border-bottom: none !important;
  font-family: var(--wp--preset--font-family--ppwatch) !important;
}

/* Search */
.wp-block-group.searchbar {
  display: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.wp-block-group.searchbar.is-visible {
  display: flex;
}

.wp-block-group.searchbar.active {
  opacity: 1;
}

.wp-block-group.searchbar .wp-block-search {
  width: 100%;
  max-width: 500px;
}

/* Single henkilo — Info */
.wp-block-henkilo-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wp-block-henkilo-info .wp-block-henkilo-info__title {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--wp--preset--color--primary);
  margin: 0;
}

.wp-block-henkilo-info .wp-block-henkilo-info__phone,
.wp-block-henkilo-info .wp-block-henkilo-info__email {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 2%;
  color: var(--wp--preset--color--primary-dark);
}

.wp-block-henkilo-info .wp-block-henkilo-info__phone a,
.wp-block-henkilo-info .wp-block-henkilo-info__email a {
  color: var(--wp--preset--color--primary-dark);
  text-decoration: underline;
  transition: color 0.2s ease;
}

.wp-block-henkilo-info .wp-block-henkilo-info__phone a:hover,
.wp-block-henkilo-info .wp-block-henkilo-info__email a:hover {
  text-decoration: underline;
  color: var(--wp--preset--color--primary);
}

/* Pagination */
.gos-pagination.wp-block-query-pagination {
  display: flex !important;
  align-items: center;
  gap: 0.125rem;
  font-family: var(--wp--preset--font-family--manrope);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.28px;
  margin: var(--wp--preset--spacing--70) 0;
}

/* Previous / Next links */
.gos-pagination .wp-block-query-pagination-previous,
.gos-pagination .wp-block-query-pagination-next {
  color: var(--wp--preset--color--primary);
  text-decoration: none;
  padding: 8px 16px;
  transition:
    color 0.2s ease,
    opacity 0.2s ease;
  white-space: nowrap;
}

.gos-pagination .wp-block-query-pagination-previous:hover,
.gos-pagination .wp-block-query-pagination-next:hover {
  color: var(--wp--preset--color--primary-dark);
}

/* Disabled state (first / last page) */
.gos-pagination .wp-block-query-pagination-previous.is-disabled,
.gos-pagination .wp-block-query-pagination-next.is-disabled {
  opacity: 0.3;
  pointer-events: none;
  cursor: default;
}

/* Page numbers wrapper */
.gos-pagination .wp-block-query-pagination-numbers {
  display: flex;
  align-items: center;
  gap: 0;
}

/* Individual page number links and current-page span */
.gos-pagination .wp-block-query-pagination-numbers a,
.gos-pagination .wp-block-query-pagination-numbers .current,
.gos-pagination .wp-block-query-pagination-numbers span.dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  padding: 8px 16px;
  color: var(--wp--preset--color--primary);
  text-decoration: none;
  border-bottom: 1.5px solid transparent;
  transition:
    border-color 0.2s ease,
    color 0.2s ease;
}

/* Current page indicator */
.gos-pagination .wp-block-query-pagination-numbers .current {
  border-bottom-color: var(--wp--preset--color--primary);
}

/* Hover on page number links */
.gos-pagination .wp-block-query-pagination-numbers a:hover {
  border-bottom-color: var(--wp--preset--color--primary-dark);
}

/* Dots (…) */
.gos-pagination .wp-block-query-pagination-numbers span.dots {
  opacity: 0.4;
  pointer-events: none;
}

/* Query Block single post */

.wp-block-query .single-post {
  hyphens: auto;
}

.wp-block-query .single-post .wp-block-post-featured-image {
  overflow: hidden;
  min-width: 160px !important;
  border-radius: 8px !important;
}

.wp-block-query .single-post .wp-block-post-featured-image img {
  transition: transform 0.2s ease;
}

.wp-block-query .single-post:hover .wp-block-post-featured-image img {
  transform: scale(1.04);
}

.wp-block-query .single-post h3:hover > a {
  color: var(--wp--preset--color--primary) !important;
}

@media screen and (max-width: 768px) {
  .wp-block-query .single-post .single-post__inner {
    gap: 12px !important;
  }

  .wp-block-query .single-post .single-post__inner .single-post__content {
    padding: 0 !important;
  }

  body.single-henkilo figure.wp-block-post-featured-image {
    width: 100% !important;
  }
}

/* Hyphens for titles */
h1.wp-block-heading {
  hyphens: auto;
}

@media screen and (max-width: 1200px) {
  .site-header__nav
    .wp-block-navigation__responsive-container
    .wp-block-navigation__submenu-container
    > li.cta-submenu
    > ul.cta-submenu.wp-block-navigation-submenu {
    align-items: stretch !important;
  }
}
