/*
Theme Name: Aumcreate
Theme URI: https://aumcreate.com/products
Author: AumCreate
Author URI: https://aumcreate.com
Description: A theme built around the Aumframe visual editor: designs are made as templates, so one layout drives every page it matches. Day/night palette, no front-end framework, and a shell you design once.
Version: 2.28.4
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: aumcreate
Tags: custom-menu, featured-images, threaded-comments
*/

/* ==========================================================================
   #BASE STYLES
   ========================================================================== */
/**
 * Reset and base styles for consistent rendering across browsers
 */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    margin-top: 0 !important;
    padding: 0;
    /* The font goes through a token, with the original stack as the fallback. The theme
       settings now define --af-font-body, so changing the font there updates this
       automatically — and the editor canvas is injected with the same variable, so the
       two can no longer disagree. */
    font-family: var(--af-font-body, Arial, Helvetica, sans-serif);
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
dl,
figure,
blockquote {
    margin: 0;
    padding: 0;
}

/*
 * The other half of the pair. `--af-font-body` has been wired to `body` since the settings gained fonts,
 * but nothing ever consumed `--af-font-display`: it was computed, emitted into `:root` and read by no rule
 * at all, so "Heading Font" changed a token that styled nothing and the setting looked broken. Found on a
 * live site 2026-09-01, where the buyer set Anton and every heading stayed on the body font.
 *
 * This is the DEFAULT, not an override — one plain selector, so anything a template says about a specific
 * heading still wins. `inherit` as the fallback keeps the old behaviour (headings follow body) wherever the
 * token is absent, which is also what functions.php emits when no display font is configured.
 */
h1,
h2,
h3,
h4,
h5,
h6 {
    /*
     * `--af-font-heading` first, the site heading font second.
     *
     * The editor lets a container set a font, and everything inside is meant to follow. Plain
     * inheritance cannot deliver that here, because this very rule is a declaration on the heading and
     * a declaration always beats an inherited value — so a container set to the body font would leave
     * its headings behind. The compiler therefore emits `--af-font-heading` alongside the container's
     * `font-family`; custom properties inherit, so it arrives here and wins. Nothing set it: the site
     * heading font, exactly as before.
     */
    font-family: var(--af-font-heading, var(--af-font-display, inherit));
}

ul,
ol {
    list-style: none;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/*
 * ⚠️ …but **not on a page Aumframe rendered**.
 *
 * In a layout an `<a>` is usually not a word — it is a whole card. A clickable card is a link
 * wrapping an image, a heading, a paragraph and a price, so a global hover underline puts a
 * line under all four at once. It looks broken, and the template author cannot turn it off:
 * the plugin's base CSS says `:where(.af-root a){text-decoration:none}`, and `:where()` has
 * **zero specificity**, so this element rule (0,0,1) wins every time.
 *
 * Inside a layout, decoration is the author's decision. Body copy that wants an underline on
 * hover asks for one from the scene CSS (`.af-<node id> a:hover`, which outranks this).
 * (Found 2026-09-03 on a booking template: every service card underlined all four of its
 * lines at once on hover.)
 */
.af-root a:hover {
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

input,
button,
textarea,
select {
    margin: 0;
    padding: 0;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    color: var(--text-on-color);
    background-color: var(--bg);
    transition: background-color .3s;
}

/* ==========================================================================
   #THEME COLOR MODES
   ========================================================================== */
/**
 * Light and dark theme color definitions
 */

/* [data-theme="light"] {
    --text-on-color: #000;
}

[data-theme="dark"] {
    --text-on-color: #fff;
} */

/* Global text color inheritance */
a,
abbr,
address,
article,
aside,
b,
blockquote,
body,
button,
caption,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
html,
i,
ins,
kbd,
label,
legend,
li,
main,
mark,
meter,
nav,
ol,
output,
p,
pre,
progress,
q,
s,
samp,
section,
small,
span,
strong,
sub,
summary,
sup,
table,
tbody,
td,
textarea,
tfoot,
th,
thead,
time,
title,
tr,
u,
ul,
var {
    color: var(--text-on-bg);
}

/* Form element styling */
input,
input::placeholder,
textarea,
textarea::placeholder,
select,
option {
    color: var(--text-on-color);
}

text,
tspan {
    fill: var(--text-on-color);
}

button {
    border: none;
}

/* NOTE: no global `svg { fill: currentColor }` — it overrides inline
   `fill="none"` on line-art SVGs (e.g. the builder's media placeholders,
   any stroke icon) and paints them solid. Theme icons set their own fill via
   the scoped `.aum-icon` / `.aum-icon--filled` rules below, so no global rule
   is needed. */

/* ==========================================================================
   #SCROLLBAR STYLING
   ========================================================================== */
/**
 * Custom scrollbar appearance
 */

::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
}

::-webkit-scrollbar-button {
    height: 0px;
    width: 0;
}

::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: var(--scrollbar) !important;
}

::-webkit-scrollbar-track {
    background-color: none;
}

/* ==========================================================================
   #COMMON COMPONENTS
   ========================================================================== */
/**
 * Reusable components and utility classes
 */

/* Container class for content width */
.aum-container {
    max-width: var(--container-width, 1200px);
    width: 100%;
    margin: 0 auto;
    padding: 0;
}

.aum-main.aum-container {
    flex: 1;
}

.image-aspect-ratio {
    aspect-ratio: var(--image-aspect-ratio);
}

.image-aspect-ratio-horizontal {
    aspect-ratio: 4 / 3;
}

.image-aspect-ratio-vertical {
    aspect-ratio: 3 / 4;
}

/*
 * Back to top — removed 2026-09-02.
 *
 * 🔴 **This block was what made the day/night button and the back-to-top button sit on top of each
 * other.** It positioned `.aum-backtop` itself with `position: fixed; right: 30px; bottom: 30px`,
 * written back when that button stood alone. It is now rendered *inside* `.aum-floating-actions`
 * (see class-aum-floating-actions.php) — a fixed flex column anchored at the same corner — so the
 * button was pinned to the corner while the column tried to stack it below the toggle, and both
 * landed on the same spot.
 *
 * The later `.aum-floating-actions .aum-backtop` rule looked like it superseded this one, but it
 * only sets colour and visibility: it never overrode `position`, which is the half that mattered.
 * Everything else here (size, shape, display, transition) is already given by `.aum-fa-btn`, and
 * `.aum-backtop i` styled an `<i>` that has not existed since icons became inline SVG (2026-07-20).
 *
 * What was genuinely only here — the shadow and the hover darken — moved into the column's rules.
 */

/* ── Social icons ──────────────────────────────────────────────
 *
 * The `.aum-social-sidebar` wrapper is gone (2026-09-02). It was a second element fixed to the same
 * corner as `.aum-floating-actions`, held there by `bottom: 90px` — a number worked out from
 * "back-to-top is 50px tall and sits 30px up". That stopped being true the moment the column held two
 * buttons: measured overlap 52px, with the day/night toggle completely hidden underneath.
 *
 * The icons are children of that column now, so the spacing is the column's `gap` and there is no
 * arithmetic left to get wrong. The item styles below never depended on the wrapper.
 */

.aum-social-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: background-color 0.25s ease, transform 0.2s ease, box-shadow 0.2s ease;
    flex-shrink: 0;
}

.aum-social-item:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}

.aum-social-item>img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
    position: relative;
    z-index: 1;
}

/* ── Hover popup shared base ── */
.aum-social-popup {
    position: absolute;
    right: calc(100% + 14px);
    top: 50%;
    transform: translateY(-50%) translateX(6px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 9999;
}

.aum-social-item:hover .aum-social-popup,
.aum-social-item:focus-within .aum-social-popup {
    opacity: 1;
    pointer-events: auto;
}

/* ── Text popup ── */
.aum-social-popup--text {
    background: #fff;
    color: #333;
    font-size: 13px;
    line-height: 1.6;
    padding: 10px 14px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    white-space: pre-wrap;
    min-width: 120px;
    max-width: 220px;
    text-align: center;
    word-break: break-word;
}

.aum-social-popup--text::after {
    content: '';
    position: absolute;
    right: -7px;
    top: 50%;
    transform: translateY(-50%);
    border: 7px solid transparent;
    border-left-color: #fff;
    border-right: none;
}

/* ── Image popup ── */
.aum-social-popup--image {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);
    padding: 6px;
    line-height: 0;
}

.aum-social-popup--image img {
    display: block;
    max-width: 180px;
    max-height: 180px;
    border-radius: 6px;
    object-fit: contain;
    filter: none;
    width: auto;
    height: auto;
}

.aum-social-popup--image::after {
    content: '';
    position: absolute;
    right: -7px;
    top: 50%;
    transform: translateY(-50%);
    border: 7px solid transparent;
    border-left-color: #fff;
    border-right: none;
}

/* ── Hide on mobile — same breakpoint as before ──
 * Targets the items rather than the old wrapper, which no longer exists: without this the icons
 * would quietly start appearing on phones, where they never used to. */
