/**
 * Orbit Theme Stylesheet
 *
 * Structural styles only — no brand colours, fonts or decoration. Design
 * tokens (spacing, layout widths, type scale) live in theme.json.
 *
 * Table of Contents:
 * 1. Reset & Base Styles
 * 2. Layout & Containers
 * 3. Typography & Text
 * 4. Header & Navigation
 * 5. Mobile Navigation
 * 6. Grid & Flex Utilities
 * 7. Block Styles (Sticky)
 * 8. Media Queries
 */


/* ==========================================================================
   1. RESET & BASE STYLES
   ========================================================================== */

   html {
    line-height: 1.1;
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
    overflow-x: clip;
    box-sizing: border-box;
    scroll-padding-top: 81px;
}

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

body {
    margin: 0;
}

/* ----- Screen-reader-only utility -----
   Canonical WordPress accessibility pattern. Visually hides content while
   keeping it in the accessibility tree (used by the skip-link, pagination,
   comment nav, form labels, etc.). Without this rule those "hidden" labels
   render as visible on-screen text. */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    position: absolute !important;
    word-wrap: normal !important;
}

/* Reveal sr-only interactive controls (notably the skip-link) when they
   receive keyboard focus, so sighted keyboard users can see and use them. */
.screen-reader-text:focus {
    background-color: #fff;
    color: #000;
    clip: auto !important;
    clip-path: none;
    display: block;
    width: auto;
    height: auto;
    left: 16px;
    top: 16px;
    z-index: 100000;
    padding: 12px 20px;
    border-radius: 4px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
    font-size: var(--wp--preset--font-size--normal);
    font-weight: 600;
    text-decoration: none;
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* The skip-link target wrapper shouldn't show a focus ring when focus falls
   back to it (the skip link normally lands on the first focusable child). */
#main-content:focus {
    outline: none;
}

/* Temporary highlight applied by global.js to whatever element the skip link
   sends focus to, so keyboard users clearly see where they landed. Added on
   activation, removed on blur. !important overrides the #main-content:focus
   reset above when focus falls back to the region itself. */
.skip-link-target {
    outline: 3px solid currentColor !important;
    outline-offset: 3px;
    border-radius: 4px;
    scroll-margin-top: 90px;
}

figure {
    margin: 0;
}

img {
    border-style: none;
    max-width: 100%;
    height: auto;
}

iframe {
    display: block;
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible;
}

blockquote {
    margin: 0;
}

template {
    display: none;
}

[hidden] {
    display: none;
}

details {
    display: block;
}

summary {
    display: list-item;
}


/* ==========================================================================
   2. LAYOUT & CONTAINERS
   ========================================================================== */

.wrap {
    margin: auto;
    max-width: var(--wp--style--global--content-size);
    width: 100%;
    padding-left: var(--wp--preset--spacing--medium);
    padding-right: var(--wp--preset--spacing--medium);
}


/* ==========================================================================
   3. TYPOGRAPHY & TEXT
   ========================================================================== */

a {
    background-color: transparent;
    color: inherit;
    word-break: break-word;
    outline-offset: 2px;
    text-decoration: underline;
}

a:focus-visible {
    outline: 2px solid #276EF1;
}

b,
strong {
    font-weight: 700;
}

small {
    font-size: 80%;
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

abbr[title] {
    border-bottom: none;
    text-decoration: underline dotted;
}

pre,
code,
kbd,
samp {
    font-family: monospace, monospace;
    font-size: 1em;
}



/* ==========================================================================
   4. HEADER & NAVIGATION
   ========================================================================== */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #fff;
}

.site-header .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wp--preset--spacing--small);
    min-height: var(--wp--custom--header--height);
}

.admin-bar .site-header {
    top: 32px;
}

/* Desktop Navigation */
#nav-menu {
    display: none;
}

#primary-menu {
    display: flex;
    align-items: center;
    gap: var(--wp--preset--spacing--small);
    list-style: none;
    margin: 0;
    padding: 0;
}

#primary-menu > li {
    position: relative;
}

/* Submenu Dropdown */
.submenu {
    position: absolute;
    top: 100%;
    left: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
    z-index: 9999;
}

#nav-menu li.menu-item-has-children:hover .submenu,
#nav-menu li.menu-item-has-children:focus .submenu,
#nav-menu li.menu-item-has-children:focus-within .submenu,
#nav-menu li.menu-item-has-children.is-open .submenu {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease, visibility 0s;
}

.submenu-inner-wrap {
    min-width: 240px;
    background: #fff;
    border: 1px solid #ddd;
    padding: var(--wp--preset--spacing--small);
}

.submenu-inner .menu-items,
.submenu-inner .sub-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.submenu-inner .menu-items a {
    display: block;
    padding: 6px 0;
}

/* Mobile Toggle */
#toggle-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

#toggle {
    height: 40px;
    width: 40px;
    position: relative;
    border: 0;
    padding: 0;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

#toggle .bar {
    height: 2px;
    width: 22px;
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    background-color: currentColor;
    transition: top 0.2s ease, transform 0.2s ease 0.12s, opacity 0.15s ease;
}

#toggle .bar:nth-of-type(1) { top: 12px; }
#toggle .bar:nth-of-type(2) { top: 19px; }
#toggle .bar:nth-of-type(3) { top: 26px; }

