/**
 * 3MW Core Child Theme - Frontend Styles
 *
 * Client-specific customizations and style overrides
 * This file loads after the parent theme's frontend.min.css
 *
 * @package 3MW_Core_Child
 * @since 1.0.0
 */

/* ==========================================================================
   COMPONENT IMPORTS
   ========================================================================== */

@import url('components/navigation.css');
@import url('components/footer.css');

/* ==========================================
   TABLE OF CONTENTS
   ========================================== */

/*
 * COMPONENT IMPORTS (at top of file):
 *   - components/navigation.css (header & nav styles)
 *   - components/footer.css (footer styles)
 *
 * SECTIONS IN THIS FILE:
 *   - Variables
 *   - Mega Menus
 *   - Typography Overrides
 *   - Component Overrides
 *   - Block Customizations (various blocks)
 *   - Two-Column Alternating Block
 *   - Template-Specific Overrides
 *   - Prefooter CTA Block
 *   - Client-Specific Features
 *   - Responsive Overrides
 *   - Utility Classes
 *   - Hero Block Layouts
 *   - Tabbed Content Block
 *   - CTA Banner Block
 *
 * SEPARATE FILES:
 *   - Gravity Form form styles: frontend-gravity-forms.css
 *   - Block-specific styles: /blocks/[block-name]/style.css
 */

/* ==========================================
   VARIABLES
   ========================================== */

:root {
    /* Grid System Override */
    --row-gap: 30px;

    /* Colors & Gradients - Managed via Full Site Editor (FSE) */

    /* Use FSE > Site Editor > Colors/Gradients to add custom colors and gradients */

    /* No need to define color/gradient variables here - FSE handles all color management */

    /* WordPress FSE Color Mapping - Simple names → WordPress preset format */
    --color-primary: var(--wp--preset--color--blue);
    --color-primary-transparent: color-mix(in srgb, var(--color-primary) 25%, transparent);
    --color-secondary: var(--wp--preset--gradient--gradient-primary);
    --color-tertiary: var(--wp--preset--color--blue-navy);
    --color-bg: var(--wp--preset--color--gray-light);
    --color-bg-gradient: var(--wp--preset--gradient--gradient-blue-white);
    --color-accent: var(--wp--preset--color--blue-dark);
    --color-text-primary: var(--wp--preset--color--gray);
    --color-text-secondary: var(--wp--preset--color--gray-light);
    --color-text-light: var(--color-white);
    --color-link: var(--wp--preset--color--blue);
    --color-link-hover: var(--wp--preset--color--blue-navy);
    --color-border: var(--wp--preset--color--blue-light);
    --color-border-light: var(--wp--preset--color--gray-light);
    --input-placeholder: var(--wp--preset--color--gray);
    --color-heading: var(--wp--preset--color--blue-navy);
    --line-height-heading: 1.3em;

    /* Font families are now managed via Theme Settings > Typography */

    /* --font-family-body is automatically set by parent theme based on ACF Typography options */


    /* Client-Specific Custom Variables */

    /* Footer link hover/active color - Override parent theme dark blue with white for readability on dark footer */
    --color-footer-link-hover: var(--color-white);

    /* H1 Alt - Larger heading size for hero blocks (defined in child theme.json) */
    --font-size-h1-alt: var(--wp--preset--font-size--h-1-alt);

    /* Hero Subtitle - Larger lead font size for hero blocks & CTAs */
    --font-size-hero-subtitle: var(--wp--preset--font-size--hero-subtitle);
    --gradient-overlay: var(--wp--preset--color--gradient-overlay);
}

body {
    color: var(--color-text-primary);
}

:focus-visible {
    outline: 1px dashed var(--wp--preset--color--blue);
    outline-offset: 2px;
}

.section-header {
    margin-bottom: var(--space-2xl);
}

.wp-block-image img {
    border-radius: var(--radius-card);
}

.announcement-bar .announcement-bar-cta:hover::before {
    opacity: 0.4;
}

.breadcrumbs-list,
.breadcrumbs-list a {
    color: var(--color-primary);
}

.breadcrumbs-list span.current {
    padding: 3px 0;
}

/* Breadcrumbs container padding - match main container padding at each breakpoint
   1200px-1280px: matches base .container (--space-xl)
   <= 1200px: matches responsive.css .container override (--space-md) */
@media (1200px < width < 1280px) {
    .breadcrumbs .container {
        padding-left: var(--space-xl);
        padding-right: var(--space-xl);
    }
}

@media (width <= 1200px) {
    .breadcrumbs .container {
        padding-left: var(--space-md);
        padding-right: var(--space-md);
    }
}

.wp-block-separator {
    background-color: var(--color-border) !important;
}

/* ==========================================
   TABLE STYLING - Modern & Accessible
   ========================================== */

/* Base table structure - Exclude: calendar tables, Gravity Forms confirmation tables */
:is(.wp-block-table, .entry-content:not(.gform_confirmation_message)) table,
:not(.gform_confirmation_message) table:not(.wp-calendar-table) {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    overflow: hidden;
    margin-bottom: var(--space-lg);
    background: var(--color-white);
    box-shadow: var(--shadow-sm);
}

/* Table header */
:is(.wp-block-table, .entry-content:not(.gform_confirmation_message)) table thead,
:not(.gform_confirmation_message) table:not(.wp-calendar-table) thead {
    background: var(--gradient-primary);
}

:is(.wp-block-table, .entry-content:not(.gform_confirmation_message)) table thead th,
:not(.gform_confirmation_message) table:not(.wp-calendar-table) thead th {
    color: var(--color-white);
    font-weight: var(--font-weight-semibold);
    padding: var(--space-md) var(--space-lg);
    border: none;
    border-bottom: 2px solid var(--color-primary);
}

:is(.wp-block-table, .entry-content:not(.gform_confirmation_message)) table thead th:first-child,
:not(.gform_confirmation_message) table:not(.wp-calendar-table) thead th:first-child {
    border-top-left-radius: var(--radius-card);
}

:is(.wp-block-table, .entry-content:not(.gform_confirmation_message)) table thead th:last-child,
:not(.gform_confirmation_message) table:not(.wp-calendar-table) thead th:last-child {
    border-top-right-radius: var(--radius-card);
}