@media (max-width: 768px) {
    .aum-floating-actions .aum-social-item {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {

    .aum-social-item,
    .aum-social-popup {
        transition: none;
    }
}

/* ==========================================================================
   #HEADER STYLES
   ========================================================================== */
/**
 * Header layout and components
 */

/* Shared */
.aum-header-box {
    width: 100%;
    z-index: 9999;
    background-color: var(--bg);
}

/* Site-wide fixed (fixed mode) */
.aum-header-fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}

/* Floating over the homepage (floating mode) */
.aum-header-floating {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: transparent !important;
    box-shadow: none !important;
}

/* Theme-specific background styles */
[data-theme="light"] .aum-theme-bg-sd {
    background: var(--bg);
    border: 1px solid #ddd;
    border-radius: 12px;
}

[data-theme="dark"] .aum-theme-bg-sd {
    background: var(--bg);
    border: 1px solid #333;
    color: var(--text-on-bg);
    border-radius: 12px;
}

/* Global transition effects */
html.aum-theme-transition *,
html.aum-theme-transition *::before,
html.aum-theme-transition *::after {
    transition: none !important;
}

html,
body,
img,
video,
iframe {
    transition: none;
}

/* ==========================================================================
   #ICONS (inline SVG — replaces the former aumicon font)
   ========================================================================== */
.aum-icon {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: -0.125em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

.aum-icon--filled {
    fill: currentColor;
    stroke: none;
}

/* Like / favorite state toggle: both glyphs are in the DOM, the parent's
   state class decides which shows (works for server render AND JS toggle). */
.like-button .aum-icon-heart-fill,
.favorite-button .aum-icon-star-fill {
    display: none;
}

.like-button.liked .aum-icon-heart {
    display: none;
}

.like-button.liked .aum-icon-heart-fill {
    display: inline-block;
}

.favorite-button.favorited .aum-icon-star {
    display: none;
}

.favorite-button.favorited .aum-icon-star-fill {
    display: inline-block;
}

/* Follow button: user-plus (Follow) vs square-minus (Following), toggled by
   the button's .following class — set on server render and by JS. */
.follow-btn .aum-icon-square-minus {
    display: none;
}

.follow-btn.following .aum-icon-user-plus {
    display: none;
}

.follow-btn.following .aum-icon-square-minus {
    display: inline-block;
}

/* ==========================================================================
   #THEME COMPONENTS
   ========================================================================== */
/**
 * Styles for theme UI components (theme switcher, etc.)
 */

/* Theme switcher component */

.aum-theme-slider,
.aum-mobile-theme-slider {
    position: relative;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.aum-theme-switcher.switch {
    opacity: 0;
    width: 0;
    height: 0;
}

.aum-theme-slider .icon-weather_moon,
.aum-mobile-theme-slider .icon-weather_moon {
    display: none;
}

[data-theme='dark'] .aum-theme-slider .icon-weather_moon,
[data-theme='dark'] .aum-mobile-theme-slider .icon-weather_moon {
    display: block;
}

/* Authentication buttons */
.aum-theme-auth {
    flex-shrink: 0;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
}

/*
 * Search form styles — removed 2026-09-01.
 *
 * 150 lines targeting `.aum-header-search-form.aum-header-search-type`, `.aum-search-type`,
 * `.aum-search-btn`, `.aum-theme-search-form` and `.aum-search-inline`. **No PHP has emitted any of
 * those classes since the Elementor header was deleted (2026-07-20)** — they styled a form that no
 * longer exists, in markup that no longer exists, and shipped to every buyer.
 *
 * They were also actively misleading: the file plainly contained search styling, so the obvious
 * conclusion on finding an unstyled `[aumframe_search]` box was "the CSS is not loading" rather than "the
 * CSS is for something else". The live rules are under #SEARCH FORM at the end of this file.
 *
 * The one survivor below applies to the form the theme emits today.
 */
.aum-search-input::-webkit-search-cancel-button {
    display: none;
}

/* Header menu navigation */
.aum-theme-header-menu {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 25px;
}

/*
 * ⚠️ These are the theme's *own* footer rules and must not reach the Aumframe shell. When a site has a
 * shell, footer.php prints it inside <footer class="aum-footer aum-footer--shell"> on every page Aumframe
 * does not take over (cart, checkout, my account, search, 404). `.aum-footer *{color:#000}` is (0,1,0) —
 * the same as a shell node's `.af-<id>{color:var(--af-color-paper)}` — and the theme sheet prints later,
 * so it won: on the cart page every word of a dark shell footer went black on black in light mode and the
 * takeover pages looked fine (contrast-audit, template #7, 2026-09-13). Hence `:not(.aum-footer--shell)`.
 */
.aum-theme-header-menu a,
.aum-theme-header-menu span,
.aum-footer:not(.aum-footer--shell) * {
    color: #000;
}

[data-theme="dark"] .aum-theme-header-menu a,
[data-theme="dark"] .aum-theme-header-menu span,
[data-theme="dark"] .aum-footer:not(.aum-footer--shell) * {
    color: #fff;
}

.aum-theme-menu {
    display: flex;
    gap: 20px;
    white-space: nowrap;
    overflow: visible;
    padding: 0;
    margin: 0;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.aum-theme-menu>li {
    display: inline-block;
    position: relative;
}

.aum-theme-menu>li:hover::after {
    width: 100%;
}

/* Sub-menu styling */
.menu-item .sub-menu {
    position: absolute;
}

.aum-theme-nav>.aum-theme-menu>.menu-item>.sub-menu {
    transform: scaleY(0);
    transform-origin: top;
    opacity: 0;
    border-radius: 5px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    margin: 0;
    top: calc(100% + 5px);
    left: 0;
    min-width: 100px;
    z-index: 99;
    transition: all .3s;
}

.aum-theme-nav>.aum-theme-menu>.menu-item:hover>.sub-menu {
    transform: scaleY(1);
    opacity: 1;
}

.aum-theme-nav .aum-theme-menu .sub-menu .menu-item a::after {
    content: '';
    display: block;
    width: 0;
    height: 1px;
    background-color: var(--bg);
    filter: invert(1);
    transition: width 0.3s ease;
}

/* Nested sub-menu styling */
.aum-theme-nav>.aum-theme-menu>.menu-item>.sub-menu>.menu-item .sub-menu {
    transform: scaleX(0);
    transform-origin: left;
    opacity: 0;
    border-radius: 5px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    margin: 0;
    top: 0;
    left: calc(100% + 10px);
    min-width: 100px;
    z-index: 99;
    transition: all .3s;
}

.aum-theme-nav>.aum-theme-menu>.menu-item>.sub-menu>.menu-item .sub-menu .menu-item {
    text-align: center;
}

.aum-theme-menu>li>.sub-menu .menu-item-has-children>a {
    padding-right: 28px !important;
}

/* Desktop top-level menu item: chevron indicator for items with sub-menu */
.aum-theme-menu>li.menu-item-has-children>a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.aum-theme-menu>li.menu-item-has-children:hover>a::after {
    transform: rotate(180deg);
}

.menu-collapse>a {
    cursor: pointer;
}

.menu-collapse i {
    font-size: 22px;
}

/* Header logo styles */

.aum-header-logo,
.aum-footer-logo {
    display: none;
    width: auto !important;
    height: 100% !important;
    object-fit: contain;
}

[data-theme="dark"] .aum-header-logo-horizontal.dark-logo,
[data-theme="dark"] .aum-footer-logo-horizontal.dark-logo {
    display: block !important;
}

.aum-logo-mode--light .aum-footer-logo.aum-footer-logo-horizontal.light-logo {
    display: block !important;
}

.aum-logo-mode--dark .aum-footer-logo.aum-footer-logo-horizontal.dark-logo {
    display: block !important;
}

/* Homepage top transparent logo override
 * Desktop: only horizontal logos visible, square stays hidden via normal rules.
 * Mobile (<=991px): handled in breakpoint below.
 */
.aum-header-floating [data-homepage-top-logo="light"] .aum-header-logo-horizontal.dark-logo {
    display: none !important;
}

.aum-header-floating [data-homepage-top-logo="dark"] .aum-header-logo-horizontal.light-logo {
    display: none !important;
}

@media (max-width: 991.98px) {

    

    .aum-header-floating [data-homepage-top-logo="light"] .aum-header-logo-square.dark-logo {
        display: none !important;
    }

    

    .aum-header-floating [data-homepage-top-logo="dark"] .aum-header-logo-square.light-logo {
        display: none !important;
    }

    

    .aum-logo-mode--light .aum-footer-logo.aum-footer-logo-horizontal.light-logo,
    .aum-logo-mode--dark .aum-footer-logo.aum-footer-logo-horizontal.dark-logo {
        display: none !important;
    }

    

    .aum-logo-mode--dark .aum-footer-logo.aum-footer-logo-square.dark-logo {
        display: block !important;
    }
}

/* Mobile menu styles */

.aum-mobile-content-box {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
}

.aum-mobile-content-bg {
    position: absolute;
    inset: 0;
    background-color: var(--bg);
    filter: invert(1);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.aum-mobile-content {
    position: absolute;
    top: 0;
    right: 0;
    width: 80%;
    height: 100%;
    background: var(--bg);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
    z-index: 2;
}

.aum-mobile-hamburger-btn {
    display: inline-block;
    width: 40px;
    height: 40px;
    cursor: pointer;
}

/* Mobile navigation menu */
.aum-mobile-nav {
    width: 100%;
}

.aum-mobile-menu li {
    position: relative;
}

.aum-mobile-menu a {
    position: relative;
    display: block;
    padding: 12px 16px;
    color: var(--text);
    text-decoration: none;
    transition: background 0.2s;
}

/* Mobile authentication buttons */
.aum-mobile-auth {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
    width: 100%;
    font-size: 14px;
}

.aum-mobile-btn.logout-btn {
    height: 30px;
    padding: 0 12px;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    font-weight: 400;
    background-color: #f44336;
}

.aum-mobile-theme-switch-wrapper {
    margin: 32px 0 16px;
}

/* Mobile menu item containers */

.aum-mobile-nav .menu-item .menu-item-container a {
    flex: 1;
}

.aum-mobile-nav .menu-item .sub-menu {
    overflow: hidden;
    height: 0;
    transition: height 0.3s ease;
    position: static;
    padding-left: 20px;
}

.aum-mobile-nav .menu-item.open .sub-menu {
    display: block;
}

.aum-mobile-nav .menu-item-has-children.active>.menu-item-container .menu-toggle i {
    transform: rotate(180deg);
}

/* ==========================================================================
   #FOOTER STYLES
   ========================================================================== */
/**
 * Footer layout and components
 */

.aum-footer {
    position: relative;
    margin-top: 60px;
}

/* The shell brings its own top border and spacing — no gap, no gradient rule on top of it */
.aum-footer--shell {
    margin-top: 0;
}

.aum-footer--shell::before {
    content: none;
}

.aum-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    z-index: 5;
    background: linear-gradient(90deg, transparent, var(--primary), transparent);
}

.aum-footer .aum-container {
    padding-top: 30px;
    padding-bottom: 30px;
}

.aum-footer-columns>.aum-footer-menu>.footer-menu-item>a {
    color: var(--text-on-bg);
    font-size: 1.1rem;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 10px;
}

.aum-footer-menu>.footer-menu-item>a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 2px;
    background-color: var(--primary);
}

.footer-sub-menu {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.footer-sub-menu>.footer-menu-item>a {
    transition: all .3s;
    font-size: 0.9rem;
}

.footer-sub-menu>.footer-menu-item>a:hover {
    display: inline-block;
    color: var(--primary);
    transform: translateX(5px);
}

.aum-footer-description {
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 20px;
}

.aum-footer-logo-wrapper {
    margin-bottom: 20px;
}

.aum-footer-line {
    width: 100%;
    height: 1px;
    background-color: var(--bg);
    filter: invert(1);
    margin: 30px 0;
    opacity: .3;
}

/* aum-social-icon-widget */
.social-icon-wrapper {
    display: block;
}

.aum-social-icon {
    width: 100%;
}

[data-theme="dark"] .aum-social-icon.aum-dark-social-icon {
    display: block;
}

/* ==========================================================================
   #RESPONSIVE BREAKPOINTS
   ========================================================================== */
/**
 * Media queries for responsive design
 */

@media (max-width: 1599.98px) {
    .aum-container {
        padding-left: 40px;
        padding-right: 40px;
    }
}

/* Medium desktops (<1400px) */
@media (max-width: 1399.98px) {
    /* Style overrides */
}

/* Small desktops/laptops (<1200px) */
@media (max-width: 1199.98px) {

    

    .aum-theme-menu {
        justify-content: flex-end;
    }
}

/* Tablets landscape (<992px) */
@media (max-width: 991.98px) {
    

    [data-theme="dark"] .aum-header-logo-horizontal.dark-logo {
        display: none !important;
    }

    

    [data-theme="dark"] .aum-header-logo-square.dark-logo {
        display: block !important;
    }
}

/* Tablets portrait/large phones (<768px) */
@media (max-width: 767.98px) {
    

    .aum-theme-header-menu-mobile {
        display: flex;
    }

    

    .aum-footer-copyright-links {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 20px;
    }

    .aum-container {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* Phones (<576px) */
@media (max-width: 575.98px) {

    
}

/* ==========================================================================
   #PAGE TEMPLATES
   ========================================================================== */
/**
 * Styles for specific page templates
 */

/* Single post hero section */
/* Theme's own blog/archive hero. Scoped :not(.aum-alignfull) so it never leaks
   onto Aum Builder's Hero module (which shares the .aum-hero class). */

.aum-hero:not(.aum-alignfull)::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.aum-hero-overlay {
    position: absolute;
    z-index: 2;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    width: 100%;
    border-radius: 20px 20px 0 0;
    max-width: var(--container-width, 1200px);
    padding: 3rem 1rem;
    text-align: center;
}

.aum-hero-content {
    max-width: 800px;
    margin: 0 auto;
}

.aum-hero-content * {
    color: #fff;
}

.aum-hero-archive,
.aum-hero-category {
    display: inline-block;
    background: var(--primary);
    color: white;
    padding: 0.3em 0.8em;
    border-radius: 999px;
    font-size: 0.75rem;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.aum-hero-title {
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 1rem;
    color: #ffffff;
}

.aum-archive-hero-title {
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 12px;
    color: var(--text-on-bg);
}

.aum-hero-meta {
    font-size: 0.9rem;
    color: #eee;
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: center;
}

.aum-hero-author img {
    vertical-align: middle;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    margin-right: 5px;
}

/* Page layout with sidebar */
.aum-page-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
    margin-top: 3rem;
}

/* Sidebar styling */
.aum-page-sidebar {
    position: relative;
}

.aum-sidebar-inner {
    position: sticky;
    top: var(--header-height);
    max-height: 80vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.aum-sidebar-s-box,
.aum-page-content-box {
    padding: 2rem;
}

.aum-page-sidebar h3 {
    font-size: 1.25rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--primary, #333);
    padding-bottom: 0.5rem;
}

/* Post navigation */
.aum-post-navigation {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Related posts */
.aum-related-posts ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.aum-related-posts li {
    margin-bottom: 0.5rem;
}

.aum-related-posts li a {
    text-decoration: none;
}

.aum-related-posts li a:hover {
    text-decoration: underline;
}

/* Tag styling */
.aum-tag {
    display: inline-block;
    background: var(--primary);
    color: #fff;
    padding: 0.3em 0.7em;
    border-radius: 999px;
    font-size: 0.8rem;
    margin: 0.2rem 0.3rem 0 0;
}

/* Archive page styles */
.aum-archive-info.aum-page-info {
    text-align: center;
    padding-top: 40px;
    padding-bottom: 8px;
}

.aum-archive-box .aum-page-content-box .aum-post-thumbnail>a {
    display: block;
    width: 100%;
    height: 500px;
    overflow: hidden;
}

.aum-archive-box .aum-page-content-box .aum-post-thumbnail>a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.aum-archive-box .aum-post-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 10px 0;
}

.aum-archive-box .aum-page-content-box hr {
    margin: 20px 0;
}

/* =========================
   Content Typography Base
   Scope: .aum-post-conten
========================= */

.aum-post-conten {
    line-height: 1.8;
    font-size: 16px;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.aum-post-conten>* {
    margin: 0 0 1em;
}

.aum-post-conten p {
    margin: 0 0 1em;
}

.aum-post-conten h1,
.aum-post-conten h2,
.aum-post-conten h3,
.aum-post-conten h4,
.aum-post-conten h5,
.aum-post-conten h6 {
    line-height: 1.3;
    margin: 1.2em 0 0.6em;
    font-weight: 700;
}

.aum-post-conten h1 {
    font-size: 1.8em;
}

.aum-post-conten h2 {
    font-size: 1.5em;
}

.aum-post-conten h3 {
    font-size: 1.25em;
}

.aum-post-conten h4 {
    font-size: 1.1em;
}

.aum-post-conten h5,
.aum-post-conten h6 {
    font-size: 1em;
}

.aum-post-conten a {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.aum-post-conten a:hover {
    opacity: 0.85;
}

.aum-post-conten strong,
.aum-post-conten b {
    font-weight: 700;
}

.aum-post-conten em,
.aum-post-conten i {
    font-style: italic;
}

.aum-post-conten hr {
    border: 0;
    border-top: 1px solid #e5e7eb;
    margin: 1.5em 0;
}

.aum-post-conten ul,
.aum-post-conten ol {
    padding-left: 1.4em;
    margin: 0 0 1em;
}

.aum-post-conten li {
    margin: 0.35em 0;
}

.aum-post-conten li>ul,
.aum-post-conten li>ol {
    margin-top: 0.5em;
}

.aum-post-conten blockquote {
    margin: 1.2em 0;
    padding: 0.8em 1em;
    border-left: 4px solid #e5e7eb;
    background: #f8fafc;
}

.aum-post-conten blockquote>*:last-child {
    margin-bottom: 0;
}

.aum-post-conten code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.92em;
    padding: 0.15em 0.35em;
    border: 1px solid #e5e7eb;
    background: #f8fafc;
    border-radius: 6px;
}

.aum-post-conten pre {
    margin: 1.2em 0;
    padding: 1em 1.1em;
    overflow: auto;
    border: 1px solid #e5e7eb;
    background: #0b1220;
    border-radius: 12px;
}

.aum-post-conten pre code {
    border: 0;
    background: transparent;
    padding: 0;
    color: #e5e7eb;
    font-size: 0.95em;
}

.aum-post-conten img,
.aum-post-conten video {
    max-width: 100%;
    height: auto;
}

.aum-post-conten figure {
    margin: 1.2em 0;
}

.aum-post-conten figcaption {
    font-size: 0.9em;
    opacity: 0.75;
    margin-top: 0.5em;
}

.aum-post-conten table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    margin: 1.2em 0;
    font-size: 0.95em;
}

.aum-post-conten th,
.aum-post-conten td {
    border: 1px solid #e5e7eb;
    padding: 10px 12px;
    vertical-align: top;
}

.aum-post-conten th {
    font-weight: 700;
    background: #f8fafc;
}

.aum-post-conten tbody tr:nth-child(even) {
    background: #fcfcfd;
}

.aum-post-conten .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.aum-post-conten u {
    text-underline-offset: 3px;
}

.aum-post-conten del {
    opacity: 0.75;
}

.aum-post-conten small {
    font-size: 0.9em;
    opacity: 0.85;
}

/* Image hover effect */
.imageg-scale>img {
    transform: scale(1);
    transition: transform .3s;
}

.imageg-scale:hover>img {
    transform: scale(1.1);
}

/* 404 error page */
.aum-error {
    max-width: 100%;
    overflow: hidden;
}

.aum-error #matrix {
    font-family: monospace, monospace;
}

.aum-error .error-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 1;
}

.aum-error .error-container h1 {
    font-size: 12rem;
    color: var(--primary);
    margin: 0 0 1rem 0;
}

/* Both of these were `#fff`, which only read because the canvas painted itself black regardless of
   the theme. With the wash following the page background, they have to follow it too. */
.aum-error .error-container p {
    font-size: 1.5rem;
    margin-bottom: 2rem;
    color: var(--text-on-bg);
}

.aum-error .btn-home {
    color: var(--text-on-bg);
    border: 2px solid currentColor;
    padding: 0.8rem 2rem;
    text-decoration: none;
    font-weight: bold;
    border-radius: 4px;
    transition: background-color 0.3s, color 0.3s;
}

.aum-error .btn-home:hover {
    background-color: var(--primary);
    border: 2px solid var(--primary);
    /* ⚠️ Not `white`: this site's brand colour is a fluorescent green, and white on it is unreadable.
       `--text-on-primary` is computed from the brand colour's own luminance — the same rule the
       back-to-top button already follows. */
    color: var(--text-on-primary, #fff);
}

.aum-posts-container {
    width: 100%;
}

.aum-posts-columns-1 .aum-post-item {
    width: calc(100% - 30px);
}

.aum-posts-columns-3 .aum-post-item {
    width: calc(33.333% - 30px);
}

.aum-post-item {
    transition: all 0.3s ease;
}

.aum-post-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.aum-sort-select {
    margin-left: 15px;
}

.post-thumbnail img {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    display: block;
}

.read-more {
    display: inline-block;
    text-decoration: none;
    transition: all 0.3s ease;
}

.aum-posts-loading .loader {
    display: inline-block;
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    border-top: 4px solid;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@media (max-width: 1024px) {

    

    .aum-sidebar-s-box,
    .aum-page-content-box {
        padding: .5rem;
    }
}

@media (max-width: 767px) {
    
}

/* Mobile adjustments for page templates */
@media (max-width: 768px) {
    .aum-sidebar-inner {
        position: static !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .aum-page-layout {
        display: block;
    }

    .aum-page-content-box,
    .aum-page-sidebar {
        margin-bottom: 2rem;
    }

    .aum-page-content-box .aum-post-thumbnail>a {
        height: 300px;
    }
}

/* =================================================
   Contact Form 7 Universal Beautification Style
   ================================================= */

.wpcf7 {
    width: 100%;
    margin: 0 auto;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.wpcf7 form label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    color: var(--text-on-bg);
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="url"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="number"],
.wpcf7 select,
.wpcf7 textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #666;
    border-radius: 6px;
    font-size: 15px;
    color: var(--text-on-bg);
    background-color: var(--bg);
    box-sizing: border-box;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.wpcf7-form-control-wrap input,
.wpcf7-form-control-wrap select {
    margin-top: 10px;
}

.wpcf7 input:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 115, 230, 0.2);
    outline: none;
}

.wpcf7 textarea {
    min-height: 120px;
    resize: vertical;
}

.wpcf7 input[type="submit"] {
    display: inline-block;
    padding: 12px 26px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    background-color: var(--primary);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.wpcf7 input[type="submit"]:hover {
    background-color: var(--primary);
}

.wpcf7-not-valid-tip {
    color: #d93025;
    font-size: 13px;
    margin-top: 4px;
}

.wpcf7 form.sent .wpcf7-response-output {
    border-color: #4caf50;
    background: #e6f4ea;
    color: #2e7d32;
}

@media (max-width: 600px) {
    .wpcf7 {
        padding: 0 10px;
    }
}

/* Gallery Template Styles */

.gallery-title {
    font-size: 1.8rem;
    margin-bottom: 20px;
    text-align: center;
    color: #333;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.gallery-item:hover {
    transform: translateY(-5px);
}

.gallery-link {
    display: block;
    text-decoration: none;
}

.gallery-image {
    width: 100%;
    height: 250px;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.gallery-item:hover .gallery-image {
    transform: scale(1.05);
}

.gallery-caption {
    padding: 10px;
    background: #f8f9fa;
    text-align: center;
    font-size: 0.9rem;
    color: #666;
    border-top: 1px solid #eee;
}

/* Video Template Styles */
.aum-video-header {
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}

.aum-video-title {
    font-size: 2.2rem;
    margin: 10px 0;
    color: #333;
}

.aum-video-player {
    margin: 30px 0;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.video-wrapper {
    position: relative;
    width: 100%;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.aum-video {
    width: 100%;
    display: block;
    background: #000;
}

.video-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.video-wrapper:hover .video-controls {
    opacity: 1;
}

.video-play-btn {
    background: rgba(255, 255, 255, 0.9);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-progress {
    flex: 1;
}

.video-seek {
    width: 100%;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    outline: none;
}

.video-seek::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
}

.video-fullscreen {
    background: rgba(255, 255, 255, 0.9);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-info {
    margin-top: 20px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
}

.video-info h3 {
    margin: 0 0 10px 0;
    color: #333;
}

.video-description {
    color: #666;
    margin: 0 0 15px 0;
    line-height: 1.6;
}

.video-actions {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.video-download-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #28a745;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.3s ease;
}

.video-download-btn:hover {
    background: #218838;
    color: white;
}

.aum-video-content {
    margin-top: 40px;
    font-size: 1.1rem;
    line-height: 1.8;
    color: #333;
}

.post-interaction-buttons.no-narrow {
    position: fixed;
    top: 50%;
    right: calc(50% + (var(--container-width) / 2) + 25px);
    transform: translateY(-50%);
    width: 50px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.post-interaction-buttons.is-narrow {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    gap: 20px;
}

.post-interaction-buttons button {
    background: none;
    display: flex;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    color: color-mix(in srgb, var(--text-on-bg) 65%, transparent);
}

.post-interaction-buttons button .like-count,
.post-interaction-buttons button .favorite-count {
    font-size: 14px;
}

.post-interaction-buttons button .aum-icon {
    font-size: 18px;
}

.post-interaction-buttons button .like-icon,
.post-interaction-buttons button .favorite-icon {
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--secondary) 5%, transparent);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.post-common-page-links {
    margin: 30px 0;
    padding: 20px 0;
    border-top: 1px solid var(--secondary);
    border-bottom: 1px solid var(--secondary);
    display: flex;
    justify-content: center;
    gap: 10px;
    font-size: 14px;
}

.post-common-page-links * {
    color: var(--text-on-bg);
    background: var(--secondary);
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    border-radius: 3px;
    transition: all 0.3s ease;
}

.post-common-page-links a:hover {
    background: var(--primary);
    color: #fff;
    text-decoration: none;
}

.post-common-page-links span {
    opacity: 0.4;
}

.post-author-avatar {
    display: flex;
    align-items: center;
    line-height: 1;
}

.post-author-avatar .avatar {
    border-radius: 50%;
}

.nav-links {
    margin: 30px 0;
    padding: 20px 0;
    display: flex;
    justify-content: center;
    gap: 10px;
    font-size: 14px;
}

/*
 * ⚠️ **A foreground and its ground are a pair.**
 *
 * The ground here is `--secondary`, and the foreground used to be `--text-on-bg` — the body colour
 * computed for the *page* ground, which has no relationship to `--secondary` at all. That left this
 * cell's contrast to whatever two colours the buyer happened to pick: measured 2026-09-04 with
 * `workflow/tools/contrast-audit.js`, brass ground with deep-indigo text came to 2.86:1 (4.5 needed).
 * Whichever token is the ground, the foreground has to be the one computed from *that* token's own
 * luminance.
 */
.nav-links * {
    color: var(--text-on-secondary, var(--text-on-bg)) !important;
    background: var(--secondary);
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    border-radius: 3px;
    transition: all 0.3s ease;
}

.nav-links .page-numbers.current {
    background: var(--primary);
    /* The ground became --primary, so the foreground has to follow — measured 2.52:1 before */
    color: var(--text-on-primary, #fff) !important;
}

.nav-links .next.page-numbers,
.nav-links .prev.page-numbers {
    width: fit-content;
    padding: 0 10px;
}

.nav-links a:hover {
    background: var(--primary);
    color: #fff;
    text-decoration: none;
}

/*
 * ⚠️ **Fade the ellipsis, and nothing else.**
 *
 * The current page is a `<span class="page-numbers current">`, and a blanket `.nav-links span` faded
 * it to 40% along with everything else — the one item that should stand out most ended up the faintest
 * thing in the pagination, and below the ratio in both modes. The ellipsis is what should recede.
 */
.nav-links span.dots {
    opacity: 0.4;
}

@keyframes aumBounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

@keyframes aumPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

@keyframes aumShake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-3px);
    }

    75% {
        transform: translateX(3px);
    }
}

@keyframes aumWobble {

    0%,
    100% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(-5deg);
    }

    75% {
        transform: rotate(5deg);
    }
}

@keyframes aumFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== AUM Entrance Animation ===== */
[data-aum-animate] {
    opacity: 0;
}

[data-aum-animate].aum-animated {
    opacity: 1;
}

[data-aum-animate="fadeInUp"] {
    transform: translateY(30px);
}

[data-aum-animate="fadeInUp"].aum-animated {
    transform: translateY(0);
    transition: opacity var(--aum-anim-dur, 0.6s) ease-out var(--aum-anim-del, 0s), transform var(--aum-anim-dur, 0.6s) ease-out var(--aum-anim-del, 0s);
}

[data-aum-animate="fadeInDown"] {
    transform: translateY(-30px);
}

[data-aum-animate="fadeInDown"].aum-animated {
    transform: translateY(0);
    transition: opacity var(--aum-anim-dur, 0.6s) ease-out var(--aum-anim-del, 0s), transform var(--aum-anim-dur, 0.6s) ease-out var(--aum-anim-del, 0s);
}

[data-aum-animate="fadeInLeft"] {
    transform: translateX(-30px);
}

[data-aum-animate="fadeInLeft"].aum-animated {
    transform: translateX(0);
    transition: opacity var(--aum-anim-dur, 0.6s) ease-out var(--aum-anim-del, 0s), transform var(--aum-anim-dur, 0.6s) ease-out var(--aum-anim-del, 0s);
}

[data-aum-animate="fadeInRight"] {
    transform: translateX(30px);
}

[data-aum-animate="fadeInRight"].aum-animated {
    transform: translateX(0);
    transition: opacity var(--aum-anim-dur, 0.6s) ease-out var(--aum-anim-del, 0s), transform var(--aum-anim-dur, 0.6s) ease-out var(--aum-anim-del, 0s);
}

[data-aum-animate="fadeIn"].aum-animated {
    transition: opacity var(--aum-anim-dur, 0.6s) ease-out var(--aum-anim-del, 0s);
}

[data-aum-animate="zoomIn"] {
    transform: scale(0.92);
}

[data-aum-animate="zoomIn"].aum-animated {
    transform: scale(1);
    transition: opacity var(--aum-anim-dur, 0.6s) ease-out var(--aum-anim-del, 0s), transform var(--aum-anim-dur, 0.6s) ease-out var(--aum-anim-del, 0s);
}

[data-aum-animate="none"] {
    opacity: 1;
}

/* ==========================================================================
   #CONTACT FORM 7
   ========================================================================== */

.wpcf7-form {
    width: 100%;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="password"],
.wpcf7-form input[type="search"],
.wpcf7-form input[type="number"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="date"],
.wpcf7-form input[type="time"],
.wpcf7-form input[type="datetime-local"],
.wpcf7-form input[type="month"],
.wpcf7-form input[type="week"],
.wpcf7-form textarea,
.wpcf7-form select {
    display: block;
    width: 100%;
    padding: 10px 14px;
    font-size: 15px;
    font-family: inherit;
    line-height: 1.5;
    color: var(--text-on-color);
    background-color: var(--bg);
    border: 1.5px solid var(--border, rgba(0, 0, 0, 0.12));
    border-radius: 6px;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="url"]:focus,
.wpcf7-form input[type="password"]:focus,
.wpcf7-form input[type="search"]:focus,
.wpcf7-form input[type="number"]:focus,
.wpcf7-form input[type="tel"]:focus,
.wpcf7-form input[type="date"]:focus,
.wpcf7-form input[type="time"]:focus,
.wpcf7-form input[type="datetime-local"]:focus,
.wpcf7-form input[type="month"]:focus,
.wpcf7-form input[type="week"]:focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent);
}

.wpcf7-form textarea {
    resize: vertical;
    min-height: 120px;
}

.wpcf7-form select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23888' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
    cursor: pointer;
}

.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder {
    color: var(--text-on-color);
    opacity: 0.4;
}

.wpcf7-form label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-on-color);
}

.wpcf7-form input[type="submit"],
.wpcf7-form button[type="submit"],
.wpcf7-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 28px;
    font-size: 15px;
    font-family: inherit;
    font-weight: 600;
    line-height: 1;
    color: #fff;
    background-color: var(--primary);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
    appearance: none;
    -webkit-appearance: none;
    margin-top: 4px;
}

.wpcf7-form input[type="submit"]:hover,
.wpcf7-form button[type="submit"]:hover,
.wpcf7-submit:hover {
    background-color: var(--primary-hover, color-mix(in srgb, var(--primary) 80%, #000));
    box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 35%, transparent);
    transform: translateY(-1px);
}

.wpcf7-form input[type="submit"]:active,
.wpcf7-form button[type="submit"]:active,
.wpcf7-submit:active {
    transform: translateY(0);
    box-shadow: none;
}

.wpcf7-form input[type="checkbox"],
.wpcf7-form input[type="radio"] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    accent-color: var(--primary);
    cursor: pointer;
    margin: 0;
    padding: 0;
}

.wpcf7-form fieldset {
    border: 1.5px solid var(--border-color, rgba(0, 0, 0, 0.12));
    border-radius: 8px;
    padding: 16px 20px;
}

.wpcf7-form legend {
    padding: 0 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-on-color);
}

/* Field wrapper spacing */
.wpcf7-form p {
    margin-bottom: 18px;
}

/* Remove default CF7 width on spans */
.wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}