.active #toggle .bar:nth-of-type(1) {
    top: 19px;
    transform: rotate(45deg);
}

.active #toggle .bar:nth-of-type(2) {
    opacity: 0;
}

.active #toggle .bar:nth-of-type(3) {
    top: 19px;
    transform: rotate(-45deg);
}


/* ==========================================================================
   5. MOBILE NAVIGATION
   ========================================================================== */

#mobile-nav-menu {
    position: fixed;
    top: var(--wp--custom--header--height);
    left: 0;
    width: 100%;
    height: calc(100dvh - var(--wp--custom--header--height));
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #fff;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
    z-index: 999;
}

.active #mobile-nav-menu {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0s;
}

#mobile-menu,
#mobile-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#mobile-menu li.menu-item-has-children {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

#mobile-menu a {
    display: block;
    padding: 15px var(--wp--preset--spacing--medium);
    cursor: pointer;
}

#mobile-menu li ul {
    display: none;
    width: 100%;
}

#mobile-menu button {
    background: transparent;
    border: 0;
    width: 50px;
    height: 50px;
    cursor: pointer;
}

#mobile-menu button svg {
    transition: transform 0.3s ease-out;
}

#mobile-menu .menu-item.active button svg {
    transform: rotateX(180deg);
}

/* Respect reduced-motion: keep the menu instant, drop the animation. */
@media (prefers-reduced-motion: reduce) {
    #mobile-nav-menu,
    .active #mobile-nav-menu,
    #toggle .bar,
    #mobile-menu button svg,
    .submenu {
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
    }
}


/* ==========================================================================
   6. GRID & FLEX UTILITIES
   ========================================================================== */

/* Flexbox */
.flex {
    display: flex;
    flex-wrap: wrap;
    margin-right: calc(0px - var(--wp--custom--layout--small-padding));
    margin-left: calc(0px - var(--wp--custom--layout--small-padding));
}

.flex>div {
    padding: var(--wp--custom--layout--small-padding);
}

.v-align {
    align-items: center;
    height: 100%;
}

.h-align {
    justify-content: center;
}

/* Flex Column Widths */
.col-100 {
    flex: 0 0 100%;
}

.col-75 {
    flex: 0 0 75%;
}

.col-66 {
    flex: 0 0 66.6666%;
}

.col-50 {
    flex: 0 0 50%;
}

.col-33 {
    flex: 0 0 33.3333%;
}

.col-25 {
    flex: 0 0 25%;
}

.col-20,
.has-5-columns>div {
    flex: 0 0 20%;
}

.col-10 {
    flex: 0 0 10%;
}

/* CSS Grid */
.grid {
    display: grid;
    grid-column-gap: var(--wp--preset--spacing--medium);
    grid-row-gap: var(--wp--preset--spacing--medium);
}

.columns-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

.columns-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
}

.columns-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.columns-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.columns-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.columns-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.columns-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Responsive card / bento grids.
   Above 992px the authored layout stands: .columns-N sets the track count and
   WordPress' per-card .wp-container-content-*{grid-column:span N} rules form the
   bento. Below 992px we drop the fixed tracks AND neutralise those per-card spans
   so cards reflow fluidly by intrinsic min width — count- and span-agnostic, so
   every columns-N variation adapts without bespoke breakpoints.
   Two-class / attribute selectors (0,2,0) outrank the base .columns-N, WP's
   .wp-container-* parent rules and .wp-container-content-* span rules (all 0,1,0).
   Galleries use .is-layout-flex and are intentionally unmatched. */
@media (max-width: 992px) {
    .grid[class*="columns-"],
    .is-layout-grid[class*="columns-"] {
        grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    }

    .grid[class*="columns-"] > *,
    .is-layout-grid[class*="columns-"] > * {
        grid-column: auto;
        grid-row: auto;
    }
}







/* ==========================================================================
   7. BLOCK STYLES Sticky (core/group, core/column)

   Block style preset that pins the block to the top of the viewport once its
   parent container scrolls past. Registered in inc/block-styles.php; pick
   "Sticky on scroll" from the Styles panel after inserting a Group or Column.

   Requires the block's direct parent to be a flex/grid container (which is
   how core/columns already renders) and to be taller than the sticky item -
   otherwise there is nothing to scroll past.

   Offset from the top is controlled by --orbit-sticky-top (default clears
   the sticky header). Override per-instance with inline style="".
   ========================================================================== */

.is-style-sticky {
    position: sticky;
    top: var(--orbit-sticky-top, calc(var(--wp--custom--header--height) + 20px));
    align-self: start;
}

/* On mobile the layout is a single column, so sticky positioning just
   causes the element to overlap the content below it - turn it off. */
@media (max-width: 781px) {
    .is-style-sticky {
        position: static;
        top: auto;
    }
}


/* ==========================================================================
   8. MEDIA QUERIES
   ========================================================================== */

/* Desktop (1200px+) */
@media (min-width: 1200px) {
    #nav-menu {
        display: flex;
    }

    #mobile-nav-menu {
        display: none;
    }

    #toggle-wrap {
        display: none;
    }
}

/* Tablet & Below (782px) */
@media (max-width: 782px) {
    #wpadminbar {
        display: none !important;
    }

    .admin-bar .site-header {
        top: 0;
    }
}