/* Table body */
:is(.wp-block-table, .entry-content:not(.gform_confirmation_message)) table tbody td,
:not(.gform_confirmation_message) table:not(.wp-calendar-table) tbody td {
    padding: var(--space-md) var(--space-lg);
    border: none;
    border-bottom: 1px solid var(--color-border-light);
    color: var(--color-text-primary);
    vertical-align: top;
}

/* Zebra striping */
:is(.wp-block-table, .entry-content:not(.gform_confirmation_message)) table tbody tr:nth-child(even),
:not(.gform_confirmation_message) table:not(.wp-calendar-table) tbody tr:nth-child(even) {
    background-color: var(--wp--preset--color--gray-light);
}

/* Last row rounded corners */
:is(.wp-block-table, .entry-content:not(.gform_confirmation_message)) table tbody tr:last-child td,
:not(.gform_confirmation_message)table:not(.wp-calendar-table) tbody tr:last-child td {
    border-bottom: none;
}

:is(.wp-block-table, .entry-content:not(.gform_confirmation_message)) table tbody tr:last-child td:first-child,
:not(.gform_confirmation_message) table:not(.wp-calendar-table) tbody tr:last-child td:first-child {
    border-bottom-left-radius: var(--radius-card);
}

:is(.wp-block-table, .entry-content:not(.gform_confirmation_message)) table tbody tr:last-child td:last-child,
:not(.gform_confirmation_message) table:not(.wp-calendar-table) tbody tr:last-child td:last-child {
    border-bottom-right-radius: var(--radius-card);
}

/* Table footer */
:is(.wp-block-table, .entry-content:not(.gform_confirmation_message)) table tfoot,
:not(.gform_confirmation_message) table:not(.wp-calendar-table) tfoot {
    background-color: var(--wp--preset--color--gray-light);
    font-weight: var(--font-weight-semibold);
}

:is(.wp-block-table, .entry-content:not(.gform_confirmation_message)) table tfoot td,
:not(.gform_confirmation_message) table:not(.wp-calendar-table) tfoot td {
    padding: var(--space-md) var(--space-lg);
    border-top: 2px solid var(--color-border);
}

/* Caption */
.wp-block-table figcaption,
:is(.entry-content:not(.gform_confirmation_message) table, table:not(.wp-calendar-table, .gfield_list)) caption {
    caption-side: bottom;
    padding: var(--space-sm) var(--space-md);
    font-size: var(--font-size-small);
    font-style: italic;
}

/* Links in tables */
:is(.wp-block-table, .entry-content:not(.gform_confirmation_message)) table td a,
:not(.gform_confirmation_message) table:not(.wp-calendar-table) td a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

:is(.wp-block-table, .entry-content:not(.gform_confirmation_message)) table td a:hover,
:not(.gform_confirmation_message) table:not(.wp-calendar-table, .wc-block-order-confirmation-totals__table) td a:hover {
    color: var(--color-bg);
    text-decoration: none;
}

/* Mobile responsive */
@media (width <= 768px) {
    figure.wp-block-table {
        width: 100%;
        margin: 0 0 var(--space-lg) 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    :is(figure.wp-block-table, .wp-block-table, .entry-content:not(.gform_confirmation_message)) table {
        width: 100% !important;
        min-width: 100%;
    }

    figure.wp-block-table table.has-fixed-layout {
        table-layout: auto;
    }

    :is(.wp-block-table, .entry-content:not(.gform_confirmation_message)) table :is(th, td),
    table:not(.wp-calendar-table, .gfield_list) :is(th, td) {
        padding: var(--space-sm) var(--space-md);
        white-space: normal;
        word-break: break-word;
    }
}

.section-subtitle,
.section-subtitle p {
    color: inherit;
}

/* Utility Menu - Override parent theme's color: inherit */
.utility-menu a {
    color: var(--color-primary);
}

.nav-menu--mobile {
    background: var(--color-bg);
    color: var(--color-heading);
}

.mobile-menu__link,
.mobile-menu__toggle {
    font-size: var(--font-size-lead);
    color: var(--color-heading);
    padding: var(--space-lg) var(--space-md);
}

/* Set constant padding to prevent shift during expand/collapse animation */
.mobile-submenu {
    padding: 0 0 var(--space-lg) var(--space-md);
}

.nav-menu--mobile .mobile-submenu .mobile-menu__link {
    padding-left: 0;
}

.nav-menu--mobile .mobile-submenu__link.mobile-submenu__link--parent {
    text-transform: uppercase;
    font-weight: var(--font-weight-semibold);
}

.nav-menu--mobile .mobile-submenu__item.column-title a,
.mobile-footer-menu__list .sub-menu .column-title a {
    text-transform: uppercase;
    font-size: var(--font-size-body);
}

.nav-menu--mobile .mobile-submenu__item.column-title a {
    font-weight: var(--font-weight-semibold);
    border-bottom: 1px solid var(--color-border);
}

.mobile-footer-menu__list .sub-menu .column-title a {
    margin-bottom: var(--space-sm);
    border-bottom: 1px solid rgb(255 255 255 / 15%);
}

.nav-menu--mobile .has-submenu .mobile-submenu__item.column-title:not(:first-of-type) {
    margin-top: 1em;
}

/* ==========================================
   MEGA MENUS
   ========================================== */

/* Mobile Column Title Links */
.mobile-submenu__link--column-title {
    min-height: fit-content;
    color: var(--color-primary);
    padding-bottom: 0;
    margin-top: var(--space-md);
    margin-bottom: var(--space-xs);
}

/* Column Title Links */
.mega-menu__column-title-link {
    text-decoration: none;
    color: inherit;
    transition: color var(--transition-base);
}

.mobile-submenu__item--column-title:first-child {
    margin-top: 0;
}

.mobile-submenu__link--column-title:hover {
    color: var(--color-primary);
}

.hamburger span {
    background: var(--color-white) !important;
}


/* ==========================================
   TYPOGRAPHY OVERRIDES
   ========================================== */

blockquote {
    border-left: 4px solid var(--color-primary);
}

/* Text Wrap - Improved line breaking for better typography
   Avoids orphans and creates more balanced paragraph endings.
   Excludes elements with .balance or .text-balance classes. */
.entry-content div:not(.balance, .text-balance),
.wysiwyg-editor-content p:not(.balance, .text-balance) {
    text-wrap: pretty;
}

/* ==========================================================================
   Link Font Weight - On-Page Content Links Only
   Only links within paragraphs and list items should be bold.
   Navigation, header, footer, and card links remain normal weight.
   ========================================================================== */

/* Content links - bold for in-paragraph/in-list links */
.entry-content p a,
.entry-content li a,
.flexible-content-wrapper p a,
.flexible-content-wrapper li a,
#main-content p a,
#main-content li a,
.wysiwyg-content p a,
.wysiwyg-content li a,
.box-description p a,
.box-description li a {
    font-weight: var(--font-weight-semibold);
}

/* Content links - remove underline on hover */
.entry-content p a:hover,
.entry-content li a:hover,
.flexible-content-wrapper p a:hover,
.flexible-content-wrapper li a:hover,
#main-content p a:hover,
#main-content li a:hover,
.wysiwyg-content p a:hover,
.wysiwyg-content li a:hover,
.box-description p a:hover,
.box-description li a:hover {
    text-decoration: none;
}

/* Ensure navigation, header, footer, and card links stay normal weight */
header a,
footer a,
nav a,
.site-header a,
.site-footer a,
.card a,
.card-title a,
.box-title a,
.btn,
.button,
.breadcrumbs a,
.breadcrumbs-list a,
.mega-menu a,
.mobile-menu a,
.utility-menu a,
.post-meta a,
.archive-meta a,
.pagination a,
sup a,
a sup {
    font-weight: normal;
}

/* Default heading styles */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: normal;
}