/* Validation error highlight */
.wpcf7-not-valid {
    border-color: #e53e3e !important;
    box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.15) !important;
}

.wpcf7-not-valid-tip {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: #e53e3e;
}

.wpcf7-response-output {
    margin: 16px 0 0;
    padding: 12px 16px;
    font-size: 14px;
    border-radius: 6px;
    border: none !important;
}

.wpcf7-mail-sent-ok {
    background-color: #f0fdf4;
    color: #166534;
    border-left: 4px solid #22c55e !important;
}

.wpcf7-mail-sent-ng,
.wpcf7-aborted {
    background-color: #fef2f2;
    color: #991b1b;
    border-left: 4px solid #e53e3e !important;
}

.wpcf7-spam-blocked,
.wpcf7-validation-errors {
    background-color: #fffbeb;
    color: #92400e;
    border-left: 4px solid #f59e0b !important;
}

.wpcf7 .ajax-loader {
    display: inline-block;
    margin-left: 8px;
    vertical-align: middle;
}

[data-theme="dark"] .wpcf7-mail-sent-ok {
    background-color: rgba(34, 197, 94, 0.1);
    color: #86efac;
}

[data-theme="dark"] .wpcf7-mail-sent-ng,
[data-theme="dark"] .wpcf7-aborted {
    background-color: rgba(229, 62, 62, 0.1);
    color: #fca5a5;
}

