/*
Theme Name: LearnLang
Theme URI: https://learnlang.io
Author: Frank Lowe
Description: LearnLang — An AI-powered multi-language learning platform supporting 10 target languages (Spanish, French, German, Japanese, Korean, Mandarin Chinese, Russian, Portuguese, Arabic, Italian). Structured CEFR curriculum (A1 to B2) with interactive AI speaking lounge, writing studio, dictionary, and vocabulary explorer.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: learnlang
*/

/* --- Theme Global Styles (Neo-brutalist Aesthetic) --- */

:root {
    --color-bg: #f4ede2;
    --color-card-bg: #ffffff;
    --color-accent-yellow: #facc15;
    --color-accent-green: #4ade80;
    --color-accent-blue: #60a5fa;
    --color-accent-orange: #fb923c;
    --color-accent-purple: #c084fc;
    --border-primary: 3px solid #000000;
    --shadow-primary: 4px 4px 0px #000000;
}

* {
    box-sizing: border-box;
}

body {
    font-family: 'Outfit', sans-serif;
    background-color: var(--color-bg);
    margin: 0;
    padding: 0;
    color: #000000;
    line-height: 1.5;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

/* Header & Navigation */
.site-header {
    background-color: #ffffff;
    border-bottom: 4px solid #000000;
    padding: 1rem 2rem;
    position: sticky;
    top: 0;
    z-index: 999;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-left-side {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.site-logo a {
    font-size: 1.5rem;
    font-weight: 900;
    text-transform: uppercase;
    color: #000000;
    text-decoration: none;
    letter-spacing: -1px;
}

.study-dashboard-link {
    font-family: 'Outfit', sans-serif;
    font-size: 0.95rem;
    font-weight: 800;
    color: #000000;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: border-color 0.15s ease;
    white-space: nowrap;
}

.study-dashboard-link:hover {
    border-bottom-color: #000000;
}

.header-right-container {
    display: flex;
    align-items: center;
    gap: 1.2rem;
}

.header-right-side {
    display: flex;
    align-items: center;
    gap: 1.2rem;
}

.site-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

.site-navigation a {
    font-weight: 800;
    text-transform: uppercase;
    color: #000000;
    text-decoration: none;
    font-size: 0.9rem;
    border-bottom: 2px solid transparent;
}

.site-navigation a:hover,
.site-navigation .current-menu-item a {
    border-bottom: 3px solid var(--color-accent-yellow);
}

/* Neo-brutalist Small Buttons in Header */
.header-button {
    font-family: 'Outfit', sans-serif;
    font-size: 0.9rem;
    font-weight: 900;
    text-transform: uppercase;
    padding: 0.5rem 0.9rem;
    border: 3px solid #000000;
    box-shadow: 2px 2px 0px #000000;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    border-radius: 0 !important;
    white-space: nowrap;
    color: #000000 !important;
    transition: box-shadow 0.15s ease, background-color 0.15s ease;
    background-color: #ffffff;
}

.header-button:hover {
    box-shadow: 3px 3px 0px #000000;
}

.header-button:active {
    transform: translate(2px, 2px);
    box-shadow: 0px 0px 0px #000000;
    transition: transform 0.05s ease, box-shadow 0.05s ease;
}

.header-button.btn-yellow {
    background-color: var(--color-accent-yellow);
}

.header-button.btn-yellow:hover {
    background-color: #fde047 !important;
}

.header-button.btn-green {
    background-color: #22c55e;
}

.header-button.btn-green:hover {
    background-color: #4ade80 !important;
}

.header-button.btn-red {
    background-color: #ef4444;
}

.header-button.btn-red:hover {
    background-color: #f87171 !important;
}

.header-button.btn-white {
    background-color: #ffffff;
}

.header-button.btn-white:hover {
    background-color: #f3f4f6 !important;
}

/* Buy Full Access Pulse Animation */
@keyframes header-pulse {

    0%,
    100% {
        box-shadow: 2px 2px 0px #000000;
    }

    50% {
        box-shadow: 4px 4px 0px #000000, 0 0 12px rgba(34, 197, 94, 0.6);
    }
}

.header-button.btn-pulse {
    animation: header-pulse 2s infinite;
}

.header-button.btn-pulse:hover {
    animation: none;
    box-shadow: 3px 3px 0px #000000;
}

/* Header WooCommerce Cart Styles */
.header-cart-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.header-cart-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 1.15rem;
}

.header-cart-icon.has-items {
    background-color: var(--color-accent-yellow);
}

.ita-cart-count {
    min-width: 18px;
    height: 18px;
    background: #ef4444;
    color: #ffffff;
    border-radius: 50%;
    border: 2px solid #000000;
    font-size: 0.65rem;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    margin-left: 0.3rem;
}

.header-cart-remove {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 18px;
    height: 18px;
    background: #ef4444;
    border: 2px solid #000000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    font-weight: 900;
    color: #ffffff;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.1s ease;
}

.header-cart-remove:hover {
    background-color: #b91c1c;
}

/* Header Actions wrapper (always visible in header) */
.header-actions {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

/* Menu hamburger toggle (hidden on desktop) */
.header-menu-toggle {
    display: none;
}

/* Drawer close button (hidden on desktop) */
.offcanvas-close {
    display: none;
}

/* Offcanvas Overlay background wrapper (hidden on desktop) */
.offcanvas-overlay {
    display: none;
}

/* ==========================================================================
   Responsive Mobile Overrides (Screens <= 900px)
   ========================================================================== */
@media (max-width: 900px) {

    /* 1. Header structural changes & scaling */
    .site-header {
        padding: 0.8rem 1.2rem;
    }

    .header-left-side {
        gap: 1rem;
    }

    .site-logo a {
        font-size: 1.25rem;
        white-space: nowrap;
    }

    .study-dashboard-link {
        font-size: 0.85rem;
    }

    /* Show Hamburger button in header actions */
    .header-menu-toggle {
        display: inline-block;
        font-size: 1.15rem;
        padding: 0.45rem 0.8rem;
    }

    /* 2. Turn header-right-side into Offcanvas drawer for all users */
    .header-right-side {
        position: fixed;
        top: 0;
        right: -320px;
        /* Hidden off-screen */
        width: 300px;
        height: 100vh;
        background-color: #ffffff;
        border-left: 4px solid #000000;
        z-index: 1000;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        padding: 2rem 1.5rem;
        gap: 1.5rem;
        box-shadow: -6px 0px 0px #000000;
        transition: right 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        overflow-y: auto;
    }

    /* When open, slide in drawer */
    .header-right-side.open {
        right: 0;
    }

    /* Show Close button inside drawer */
    .offcanvas-close {
        display: block;
        align-self: flex-end;
        font-size: 1.1rem;
        padding: 0.4rem 0.7rem;
        margin-bottom: 0.5rem;
    }

    /* 3. Navigation inside offcanvas */
    .site-navigation {
        width: 100%;
        border-bottom: 2px dashed #000000;
        padding-bottom: 1rem;
        margin-bottom: 0.5rem;
    }

    .site-navigation ul {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
        width: 100%;
    }

    .site-navigation li {
        width: 100%;
    }

    .site-navigation a {
        display: block;
        width: 100%;
        padding: 0.5rem 0;
        font-size: 1.1rem;
    }

    /* Buttons in offcanvas stretch to full width */
    .header-right-side .header-button {
        width: 100%;
        text-align: center;
        padding: 0.75rem 1rem;
        font-size: 1rem;
    }

    /* 4. Overlay styling */
    .offcanvas-overlay {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.4);
        backdrop-filter: blur(2px);
        z-index: 998;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;
    }

    .offcanvas-overlay.open {
        opacity: 1;
        pointer-events: auto;
    }

    /* Prevent body scrolling when active */
    body.offcanvas-active {
        overflow: hidden;
    }

    /* 5. General page container and card padding scale-downs */
    .container {
        padding: 1rem;
    }

    .wp-block-group,
    .page-content-card,
    .woocommerce-page-container,
    .woocommerce-page .content-area {
        padding: 1.25rem !important;
        margin-bottom: 1.5rem;
        border-width: 3px !important;
        box-shadow: 4px 4px 0px #000000 !important;
    }

    h1 {
        font-size: 1.8rem !important;
    }

    h2 {
        font-size: 1.5rem !important;
    }

    h3 {
        font-size: 1.25rem !important;
    }
}

/* Neo-brutalist Cards & Containers */
.wp-block-group,
.page-content-card,
.woocommerce-page-container,
.woocommerce-page .content-area {
    background-color: var(--color-card-bg);
    border: var(--border-primary);
    box-shadow: var(--shadow-primary);
    padding: 2.5rem;
    margin-bottom: 2rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.5px;
    color: #000000;
    margin-top: 0;
}

h1 {
    font-size: 2.5rem;
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.5rem;
}

/* Buttons styling (standard and WooCommerce) */
.btn,
.button,
button,
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
    font-family: inherit;
    font-weight: 900;
    text-transform: uppercase;
    padding: 0.8rem 1.8rem;
    border: var(--border-primary);
    box-shadow: var(--shadow-primary);
    cursor: pointer;
    background-color: var(--color-accent-yellow);
    color: #000000 !important;
    text-decoration: none;
    display: inline-block;
    transition: box-shadow 0.15s ease, background-color 0.15s ease;
    text-align: center;
    border-radius: 0 !important;
}

.btn:hover,
.button:hover,
button:hover,
input[type="submit"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
    box-shadow: 5px 5px 0px #000000;
    background-color: var(--color-accent-yellow) !important;
}

/* Custom WooCommerce Specific Overrides */
.woocommerce-Price-amount {
    font-weight: 900;
    color: #000000;
}

/* Forms and Text Inputs */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
textarea,
select,
.woocommerce-Input {
    width: 100%;
    padding: 0.8rem 1rem;
    border: var(--border-primary);
    box-shadow: 2px 2px 0px #000000;
    font-family: inherit;
    font-weight: 600;
    background-color: #ffffff;
    border-radius: 0 !important;
    outline: none;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
    box-shadow: 4px 4px 0px #000000;
    background-color: #fffbeb;
}

/* Shop Grid */
.woocommerce ul.products li.product {
    border: var(--border-primary);
    box-shadow: var(--shadow-primary);
    background-color: #ffffff;
    padding: 1.5rem;
    text-align: center;
    margin-bottom: 2rem !important;
}

.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 1.2rem !important;
    font-weight: 900 !important;
    margin: 1rem 0 !important;
}