h3,
.h3 {
    color: var(--color-primary);
}

/* Headings inherit text color in dark background sections */
[class*="bg-dark"] :is(h1, h2, h3, h4, h5, h6),
.dark-bg :is(h1, h2, h3, h4, h5, h6),
.has-text-color :is(h1, h2, h3, h4, h5, h6) {
    color: inherit;
}

/* List Styles - Unordered list bullet colors */
ul li::marker {
    color: var(--color-primary);
}

/* ==========================================================================
   Checkmarks List - Custom WYSIWYG Formats
   Applied via Formats dropdown in TinyMCE editor
   Two variants: filled (default) and outlined
   ========================================================================== */

/* Shared styles for both checkmarks list variants */
.checkmarks-list,
.checkmarks-list-outlined {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
}

.checkmarks-list li,
.checkmarks-list-outlined li {
    position: relative;
    padding-left: 2em;
    margin-bottom: var(--space-sm);
}

.checkmarks-list li::before,
.checkmarks-list-outlined li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.275em;
    width: 1em;
    height: 1em;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Filled checkmark (default) */
.checkmarks-list li::before {
    background-image: url('/wp-content/themes/3mw-core-child/assets/images/icon-checkmark.svg');
}

/* Outlined checkmark variant */
.checkmarks-list-outlined li::before {
    background-image: url('/wp-content/themes/3mw-core-child/assets/images/icon-checkmark-outline.svg');
}

/* Nested lists within checkmarks lists inherit their parent's style */
.checkmarks-list ul,
.checkmarks-list-outlined ul {
    list-style: none;
    padding-left: 0;
    margin-top: var(--space-sm);
}

.checkmarks-list ul li::before {
    background-image: url('/wp-content/themes/3mw-core-child/assets/images/icon-checkmark.svg');
}

.checkmarks-list-outlined ul li::before {
    background-image: url('/wp-content/themes/3mw-core-child/assets/images/icon-checkmark-outline.svg');
}

/* Trademark and Registered Symbols - Readable inline styling */

/* Visible but subtle superscript styling */
sup {
    font-size: 0.65em;          /* readable but not dominant */
    vertical-align: super;      /* Standard superscript positioning */
    line-height: 0;             /* Prevent affecting line height */
    font-weight: normal;        /* Always use normal weight */
    font-style: normal;         /* Never italic */
}

/* Links with superscripts - no underline, consistent styling */
sup a,
a sup {
    font-weight: inherit;
    text-decoration: none;
}

/* Links that wrap superscripts (e.g., reference citations) - remove underline */
a:has(sup) {
    text-decoration: none;
}

/* Superscripts in headings - slightly smaller relative to large text */
:is(h1, h2, h3, h4, h5, h6) sup {
    font-weight: normal;
    font-size: 60%;
    vertical-align: super;
}

/* Helper class for manual application to unwrapped symbols */
.tm-symbol {
    font-size: 0.65em;
    vertical-align: super;
    line-height: 0;
    font-weight: normal;
    font-style: normal;
}

/* No Wrap - Prevents line breaking between words
   Apply via Formats dropdown in TinyMCE editor to keep words together.
   More reliable than &nbsp; which can be stripped by editor processing. */
.nowrap {
    white-space: nowrap;
}

/* ==========================================
   COMPONENT OVERRIDES
   ========================================== */

.btn, input[type="submit"], button[type="submit"], .wp-element-button, .wp-block-button__link {
    padding: 10px 24px;
    font-weight: var(--font-weight-normal);
}

.btn-arrow svg.icon-chevron-right {
    top: 1px;
    position: relative;
}

.btn-arrow:is(:hover, :focus, :active) svg {
    transform: translate(15%, 0);
}

.card-image,
.card-media img {
    object-position: top;
}

/* ==========================================================================
   404 Page Search Button - Match Search Results Page Styling
   ========================================================================== */

/* Global search input styling */
.wp-block-search__input {
    border-radius: var(--radius-card);
    flex: 1;
    padding: var(--space-sm) var(--space-md);
    font-size: var(--font-size-body);
    background: var(--color-white);
    line-height: var(--line-height-normal);
    box-shadow: var(--shadow-sm);
    outline: none;
    border: 1px solid var(--color-border);
    transition: box-shadow var(--transition-base);
}

.btn-arrow::before {
    background: var(--color-primary);
    height: 1px;
}