[data-theme="dark"] .wpcf7-spam-blocked,
[data-theme="dark"] .wpcf7-validation-errors {
    background-color: rgba(245, 158, 11, 0.1);
    color: #fcd34d;
}

@media (prefers-reduced-motion: reduce) {

    .wpcf7-form input[type="submit"],
    .wpcf7-form button[type="submit"],
    .wpcf7-submit {
        transition: none;
    }
}
/* ── Floating action column, bottom right (day/night toggle + back to top) ──────
 *
 * Both buttons are emitted unconditionally from `wp_footer`
 * (inc/frontend/class-aum-floating-actions.php) and are **not placed by whoever builds
 * the site**. The reasoning and the implementation are in that file's header comment.
 */
/*
 * ⚠️ The bottom offset is a **variable**, because the bottom edge of the window is not ours
 * alone.
 *
 * A template whose skeleton is a sticky bottom bar (`T7` — a booking site's "Book a session"
 * strip is the obvious one) occupies exactly this corner, and the column is printed at
 * `wp_footer`, i.e. after the layout, so at equal z-index it wins and lands on top of the
 * bar's button. Nothing errors and a screenshot at the wrong scroll position looks fine.
 *
 * A template that needs the room sets `--aum-floating-bottom` on `:root` from its shell CSS;
 * everything else keeps the 30px it always had.
 */