/* Cart Table styling */
.woocommerce table.shop_table {
    border: var(--border-primary) !important;
    border-radius: 0 !important;
    background-color: #ffffff;
}

.woocommerce table.shop_table th {
    font-weight: 900 !important;
    text-transform: uppercase;
    border-bottom: var(--border-primary) !important;
    background-color: var(--color-accent-blue);
    padding: 1rem !important;
}

.woocommerce table.shop_table td {
    padding: 1rem !important;
    border-top: 1px solid #000000 !important;
    font-weight: 600;
}

/* My Account Navigation */
.woocommerce-MyAccount-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
    border: var(--border-primary);
    box-shadow: var(--shadow-primary);
    background-color: #ffffff;
}

.woocommerce-MyAccount-navigation li {
    border-bottom: 2px solid #000000;
}

.woocommerce-MyAccount-navigation li:last-child {
    border-bottom: none;
}

.woocommerce-MyAccount-navigation a {
    display: block;
    padding: 1rem;
    font-weight: 800;
    text-transform: uppercase;
    color: #000000;
    text-decoration: none;
}

.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li:hover a {
    background-color: var(--color-accent-yellow);
}

/* Alerts / Notices */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    border: var(--border-primary) !important;
    background-color: var(--color-accent-green) !important;
    color: #000000 !important;
    box-shadow: var(--shadow-primary) !important;
    border-radius: 0 !important;
    font-weight: 800 !important;
    padding: 1rem 2rem !important;
    margin-bottom: 2rem !important;
}