.card-action {
    font-weight: var(--font-weight-semibold);
}

.card-action::before {
    display: none;
}

/* Hide arrow icon on card action links (for featured posts, dynamic archives, etc.) */
.card-action svg,
.card-action .btn-icon {
    display: none;
}

.badge[data-badge-variant="primary"] {
    background: var(--color-primary);
    color: var(--color-white);
}

/* Taxonomy tags (archive-meta-tags) styled as primary badges */
.archive-meta-tags .badge.badge-pill {
    background: var(--color-primary);
}

.archive-meta-tags .badge.badge-pill:hover,
.archive-meta-tags .badge.badge-pill:focus {
    background: var(--color-secondary);
}

/* ==========================================
   STATISTICS ROW BLOCK CUSTOMIZATIONS
   ========================================== */

.statistics-row-header h2 { text-align: left; }

/* Left-align card content */
.statistics-row-container .statistic-item {
    text-align: left;
    align-items: flex-start;
}

.statistics-row-container .statistic-item .statistic-metric {
    font-size: var(--font-size-h1-alt);
    font-weight: 500;
    justify-content: flex-start;
}

.statistics-row-container .statistic-item .statistic-text {
    text-align: left;
    justify-content: flex-start;
}

.statistics-row-container .statistic-item .statistic-title {
    text-align: left;
    margin-bottom: 0;
}

.statistics-row-block:not(.statistics-row-block--side-by-side) .statistics-grid .statistic-metric {
    padding-top: 0;
    min-height: 1.25em;
}



/* ==========================================
   PLATFORM BLOCK CUSTOMIZATIONS
   ========================================== */

section:not(.has-text-color) .platform-description {
    color: var(--color-text-primary);
}

/* ==========================================
   FEATURED/MOST RECENT POSTS CUSTOMIZATIONS
   ========================================== */

.badge:not(.badge-pill) {
    background: transparent;
}

.card {
    border-color: var(--color-border);
    background: var(--color-bg);
}

.card-date-banner {
    flex-wrap: wrap;
}

.card-date-banner::before,
.card-date-banner::after {
    background-color: var(--color-primary);
    height: 0;
}

.card-date-banner .date-icon {
    color: var(--color-primary);
}

/* Stack location below date instead of inline with separator */
.card-date-banner .date-separator {
    flex-basis: 100%;
    height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

/* Blog post date - dark text, no icon, above title (cards + single post) */
.card--post .card__date,
.post-date.wp-block-post-date {
    color: var(--color-text-primary);
}

/* Move date above title on blog post cards (card-body is already flex column) */
.card--post .card__date {
    order: -1;
}

.card-excerpt,
.has-text-color .card .card-excerpt {
    color: var(--color-text-primary);
}

/* Card title links - remove default link styling for consistency across all post types */
.card-title a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-base);
}

.card:hover .card-title,
.card:hover .card-title a,
.card-wrapper:hover .post-title,
.post-card:hover .post-title {
    text-decoration: underline;
    text-decoration: none;
}

.layout-masonry .post-card {
    border: 1px solid var(--color-border);
    background: var(--color-bg);
}

.featured-recent-posts-wrapper .card {
    border-color: var(--color-border);
    background: var(--color-bg);
}

.layout-masonry .eyebrow-text {
    display: none;
}

/* ==========================================
   VIDEO SHOWCASE CUSTOMIZATIONS
   ========================================== */

/* Video Preview Gradient Overlay */
.video-showcase .video-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--wp--preset--gradient--gradient-primary);
    opacity: 0.5;
    border-radius: var(--radius-card);
    pointer-events: none;
    z-index: 1;
    transition: opacity var(--transition-base);
    max-height: 100%;
    overflow: hidden;
}

/* Hide gradient overlay after video has been played (inline mode only) */
.video-showcase.video-playback-inline .video-wrapper:has(.video-player.has-played)::after,
.video-showcase.video-playback-inline .video-wrapper.is-playing::after {
    opacity: 0;
    display: none;
}

/* Keep gradient overlay visible for modal playback mode */
.video-showcase.video-playback-modal .video-wrapper::after {
    opacity: 0.5;
}

/* Ensure play button appears above gradient overlay */
.video-showcase .video-wrapper::before {
    z-index: 3;
}

/* Hide ::before element when video is playing inline to allow control interaction */
.video-showcase.video-playback-inline .video-wrapper.is-playing::before,
.video-showcase.video-playback-inline .video-wrapper:has(.video-player.has-played)::before {
    display: none;
    pointer-events: none;
}

/* ==========================================
   DROPDOWN ACCORDION ROWS CUSTOMIZATIONS
   ========================================== */

.dropdown-accordion-rows__header-title {
    font-size: var(--wp--preset--font-size--hero-subtitle);
    line-height: var(--line-height-heading);
}

.dropdown-accordion-rows__item ul li::marker {
    color: var(--wp--preset--color--blue-mid);
}

/* ==========================================
   VERTICAL SCROLLING CARDS CUSTOMIZATIONS
   ========================================== */

.icon-text-card,
.icon-text-card .highlighted-statistic {
    border-color: var(--wp--preset--color--blue);
}

/* ==========================================
   TESTIMONIAL CUSTOMIZATIONS
   ========================================== */

.testimonial-intro {
    text-wrap: balance;
}

/* ==========================================
   TEAM MEMBER GRID CUSTOMIZATIONS
   ========================================== */


/* ==========================================
   TEMPLATE-SPECIFIC OVERRIDES
   ========================================== */

.dynamic-archive-grid-wrapper article .card-body {
    background: var(--color-bg);
    padding: var(--space-md);
}

/* Literature cards: stack badges vertically (content type above "Outside the U.S.") */
.card--literature .card-badge-wrapper {
    flex-direction: column;
    align-items: flex-start;
}

/* Literature cards: h6 visual size with medium weight for card titles */
.card--literature .card-title.h5 {
    font-size: var(--font-size-h6);
    font-weight: 500;
}

/* 4-column grid: reduce gap to half for tighter spacing */
.dynamic-archive-grid-wrapper .row:has(.col-3),
.tmw-literature-order-grid .row:has(.col-3) {
    gap: calc(var(--row-gap) / 2);
}

