/*
Theme Name: Oechsli
Theme URI: https://wordpress.org
Description: Oechsli — white-labeled FSE block theme for financial advisor websites.
Author: Oechsli
Author URI: https://wordpress.com/
Version: 2025.06.30
Text Domain: oechsli
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* ── Design System Tokens ──────────────────────────────────────────────────── */

:root {
    /* Z-index scale */
    --oi-z-base: 1;
    --oi-z-dropdown: 100;
    --oi-z-sticky: 200;
    --oi-z-overlay: 500;
    --oi-z-modal: 9999;
    --oi-z-skip: 100000;

    /* Transition tokens */
    --oi-transition-fast: 0.15s ease-out;
    --oi-transition-normal: 0.3s ease-in-out;
    --oi-transition-slow: 0.5s ease-in-out;

    /* Motion easing (matches design system) */
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

    /* Breakpoint reference (match theme.json custom.breakpoints) */
    --oi-bp-mobile: 480px;
    --oi-bp-tablet: 768px;
    --oi-bp-desktop: 1024px;
    --oi-bp-wide: 1200px;

    /* Palette shorthand aliases — mirrors WP preset vars */
    --palette-1:  var(--wp--preset--color--palette-1);
    --palette-2:  var(--wp--preset--color--palette-2);
    --palette-3:  var(--wp--preset--color--palette-3);
    --palette-4:  var(--wp--preset--color--palette-4);
    --palette-5:  var(--wp--preset--color--palette-5);
    --palette-6:  var(--wp--preset--color--palette-6);
    --palette-7:  var(--wp--preset--color--palette-7);
    --palette-8:  var(--wp--preset--color--palette-8);
    --palette-9:  var(--wp--preset--color--palette-9);
    --palette-10: var(--wp--preset--color--palette-10);
    --palette-11: var(--wp--preset--color--palette-11);
    --palette-12: var(--wp--preset--color--palette-12);
    --palette-13: var(--wp--preset--color--palette-13);
    --palette-14: var(--wp--preset--color--palette-14);
    --palette-15: var(--wp--preset--color--palette-15);

    /* Font-size shorthand aliases — mirrors WP preset vars */
    --fs-xs:         var(--wp--preset--font-size--xs);
    --fs-xsmall:     var(--wp--preset--font-size--xsmall);
    --fs-caption:    var(--wp--preset--font-size--caption);
    --fs-small:      var(--wp--preset--font-size--small);
    --fs-medium:     var(--wp--preset--font-size--medium);
    --fs-reading:    var(--wp--preset--font-size--reading);
    --fs-subheading: var(--wp--preset--font-size--subheading);
    --fs-heading:    var(--wp--preset--font-size--heading);
    --fs-big:        var(--wp--preset--font-size--big);
    --fs-large:      var(--wp--preset--font-size--large);
    --fs-xl:         var(--wp--preset--font-size--xl);
    --fs-xxl:        var(--wp--preset--font-size--xxl);
    --fs-xxxl:       var(--wp--preset--font-size--xxxl);
    --fs-hero:       var(--wp--preset--font-size--hero);

    /* Font family aliases */
    --font-sans:  var(--wp--preset--font-family--body);
    --font-serif: var(--wp--preset--font-family--heading);
    --font-mono:  var(--wp--preset--font-family--mono);
}

/* ── Reduced-motion override ──────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── Button hover transitions ─────────────────────────────────────────────── */
/* Fill + Big (default): palette-1 → palette-2 */
/* Inverted + Big Inverted: palette-9 → palette-8 */
/* Only applies when no GSAP hover animation is set on the button. */

.wp-block-button:not([data-gsap-animation]) .wp-block-button__link,
.wp-block-button.is-style-fill:not([data-gsap-animation]) .wp-block-button__link,
.wp-block-button.is-style-big:not([data-gsap-animation]) .wp-block-button__link,
.wp-block-button.is-style-inverted:not([data-gsap-animation]) .wp-block-button__link,
.wp-block-button.is-style-big-inverted:not([data-gsap-animation]) .wp-block-button__link {
    transition: background-color var(--oi-transition-normal), border-color var(--oi-transition-normal);
}