.woocommerce-error {
    background-color: #f87171 !important;
}

.woocommerce-info {
    background-color: var(--color-accent-blue) !important;
}

/* WooCommerce Mobile Cart Responsiveness */
@media screen and (max-width: 768px) {

    .woocommerce table.shop_table_responsive thead,
    .woocommerce-page table.shop_table_responsive thead {
        display: none !important;
    }

    .woocommerce table.shop_table_responsive tr,
    .woocommerce-page table.shop_table_responsive tr {
        display: block !important;
        margin-bottom: 1.5rem !important;
        border: 3px solid #000000 !important;
        box-shadow: 4px 4px 0px #000000 !important;
        background: #ffffff !important;
        padding: 0.5rem 0 !important;
    }

    .woocommerce table.shop_table_responsive tr td,
    .woocommerce-page table.shop_table_responsive tr td {
        display: block !important;
        text-align: right !important;
        clear: both !important;
        border-top: none !important;
        border-bottom: 1px dashed #eee !important;
        padding: 0.75rem 1rem !important;
    }

    .woocommerce table.shop_table_responsive tr td:last-child,
    .woocommerce-page table.shop_table_responsive tr td:last-child {
        border-bottom: none !important;
    }

    .woocommerce table.shop_table_responsive tr td::before,
    .woocommerce-page table.shop_table_responsive tr td::before {
        content: attr(data-title) ": ";
        float: left !important;
        font-weight: 900 !important;
        text-transform: uppercase !important;
    }

    /* Actions column containing coupon and updates */
    .woocommerce-page table.shop_table_responsive tr td.actions {
        text-align: center !important;
    }

    .woocommerce-page table.shop_table_responsive tr td.actions::before {
        display: none !important;
    }

    .woocommerce-page table.shop_table_responsive tr td.actions .coupon {
        float: none !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0.5rem !important;
        margin-bottom: 1rem !important;
    }

    .woocommerce-page table.shop_table_responsive tr td.actions .coupon input[type="text"] {
        margin: 0 !important;
    }

    .woocommerce-page table.shop_table_responsive tr td.actions button[name="update_cart"] {
        width: 100% !important;
        display: block !important;
    }

    /* Cart Totals block */
    .woocommerce .cart-collaterals .cart_totals,
    .woocommerce-page .cart-collaterals .cart_totals {
        width: 100% !important;
        float: none !important;
        border: 3px solid #000000 !important;
        box-shadow: 4px 4px 0px #000000 !important;
        background: #ffffff !important;
        padding: 1rem !important;
    }
}