/* Literature Order Form: badges as blue text on transparent background */
.tmw-literature-order-grid .card-badge--literature {
    background: transparent;
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
    padding: 0;
}

/* Literature Order Form: Show full thumbnails without cropping
 * Override plugin's fixed 4:3 aspect ratio to show document thumbnails at natural proportions
 */
.tmw-literature-order-grid .card .card-media {
    aspect-ratio: auto;
    height: auto;
}

.tmw-literature-order-grid .card .card-media .card-image {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* Literature Order Form: View Cart link as primary button */
.tmw-literature-product__cart-link {
    display: inline-block;
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text-color);
    padding: 10px 24px;
    border-radius: var(--radius-button);
    text-decoration: none;
    font-weight: var(--font-weight-semibold);
    transition: background var(--transition-base), color var(--transition-base);
}

.tmw-literature-product__cart-link:hover,
.tmw-literature-product__cart-link:focus {
    background: var(--btn-primary-hover-bg);
    color: var(--btn-primary-hover-text-color);
    text-decoration: none;
}

/* 4-column grid: use aspect-ratio instead of fixed height to prevent tall images on narrow cards */
.dynamic-archive-grid-wrapper .row:has(.col-3) .card-media {
    height: auto;
    aspect-ratio: 16 / 9;
}

.dynamic-archive-filters .filter-buttons {
    justify-content: center;
}

.dynamic-archive-filters .filter-buttons button.filter-button {
    border: 2px solid var(--color-border);
    background: var(--color-white);
}

/* Active/Pressed state */
.dynamic-archive-filters .filter-button:hover,
.dynamic-archive-filters .filter-button:focus,
.dynamic-archive-filters .filter-button:hover:not([aria-pressed="true"], .active),
.dynamic-archive-filters .filter-buttons .filter-button[aria-pressed="true"],
.dynamic-archive-filters .filter-buttons .filter-button.active {
    background-color: var(--wp--preset--color--blue-navy);
    color: var(--color-white);
    border-color: var(--wp--preset--color--blue-navy);
}

/* Disabled parent terms as non-clickable category headers in filter dropdowns
 * These serve as visual group labels (e.g., "Regenerative Solutions", "OA Pain Management")
 * Must look distinctly different from clickable options to avoid confusion */
.filter-dropdown-wrapper .archive-filters__select option:disabled {
    color: var(--wp--preset--color--gray);
    font-weight: var(--font-weight-semibold);
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background-color: var(--wp--preset--color--gray-light);
}

/* ==========================================
   PREFOOTER CTA BLOCK CUSTOMIZATIONS
   ========================================== */

/* ==========================================
   UTILITY CLASSES
   ========================================== */

h1.alt { font-size: var(--wp--preset--font-size--h-1-alt); }
.balance { text-wrap: balance; }

/* ==========================================================================
   HEADING SIZE STEP-DOWN
   Apply to any container to make all headings render one size smaller.
   Useful when semantic heading levels need different visual treatment.
   Example: h2 renders as h3 size/color, h3 as h4 size/color, etc.
   ========================================================================== */

.headings-step-down h1 { font-size: var(--font-size-h2); }
.headings-step-down h2 { font-size: var(--font-size-h3); color: var(--color-primary); }
.headings-step-down h3 { font-size: var(--font-size-h4); }
.headings-step-down h4 { font-size: var(--font-size-h5); }
.headings-step-down h5 { font-size: var(--font-size-h6); }
.headings-step-down h6 { font-size: var(--font-size-small); }

/* ==========================================
   HERO BLOCK - BOXED CONTAINER LAYOUT
   ========================================== */

.hero-wrapper {
    min-height: fit-content;
}


/* ==========================================
   TABBED CONTENT BLOCK
   ========================================== */
.tab-button {
    background: var(--wp--preset--color--gray-light);
}

/* Gradient overlay on tab images - Client-specific brand gradient */
.tabbed-content .tab-image {
    position: relative;
}

.tabbed-content .tab-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: var(--radius-card);
    pointer-events: none;
    z-index: 1;
}

.tabbed-content .tab-image-img {
    position: relative;
    z-index: 0;
}

.tabbed-content .tab-button,
.tabbed-content .tab-navigation,
.tabbed-content .tab-panels {
    border-color: var(--color-border);
}

/* ==========================================
   CALL-TO-ACTION BANNER BLOCK
   ========================================== */

/* Container - automatic dark blue gradient with white text and rounded corners */
.cta-banner-container {
    background: var(--wp--preset--gradient--gradient-primary);
    color: var(--color-white);
    border-radius: var(--radius-card);
    padding: var(--space-3xl) var(--space-xl);
}

/* Force white text color for all content */
.cta-banner-heading,
.cta-banner-subtitle {
    color: var(--color-white);
}

/* Mobile responsive adjustments */
@media (width <=768px) {
    .cta-banner-container {
        padding: var(--space-xl) var(--space-lg);
    }
}

/* ==========================================
   TIMELINE / OUR HISTORY BLOCK
   ========================================== */
.timeline-card {
    border-color: var(--color-border);
    background: var(--wp--preset--color--gray-light);
}

.timeline-description p strong {
    color: var(--color-primary);
}

/* ==========================================
   GUTENBERG OUTLINE BUTTON - GRADIENT BORDER
   ========================================== */

/*
 * Apply gradient border effect to Gutenberg Outline style buttons
 * Matches the secondary button gradient border implementation
 * Uses mask compositing technique for gradient borders
 *
 * Note: This overrides parent theme's outline button hover behavior
 * to properly work with gradient borders
 */

.wp-block-button.is-style-outline .wp-element-button,
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-buttons .wp-block-button.is-style-outline .wp-element-button,
.wp-block-buttons .wp-block-button.is-style-outline .wp-block-button__link {
    position: relative;
    background: transparent !important;
    border: 2px solid transparent !important;
    z-index: 1;
    color: var(--btn-secondary-text-color) !important;
    overflow: hidden;

    /* Ensure pseudo-elements stay within border-radius */
    isolation: isolate;

    /* Create stacking context */
}