.aum-floating-actions {
    position: fixed;
    right: 30px;
    bottom: var(--aum-floating-bottom, 30px);
    z-index: 90;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

.aum-floating-actions .aum-fa-btn {
    appearance: none;
    width: 50px;
    height: 50px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 50%;
    background-color: var(--card-bg);
    /* ⚠️ No hard-coded colours: this column sits on the page ground and follows light/dark */
    color: var(--text-on-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform .2s ease, opacity .25s ease, visibility .25s ease;
}

.aum-floating-actions .aum-fa-btn:hover { transform: translateY(-2px); }

.aum-floating-actions .aum-fa-btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/*
 * ⚠️ `.screen-reader-text` — text meant for a screen reader and nobody else.
 *
 * The theme had no rule for it, which is not a small omission: **WordPress core emits this class itself**
 * — in `get_search_form()`, in the posts-navigation headings, in the comment form — and so does the
 * cart template in `woocommerce/cart/cart.php`. Everywhere those appeared, so did the label, because
 * an undefined class styles nothing and fails in silence. Found 2026-09-05, when the language names on
 * the switcher's flags spilled out of their circles.
 *
 * This is the rule from the core themes, unchanged. `clip` is deprecated but still needed: `clip-path`
 * alone is not honoured by every screen reader's off-screen handling.
 */
.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
    word-wrap: normal !important;
}

/* …except when it takes focus: a skip link nobody can see is a skip link nobody can use. */
.screen-reader-text:focus {
    position: static !important;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: inherit;
}

/* ── The language switcher on the arc ───────────────────────────────────────────
 *
 * Only present on a multilingual site (inc/frontend/class-aum-lang-orbit.php). The items are placed by
 * `assets/frontend/js/aum-lang-orbit.js`, because where they sit depends on how many languages there are;
 * everything here is what they look like once placed, plus the closed state, which must be right before
 * any script runs.
 */
.aum-lang-orbit {
    position: relative;
    /* The arc reaches up and to the left, outside the 50px button. Without this the column's own bounds
       would clip it — and the failure is silent: the languages are there, just invisible. */
    overflow: visible;
}

.aum-lang-orbit__list {
    list-style: none;
    margin: 0;
    padding: 0;
    /* Zero-size box centred on the button: every item is positioned from this one point, so the arc's
       geometry does not depend on the list's own dimensions. */
    position: absolute;
    left: 25px;
    top: 25px;
    width: 0;
    height: 0;
}

/*
 * ⚠️ **Opening and scrolling are two different motions and they need two different transitions.**
 *
 * Opening is a fan unrolling: it can afford to be slow, to overshoot a little, and to stagger so the
 * flags arrive in order. Scrolling is one step of a ring — every flag slides to the position the one
 * ahead of it just left — and it has to be quick, even, and *finished* before the next step arrives.
 *
 * Sharing one transition between them broke scrolling badly, and in exactly the two ways it was
 * described: the stagger meant half the arc had not started moving yet while the other half had, and
 * the springy curve meant each step was still overshooting when the next one landed, so a fast scroll
 * left the flags shrinking and piling up at one end of the arc instead of rotating through it.
 *
 * So the default is the scrolling one, and the opening one is switched on for as long as the opening
 * lasts.
 */
.aum-lang-orbit__item {
    position: absolute;
    margin: 0;
    left: -20px;
    top: -20px;
    width: 40px;
    height: 40px;
    /* Closed: collapsed onto the button. The script writes the open transform. */
    transform: translate(0, 0) scale(0.3);
    opacity: 0;
    visibility: hidden;
    transition: transform .17s ease, opacity .17s ease, visibility .17s;
}

.aum-lang-orbit.is-animating .aum-lang-orbit__item {
    transition: transform .28s cubic-bezier(.34, 1.4, .64, 1), opacity .2s ease, visibility .2s;
}

.aum-lang-orbit.is-open .aum-lang-orbit__item {
    opacity: 1;
    visibility: visible;
}

/* Beyond the window: still rendered, so it can animate in when the arc scrolls, but not reachable. */
.aum-lang-orbit.is-open .aum-lang-orbit__item.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/*
 * The one just past each end: half-size, faded, and **not clickable**. It is the only thing that says
 * the arc scrolls — see the note in aum-lang-orbit.js about the dot this replaced.
 */
.aum-lang-orbit.is-open .aum-lang-orbit__item.is-peek {
    opacity: 0.55;
    visibility: visible;
    pointer-events: none;
}

/* Staggered so the arc unrolls rather than appearing all at once — **while opening only**. */
.aum-lang-orbit.is-animating .aum-lang-orbit__item:nth-child(2) { transition-delay: .03s; }
.aum-lang-orbit.is-animating .aum-lang-orbit__item:nth-child(3) { transition-delay: .06s; }
.aum-lang-orbit.is-animating .aum-lang-orbit__item:nth-child(4) { transition-delay: .09s; }
.aum-lang-orbit.is-animating .aum-lang-orbit__item:nth-child(5) { transition-delay: .12s; }

.aum-lang-orbit__item > a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border: 1px solid var(--border);
    border-radius: 50%;
    /* No hard-coded colours — this column sits on the page ground and follows light/dark */
    background-color: var(--card-bg);
    color: var(--text-on-bg);
    text-decoration: none;
    font-size: 18px;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
    transition: transform .18s ease;
}