/* Empty Cart Layout Fixes */
.woocommerce-cart .woocommerce-page-container,
.woocommerce-cart .woocommerce,
.woocommerce-cart .cart-empty,
.woocommerce-cart .woocommerce-info {
    max-width: 800px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 1.5rem !important;
    box-sizing: border-box !important;
}

/* Ensure the WooCommerce container grid doesn't squeeze items */
.woocommerce-cart .woocommerce {
    display: block !important;
}

/* Force products/cross-sells layout columns to stretch properly */
.woocommerce-cart .cart-empty,
.woocommerce-cart .cross-sells,
.woocommerce-cart ul.products {
    width: 100% !important;
    display: block !important;
}

.woocommerce-cart ul.products li.product {
    width: 100% !important;
    max-width: 320px !important;
    display: inline-block !important;
    margin: 10px !important;
    vertical-align: top !important;
}

/* Sidebar Responsive & Toggle Visibility */
@media (min-width: 1024px) {
    .mobile-only-menu-btn {
        display: none !important;
    }
}

/* WooCommerce — Place Order Button (Neo-Brutalist Yellow) */
#place_order,
.woocommerce #payment #place_order,
.woocommerce-checkout #place_order,
#place_order:disabled,
#place_order.disabled,
.woocommerce #payment #place_order:disabled,
.woocommerce #payment #place_order.disabled {
    display: block !important;
    width: 100% !important;
    padding: 1.1rem 2rem !important;
    background-color: var(--color-accent-yellow) !important;
    color: #000000 !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 1rem !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    border: 3px solid #000000 !important;
    border-radius: 0 !important;
    box-shadow: 4px 4px 0px #000000 !important;
    cursor: pointer !important;
    transition: box-shadow 0.12s ease, transform 0.12s ease !important;
    margin-top: 1.5rem !important;
}