/* Gradient border using ::before pseudo-element with mask compositing */
.wp-block-button.is-style-outline .wp-element-button::before,
.wp-block-button.is-style-outline .wp-block-button__link::before,
.wp-block-buttons .wp-block-button.is-style-outline .wp-element-button::before,
.wp-block-buttons .wp-block-button.is-style-outline .wp-block-button__link::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;

    /* Border width */
    background: var(--gradient-primary);

    /* Gradient: linear-gradient(90deg, #30A67B 0%, #00A2C7 100%) */
    -webkit-mask:
        linear-gradient(#ffffff 0 0) content-box,
        linear-gradient(#ffffff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: -1;
}

/* Remove parent theme's ::after hover overlay for gradient border buttons */
.wp-block-button.is-style-outline .wp-element-button::after,
.wp-block-button.is-style-outline .wp-block-button__link::after,
.wp-block-buttons .wp-block-button.is-style-outline .wp-element-button::after,
.wp-block-buttons .wp-block-button.is-style-outline .wp-block-button__link::after {
    display: none !important;

    /* Disable parent theme's overlay technique */
}

/* Hover state - fill background, change text color, hide gradient border, show solid border */
.wp-block-button.is-style-outline .wp-element-button:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-buttons .wp-block-button.is-style-outline .wp-element-button:hover,
.wp-block-buttons .wp-block-button.is-style-outline .wp-block-button__link:hover {
    background: var(--btn-secondary-hover-bg) !important;
    color: var(--btn-secondary-hover-text-color) !important;

    /* border-color uses --btn-secondary-hover-border-color (primary color) from parent theme */
    transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}

/* Hide gradient border on hover to show solid primary border */
.wp-block-button.is-style-outline .wp-element-button:hover::before,
.wp-block-button.is-style-outline .wp-block-button__link:hover::before,
.wp-block-buttons .wp-block-button.is-style-outline .wp-element-button:hover::before,
.wp-block-buttons .wp-block-button.is-style-outline .wp-block-button__link:hover::before {
    opacity: 0;
}

/* ==========================================
   PAGINATION CUSTOMIZATIONS
   ========================================== */

/* Override parent theme pagination colors with gradient styling */

/* All page number links - apply gradient */
.pagination a.page-numbers {
    border: 2px solid transparent;
    background: var(--color-white);
    color: transparent;
    background-image: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
}

.pagination a.page-numbers,
.pagination span.page-numbers {
    border-radius: 6px;
}

/* Gradient border using pseudo-element */
.pagination a.page-numbers::before {
    background: var(--gradient-primary);
    -webkit-mask:
        linear-gradient(#ffffff 0 0) content-box,
        linear-gradient(#ffffff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    border-radius: 6px;
}

/* Hover state for ALL links - gradient background with white text */
.pagination a.page-numbers:hover,
.pagination a.page-numbers:focus {
    background: var(--gradient-primary);
    color: var(--color-white);
    border-color: transparent;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
}

/* Current page - gradient background with white text */
.pagination a.page-numbers:hover,
.pagination a.page-numbers:focus,
.pagination .page-numbers.current {
    background: var(--gradient-primary);
    color: var(--color-white);
    border: 2px solid var(--color-white);
    border-color: var(--color-white);
}

.pagination .page-numbers.current {
    border-radius: 6px;
}

/* ==========================================
   SINGLE POST TEMPLATE - CONSTRAINED WIDTH
   ========================================== */

/* Mobile padding for single post header section */
@media (width < 768px) {
    .single section.container.wp-block-group.is-layout-constrained {
        padding-left: var(--space-md);
        padding-right: var(--space-md);
    }
}

/* Allow blocks to break out to full/wide widths when explicitly set */
.single .wp-block-post-content .alignwide {
    max-width: var(--container-lg);
    margin-left: auto;
    margin-right: auto;
}

.single .wp-block-post-content .alignfull {
    max-width: 100%;
}

.single .post-meta {
    /* max-width: 1064px; */
    margin-left: auto;
    margin-right: auto;
    overflow: visible;
}

.single .entry-content h1,
.single .entry-content h2,
.single .entry-content h3,
.single .entry-content h4,
.single .entry-content h5 {
    text-wrap: unset;
}

/* White Papers - Allow post title to wrap normally instead of balancing */
.tmw-tl-single--white-papers .post-meta__title {
    text-wrap: wrap;
}

/* Single posts use headings-step-down at desktop to maintain visual hierarchy
   while allowing proper semantic heading structure (h1 title, h2-h6 in content) */
@media (width >=991px) {
    .single h1.post-meta__title {
        font-size: var(--font-size-h2);
    }

    .single .entry-content h2 { font-size: var(--font-size-h3); }
    .single .entry-content h3 { font-size: var(--font-size-h4); }
    .single .entry-content h4 { font-size: var(--font-size-h5); }
    .single .entry-content h5 { font-size: var(--font-size-h6); }
}

.single .post-meta__excerpt {
    font-weight: var(--font-weight-bold);
    line-height: 1.4em;
}

/* Featured image within constrained container - break out to regular container width */
.single .post-meta__featured-image {
    /* Calculate the negative margin needed to expand from container-content (1064px) to container (1280px) Difference is 216px total, so 108px on each side */
    margin-left: -108px;
    margin-right: -108px;
    width: calc(100% + 216px);
    max-width: var(--max-width-content-2xl);
    border-radius: var(--radius-card);
    border: 1px solid var(--color-border-light);
}

.single .post-meta__featured-image img {
    margin-top: 0;
}

@media (width <=480px) {
    .single .post-meta {
        margin-bottom: 0;
    }
}

/* ==========================================
   FLEXIBLE CONTENT - COLUMNS BLOCK SPACING
   ========================================== */

/* ==========================================
   FLEXIBLE CONTENT - BADGE WIDTH FIX
   Override plugin's width: 100% rule on direct children
   to allow badges to display at their natural inline-block width.
   ========================================== */

.flexible-content-wrapper > .badge,
.flexible-content-wrapper > p.badge {
    width: auto;
    max-width: fit-content;
}

/* ==========================================
   FLEXIBLE CONTENT - NESTED BLOCKS WITH BACKGROUNDS
   ========================================== */

/* ==========================================
   EVENTS - HIDE EMPTY CONTENT SECTIONS
   ========================================== */

/* Hide "Event Overview" heading when it's the only content in its wrapper
   When post content and dynamic-event-content are both empty, they don't render at all,
   leaving only the h2 heading. This hides the heading when it's the sole child. */
.single-events .flexible-content-wrapper.width-medium > h2.wp-block-heading:only-child {
    display: none;
}

/* Hide flexible content area when it contains only empty wrapper
   Prevents empty purple section from showing when event has no speakers, agenda, etc.
   The dynamic-event-content block doesn't render at all when empty, leaving just the wrapper
   Scoped to single events only to avoid affecting other pages */
.single-events .flexible-content-area-block.has-light-purple-background-color:has(.flexible-content-wrapper:empty) {
    display: none;
}

/* ==========================================
   CONTENT CARD CAROUSEL BLOCK
   ========================================== */

/* Card styling - Brand-specific border color */
.content-card-carousel .carousel-card {
    border-color: var(--color-border);
    background: var(--wp--preset--color--gray-light);
}

/* Card description - uses secondary text color */
.content-card-carousel .carousel-card-description {
    color: var(--color-text-primary);
}

/* Navigation dots - Brand colors */
.content-card-carousel .carousel-nav-dot {
    border-color: var(--color-primary);
}

.content-card-carousel .carousel-nav-dot.active {
    background-color: var(--color-primary);
}

.content-card-carousel .carousel-nav-dot:hover {
    border-color: var(--wp--preset--color--blue-navy);
}

/* Progress container background */
.content-card-carousel .carousel-progress-container {
    background-color: var(--wp--preset--color--gray-light);
}

/* Card hover state */
.content-card-carousel .carousel-card:hover {
    border-color: var(--color-primary);
}

/* =======================================================
   MULTI-COLUMN BOXED CONTENT BLOCK CUSTOMIZATIONS
   ======================================================= */

.multi-column-boxed-content .column-title {
    font-size: var(--font-size-h6);
}

/* ==========================================
   TWO-COLUMN ALTERNATING BLOCK CUSTOMIZATIONS
   ========================================== */


/* ==========================================
   TIMELINE BLOCKS CUSTOMIZATION
   ========================================== */

.timeline-h-year-badge {
    border-radius: 4px;
}

.timeline-h-dot {
    background: var(--color-primary);
}

.timeline-h-line {
    background: var(--wp--preset--color--blue-light);
}

/* Larger scrollbar on hover without layout shift */
.timeline-h-progress-container {
    height: 10px;
    margin-bottom: 6px; /* Reserve space for growth */
}

.timeline-h-progress-container:hover,
.timeline-h-progress-container.is-dragging {
    height: 16px;
    margin-bottom: 0; /* Consume reserved space */
}


/* ==========================================
   SOCIAL SHARE BUTTONS
   ========================================== */

.social-share-buttons {
    padding-top: var(--space-xl);
    border-top: 1px solid var(--color-border);
    gap: var(--space-md);
    align-items: center;
}

.social-share-buttons p {
    margin: 0;
    font-size: var(--font-size-small);
}

.social-share-links {
    gap: var(--space-sm);
}

.social-share-links .wp-social-link {
    margin: 0;
}

.social-share-links .wp-social-link a {
    transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.social-share-links .wp-social-link a:hover {
    transform: scale(1.1);
    opacity: 0.9;
}

/* Responsive adjustments */
@media (width <= 640px) {
    .social-share-buttons {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .social-share-buttons p {
        width: 100%;
        margin-bottom: var(--space-xs);
    }
}

/* ==========================================
   MOBILE UPDATES
   Responsive fixes and mobile-specific overrides
   ========================================== */

@media (width <= 768px) {
    :root {
        --row-gap: var(--space-md);
    }
}

/* ==========================================
   WOOCOMMERCE CHECKOUT - PLACE ORDER BUTTON
   Match primary button style for consistency
   ========================================== */

/* WooCommerce Block Checkout - Place Order Button */
.wc-block-checkout__actions .wc-block-components-checkout-place-order-button,
.wc-block-checkout__actions button.wc-block-components-button,
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text-color) !important;
    border-color: var(--btn-primary-border-color);
    border-width: var(--btn-primary-border-width);
    border-style: var(--btn-primary-border-style);
    border-radius: var(--radius-button);
    font-weight: var(--font-weight-normal);
    padding: 10px 24px;
    transition: all var(--transition-base);
}

/* Hover state */
.wc-block-checkout__actions .wc-block-components-checkout-place-order-button:hover,
.wc-block-checkout__actions .wc-block-components-checkout-place-order-button:focus,
.wc-block-checkout__actions button.wc-block-components-button:hover,
.wc-block-checkout__actions button.wc-block-components-button:focus,
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button:hover,
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button:focus {
    background: var(--btn-primary-hover-bg);
    color: var(--btn-primary-hover-text-color) !important;
    border-color: var(--btn-primary-hover-border-color);
}

/* Classic WooCommerce Checkout (fallback) */
.woocommerce-checkout #place_order,
.woocommerce #payment #place_order {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text-color) !important;
    border-color: var(--btn-primary-border-color);
    border-width: var(--btn-primary-border-width);
    border-style: var(--btn-primary-border-style);
    border-radius: var(--radius-button);
    font-weight: var(--font-weight-normal);
    padding: 10px 24px;
    transition: all var(--transition-base);
}

.woocommerce-checkout #place_order:hover,
.woocommerce-checkout #place_order:focus,
.woocommerce #payment #place_order:hover,
.woocommerce #payment #place_order:focus {
    background: var(--btn-primary-hover-bg);
    color: var(--btn-primary-hover-text-color) !important;
    border-color: var(--btn-primary-hover-border-color);
}

/* ==========================================
   COOKIE NOTICE
   ========================================== */

.cky-consent-bar {
    border-color: var(--wp--preset--color--blue-dark) !important;
 }

.cky-consent-container,
.cky-consent-container .cky-consent-bar,
.cky-preference-wrapper,
.cky-accordion-body,
.cky-empty-cookies-text,
.cky-audit-table {
    background: var(--wp--preset--color--blue-dark) !important;
}

.cky-consent-container *,
.cky-consent-container .cky-consent-bar *,
.cky-consent-container .cky-consent-bar .cky-title {
    color: var(--color-white) !important;
}

.cky-footer-shadow { display: none !important; }

/* CookieYes buttons - Light Secondary style (outline button for dark backgrounds) */
.cky-consent-container .cky-btn {
    background: var(--btn-light_secondary-bg) !important;
    border: var(--btn-light_secondary-border-width) var(--btn-light_secondary-border-style) var(--btn-light_secondary-border-color) !important;
    border-radius: var(--radius-button) !important;
    color: var(--btn-light_secondary-text-color) !important;
    font-family: var(--font-family-body) !important;
    font-size: var(--font-size-button) !important;
    font-weight: var(--font-weight-medium) !important;
    padding: 10px 24px !important;
    transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base) !important;
}