.aum-lang-orbit__item > a:hover { transform: scale(1.12); }

.aum-lang-orbit__item > a:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* The two-letter stand-in for a language whose locale carries no country (`eo`, a bare `en`). */
.aum-lang-orbit__code {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
}

/*
 * ⚠️ Sized here, in px, rather than inherited from AumLang's own stylesheet.
 *
 * That stylesheet is enqueued when *its* switcher renders — and on our sites its floating switcher is
 * deliberately stood aside, so it may never load. A flag that depends on it would be full-width one day
 * and correct the next, for reasons nothing on the page explains.
 */
.aum-lang-orbit .aml-flag {
    display: block;
    width: 24px;
    line-height: 1;
}

.aum-lang-orbit .aml-flag img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 2px;
}

/*
 * The name, on hover and on focus.
 *
 * ⚠️ This was a `title` attribute first, and it behaved exactly as the user described it: sometimes
 * there, sometimes not. The browser's own tooltip waits about a second of stillness before it appears,
 * so it showed on a slow hover and not on a quick one — and the current-language button had no `title`
 * at all, so that one never showed anything. A tooltip that is sometimes there is worse than none:
 * it teaches people the control is broken.
 *
 * It opens to the **left** for every item, including the button. The whole control lives in the
 * bottom-right corner with the arc reaching up and left, so left is the one direction with room in it
 * whichever item is hovered — no per-item arithmetic, and nothing lands off-screen.
 */
.aum-lang-orbit__item > a,
.aum-lang-orbit__toggle {
    position: relative;
}

.aum-lang-orbit__item > a::after,
.aum-lang-orbit__toggle::after {
    content: attr(data-label);
    position: absolute;
    right: calc(100% + 9px);
    top: 50%;
    transform: translateY(-50%);
    padding: 3px 9px;
    border: 1px solid var(--border);
    border-radius: 6px;
    /* Same tokens as the buttons themselves — this column follows light/dark like everything else */
    background-color: var(--card-bg);
    color: var(--text-on-bg);
    font-size: 12px;
    line-height: 1.5;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .14);
    opacity: 0;
    visibility: hidden;
    transition: opacity .12s ease, visibility .12s;
    pointer-events: none;
}

.aum-lang-orbit__item > a:hover::after,
.aum-lang-orbit__item > a:focus-visible::after,
.aum-lang-orbit__toggle:hover::after,
.aum-lang-orbit__toggle:focus-visible::after {
    opacity: 1;
    visibility: visible;
}

/* A peeking flag is a hint, not a target, so it gets no label either. */
.aum-lang-orbit__item.is-peek > a::after { content: none; }