#place_order:hover,
.woocommerce #payment #place_order:hover,
.woocommerce-checkout #place_order:hover {
    box-shadow: 6px 6px 0px #000000 !important;
}

#place_order:active,
.woocommerce #payment #place_order:active,
.woocommerce-checkout #place_order:active {
    box-shadow: 2px 2px 0px #000000 !important;
    transform: translate(2px, 2px) !important;
}

/* ==========================================================================
   WOOCOMMERCE NEO-BRUTALIST CHECKOUT
   ========================================================================== */

.woocommerce-checkout .woocommerce {
    max-width: 800px;
    margin: 0 auto;
    font-family: 'Outfit', sans-serif;
    padding: 2rem 1rem;
}

/* 1-Column Layout */
.woocommerce-checkout #customer_details {
    width: 100%;
    margin-bottom: 3rem;
}

.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
    float: none !important;
    width: 100% !important;
}

.woocommerce-checkout h3#order_review_heading {
    width: 100%;
    margin-top: 0;
    font-size: 2rem;
    font-weight: 900;
    text-transform: uppercase;
    border-bottom: 4px solid #000;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.woocommerce-checkout #order_review {
    width: 100%;
    background: #fff;
    border: 3px solid #000;
    box-shadow: 6px 6px 0px #000;
    padding: 0;
}

/* Headings */
.woocommerce-checkout h3 {
    font-size: 1.8rem;
    font-weight: 900;
    text-transform: uppercase;
    color: #000;
    margin-bottom: 1.5rem;
    border-bottom: 4px solid #000;
    padding-bottom: 10px;
}

/* Form Fields */
.woocommerce-checkout .form-row {
    margin-bottom: 1.5rem;
}

.woocommerce-checkout .form-row label {
    font-weight: 800;
    display: block;
    margin-bottom: 8px;
    text-transform: uppercase;
    font-size: 0.95rem;
}

.woocommerce-checkout .form-row-first {
    width: 48%;
    float: left;
}

.woocommerce-checkout .form-row-last {
    width: 48%;
    float: right;
}

.woocommerce-checkout .form-row-wide {
    width: 100%;
    clear: both;
}

.woocommerce form .form-row input[type="text"],
.woocommerce form .form-row input[type="email"],
.woocommerce form .form-row input[type="tel"],
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
    padding: 12px 15px;
    border: 3px solid #000;
    background: #fff;
    font-family: 'Outfit', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    transition: all 0.2s ease;
    border-radius: 0;
}

.woocommerce form .form-row input:focus,
.woocommerce form .form-row select:focus,
.woocommerce form .form-row textarea:focus {
    outline: none;
    background: var(--color-accent-yellow);
    box-shadow: 4px 4px 0px #000;
    transform: translate(-2px, -2px);
}

/* Order Review Table */
.woocommerce-checkout table.shop_table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0;
    border: none;
}

.woocommerce-checkout table.shop_table th,
.woocommerce-checkout table.shop_table td {
    padding: 15px 10px;
    border-bottom: 2px solid #000;
    font-weight: 700;
}

.woocommerce-checkout table.shop_table th {
    text-transform: uppercase;
    font-weight: 900;
    font-size: 1.1rem;
}

.woocommerce-checkout table.shop_table tbody td.product-name {
    font-size: 1.1rem;
    font-weight: 800;
}

.woocommerce-checkout table.shop_table tfoot th {
    text-align: left;
}