.cky-consent-container .cky-btn:hover,
.cky-consent-container .cky-btn:focus {
    background: var(--btn-light_secondary-hover-bg) !important;
    border-color: var(--btn-light_secondary-hover-border-color) !important;
    color: var(--btn-light_secondary-hover-text-color) !important;
}

/* Customize button - extra right padding to visually center text with arrow */
.cky-consent-container .cky-btn-customize {
    padding-right: 32px !important; /* Extra right padding to balance the arrow */
}

/* CookieYes revisit button (floating icon) - Add white border for visibility against dark footer */
.cky-btn-revisit-wrapper {
    border: 2px solid var(--color-white) !important;
    box-shadow: 0 4px 12px rgb(0 0 0 / 20%) !important;
    border-radius: 100%;
}

/* Hide CookieYes button when modals are open to prevent overlap */
body.lightbox-open .cky-btn-revisit-wrapper,
body.team-member-modal-open .cky-btn-revisit-wrapper {
    display: none !important;
}

/* CookieYes preferences modal - Mobile viewport fix
   Ensures modal header with close button is visible on mobile browsers
   Accounts for iOS safe area insets (notch/home indicator) */
@media (width <= 767px) {
    .cky-modal {
        padding-top: env(safe-area-inset-top, 0) !important;
    }

    .cky-preference-center {
        max-height: calc(100vh - env(safe-area-inset-top, 0) - env(safe-area-inset-bottom, 0)) !important;
        max-height: calc(100dvh - env(safe-area-inset-top, 0) - env(safe-area-inset-bottom, 0)) !important;
        height: 100% !important;
        top: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    /* Ensure the modal content is scrollable and header stays fixed */
    .cky-preference-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 10 !important;
        background: var(--wp--preset--color--blue-dark) !important;
        padding-top: max(var(--space-md), env(safe-area-inset-top, 16px)) !important;
    }

    .cky-preference-body-wrapper {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        flex: 1 !important;
        max-height: none !important;
    }

    /* Ensure footer buttons stay visible */
    .cky-preference-footer {
        position: sticky !important;
        bottom: 0 !important;
        z-index: 10 !important;
        background: var(--wp--preset--color--blue-dark) !important;
        padding-bottom: max(var(--space-md), env(safe-area-inset-bottom, 16px)) !important;
    }
}