/*
 * ⚠️ Reduced motion: the arc still forms — it is the layout, not decoration — but nothing travels or
 * bounces to get there.
 */
.aum-lang-orbit.is-instant .aum-lang-orbit__item,
.aum-lang-orbit.is-instant .aum-lang-orbit__item > a,
.aum-lang-orbit.is-instant .aum-lang-orbit__toggle {
    transition: opacity .12s linear, visibility .12s linear;
    transition-delay: 0s !important;
}

/*
 * On a phone the arc would swing across the content, so the same list stacks straight up. The script
 * adds `is-stack` and stops writing transforms; the positions come from here.
 */
.aum-lang-orbit.is-stack .aum-lang-orbit__list {
    position: absolute;
    left: 50%;
    top: auto;
    bottom: 60px;
    transform: translateX(-50%);
    width: 44px;
    height: auto;
    max-height: 46vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
    padding: 2px;
    /* The list is not in the flow when closed, so it cannot push the column around. */
    visibility: hidden;
}

.aum-lang-orbit.is-stack.is-open .aum-lang-orbit__list { visibility: visible; }

.aum-lang-orbit.is-stack .aum-lang-orbit__item {
    position: static;
    left: auto;
    top: auto;
    flex: 0 0 auto;
    transform: none;
}

/* Back-to-top uses the brand colour, with a foreground computed from the primary's
   luminance — a white arrow vanishes when the brand colour is light */
.aum-floating-actions .aum-backtop {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--text-on-primary, #fff) !important;
    /* Appears once scrolled far enough; aum.js adds .active */
    opacity: 0;
    visibility: hidden;
}
.aum-floating-actions .aum-backtop.active { opacity: 1; visibility: visible; }

/* Kept from the old standalone rule: the lift off the page, and a darker press state. */
.aum-floating-actions .aum-backtop { box-shadow: 0 2px 10px rgba(0, 0, 0, .1); }
.aum-floating-actions .aum-backtop:hover {
    background-color: color-mix(in srgb, var(--primary), black 40%);
}

@media (max-width: 640px) {
    /* ⚠️ The narrow-screen override has to keep reading the variable, or a template that
       moved the column out of its own way is silently overruled on exactly the screens where
       a sticky bottom bar takes the most of the window. */
    .aum-floating-actions { right: 16px; bottom: var(--aum-floating-bottom, 16px); gap: 10px; }
    .aum-floating-actions .aum-fa-btn { width: 44px; height: 44px; }
}

/* ==========================================================================
   #SEARCH FORM
   --------------------------------------------------------------------------
   The form `[aumframe_search]` emits — and until now the only search form the theme
   produces at all.

   Written fresh rather than retargeted from what used to be here. The old
   block styled the Elementor header's form (deleted 2026-07-20) and its class
   names no longer match the markup at all — `.aum-search-btn` versus today's
   `.aum-search-submit`, plus a `right: 82px` on the clear button reserving room
   for a type dropdown that no longer exists. It matched nothing and was removed
   in 2.0.21; see the note where it used to be.

   Colours come from `currentColor` and `transparent` on purpose. This form is
   dropped into a layout whose palette the theme cannot know — the first real
   use was on a near-black section — so it inherits its surroundings instead of
   assuming a light background. A template that wants a specific look styles it
   through the node's own custom CSS.
   ========================================================================== */

/* ==========================================================================
   Theme toggle placed **in a layout** — a functional baseline
   --------------------------------------------------------------------------
   `[aumframe_theme_toggle]` exists so a template can put the switch in its header
   instead of leaving it in the fixed column at the bottom right. But the only
   styling this button ever had was `.aum-floating-actions .aum-fa-btn` — i.e.
   it applied **only inside that column**. Dropped into a header by the
   shortcode it inherited nothing and fell back to the browser's default button
   chrome: a light-grey box, with the icon taking the layout's colour, so on a
   dark header it was a pale square with an invisible icon inside it.

   Nothing errors, and it is only visible if you look at that corner of the
   header — which is why it survived until a template switched its day/night
   toggle on and both palettes were walked (2026-09-03).

   Same rule as the search form below: this is **not a design**, it is a
   baseline so that no template starts from a broken control. Colours come from
   `currentColor` and `transparent`, so it takes on whatever band it is dropped
   into; a template that wants a specific look styles it through the node's own
   class (`.af-<node id> .aum-theme-toggle`).
   ========================================================================== */

.aum-theme-toggle:not(.aum-fa-btn) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2em;
    height: 2em;
    padding: 0;
    appearance: none;
    background: transparent;
    border: 0;
    border-radius: 999px;
    color: inherit;
    cursor: pointer;
    transition: opacity .2s ease;
}

.aum-theme-toggle:not(.aum-fa-btn):hover { opacity: .7; }

.aum-theme-toggle:not(.aum-fa-btn) .aum-tt-icon {
    width: 1.15em;
    height: 1.15em;
    color: currentColor;
}

.aum-search-form {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    color: inherit;
    font: inherit;
}

/* The type dropdown, when the site has more than one searchable content type. */
.aum-search-form .aum-search-type {
    flex: 0 0 auto;
    max-width: 40%;
    height: 42px;
    padding: 0 10px;
    border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, currentColor 8%, transparent);
    color: inherit;
    font: inherit;
    line-height: 1;
    cursor: pointer;
}

.aum-search-form .aum-search-type:focus {
    outline: none;
    border-color: currentColor;
}

/*
 * A native <select> paints its own list with the OS palette, and on a dark section the options would
 * otherwise be dark-on-dark in some browsers. `color-scheme` is the one property that tells the browser
 * which set to use, and it costs nothing anywhere else.
 */
.aum-search-form .aum-search-type option {
    color-scheme: light dark;
    color: CanvasText;
    background: Canvas;
}

.aum-search-form .aum-search-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 42px;
    padding: 0 14px;
    border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
    border-radius: 8px;
    /*
     * A faint wash of the inherited colour rather than `transparent`: a fully transparent field
     * disappears wherever the text colour sits close to the background, and "is there even an input
     * here" is the one thing a search box must never leave in doubt. 8% reads as a field on white and
     * on near-black alike, without committing to a palette.
     */
    background: color-mix(in srgb, currentColor 8%, transparent);
    color: inherit;
    font: inherit;
    line-height: 1;
    outline: none;
    transition: border-color .2s;
}

.aum-search-form .aum-search-input::placeholder {
    color: currentColor;
    opacity: .55;
}

.aum-search-form .aum-search-input:focus {
    border-color: currentColor;
}

/* Both buttons: square, tappable, and carrying no colour of their own. */
.aum-search-form .clear-search-btn,
.aum-search-form .aum-search-submit {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font: inherit;
    line-height: 1;
    cursor: pointer;
    opacity: .7;
    transition: opacity .2s;
}

.aum-search-form .clear-search-btn:hover,
.aum-search-form .aum-search-submit:hover,
.aum-search-form .clear-search-btn:focus-visible,
.aum-search-form .aum-search-submit:focus-visible {
    opacity: 1;
}

.aum-search-form .clear-search-btn { font-size: 20px; }

/*
 * Hidden until there is something to clear — `aum-search.js` switches it to
 * inline-flex on input. Without the script it stays hidden, which is right: a
 * clear button that clears nothing is worse than no button, and that is exactly
 * what shipped (the script only ever bound to the header form's class, so on a
 * taken-over page the × was permanently visible and permanently dead).
 */
.aum-search-form .clear-search-btn { display: none; }

/* The submit icon is an inline SVG with no intrinsic size of its own. */
.aum-search-form .aum-search-submit svg {
    width: 20px;
    height: 20px;
    display: block;
    fill: currentColor;
}

/* ==========================================================================
   #REMOVED — the old header, footer, mobile menu and post/video widgets
   --------------------------------------------------------------------------
   66 rules (~8.5KB) deleted 2026-09-01. They styled 67 `aum-*` classes that
   nothing produces any more: the Elementor header/footer and their widgets
   were removed on 2026-07-20 and the CSS stayed behind.

   How "nothing produces them" was established, because a plain grep is not
   enough on its own:
     1. no theme PHP or JS contains the class as a literal;
     2. no string constant in the source is a prefix of it — that is how
        `aum-icon-*` is built (`'aum-icon ' . $name`), and those four survived
        this sweep because of it;
     3. the class appears in the DOM of none of 19 sampled pages, **four of
        which the editor does not take over** (author, date, category and
        custom-taxonomy archives), so the theme's own templates really did run;
     4. no Aumframe component, scene or baked CSS references them either.

   A rule counted as dead only when *every* comma-separated selector in it had
   an orphan somewhere in its descendant chain — one live selector kept the
   whole rule (`.aum-theme-header-menu a, ..., .aum-footer *` is still here).
   ========================================================================== */