/* Fill + Big hover */
.wp-block-button:not(.is-style-outline):not(.is-style-outline-inverted):not(.is-style-link):not(.is-style-link-inverted):not(.is-style-inverted):not(.is-style-big-inverted):not([data-gsap-animation]) .wp-block-button__link:hover {
    background-color: var(--wp--preset--color--palette-2);
    border-color: var(--wp--preset--color--palette-2);
}

/* Inverted + Big Inverted hover */
.wp-block-button.is-style-inverted:not([data-gsap-animation]) .wp-block-button__link:hover,
.wp-block-button.is-style-big-inverted:not([data-gsap-animation]) .wp-block-button__link:hover {
    background-color: var(--wp--preset--color--palette-8);
    border-color: var(--wp--preset--color--palette-8);
}

/* ── Tighten line-height on large paragraphs used as display text ──────────── */
/* When a paragraph uses a heading-scale font size, it needs heading-like leading. */

p.has-big-font-size,
p.has-large-font-size,
p.has-xl-font-size,
p.has-xxl-font-size,
p.has-xxxl-font-size,
p.has-hero-font-size {
    line-height: 1.2;
}

p.has-heading-font-size,
p.has-subheading-font-size {
    line-height: 1.35;
}

/* ── Fix: Featured images / images in flex/grid containers ─────────────────── */
/* Prevents <figure> from overflowing flex/grid parents (columns, cards, grids). */

.wp-block-post-featured-image,
.wp-block-image {
    min-width: 0;
    max-width: 100%;
}

.wp-block-post-featured-image img,
.wp-block-image img {
    width: 100%;
    height: auto;
    display: block;
}

.wp-block-column .wp-block-post-featured-image,
.wp-block-column .wp-block-image,
.is-layout-grid .wp-block-post-featured-image,
.is-layout-grid .wp-block-image,
.is-layout-flex .wp-block-post-featured-image,
.is-layout-flex .wp-block-image {
    min-width: 0;
    flex-shrink: 1;
    overflow: hidden;
}

/* ── Screen-reader-only utility ───────────────────────────────────────────── */