/* Global Mobile Typography Shrink */
@media (max-width: 600px) {
    html {
        font-size: 13px;
    }
}

/* Payment Methods */
.woocommerce-checkout #payment {
    background: #f4f4f4;
    border-top: 3px solid #000;
    /* Only top border needed since it touches container edges */
    padding: 1.5rem;
    margin-bottom: 0;
}

.woocommerce-checkout #payment ul.payment_methods {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
    border-bottom: 2px solid #000;
}

.woocommerce-checkout #payment ul.payment_methods li {
    padding: 1rem 0;
    border-top: 2px solid #000;
}

.woocommerce-checkout #payment ul.payment_methods li:first-child {
    border-top: none;
}

.woocommerce-checkout #payment ul.payment_methods label {
    font-weight: 900;
    font-size: 1.1rem;
    cursor: pointer;
    display: inline-block;
    margin-left: 10px;
}

.woocommerce-checkout #payment div.payment_box {
    padding: 1.5rem;
    background: #fff;
    border: 2px solid #000;
    margin-top: 15px;
    font-size: 0.95rem;
    font-weight: 600;
    text-align: left;
}

/* ==========================================================================
   Mobile Sticky Sub-Navigation (authenticated dashboard users, front page)
   ========================================================================== */
.mobile-subnav {
    display: none;
    /* Hidden on desktop */
}

@media (max-width: 900px) {
    .mobile-subnav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 997;
        background-color: #ffffff;
        border-top: 3px solid #000000;
        box-shadow: 0 -3px 0 #000000;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    body:has(#mobileSubnav) .main-content {
        padding-bottom: 80px !important;
    }

    .mobile-subnav::-webkit-scrollbar {
        display: none;
    }

    /* Override global `button` reset that would apply yellow bg + large padding + shadow */
    .mobile-subnav .msn-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        flex: 1 0 0 !important;
        min-width: 58px !important;
        padding: 0.5rem 0.3rem !important;
        border: none !important;
        border-right: 2px solid #000000 !important;
        border-radius: 0 !important;
        background-color: #ffffff !important;
        box-shadow: none !important;
        cursor: pointer;
        font-family: 'Outfit', sans-serif;
        font-weight: 700;
        text-transform: uppercase;
        color: #000000;
        transition: background-color 0.12s ease;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-subnav .msn-item:last-child {
        border-right: none !important;
    }

    .mobile-subnav .msn-item:hover {
        background-color: #fef9c3 !important;
        transform: none !important;
        box-shadow: none !important;
    }

    .mobile-subnav .msn-item:active {
        background-color: var(--color-accent-yellow) !important;
        transform: none !important;
        box-shadow: none !important;
    }

    .mobile-subnav .msn-item.active {
        background-color: var(--color-accent-yellow) !important;
        box-shadow: none !important;
    }

    .msn-icon {
        font-size: 1.15rem;
        line-height: 1;
        display: block;
    }

    .msn-label {
        font-size: 0.55rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        font-weight: 900;
        line-height: 1;
        display: block;
    }
}

@media (max-width: 900px) {
    .site-footer {
        display: none;
    }
}

/* Visibility utilities for desktop/mobile swap */
.mobile-hide {
    display: none !important;
}

/* hidden on mobile by default */
.desktop-hide {
    display: inline-flex !important;
}

/* shown on mobile by default */

@media (min-width: 901px) {
    .mobile-hide {
        display: inline-flex !important;
    }

    /* shown on desktop */
    .desktop-hide {
        display: none !important;
    }

    /* hidden on desktop */
}

/* Logout button — same style as the header-button / btn-yellow */
a.mobile-only-logout-btn {
    text-decoration: none;
}


/* Fix responsive table layout and remove unused empty space */
.markdown-content {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.markdown-content table {
    display: table !important;
    width: 100% !important;
    border-collapse: collapse !important;
    table-layout: auto !important;
}

.markdown-content tr {
    display: table-row !important;
}

.markdown-content th,
.markdown-content td {
    display: table-cell !important;
    width: auto !important;
}