/* ==========================================
   ARCHIVE FILTER SEARCH ALIGNMENT
   ========================================== */

/* Match search input height to filter dropdowns */
.filter-dropdown-wrapper .inline-search-input,
.dynamic-archive-filters .inline-search-input {
    min-height: 46px;
    line-height: var(--line-height-normal);
    box-sizing: border-box;
}

/* Fix clear button vertical alignment - base plugin missing top: 50% */
.inline-search-clear {
    top: 50%;
}

/* Mobile: transform doesn't apply, so use inset centering instead */
@media (width <= 991px) {
    .inline-search-clear {
        top: 0;
        bottom: 0;
        margin-block: auto;
        height: fit-content;
        transform: none;
    }
}

/* Increase dropdown min-width to prevent text truncation for longer labels like "All Career Locations" */
.filter-dropdown-wrapper {
    min-width: 260px;
}

/* ==========================================
   Search Results
   ========================================== */

.card-media--default-image img {
    object-fit: cover;
}

/* Mobile: constrain Page card images to match other post types */
@media (width <= 768px) {
    .card--page .card-media {
        max-height: 160px;
    }
}

/* ==========================================
   ANCHOR LINK SCROLL OFFSET - Sticky Sub-Navigation
   Override parent theme scroll-margin-top to include
   sticky sub-navigation height when present.
   ========================================== */

/*
 * When the sub-navigation block becomes sticky, JavaScript sets
 * --sticky-sub-nav-height on :root. This ensures anchor links
 * scroll to the correct position below the sticky sub-nav.
 */
section[id],
div[id]:not(.wp-site-blocks, .is-layout-flow, .entry-content) {
    scroll-margin-top: calc(
        var(--header-height, 0px) +
        var(--announcement-bar-height, 0px) +
        var(--sticky-sub-nav-height, 0px) +
        var(--sticky-element-top-offset, 20px)
    );
}

/* Admin bar adjustment - desktop (32px) */
@media screen and (width >= 783px) {
    body.admin-bar section[id],
    body.admin-bar div[id]:not(.wp-site-blocks, .is-layout-flow, .entry-content) {
        scroll-margin-top: calc(
            var(--header-height, 0px) +
            var(--announcement-bar-height, 0px) +
            var(--sticky-sub-nav-height, 0px) +
            var(--sticky-element-top-offset, 20px) +
            32px
        );
    }
}

/* Admin bar adjustment - mobile (46px) */
@media screen and (width <= 782px) {
    body.admin-bar section[id],
    body.admin-bar div[id]:not(.wp-site-blocks, .is-layout-flow, .entry-content) {
        scroll-margin-top: calc(
            var(--header-height, 0px) +
            var(--announcement-bar-height, 0px) +
            var(--sticky-sub-nav-height, 0px) +
            var(--sticky-element-top-offset, 20px) +
            46px
        );
    }
}