.screen-reader-text {
    border: 0;
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

.skip-link.screen-reader-text:focus {
    background-color: var(--wp--preset--color--palette-8);
    clip-path: none;
    color: var(--wp--preset--color--palette-3);
    display: block;
    font-size: 1em;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: var(--oi-z-skip);
}

/* ── Team CPT: credential superscript ────────────────────────────────────── */

.title-cred sup {
    font-size: 1rem;
}

/* ── List marker color ────────────────────────────────────────────────────── */

ul li::marker {
    color: var(--wp--preset--color--palette-2);
}

/* ── Footnote superscript ─────────────────────────────────────────────────── */

p sup {
    font-size: small;
}

/* ── Mobile: cover video fallback ────────────────────────────────────────── */

@media screen and (max-width: 768px) {
    .wp-block-cover video img {
        display: block;
        height: auto;
        width: 100%;
    }
}

/* ── GSAP parallax: hide overflow on parallax images ─────────────────────── */

figure.wp-block-image { display: flex; align-items: center; }
figure.wp-block-image[data-gsap-parallax] { overflow: hidden; }

/* ── Popup / Modal ────────────────────────────────────────────────────────── */
/* Handled by blocks/popup/css/popup.css — loaded per-page by the popup block. */
/* Global rules here cover body scroll lock only. */

body.modal-open {
    overflow: hidden;
}

/* ── Accordion (custom/accordion block) ──────────────────────────────────── */
/* Core styles live in blocks/accordion/style.css (block-level CSS). */
/* This section covers the WP Details variant only. */

.oi-accordion .wp-block-details summary {
    display: flex;
    align-items: center;
    padding-left: 10px;
}
.oi-accordion .wp-block-details summary:marker {
    content: '';
    display: none;
    list-style-type: none;
}
.oi-accordion .wp-block-details summary:before {
    content: '›';
    display: inline-block;
    font-size: 35px;
    font-weight: bold;
    margin-right: 5px;
    color: var(--wp--preset--color--palette-2);
}
.oi-accordion .wp-block-details[open] summary:before {
    transform: rotate(90deg);
}

/* ── Tabs (custom/tabs block) ─────────────────────────────────────────────── */

.tab-item {
    display: none;
}

.tab-item.active {
    display: block;
}

.tabs .tab:hover { cursor: pointer; }

/* ── Flipbox ──────────────────────────────────────────────────────────────── */

[class^="flipbox-"] img,
[class*=" flipbox-"] img {
    display: block;
    width: 100%;
}

.flipbox-container {
    display: grid !important;
    width: 100%;
    position: relative;
    perspective: 1000px;
    overflow: hidden;
}

.flipbox-front,
.flipbox-back {
    grid-area: 1 / 1 / 2 / 2;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    transition: transform 0.6s ease-in-out;
}

.flipbox-container:not(.flip):not(.flip-vertical):not(.slide):not(.slide-right) .flipbox-front { z-index: 1; }
.flipbox-container:not(.flip):not(.flip-vertical):not(.slide):not(.slide-right) .flipbox-back { z-index: 0; backface-visibility: hidden; }
.flipbox-container:not(.flip):not(.flip-vertical):not(.slide):not(.slide-right):hover .flipbox-front { z-index: 0; }
.flipbox-container:not(.flip):not(.flip-vertical):not(.slide):not(.slide-right):hover .flipbox-back { z-index: 1; backface-visibility: visible; }

@media only screen and (max-width: 768px) {
    .flipbox-container.clicked .flipbox-front { transform: rotateY(180deg); }
    .flipbox-container.clicked .flipbox-back { transform: rotateY(0deg); }
}

.flipbox-container.flip { overflow: inherit; }

@media only screen and (min-width: 768px) {
    .flipbox-container.flip .flipbox-front {
        z-index: 1;
        transform: rotateY(0deg);
    }

    .flipbox-container.flip .flipbox-back {
        z-index: 0;
        transform: rotateY(180deg);
    }

    .flipbox-container.flip { overflow: inherit; }

    .flipbox-container.flip:hover .flipbox-front {
        transform: rotateY(-180deg);
    }

    .flipbox-container.flip:hover .flipbox-back {
        transform: rotateY(0deg);
    }
}

.flipbox-container.slide .flipbox-back {
    transform: translateY(100%);
    z-index: 2;
}

.flipbox-container.slide:hover .flipbox-back {
    transform: translateY(0);
}

.flipbox-container.flip-vertical .flipbox-front {
    z-index: 1;
    transform: rotateY(0deg);
}

.flipbox-container.flip-vertical .flipbox-back {
    z-index: 0;
    transform: rotateX(180deg);
}

.flipbox-container.flip-vertical { overflow: inherit; }

.flipbox-container.flip-vertical:hover .flipbox-front {
    transform: rotateX(180deg);
}

.flipbox-container.flip-vertical:hover .flipbox-back {
    transform: rotateX(360deg);
}

.flipbox-container.slide-right .flipbox-back {
    transform: translateX(-100%);
    z-index: 2;
    transition: transform 0.6s ease-in-out;
}

.flipbox-container.slide-right:hover .flipbox-back {
    transform: translateX(0);
}

.flipbox-container.slide-right .flipbox-front {
    position: relative;
    z-index: 1;
}

.flipbox-container.fader .flipbox-back {
    opacity: 0;
    transition: opacity 1s ease-in-out;
    z-index: 2;
    pointer-events: none;
}

.flipbox-container.fader:hover .flipbox-back {
    opacity: 1;
    pointer-events: auto;
}

.flipbox-container.fader .flipbox-front {
    position: relative;
    z-index: 1;
    transition: opacity 1s ease-in-out;
}

.flipbox-container.fader:hover .flipbox-front {
    opacity: 0.5;
}

/* ── Content Toggle ───────────────────────────────────────────────────────── */

.toggle-content-group {
    display: none;
    transition: max-height 0.3s ease, opacity 0.3s ease;
}

.toggle-header-group p {
    cursor: pointer;
}

/* ── Responsive Grid: manual column count ─────────────────────────────────── */
/* WP outputs inline grid-template-columns for manual grids. Override per breakpoint. */

@media only screen and (max-width: 991px) and (min-width: 768px) {
    [class*="wp-container-"].columns-1 { grid-template-columns: repeat(1, 1fr); }
    [class*="wp-container-"].columns-2 { grid-template-columns: repeat(2, 1fr); }
    [class*="wp-container-"].columns-3 { grid-template-columns: repeat(2, 1fr); }
    [class*="wp-container-"].columns-4 { grid-template-columns: repeat(3, 1fr); }
    [class*="wp-container-"].columns-5 { grid-template-columns: repeat(3, 1fr); }
    .is-layout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media only screen and (max-width: 767px) {
    [class*="wp-container-"].columns-1 { grid-template-columns: repeat(2, 1fr); }
    [class*="wp-container-"].columns-2 { grid-template-columns: repeat(2, 1fr); }
    [class*="wp-container-"].columns-3 { grid-template-columns: repeat(2, 1fr); }
    [class*="wp-container-"].columns-4 { grid-template-columns: repeat(2, 1fr); }
    [class*="wp-container-"].columns-5 { grid-template-columns: repeat(2, 1fr); }
    .is-layout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media only screen and (max-width: 576px) {
    [class*="wp-container-"].columns-1 { grid-template-columns: repeat(1, 1fr); }
    [class*="wp-container-"].columns-2 { grid-template-columns: repeat(1, 1fr); }
    [class*="wp-container-"].columns-3 { grid-template-columns: repeat(1, 1fr); }
    [class*="wp-container-"].columns-4 { grid-template-columns: repeat(1, 1fr); }
    [class*="wp-container-"].columns-5 { grid-template-columns: repeat(1, 1fr); }
    .is-layout-grid { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
}

/* ── Visibility utilities ─────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .hide-on-mobile,
    .hide-on-mobile * { display: none; }

    .reverse-columns,
    .reverse-column { flex-direction: column-reverse; }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .hide-on-tablet,
    .hide-on-tablet * { display: none; }
}

@media (min-width: 1025px) {
    .hide-on-desktop,
    .hide-on-desktop * { display: none; }
}

/* ── Site header: desktop/mobile toggle ──────────────────────────────────── */

.oi-site-header.is-mobile-header {
    display: none;
}

@media screen and (max-width: 768px) {
    #site-header.has-mobile-header { display: none; }
    .oi-site-header.is-mobile-header { display: block; }
}

@media screen and (min-width: 769px) {
    .oi-site-header { display: block; }
    .oi-site-header.is-mobile-header { display: none; }
}

/* ── Transparent header: push page hero down ─────────────────────────────── */

@media (min-width: 1024px) {
    body[class*="header-transparent"] .site-hero,
    body[class*="header-transparent"] .oi-page-header,
    body[class*="header-transparent"] .oi-archive-header {
        padding-top: 7rem !important;
    }
}

/* ── Site logo SVG sizing ─────────────────────────────────────────────────── */

.wp-block-site-logo svg { width: 100%; height: auto; }

/* ── Remove WP block gap on site-blocks container ────────────────────────── */

:where(.wp-site-blocks) > * {
    margin-block-start: 0;
}

/* ── Social link: no hover transform ─────────────────────────────────────── */

.wp-block-social-link:hover { transform: none; }

/* ── Overflow utilities ──────────────────────────────────────────────────── */

.oi-overflow-visible    { overflow: visible !important; }
.oi-overflow-hidden     { overflow: hidden !important; }
.oi-overflow-clip       { overflow: clip !important; }
.oi-overflow-x-visible  { overflow-x: visible !important; }
.oi-overflow-y-visible  { overflow-y: visible !important; }

/* ── Negative margin utilities (token-based) ─────────────────────────────── */

.mt-minus-2 { margin-top: -3vw !important; }
.mt-minus-3 { margin-top: -4vw !important; }
.mt-minus-4 { margin-top: -5vw !important; }
.mt-minus-5 { margin-top: -6vw !important; }
.mt-minus-6 { margin-top: -7vw !important; }
.mt-minus-7 { margin-top: -8vw !important; }
.mt-minus-8 { margin-top: -9vw !important; }

.mb-minus-2 { bottom: -3vw; z-index: var(--oi-z-base); }
.mb-minus-3 { bottom: -4vw; z-index: var(--oi-z-base); }
.mb-minus-4 { bottom: -5vw; z-index: var(--oi-z-base); }
.mb-minus-5 { bottom: -6vw; z-index: var(--oi-z-base); }
.mb-minus-6 { bottom: -7vw; z-index: var(--oi-z-base); }
.mb-minus-7 { bottom: -8vw; z-index: var(--oi-z-base); }
.mb-minus-8 { bottom: -9vw; z-index: var(--oi-z-base); }

/* Token-named pulls mapped to viewport-percent values so the move amount is
   predictable across breakpoints. Vertical pulls use vh (viewport height)
   and horizontal pulls use vw, so the percentage matches the axis you're
   moving on. -80 ≈ 50% of the relevant viewport dimension; the lower steps
   stay subtle via roughly exponential scaling. */
.mt-minus-20 { margin-top:  -1vh  !important; top: -1vh  !important; }
.mt-minus-30 { margin-top:  -3vh  !important; top: -3vh  !important; }
.mt-minus-40 { margin-top:  -6vh  !important; top: -6vh  !important; }
.mt-minus-50 { margin-top: -10vh  !important; top: -10vh !important; }
.mt-minus-60 { margin-top: -18vh  !important; top: -18vh !important; }
.mt-minus-70 { margin-top: -30vh  !important; top: -30vh !important; }
.mt-minus-80 { margin-top: -50vh  !important; top: -50vh !important; }

.mb-minus-20 { margin-bottom:  -1vh !important; }
.mb-minus-30 { margin-bottom:  -3vh !important; }
.mb-minus-40 { margin-bottom:  -6vh !important; }
.mb-minus-50 { margin-bottom: -10vh !important; }
.mb-minus-60 { margin-bottom: -18vh !important; }
.mb-minus-70 { margin-bottom: -30vh !important; }
.mb-minus-80 { margin-bottom: -50vh !important; }

@media only screen and (min-width: 768px) {
    .ml-minus-20 { margin-left:  -1vw !important; }
    .ml-minus-30 { margin-left:  -3vw !important; }
    .ml-minus-40 { margin-left:  -6vw !important; }
    .ml-minus-50 { margin-left: -10vw !important; }
    .ml-minus-60 { margin-left: -18vw !important; }
    .ml-minus-70 { margin-left: -30vw !important; }
    .ml-minus-80 { margin-left: -50vw !important; }

    .mr-minus-20 { margin-right:  -1vw !important; }
    .mr-minus-30 { margin-right:  -3vw !important; }
    .mr-minus-40 { margin-right:  -6vw !important; }
    .mr-minus-50 { margin-right: -10vw !important; }
    .mr-minus-60 { margin-right: -18vw !important; }
    .mr-minus-70 { margin-right: -30vw !important; }
    .mr-minus-80 { margin-right: -50vw !important; }
}

/* Stack pulled-up elements above their neighbors. z-index needs a positioned
   element to take effect — `position: relative` is safe for these utilities
   because they're meant to overlap surrounding flow content, not break out
   of an absolute-positioned ancestor. */
[class*="mt-minus-"],
[class*="mb-minus-"],
[class*="ml-minus-"],
[class*="mr-minus-"] {
    position: relative;
    z-index: 9;
}

/* ── Two-column fullwidth: align column to content edge ──────────────────── */

@media only screen and (min-width: 768px) {
    .pad-my-column {
        padding-left: calc((100vw - var(--wp--style--global--content-size)) / 2) !important;
    }
}

/* ── WP image block sizing fix ────────────────────────────────────────────── */

.wp-block-image img { max-width: 100%; height: auto; }

/* ── Gravity Forms: horizontal inline form ────────────────────────────────── */

.gf-horizontal-form form { display: flex; gap: 10px; }

/* ── WP search block ──────────────────────────────────────────────────────── */

.wp-block-search { position: relative; }

/* ── Company information (shortcode legacy) ──────────────────────────────── */

.company-information { list-style: none; padding: 0; margin: 0; }
.company-information a { color: inherit; }
.company-information:not(.address) a:hover { text-decoration: underline; outline: 1px solid dotted; }

p.company-information a,
p.company-information a:hover { color: inherit; }
p.company-information a:hover { text-decoration: underline; }

/* ── Company social icons (shortcode legacy) ──────────────────────────────── */

.company-social { display: flex; list-style: none; margin: 0; padding: 0; flex-direction: column; }
.company-social.list-group-horizontal,
.company-social.horizontal { flex-direction: row; }
.company-social svg { height: 25px; width: 25px; fill: var(--wp--preset--color--palette-1); }
.company-social .list-group-item { background: transparent; padding-right: 10px; border: 0; }

/* ── Video CPT embed wrapper (oe-video shortcode) ─────────────────────────── */

.oe-video { width: 100%; max-width: 100%; }
.oe-video__inner { position: relative; width: 100%; }
.oe-video__inner::before { content: ""; display: block; padding-top: 56.25%; }
.oe-video__inner > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ── WP embed block (responsive 16:9) ────────────────────────────────────── */

.wp-block-embed__wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

.wp-block-embed__wrapper iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}

.portrait-video .wp-block-embed__wrapper iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 9 / 16;
}

/* ── Video cover wrapper (myplugin/video-cover-wrapper block) ─────────────── */

.video-cover-wrapper .video-block-group { visibility: hidden; display: none; }
.video-cover-wrapper .video-block-group.is-visible { visibility: visible; display: block; }
.video-cover-wrapper .video-play-btn { position: relative; z-index: 2; cursor: pointer; }

.video-cover-16by9 {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    overflow: hidden;
}

.video-cover-16by9 > .wp-block-cover__inner-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.video-cover-wrapper .video-block-group {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
}

.video-cover-wrapper .video-block-group iframe,
.video-cover-wrapper .video-block-group video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ── Announcement bar (oechsli/announcement-bar block) ────────────────────── */

.oi-announcement {
    background: var(--wp--preset--color--palette-1);
    font-size: 16px;
    top: 0;
    left: 0;
    width: 100% !important;
    padding: 10px 15px;
}
.oi-announcement a { color: var(--wp--preset--color--palette-9); }
.oi-announcement p { margin: 0; padding: 0; }

/* ── Podcast player (shortcode) ───────────────────────────────────────────── */

.podcast-header { display: flex; justify-content: space-between; align-items: center; }
.podcast-date,
.podcast-episode-length,
.podcast-episode { text-transform: uppercase; font-size: 0.9rem; font-weight: bold; opacity: 0.8; }
.podcast-episode { display: inline; }

.card-footer.podcast-footer { background-color: var(--wp--preset--color--palette-8); display: flex; align-items: center; }
.podcast-player audio:focus { outline: none; }

/* ── Gravity Forms: focus outline ─────────────────────────────────────────── */

body .gform_wrapper .gform_body .gform_fields .gfield input[type=text]:focus,
body .gform_wrapper .gform_body .gform_fields .gfield input[type=email]:focus,
body .gform_wrapper .gform_body .gform_fields .gfield input[type=tel]:focus,
body .gform_wrapper .gform_body .gform_fields .gfield input[type=url]:focus,
body .gform_wrapper .gform_body .gform_fields .gfield input[type=number]:focus,
body .gform_wrapper .gform_body .gform_fields .gfield input[type=password]:focus,
body .gform_wrapper .gform_body .gform_fields .gfield select:focus,
body .gform_wrapper .gform_body .gform_fields .gfield textarea:focus {
    outline-color: var(--wp--preset--color--palette-6);
}

/* ── reCAPTCHA notice ─────────────────────────────────────────────────────── */

.oi-recaptcha { text-align: center; }
.oi-recaptcha-text { font-size: 11px; color: var(--wp--preset--color--palette-5); }

/* ── Breadcrumbs (deprecated/oechsli-breadcrumbs.php) ────────────────────── */

.breadcrumb { margin: 0; padding: 0; }
li.breadcrumb-item { display: inline-block; padding: 0 5px; }

/* ── Masonry / column gallery (classic WP gallery shortcode) ─────────────── */

.gallery {
    column-count: 4;
    column-gap: 10px;
}

@media only screen and (max-width: 768px) {
    .gallery { column-count: 2; }
}

@media only screen and (max-width: 480px) {
    .gallery { column-count: 1; }
}

.gallery br { display: none !important; }

.gallery .gallery-item {
    margin: -3px 0 !important;
    float: none !important;
    width: 100% !important;
}

.gallery .gallery-item img {
    width: 100%;
    height: auto;
    display: block;
    opacity: 1;
    transition: opacity var(--oi-transition-slow);
    border: none !important;
}

/* ── Icon block: no underline on linked icons ─────────────────────────────── */

a.oi-icon,
a.oi-icon:hover {
    text-decoration: none;
    color: inherit;
}

/* ── Post title links ─────────────────────────────────────────────────────── */

.wp-block-post-title a { text-decoration: none; }
.wp-block-post-title a:hover {
    text-decoration: none;
    color: var(--wp--preset--color--palette-1);
}

/* ── FAQ / plain accordion (accordion__item system) ───────────────────────── */
/* Used by content created with the legacy accordion or manual FAQ markup. */

.accordion-header,
.accordion-body {
    background: var(--wp--preset--color--palette-9);
}

.accordion-header {
    padding: 0.5em;
    background: transparent;
    cursor: pointer;
    transition: background-color var(--oi-transition-normal);
    margin: 0;
}

.accordion__item {
    border-bottom: 0px solid var(--wp--preset--color--palette-1);
}

.accordion-header:hover {
    background: var(--wp--preset--color--palette-8);
    position: relative;
    z-index: 5;
}

.accordion-body {
    background: var(--wp--preset--color--palette-9);
    display: none;
}

.accordion-body__contents {
    padding: 0.5em;
}

.accordion-body__contents p { margin: 0; }

.accordion__item.active:last-child .accordion-header {
    border-radius: none;
}

.accordion:first-child > .accordion__item > .accordion-header {
    border-bottom: 1px solid transparent;
}

.has-arrows .accordion__item > .accordion-header:after {
    content: "\f077";
    font-family: "Font Awesome 5 Pro";
    font-weight: 400;
    font-size: 1rem;
    float: right;
    position: relative;
    top: -2px;
    transition: transform var(--oi-transition-normal);
    transform: rotate(0deg);
}

.has-arrows .accordion__item.active > .accordion-header:after {
    transform: rotate(-180deg);
}

.accordion__item.active .accordion-header {
    background: var(--wp--preset--color--palette-9);
}

.accordion__item .accordion__item .accordion-header {
    background: var(--wp--preset--color--palette-8);
    color: var(--wp--preset--color--palette-3);
}

/* ── Offcanvas menu ───────────────────────────────────────────────────────── */

.offcanvas-content {
    position: fixed;
    transition: transform 0.3s ease-in-out;
    overflow-y: auto;
    z-index: 9999;
}

.offcanvas-right {
    width: 100%;
    max-width: 300px;
    top: 0;
    right: 0;
    transform: translateX(100%);
    margin: 0;
}

.offcanvas-content.offcanvas-right .wp-block-group.canvas-container { min-height: 100vh; }

body.offcanvas-open .offcanvas-right { transform: translateX(0); }

body.admin-bar.offcanvas-open .offcanvas-right,
body.admin-bar .offcanvas-right { top: 32px; }

.offcanvas-left {
    width: 100%;
    max-width: 300px;
    top: 0;
    left: 0;
    transform: translateX(-100%);
}

.offcanvas-content.offcanvas-left .wp-block-group:first-child { min-height: 100vh; }

body.offcanvas-open .offcanvas-left { transform: translateX(0); }

.offcanvas-top {
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    transform: translateY(-100%);
}
body.offcanvas-open .offcanvas-top { transform: translateY(0); }

.offcanvas-bottom {
    width: 100%;
    height: auto;
    bottom: 0;
    left: 0;
    right: 0;
    transform: translateY(100%);
}
body.offcanvas-open .offcanvas-bottom { transform: translateY(0); }

.site-offcanvas-inner { min-height: 100vh; }

/* ── Hamburger / navigation visibility ────────────────────────────────────── */

.visibility-mobile .wp-block-navigation { display: none; }
.visibility-mobile .hamburger-menu-button { display: block; }

@media (min-width: 768px) {
    .visibility-mobile .wp-block-navigation { display: flex; }
    .visibility-mobile .hamburger-menu-button { display: none; }
}

@media (min-width: 1024px) {
    .visibility-mobile .hamburger-menu-button { display: none !important; }
}

/* ── Site logo: light logo switching ──────────────────────────────────────── */
/* Both logo links always rendered; CSS toggles visibility. */

.oi-site-logo .oi-logo__link--default,
.oi-site-logo .oi-logo__link--light {
    display: flex;
    align-items: center;
}

.oi-site-logo .oi-logo__link--light {
    display: none;
}

@media (prefers-color-scheme: dark) {
    .oi-site-logo.oi-has-light-logo .oi-logo__link--default { display: none; }
    .oi-site-logo.oi-has-light-logo .oi-logo__link--light   { display: flex; }
}

.oi-palette-2 .oi-site-logo.oi-has-light-logo .oi-logo__link--default { display: none; }
.oi-palette-2 .oi-site-logo.oi-has-light-logo .oi-logo__link--light   { display: flex; }