/* ==========================================================================
   WordPress 核心会发、而主题必须负责画的那几个类
   ==========================================================================

   ⚠️ 这一段在 2026-09-30 之前**整个不存在**（3020 行里 `.alignleft` 出现 0 次）。
   核心的编辑器把图片设成左对齐时，写进 post_content 的是 `class="alignleft"` ——
   **让它真的浮左是主题的责任**，没有这段样式，那个 class 进了 HTML 什么都不做。

   📌 对我们自己的 24 份模板影响是 **0**：页面由 aumframe 烘焙，不走核心区块
   （数过：0/24 用到对齐类，orgcheck 107 篇已发布内容里 0 篇用到）。
   补它的真实理由是 **wordpress.org 的审核员拿 WordPress 自己的 theme unit test 内容来测**，
   那份数据故意塞满了对齐图片、图片说明、置顶文章、作者自评。买家写一篇普通博客也会走到。

   ⚠️ 用 `--container-width` / `--primary` 这类主题变量，别写死数值 ——
   主题设置里改了颜色和宽度，这里要跟着变。
   ========================================================================== */

.alignleft {
    float: left;
    margin: 0.4em 1.6em 1em 0;
}

.alignright {
    float: right;
    margin: 0.4em 0 1em 1.6em;
}

.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* 图片说明：核心的 [caption] 和图片区块都会发这两个 */
.wp-caption {
    max-width: 100%;
    margin-bottom: 1.2em;
}

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

.wp-caption-text {
    margin: 0.5em 0 0;
    font-size: 0.86em;
    line-height: 1.5;
    opacity: 0.75;
    text-align: center;
}

/*
 * 置顶文章。⚠️ 核心把 `.sticky` 加在文章的 <article> 上，**它必须有可见的区别** ——
 * 一个"置顶"了却看不出来的列表，等于这个功能不存在。这里用主题色的左边框，
 * 不用背景色：背景色在昼夜两套配色下都要再调一次。
 */
.sticky {
    border-left: 3px solid var(--primary);
    padding-left: 1.1em;
}

/* 文章作者自己发的评论 */
.bypostauthor > .comment-body {
    border-left: 2px solid var(--primary);
    padding-left: 0.9em;
}

/* 图片说明区块的 <figcaption>（html5 支持打开后核心发的是这个） */
.wp-block-image figcaption,
figure.wp-caption > figcaption {
    margin: 0.5em 0 0;
    font-size: 0.86em;
    opacity: 0.75;
}

/**
 * Fallback site header and footer (no Aumframe shell)
 * ---------------------------------------------------
 * Rendered by the `else` branch of header.php / footer.php — that is, on a site running **only this theme**.
 * The moment a shell exists the other branch runs and not one of these rules has anything to match.
 *
 * Measured 2026-10-06, before this block existed: theme-only output had no `<header>` element at all and a
 * `<footer>` nine bytes long. A configured logo and an assigned `primary` menu were both read by nothing.
 *
 * Three things to know before editing:
 *
 * 1. **`data-theme` is set on `<html>` by `theme-mode.js`, client-side only** — the server never preloads it
 *    (checked: no `language_attributes` filter adds it). So the no-attribute state must be the light state,
 *    which is why `:root` in functions.php carries the light values and the dark logo starts hidden.
 * 2. **Tokens come from functions.php**, not from this file: `--bg`, `--text-on-bg`, `--border`, `--primary`,
 *    `--container-width`. They are redefined under `[data-theme="dark"]`, so day/night needs no rules here
 *    beyond the logo swap, which CSS cannot do to an `src`.
 * 3. **The footer's colours and top rule are already handled above** by
 *    `.aum-footer:not(.aum-footer--shell) *` and `.aum-footer::before`. Do not restate them here — the
 *    `:not()` on that selector is load-bearing (see the comment on it).
 *
 * `.aum-theme-header-menu` / `.aum-theme-menu` further up this file are **not** used by this component. They
 * have no producer anywhere in the theme and never ran; adopting them would have meant inheriting untested
 * rules to save one declaration.
 */

.aum-fallback-head {
    background: var(--bg);
    color: var(--text-on-bg);
    border-bottom: 1px solid var(--border);
}

.aum-fallback-head__inner {
    max-width: var(--container-width, 1200px);
    margin: 0 auto;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.aum-fallback-head__brand {
    display: inline-flex;
    align-items: center;
    color: inherit;
    text-decoration: none;
}

.aum-fallback-head__logo {
    display: block;
    width: auto;
    height: 40px;
    max-width: 260px;
    object-fit: contain;
}

/* The dark logo is optional, so the light one is the default and stays visible when no dark one is set. */
.aum-fallback-head__logo--dark {
    display: none;
}

[data-theme="dark"] .aum-fallback-head__logo--light {
    display: none;
}

[data-theme="dark"] .aum-fallback-head__logo--dark {
    display: block;
}

.aum-fallback-head__name {
    font-family: var(--af-font-display, inherit);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.2;
}

.aum-fallback-head__nav {
    flex: 1 1 auto;
    display: flex;
    justify-content: flex-end;
}

.aum-fallback-head__menu {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.aum-fallback-head__menu li {
    margin: 0;
}

.aum-fallback-head__menu a {
    display: inline-block;
    padding: 4px 0;
    color: inherit;
    text-decoration: none;
    border-bottom: 2px solid transparent;
}

.aum-fallback-head__menu a:hover,
.aum-fallback-head__menu a:focus-visible {
    border-bottom-color: var(--primary);
}

.aum-fallback-head__menu .current-menu-item > a,
.aum-fallback-head__menu .current_page_item > a,
.aum-fallback-head__menu .current-menu-ancestor > a {
    border-bottom-color: var(--primary);
}

@media (max-width: 575.98px) {

    .aum-fallback-head__inner {
        gap: 12px;
    }

    .aum-fallback-head__nav {
        flex-basis: 100%;
        justify-content: flex-start;
    }

    .aum-fallback-head__logo {
        height: 32px;
    }
}

/* Footer: spacing only. Colour and the top rule come from the two rules named in the note above. */
.aum-footer__fallback {
    max-width: var(--container-width, 1200px);
    margin: 0 auto;
    padding: 26px 20px;
    text-align: center;
}

.aum-footer__copy {
    margin: 0;
    font-size: 0.9rem;
}

/**
 * Theme-native post lists (index.php and search.php)
 * --------------------------------------------------
 * These two templates emit correct, semantic markup — title, date, excerpt, pagination — and until
 * 2026-10-06 almost none of it had a rule anywhere. Measured on the blog index: **0px between adjacent
 * articles**, and margin, padding and border all 0 on the item, the heading, the date and the excerpt.
 * Titles sat flush against dates and ten posts ran together as one block of text.
 *
 * The cause is two steps back, not here. The reset near the top of this file zeroes the margin on
 * `h1–h6, p, ul, ol, dl, figure, blockquote` — correct for an Aumframe page, where the shell positions
 * every element itself, and fatal for a template that relies on normal flow. Everything visual had been
 * delegated to the plugin, so the theme's own list templates were never given the rhythm back.
 *
 * ⚠️ Checked and **not** a defect, so that nobody "fixes" it later: the empty excerpts on the probe site
 * are the seed data — 9 of those 10 posts have no post_content and no post_excerpt at all. And article
 * body copy was never affected: paragraphs inside a post measure 16px apart, because the block library's
 * own rules restore them. The reset only reaches markup that nothing else styles.
 *
 * The `aum-archive-*` classes with no rules are left alone deliberately: they are JS hooks for the AJAX
 * archive, and archive.php carries its own inline `<style>` for what it paints.
 */

/*
 * ⚠️ A block of flat-row rules for `.aum-post-list .aum-post-item` stood here for about an hour on
 * 2026-10-06 and is gone again. It gave the blog index spacing and separators — which fixed the symptom
 * and missed the point: the theme already owned a card design (`archive-cards.css`), a cover-image
 * resolver and a stats renderer, and index.php was simply not using any of them. A fourth, hand-written
 * list style would have been a fourth thing to keep in step with the other three.
 * index.php now renders the same `.posts-grid` / `.post-card` markup as the archive and author pages.
 */

/* Shared by index.php and search.php — bare in both. */
.aum-post-title {
    font-size: 1.5rem;
    line-height: 1.3;
    margin-bottom: 8px;
}

.aum-post-title a {
    color: inherit;
    text-decoration: none;
}

.aum-post-title a:hover,
.aum-post-title a:focus-visible {
    color: var(--primary);
}

.aum-post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin-bottom: 10px;
    font-size: 0.875rem;
    color: var(--text-muted, #888);
}

.aum-post-excerpt {
    line-height: 1.7;
}

.aum-post-excerpt p {
    margin-bottom: 1em;
}

.aum-post-excerpt p:last-child {
    margin-bottom: 0;
}

/* `the_posts_pagination()` styles its own `.page-numbers`; the wrapper only ever needed room. */
.aum-pagination {
    margin: 40px 0 10px;
}

.aum-tags-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.aum-main.aum-container {
    padding-top: 40px;
    padding-bottom: 60px;
}