/*
 * Local fonts are NOT declared here. js/core/theme.js registers every font in
 * /fonts with the FontFace API when it is chosen in the theme builder, and
 * TarjavaTheme\Fonts preloads them. Drop a .woff2/.woff/.ttf/.otf file into
 * /fonts and it appears in the Font Family dropdown automatically.
 */

/* ==========================================================================
   Reset & Base Styles
   ========================================================================== */

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

html {
    font-size: var(--font-size-base);
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-height, 80px) + var(--store-notice-height, 0px) + var(--spacing-sm, 10px));
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: var(--line-height);
    color: var(--text-color);
    background: linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%);
    background-attachment: fixed;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    letter-spacing: var(--letter-spacing, normal);
}

/* ==========================================================================
   Typography
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 600;
    line-height: 1.3;
    margin-top: 0;
    margin-bottom: var(--spacing-md);
    color: var(--text-color-dark);
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    color: var(--text-color-light);
    -webkit-text-fill-color: currentColor;
}

h1 {
    font-size: 2.5rem;
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.75rem;
}

h4 {
    font-size: 1.5rem;
}

h5 {
    font-size: 1.25rem;
}

h6 {
    font-size: 1rem;
}

p {
    margin-top: 0;
    margin-bottom: var(--spacing-md);
}

/* Links: colour only, never an underline (see "Interaction states").
   --ctx-link / --ctx-link-hover are set by the surface a link sits on; on a
   page or card surface they are unset and the preset's link pair applies.
   Both pairs are computed per preset to pass AA (4.5:1) on their surface,
   light and dark. */
a {
    color: var(--ctx-link, var(--link-color, var(--focus-color)));
    text-decoration: none;
    transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

a:hover,
a:focus-visible {
    color: var(--ctx-link-hover, var(--link-hover-color, var(--link-color)));
    text-decoration: none;
}

/* ==========================================================================
   Layout
   ========================================================================== */

.site {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.site-content {
    flex: 1;
    padding: var(--spacing-xl) var(--spacing-lg);
}

.content-area {
    max-width: var(--container-max-width);
    margin: 0 auto;
}

/* Content with Sidebar */
.has-sidebar .content-area {
    display: grid;
    grid-template-columns: 1fr var(--sidebar-width);
    gap: var(--spacing-xl);
}

@media (max-width: 992px) {
    .has-sidebar .content-area {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header .container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: var(--spacing-md) var(--spacing-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.site-branding {
    flex-shrink: 0;
}

.site-title {
    margin: 0;
}

.site-title a {
    color: var(--text-color-dark);
    text-decoration: none;
    background: linear-gradient(135deg, var(--bg-gradient-start), var(--bg-gradient-end));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .site-title a {
    -webkit-text-fill-color: currentColor;
    color: var(--text-color-light);
}

/* Gradient text has no single colour to shift: hover fills it with the
   link hover colour instead. */
.site-title a:hover,
.site-title a:focus-visible {
    -webkit-text-fill-color: var(--link-hover-color, var(--link-color));
    color: var(--link-hover-color, var(--link-color));
}

.site-description {
    margin: var(--spacing-xs) 0 0;
    font-size: var(--font-size-small);
    color: var(--text-muted, #666);
}

/* ==========================================================================
   Hamburger Menu - Always Visible
   ========================================================================== */

.main-navigation {
    position: relative;
}

/* Hamburger Button - Always Visible */
.menu-toggle {
    box-shadow: 0 2px 10px var(--shadow-color);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.menu-toggle:hover {
    transform: scale(1.05);
}

/* Hamburger Icon Box */
.hamburger-box {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 26px;
    height: 20px;
}

/* Hamburger Lines */
.hamburger-inner {
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 3px;
    background-color: var(--text-color-light);
    border-radius: 3px;
    transition: all 0.3s ease;
}

.hamburger-inner::before,
.hamburger-inner::after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    width: 26px;
    height: 3px;
    background-color: var(--text-color-light);
    border-radius: 3px;
    transition: all 0.3s ease;
}

.hamburger-inner::before {
    top: -8px;
}

.hamburger-inner::after {
    bottom: -8px;
}

/* Hamburger to X Animation when menu is open */
.menu-toggle[aria-expanded="true"] .hamburger-inner {
    background-color: transparent;
}

.menu-toggle[aria-expanded="true"] .hamburger-inner::before {
    top: 0;
    transform: rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .hamburger-inner::after {
    bottom: 0;
    transform: rotate(-45deg);
}

/* ==========================================================================
   Dropdown Menu Container
   ========================================================================== */

.menu-container {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 280px;
    max-width: 90vw;
    background: var(--card-bg);
    border-radius: var(--border-radius-lg);
    box-shadow: 0 10px 40px var(--shadow-color);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1000;
    overflow: hidden;
}

/* Show menu when toggled */
.main-navigation.toggled .menu-container {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Menu List */
.menu-container ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu-container>ul {
    padding: var(--spacing-sm) 0;
}

.menu-container li {
    margin: 0;
}

.menu-container a {
    display: block;
    padding: var(--spacing-md) var(--spacing-lg);
    color: var(--text-color-dark);
    text-decoration: none;
    font-weight: 500;
    border-left: 3px solid transparent;
    transition: all 0.3s ease;
}

.menu-container a:hover,
.menu-container a:focus {
    background: linear-gradient(90deg, rgba(102, 126, 234, 0.1), transparent);
    border-left-color: var(--bg-gradient-start);
    color: var(--link-hover-color, var(--link-color));
    text-decoration: none;
}

.menu-container .current-menu-item>a,
.menu-container .current_page_item>a {
    background: linear-gradient(90deg, rgba(102, 126, 234, 0.15), transparent);
    border-left-color: var(--bg-gradient-start);
    color: var(--bg-gradient-start);
}

/* Sub-menus */
.menu-container ul ul {
    background: var(--content-bg);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    display: none;
}

.menu-container li:hover>ul,
.menu-container li.focus>ul {
    display: block;
}

.menu-container ul ul a {
    padding-left: calc(var(--spacing-lg) + var(--spacing-md));
    font-size: var(--font-size-small);
}

.menu-container ul ul ul a {
    padding-left: calc(var(--spacing-lg) + var(--spacing-xl));
}

/* Menu item with children indicator */
.menu-container .menu-item-has-children>a,
.menu-container .page_item_has_children>a {
    position: relative;
}

.menu-container .menu-item-has-children>a::after,
.menu-container .page_item_has_children>a::after {
    content: '';
    position: absolute;
    right: var(--spacing-lg);
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--text-color);
    border-bottom: 2px solid var(--text-color);
    transform: translateY(-50%) rotate(45deg);
    transition: transform 0.3s ease;
}

.menu-container .menu-item-has-children:hover>a::after,
.menu-container .page_item_has_children:hover>a::after {
    transform: translateY(-25%) rotate(-135deg);
}

/* ==========================================================================
   Cards & Content Containers
   ========================================================================== */

.card,
.widget,
article.post,
article.page,
.comment-body {
    background: var(--card-bg);
    border-radius: var(--border-radius-lg);
    box-shadow: 0 4px 20px var(--shadow-color);
    overflow: hidden;
    margin-bottom: var(--spacing-xl);
}

article.page {
    border-radius: 0;
}

.card-header,
.widget-title,
.entry-header {
    background: linear-gradient(135deg, var(--card-header-gradient-start), var(--card-header-gradient-end));
    color: var(--on-primary, var(--text-color-light));
    padding: var(--spacing-lg);
}

.card-header h1,
.card-header h2,
.card-header h3,
.widget-title,
.entry-header .entry-title {
    color: var(--on-primary, var(--text-color-light));
    margin: 0;
}

/* Hover/focus: the brand-surface look ("Interaction states" 5c). */
.entry-header .entry-title a {
    color: var(--on-primary, var(--text-color-light));
}

.card-body,
.entry-summary,
.widget>*:not(.widget-title) {
    padding: var(--spacing-lg);
}

.entry-meta {
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: var(--font-size-small);
    /* .entry-header has the brand gradient behind it */
    color: var(--on-primary, var(--text-color-light));
}

.entry-footer {
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--content-bg);
    border-top: 1px solid var(--border-color);
    font-size: var(--font-size-small);
    color: var(--text-muted, var(--text-color));
}

/* ==========================================================================
   Buttons
   ========================================================================== */

button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button,
.btn {
    display: inline-block;
    padding: var(--spacing-sm) var(--spacing-lg);
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    border: none;
    border-radius: var(--border-radius-md);
    background: linear-gradient(135deg, var(--bg-gradient-start), var(--bg-gradient-end));
    color: var(--on-primary, var(--text-color-light)); /* readable on the gradient in every preset (white failed on Mint and Peach) */
    transition: all 0.3s ease;
}

/* Filled buttons (variant b, "Interaction states" 5): the text keeps its
   guaranteed on-primary pair — the link colours are for page surfaces and
   clashed with the gradient (1.4:1). The wash is painted as an inset shadow,
   so it sits on whatever background a component gives the button, and it
   only ever adds contrast to on-primary text. Buttons with their own surface
   (outline, icon, transparent) set their own hover and box-shadow. */
button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
.button:hover,
.btn:hover {
    transform: var(--lift);
    text-decoration: none;
    box-shadow: inset 0 0 0 100vmax var(--on-primary-wash);
}

button:active,
input[type="button"]:active,
input[type="reset"]:active,
input[type="submit"]:active,
.button:active,
.btn:active {
    transform: translateY(0);
}

button:focus,
input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus,
.button:focus,
.btn:focus {
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
}

/* Secondary Button */
.btn-secondary {
    background: transparent;
    border: 2px solid var(--focus-color);
    color: var(--link-color, var(--focus-color));
}

.btn-secondary:hover {
    background: var(--hover-surface);
    color: var(--hover-text);
}

/* ==========================================================================
   Forms
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea,
select {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: var(--line-height);
    color: var(--input-text);
    background-color: var(--input-bg);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius-md);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--focus-color);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}

textarea {
    resize: vertical;
    min-height: 150px;
}

label {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-weight: 500;
}

/* ==========================================================================
   Search Form
   ========================================================================== */

.search-form {
    display: flex;
    gap: var(--spacing-sm);
}

.search-form label {
    flex: 1;
    margin: 0;
}

.search-form .search-field {
    width: 100%;
}

.search-form .search-submit {
    flex-shrink: 0;
}

/* ==========================================================================
   Widgets / Sidebar
   ========================================================================== */

.widget-area {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

.widget {
    margin-bottom: 0;
}

.widget-title {
    font-size: var(--font-size-large);
    padding: var(--spacing-md) var(--spacing-lg);
    margin: 0;
}

.widget ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.widget li {
    padding: var(--spacing-sm) var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
}

.widget li:last-child {
    border-bottom: none;
}

.widget a {
    color: var(--text-color);
}

.widget a:hover {
    color: var(--link-color, var(--focus-color));
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
    background: var(--header-bg);
    padding: var(--spacing-xl) var(--spacing-lg);
    margin-top: auto;
}

.site-footer .container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    text-align: center;
}

.site-info {
    font-size: var(--font-size-small);
    color: var(--text-muted, #666);
}

[data-theme="dark"] .site-info {
    color: var(--text-color-light);
}

/* The link colour and the muted footer text are nearly the same brightness
   (about 1.1:1), so colour alone does not mark a link (WCAG 1.4.1). The
   theme uses no underlines, so the weight is the second cue. */
.site-info a {
    color: var(--link-color, var(--focus-color));
    font-weight: 600;
}

.site-info a:hover,
.site-info a:focus-visible {
    color: var(--link-hover-color, var(--link-color));
}

/* ==========================================================================
   Posts & Archives
   ========================================================================== */

.sticky .entry-header {
    position: relative;
}

.sticky .entry-header::before {
    content: '★ Featured';
    position: absolute;
    top: var(--spacing-sm);
    right: var(--spacing-md);
    background: rgba(255, 255, 255, 0.2);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-small);
}

.post-thumbnail {
    margin: 0;
}

.post-thumbnail img {
    width: 100%;
    height: auto;
    display: block;
}

.page-header {
    background: var(--card-bg);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
    box-shadow: 0 4px 20px var(--shadow-color);
}

.page-title {
    margin: 0;
    background: linear-gradient(135deg, var(--bg-gradient-start), var(--bg-gradient-end));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.archive-description {
    margin-top: var(--spacing-md);
    color: var(--text-muted, #666);
}

/* ==========================================================================
   Pagination
   ========================================================================== */

.navigation,
.posts-navigation,
.post-navigation,
.pagination {
    margin: var(--spacing-xl) 0;
}

.nav-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.nav-links a,
.nav-links .current {
    display: inline-block;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--card-bg);
    border-radius: var(--border-radius-md);
    box-shadow: 0 2px 10px var(--shadow-color);
    color: var(--text-color);
    text-decoration: none;
    transition: all 0.3s ease;
}

/* Button look: the gradient takes its guaranteed text colour (the link
   hover colour on the gradient was 1.4:1), plus the lift. */
.nav-links a:hover,
.nav-links a:focus-visible {
    background: linear-gradient(135deg, var(--bg-gradient-start), var(--bg-gradient-end));
    color: var(--on-primary, var(--text-color-light));
    text-decoration: none;
    transform: var(--lift);
}

.nav-links .current {
    background: linear-gradient(135deg, var(--bg-gradient-start), var(--bg-gradient-end));
    color: var(--text-color-light);
}

.post-navigation .nav-links {
    justify-content: space-between;
}

.post-navigation .nav-previous,
.post-navigation .nav-next {
    flex: 1;
    max-width: 45%;
}

.post-navigation .nav-previous a,
.post-navigation .nav-next a {
    display: block;
    padding: var(--spacing-lg);
}

/* ==========================================================================
   Comments
   ========================================================================== */

.comments-area {
    background: var(--card-bg);
    border-radius: var(--border-radius-lg);
    box-shadow: 0 4px 20px var(--shadow-color);
    overflow: hidden;
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
}

.comments-title {
    background: linear-gradient(135deg, var(--card-header-gradient-start), var(--card-header-gradient-end));
    color: var(--on-primary, var(--text-color-light));
    padding: var(--spacing-lg);
    margin: 0;
}

.comment-list {
    list-style: none;
    margin: 0;
    padding: var(--spacing-lg);
}

.comment-list .children {
    list-style: none;
    margin-left: var(--spacing-xl);
    padding: 0;
}

.comment-body {
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    box-shadow: 0 2px 10px var(--shadow-color);
}

.comment-meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.comment-author img {
    border-radius: 50%;
}

.comment-author .fn {
    font-weight: 600;
}

.comment-metadata {
    font-size: var(--font-size-small);
    color: var(--text-muted, #666);
}

.comment-content {
    margin-bottom: var(--spacing-md);
}

.reply {
    font-size: var(--font-size-small);
}

.comment-respond {
    padding: var(--spacing-lg);
    border-top: 1px solid var(--border-color);
}

.comment-reply-title {
    margin-top: 0;
}

.comment-form label {
    font-weight: 500;
}

.comment-form-comment,
.comment-form-author,
.comment-form-email,
.comment-form-url {
    margin-bottom: var(--spacing-md);
}

/* ==========================================================================
   Images & Media
   ========================================================================== */

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

figure {
    margin: 0 0 var(--spacing-lg);
}

figcaption {
    font-size: var(--font-size-small);
    color: var(--text-muted, #666);
    text-align: center;
    padding: var(--spacing-sm);
}

.wp-block-image {
    margin-bottom: var(--spacing-lg);
}

.alignleft {
    float: left;
    margin-right: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
}

.alignright {
    float: right;
    margin-left: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
}

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

.wp-caption {
    max-width: 100%;
}

.wp-caption-text {
    font-size: var(--font-size-small);
    color: var(--text-muted, #666);
}

/* Gallery */
.gallery {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--spacing-md);
    margin-bottom: 1.5em;
    grid-gap: 1.5em;
}

.gallery-item {
    margin: 0;
}

.gallery-item img {
    border-radius: var(--border-radius-sm);
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

.screen-reader-text {
    clip-path: inset(50%);
    position: absolute !important;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background-color: var(--card-bg);
    border-radius: var(--border-radius-sm);
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    clip-path: none;
    color: var(--text-color);
    display: block;
    font-size: var(--font-size-base);
    font-weight: 700;
    height: auto;
    left: var(--spacing-xs);
    line-height: normal;
    padding: var(--spacing-md) var(--spacing-lg);
    text-decoration: none;
    top: var(--spacing-xs);
    width: auto;
    z-index: 100000;
}

/* Skip link (one definition; header.css had a second, conflicting one).
   The page's "Skip to content" floats in the corner when focused; the
   guaranteed pair --filled-bg / --filled-text keeps it readable in every
   preset. In-content skip links are handled below. */
.skip-link {
    position: fixed;
    top: -100%;
    inset-inline-start: var(--spacing-md);
    z-index: 10000;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--filled-bg);
    color: var(--filled-text);
    border-radius: var(--border-radius-sm);
    box-shadow: 0 2px 10px var(--shadow-color);
    text-decoration: none;
    transition: top 0.3s ease;
}

.skip-link:focus {
    top: var(--spacing-md);
}

/* The main one also carries WordPress' .screen-reader-text, whose :focus
   rule would put it in the flow as a block: keep it floating. */
.skip-link.skip-link--main:focus {
    position: fixed;
    top: var(--spacing-md);
    inset-inline-start: var(--spacing-md);
    display: inline-block;
    width: auto;
    height: auto;
    margin: 0;
    clip: auto;
    clip-path: none;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--filled-bg);
    color: var(--filled-text);
    font-size: var(--font-size-base);
    text-decoration: none;
    z-index: 100000;
}

/* Focus styles */
:focus {
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
}

:focus:not(:focus-visible) {
    outline: none;
}

:focus-visible {
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

.container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* ==========================================================================
   404 Page
   ========================================================================== */

.error-404 {
    text-align: center;
}

.error-404 .page-header {
    text-align: center;
}

.error-404 .page-content {
    padding: var(--spacing-xl);
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */

@media (max-width: 768px) {
    

    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.75rem;
    }

    h3 {
        font-size: 1.5rem;
    }

    h4 {
        font-size: 1.25rem;
    }

    .site-content {
        padding: var(--spacing-md);
    }

    .entry-header,
    .card-header,
    .widget-title {
        padding: var(--spacing-md);
    }

    .entry-summary,
    .card-body {
        padding: var(--spacing-md);
    }

    .post-navigation .nav-links {
        flex-direction: column;
    }

    .post-navigation .nav-previous,
    .post-navigation .nav-next {
        max-width: 100%;
    }

    .alignleft,
    .alignright {
        float: none;
        margin: 0 auto var(--spacing-md);
        display: block;
    }

    .menu-container {
        width: 100%;
        max-width: none;
        left: 0;
        right: 0;
        border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
    }
}

@media (max-width: 480px) {
    

    .search-form {
        flex-direction: column;
    }

    .search-form .search-submit {
        width: 100%;
    }

    .site-header .container {
        padding: var(--spacing-sm) var(--spacing-md);
    }
}

/* ==========================================================================
   Close menu when clicking outside
   ========================================================================== */

/* Overlay for closing menu when clicking outside */
.main-navigation.toggled::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    body {
        background: white;
        color: black;
    }

    .site-header,
    .site-footer,
    .navigation,
    .comment-respond {
        display: none;
    }

    a {
        color: black;
        text-decoration: underline;
    }

    .card,
    .widget,
    article {
        box-shadow: none;
        border: 1px solid var(--border-color);
    }
}

@media (min-width: 768px) {
    .hidden-desktop {
        display: none;
    }
}

/* One rule for every template (blog, archives, shop, product archives,
   search): the offset lives in css/core/tokens.css as --site-main-offset. The
   extra selectors outweigh template-specific margin shorthands. */
.site-main,
body .site-main.archive-main,
body.woocommerce-shop .site-main,
body.woocommerce .site-main {
    /* 100px, or the real header height if the header is taller (a big logo,
       the top bar): content never starts underneath the fixed header. */
    margin-top: max(var(--site-main-offset, 100px), var(--header-height, 0px));
}

/* Below 992px the header is shorter (Branding::header_space_css()). */
@media (max-width: 992px) {
    .site-main,
    body .site-main.archive-main,
    body.woocommerce-shop .site-main,
    body.woocommerce .site-main {
        margin-top: max(var(--site-main-offset-phone, 100px), var(--header-height, 0px));
    }
}

.archive-container {
    max-width: var(--container-max-width, 1200px);
    margin-inline: auto;
}

#showNotification {
    position: fixed;
    bottom: 5%;
    right: 50%;
    transform: translateX(50%);
    min-width: 100px;
    /* The page's own text colour on its own surface, inverted: presets
       guarantee that pair (AA), unlike --text-color-dark/-light, which a
       preset can set independently (the text vanished on some themes). */
    background: var(--text-color);
    color: var(--content-bg);
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-base);
    font-weight: 500;
    box-shadow: 0 4px 20px var(--shadow-color);
    transition: all 0.3s ease;
    z-index: 9999;
    max-width: calc(100vw - var(--spacing-lg) * 2);
    text-align: center;
}

#showNotification.show {
    display: flex;
}

#showNotification.hide {
    display: none;

}

.toast {
    position: fixed;
    bottom: var(--spacing-lg);
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: var(--text-color-dark);
    color: var(--text-color-light);
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-base);
    font-weight: 500;
    box-shadow: 0 4px 20px var(--shadow-color);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 9999;
    max-width: calc(100vw - var(--spacing-lg) * 2);
    text-align: center;
}

.toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    visibility: visible;
}

.toast.success {
    background: var(--success);
}

.toast.error {
    background: var(--danger);
}

.toast.warning {
    background: var(--warning);
}

.color-option:focus-visible,
.custom-theme-info:focus-visible,
.theme-mode-option:focus-visible,
.theme-btn:focus-visible {
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
}

#showNotification.is-error {
    /* Text on the danger tint is AA in every preset; white on --danger
       is not (dark presets use a light red). */
    background: var(--danger-bg);
    color: var(--text-color);
    border-inline-start: 4px solid var(--danger);
}

/* ------------------------------------------------------------------
 * Appearance picker (sun/moon button)
 * ------------------------------------------------------------------ */
.modal.modal--compact {
    max-width: 360px;
}

.theme-mode-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-sm);
}

.theme-mode-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: var(--spacing-md) var(--spacing-sm);
    font: inherit;
    font-size: var(--font-size-small);
    color: var(--text-color);
    background: var(--content-bg);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius-md);
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.theme-mode-option svg {
    width: 24px;
    height: 24px;
}

.theme-mode-option:hover,
.theme-mode-option[aria-checked="true"] {
    border-color: var(--focus-color);
}

.theme-mode-option[aria-checked="true"] {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus-color) 25%, transparent);
}

/* ------------------------------------------------------------------
 * Reduced motion
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==========================================================================
   WordPress core classes (moved from style.css in 0.0.8 — style.css is now
   only the theme header; it was never enqueued).
   ========================================================================== */
embed,
iframe,
object {
	max-width: 100%;
}

.site-main .comment-navigation,
.site-main
.posts-navigation,
.site-main
.post-navigation {
	margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	text-align: end;
	flex: 1 0 50%;
}

.bypostauthor {
	display: block;
}

.custom-logo-link {
	display: inline-flex;
	align-items: center;
}

/* The logo's height comes from Theme Options → Appearance → Logo height
   (--logo-height, printed in <head>): an uploaded 300px image no longer makes
   a 338px header, and the space reserved under the header matches it. */
.custom-logo-link img,
.custom-logo {
	width: auto;
	height: auto;
	max-height: var(--logo-height, 56px);
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

.gallery {
	display: grid;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	width: 100%;
}

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

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

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

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

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

.gallery-columns-7 {
	grid-template-columns: repeat(7, 1fr);
}

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

.gallery-columns-9 {
	grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
	display: block;
}

.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
	display: none;
}

/* ==========================================================================
   0.0.8 components
   ========================================================================== */

/* Readability settings from the theme builder */

/* "Reduce motion" switch in the appearance picker (mirrors the OS setting) */
html[data-reduce-motion="true"] *,
html[data-reduce-motion="true"] *::before,
html[data-reduce-motion="true"] *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

.theme-motion-toggle {
    margin: var(--spacing-md, 15px) 0 0;
    padding-top: var(--spacing-sm, 10px);
    border-top: 1px solid var(--border-color);
}

.theme-motion-toggle label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

/* Skip link target stays below the fixed header */
#primary,
[id] {
    scroll-margin-top: calc(var(--header-height, 80px) + 16px);
}

#primary:focus {
    outline: none;
}

/* Footer */
.site-footer {
    text-align: center;
}

.footer-widgets {
    display: grid;
    gap: var(--spacing-lg, 20px);
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    max-width: 1200px;
    margin: 0 auto var(--spacing-lg, 20px);
    padding: var(--spacing-lg, 20px);
    text-align: start;
}

.footer-widgets .widget-title {
    font-size: 1.1em;
    margin: 0 0 var(--spacing-sm, 10px);
}

.footer-navigation .footer-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-sm, 10px) var(--spacing-lg, 20px);
    list-style: none;
    margin: 0 0 var(--spacing-md, 15px);
    padding: 0;
}

.install-app {
    font: inherit;
    padding: 8px 16px;
    margin-bottom: var(--spacing-md, 15px);
    border: 0;
    border-radius: var(--border-radius-sm, 6px);
    background: var(--bg-gradient-start);
    color: var(--text-color-light);
    cursor: pointer;
}

/* Widgets */
.widget-recent-posts {
    list-style: none;
    margin: 0;
    padding: 0;
}

.widget-recent-posts__item {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
}

.widget-recent-posts__thumb img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: var(--border-radius-sm, 6px);
}

.widget-recent-posts__text {
    display: flex;
    flex-direction: column;
}

.widget-recent-posts__text time {
    font-size: 0.85em;
    opacity: 0.75;
}

/* Header layouts (Customizer → Theme Options → Appearance) */
body.header-static .site-header {
    position: absolute;
}

@media (min-width: 1025px) {
    body.header-layout-center .site-header .container {
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    body.header-layout-center .site-branding {
        text-align: center;
    }
}

/* Dark-mode logo */
.custom-logo-picture {
    display: inline-block;
    line-height: 0;
}

/* Header search with suggestions */
.menu-item-search {
    position: relative;
    margin-inline: var(--spacing-sm);
}

.header-search {
    display: flex;
    align-items: center;
    position: relative;
}

.header-search__input {
    font: inherit;
    width: 11em;
    padding: 6px 34px 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--input-bg);
    color: var(--input-text);
    padding-block: 0;
    box-sizing: border-box;
}

[dir="rtl"] .header-search__input {
    padding: 6px 10px 6px 34px;
}

.header-search__submit {
    position: absolute;
    inset-inline-end: 4px;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--text-color);
    cursor: pointer;
}

.header-search__results {
    position: absolute;
    top: calc(100% + 6px);
    /* Hangs from the input's start edge, so it mirrors correctly in RTL. */
    inset-inline-start: 0;
    inset-inline-end: auto;
    min-width: 100%;
    z-index: 1000;
    width: min(22rem, 90vw);
    max-height: 60vh;
    overflow-y: auto;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: var(--card-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md, 8px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.header-search__option a {
    gap: 8px;
    padding: 8px 10px;
    border-radius: var(--border-radius-sm, 6px);
    color: inherit;
    text-decoration: none;
    align-items: center;
}

.header-search__option[aria-selected="true"] a,
.header-search__option a:hover {
    background: var(--content-bg);
    outline: 2px solid var(--focus-color);
    outline-offset: -2px;
}

.header-search__type {
    font-size: 0.8em;
    opacity: 0.75;
    white-space: nowrap;
}

.header-search__empty {
    padding: 8px 10px;
    opacity: 0.8;
}

@media (max-width: 1024px) {
    .header-search,
    .header-search__input {
        width: 100%;
    }

    .header-search__results {
        position: static;
        width: 100%;
        box-shadow: none;
    }
}

/* Reading progress bar */
.reading-progress {
    position: fixed;
    top: 0;
    inset-inline: 0;
    height: 3px;
    z-index: 10001;
    pointer-events: none;
}

.reading-progress__bar {
    height: 100%;
    background: var(--focus-color);
    transform: scaleX(0);
    transform-origin: left center;
}

[dir="rtl"] .reading-progress__bar {
    transform-origin: right center;
}

/* Glossary tooltips (content) */
.glossary-term {
    position: relative;
}

.glossary-term > a {
    text-decoration-style: dotted;
    text-underline-offset: 3px;
}

.glossary-tip {
    position: absolute;
    bottom: calc(100% + 8px);
    inset-inline-start: 0;
    z-index: 50;
    width: max-content;
    max-width: min(18rem, 80vw);
    padding: 8px 10px;
    border-radius: var(--border-radius-sm, 6px);
    background: var(--text-color);
    color: var(--content-bg);
    font-size: 0.85rem;
    line-height: 1.4;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.glossary-term:hover .glossary-tip,
.glossary-term.is-tapped .glossary-tip,
.glossary-term:focus-within .glossary-tip {
    visibility: visible;
    opacity: 1;
}

.glossary-term.is-dismissed .glossary-tip {
    visibility: hidden;
    opacity: 0;
}

/* Glossary pages */
/* Glossary topics (0.0.36): links above the letters. */
.glossary-topics ul {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 var(--spacing-md);
    padding: 0;
    list-style: none;
}

.glossary-topics a {
    display: inline-block;
    padding: 4px 12px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--card-bg);
    color: var(--text-color);
    font-size: var(--font-size-small);
    text-decoration: none;
}

.glossary-topics a:hover,
.glossary-topics a:focus-visible {
    background: var(--hover-surface);
    color: var(--hover-text);
    border-color: var(--focus-color);
}

.glossary-topics a[aria-current="page"] {
    background: var(--filled-bg);
    color: var(--filled-text);
    border-color: var(--filled-bg);
}

.glossary-topics__count {
    opacity: 0.8;
}

.glossary-index ul {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 0 0 var(--spacing-lg, 20px);
}

.glossary-index a {
    display: inline-grid;
    place-items: center;
    min-width: 2.2em;
    min-height: 2.2em;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm, 6px);
    text-decoration: none;
}

.glossary-list__group,
.glossary-entry {
    background: var(--content-bg);
    border-radius: var(--border-radius-md, 8px);
    padding: var(--spacing-lg, 20px);
    margin-bottom: var(--spacing-md, 15px);
}

.glossary-list dt {
    font-weight: 600;
    margin-top: var(--spacing-sm, 10px);
}

.glossary-list dd {
    margin: 2px 0 0;
    margin-inline-start: 0;
}

/* Author archive */
.archive-header__job {
    margin: 4px 0;
    font-weight: 600;
}

.archive-header__profiles {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 6px 0 0;
}

/* 0.0.8.1 ---------------------------------------------------------------- */

/* The header row got wider (search box): never shrink the theme button. */
.theme-btn {
    flex-shrink: 0;
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
    align-items: center;
}

.theme-btn svg {
    flex-shrink: 0;
}

/* Buttons that are not "primary" buttons keep their own text colour on hover. */
.theme-mode-option:hover,
.theme-mode-option:focus,
.modal-tab:hover,
.modal-tab:focus,
.delete-theme-btn:hover,
.delete-theme-btn:focus,
.header-search__submit:hover,
.header-search__submit:focus,
.code-copy:hover,
.code-copy:focus {
    transform: none;
    box-shadow: none;
}

.theme-mode-option:hover,
.theme-mode-option:focus,
.modal-tab:hover,
.modal-tab:focus {
    color: var(--text-color);
}

/* The search icon inside the box: the link look (colour only). */
.header-search__submit:hover,
.header-search__submit:focus-visible {
    color: var(--link-hover-color, var(--link-color));
}

/* Archive byline: second date is labelled ("Last updated …"). */
.updated-on {
    white-space: nowrap;
}

.updated-on::before {
    content: "·";
    margin-inline-end: 0.35em;
    opacity: 0.6;
}

/* Compact header search (global input styles make it taller than the menu). */
.header-search__input {
    height: 38px;
    min-height: 0;
    margin: 0;
    font-size: var(--font-size-small, 14px);
}

/* ==========================================================================
   0.0.12
   ========================================================================== */

/* Status colours on dark themes. */

/* Cards react to the space they are in, not to the viewport, so the post grid
   also works inside a narrow widget area or a two-column layout. */
.post-grid,
.footer-widgets__column,
.widget {
    container-type: inline-size;
}

@container (max-width: 420px) {
    .post-card__inner {
        grid-template-columns: 1fr;
    }

    .post-card__meta {
        flex-wrap: wrap;
        row-gap: 4px;
    }

    .post-card__separator {
        display: none;
    }
}

/* Logos and diagrams are usually dark-on-transparent: give images a light
   backing on dark themes so they stay visible. Photos are opaque, so nothing
   changes for them. Add class "no-matte" (or filter tarjava_theme_image_matte) to opt out. */
[data-theme="dark"] .entry-content img:not(.no-matte):not([src$=".svg"]),
[data-theme="dark"] .single-article__content img:not(.no-matte):not([src$=".svg"]),
[data-theme="dark"] .custom-logo-link img:not(.no-matte),
[data-theme="dark"] .woocommerce-product-gallery img:not(.no-matte) {
    background-color: #ffffff;
    border-radius: var(--border-radius-sm, 6px);
}

/* The brand's logo drawn inline (pasted SVG code, or an uploaded SVG file):
   it takes the theme's colours. A flex box centres it whatever its size —
   as an inline element it sat on the text baseline, high in the link. */
.inline-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    color: var(--text-color);
    text-decoration: none;
}

.inline-logo svg {
    display: block;
    width: auto;
    max-height: var(--logo-height, 56px);
    fill: currentColor;
}

/* Some people ask the OS for less transparency (frosted glass is hard to read). */
@media (prefers-reduced-transparency: reduce) {
    .site-header,
    .site-footer,
    .modal-overlay,
    .menu-overlay {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .site-header,
    .site-footer {
        background: var(--card-bg);
    }
}

/* Avatar placeholder (TarjavaTheme\Avatar): the span carries the size,
   the SVG fills 60% of it. */
.avatar--placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    overflow: hidden;
    border-radius: 50%;
    background: var(--content-bg);
    color: var(--text-muted, var(--text-color));
}

.avatar--placeholder svg {
    width: 60%;
    height: 60%;
}

/* ==========================================================================
   0.0.14: header actions (cart + appearance) and the mini cart drawer
   ========================================================================== */
.header-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin-inline-start: auto;
    /* After the menu on wide screens; the markup puts it before the menu
       button so it can sit beside it on phones. */
    order: 3;
}

.site-header .main-navigation {
    order: 2;
}

.cart-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 44px;
    min-height: 44px;
    padding: 10px;
    border-radius: var(--border-radius-sm);
    color: var(--text-color);
    text-decoration: none;
    flex-shrink: 0;
}

.cart-btn:hover,
.cart-btn:focus-visible {
    color: var(--link-hover-color, var(--link-color));
    text-decoration: none;
}

.cart-btn__count {
    position: absolute;
    top: 2px;
    inset-inline-end: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--focus-color);
    color: var(--on-primary, var(--text-color-light));
    font-size: 11px;
    line-height: 18px;
    text-align: center;
}

.cart-btn__count.is-empty {
    display: none;
}

/* Phones: controls next to the menu button (default) or inside the menu. */
@media (max-width: 1024px) {
    .header-actions {
        margin-inline-start: auto;
        margin-inline-end: var(--spacing-xs);
        order: 2;
    }

    .menu-toggle {
        order: 3;
    }

    body.header-controls-inside .main-navigation .header-actions {
        margin: var(--spacing-md) 0 0;
        justify-content: center;
        width: 100%;
    }
}

/* Drawer */
.mini-cart {
    position: fixed;
    inset: 0;
    z-index: 10050;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.mini-cart.is-open {
    opacity: 1;
}

.mini-cart[hidden] {
    display: none;
}

.mini-cart__panel {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    width: min(380px, 92vw);
    background: var(--card-bg);
    color: var(--text-color);
    box-shadow: -8px 0 30px rgba(0, 0, 0, 0.2);
    transform: translateX(100%);
    transition: transform 0.25s ease;
    flex-direction: column;
}

[dir="rtl"] .mini-cart__panel {
    transform: translateX(-100%);
    box-shadow: 8px 0 30px rgba(0, 0, 0, 0.2);
}

.mini-cart.is-open .mini-cart__panel {
    transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
    .mini-cart,
    .mini-cart__panel {
        transition: none;
    }
}

.mini-cart__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
}

.mini-cart__title {
    margin: 0;
    font-size: var(--font-size-large);
}

.mini-cart__close {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-color);
    cursor: pointer;
}

.mini-cart__close:hover,
.mini-cart__close:focus-visible {
    background: var(--content-bg);
    color: var(--text-color);
    transform: none;
    box-shadow: none;
}

.mini-cart__body {
    padding: var(--spacing-lg);
    overflow-y: auto;
}

.mini-cart__body[aria-busy="true"] {
    opacity: 0.6;
}

.mini-cart__error {
    margin: 0 0 var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    border-inline-start: 4px solid var(--danger);
    background: var(--danger-bg);
    color: var(--text-color);
}

.mini-cart .woocommerce-mini-cart__buttons .button {
    display: inline-block;
    margin-inline-end: var(--spacing-xs);
}

.mini-cart ul.cart_list li {
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid var(--border-color);
    list-style: none;
}

.mini-cart ul.cart_list {
    margin: 0;
    padding: 0;
}

.mini-cart ul.cart_list img {
    width: 48px;
    height: auto;
    float: inline-end;
    margin-inline-start: var(--spacing-sm);
    border-radius: var(--border-radius-sm);
}

/* ==========================================================================
   Content shortcodes: [hero] [posts] [products] [quote] [callout]
   ========================================================================== */
.hero {
    position: relative;
    display: grid;
    align-items: center;
    padding: var(--spacing-xl) var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
    border-radius: var(--border-radius-lg);
    background: var(--card-bg);
    color: var(--text-color);
    overflow: hidden;
}

.hero--small { min-height: 200px; }
.hero--medium { min-height: 320px; }
.hero--large { min-height: 460px; }

.hero--has-image {
    background-image: linear-gradient(rgba(0, 0, 0, var(--hero-overlay, 0.45)), rgba(0, 0, 0, var(--hero-overlay, 0.45))), var(--hero-image);
    background-size: cover;
    background-position: center;
    color: #ffffff;
}

.hero--has-image .hero__subtitle,
.hero--has-image .hero__content {
    color: #f2f2f2;
}

.hero__inner {
    max-width: 44rem;
    display: grid;
    gap: var(--spacing-sm);
}

.hero--align-center { justify-items: center; text-align: center; }
.hero--align-center .hero__inner { margin-inline: auto; }
.hero--align-end { justify-items: end; text-align: end; }
.hero--align-end .hero__inner { margin-inline-start: auto; }

.hero .hero__title {
    margin: 0;
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    line-height: 1.15;
    /* The hero's own colour (white over an image): the global heading colour
       is the fixed dark text colour, which disappeared on the overlay. */
    color: inherit;
}

/* Over an image the second button is outlined in white; hover fills it. */
.hero--has-image .btn-secondary {
    background: transparent;
    color: #ffffff;
    border-color: #ffffff;
}

body .hero--has-image .btn-secondary:hover,
body .hero--has-image .btn-secondary:focus-visible {
    background: #ffffff;
    color: #111111;
    border-color: #ffffff;
}

.hero__subtitle {
    margin: 0;
    font-size: var(--font-size-large);
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin: var(--spacing-sm) 0 0;
}

/* Post / product blocks */
.content-section {
    margin-block: var(--spacing-xl);
}

.content-section__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.content-section__title {
    margin: 0;
}

.content-section__items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--spacing-lg);
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

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

.content-section--list .content-section__items {
    grid-template-columns: 1fr;
}

/* Carousel: a scroll-snap strip, no JavaScript needed to read it */
/* Flex, not grid: grid shrinks its tracks to fit and would never overflow. */

.content-section__items:focus-visible {
    outline: 2px solid var(--focus-color);
    outline-offset: 4px;
}

.content-card__inner {
    height: 100%;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    overflow: hidden;
}

.content-card__link {
    display: grid;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.content-card__link:hover .content-card__title,
.content-card__link:focus-visible .content-card__title {
    color: var(--link-hover-color, var(--link-color));
}

.content-card__media img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}

.content-card__body {
    display: grid;
    gap: 6px;
    padding: var(--spacing-md);
}

.content-card__title {
    font-weight: 600;
    font-size: var(--font-size-large);
}

.content-card__meta,
.content-card__excerpt {
    font-size: var(--font-size-small);
    color: var(--text-muted, var(--text-color));
}

.content-card__price {
    font-weight: 600;
    color: var(--link-color, var(--focus-color));
}

/* Pull quote */
.pull-quote {
    margin: var(--spacing-xl) 0;
    padding: var(--spacing-lg);
    border-inline-start: 4px solid var(--focus-color);
    background: var(--card-bg);
    border-radius: var(--border-radius-md);
}

.pull-quote blockquote {
    margin: 0;
    font-size: var(--font-size-large);
    line-height: 1.5;
}

.pull-quote__cite {
    margin-top: var(--spacing-sm);
    font-size: var(--font-size-small);
    color: var(--text-muted, var(--text-color));
}

.pull-quote__author {
    font-weight: 600;
    margin-inline-end: 6px;
}

/* Callouts */
.callout {
    margin: var(--spacing-lg) 0;
    padding: var(--spacing-md) var(--spacing-lg);
    border: 1px solid var(--border-color);
    border-inline-start: 4px solid var(--focus-color);
    border-radius: var(--border-radius-md);
    background: var(--card-bg);
}

.callout__title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 var(--spacing-xs);
    font-weight: 600;
}

.callout__body > :first-child { margin-top: 0; }
.callout__body > :last-child { margin-bottom: 0; }

.callout--tip { border-inline-start-color: var(--success); }
.callout--tip .callout__title { color: var(--success); }
.callout--warning { border-inline-start-color: var(--warning); background: color-mix(in srgb, var(--warning) 8%, var(--card-bg)); }
.callout--warning .callout__title { color: var(--text-color); }
.callout--danger { border-inline-start-color: var(--danger); background: var(--danger-bg); }
.callout--danger .callout__title { color: var(--danger); }

/* Blocks pasted into classic content (H41): match the theme's own spacing. */
.entry-content .wp-block-image figcaption,
.single-article__content .wp-block-image figcaption {
    color: var(--text-muted, var(--text-color));
    font-size: var(--font-size-small);
}

.entry-content .wp-block-quote,
.single-article__content .wp-block-quote {
    border-inline-start: 4px solid var(--focus-color);
    padding-inline-start: var(--spacing-md);
    margin-inline: 0;
}

.entry-content .wp-block-button__link,
.single-article__content .wp-block-button__link {
    background: var(--focus-color);
    color: var(--on-primary, var(--text-color-light));
    border-radius: var(--border-radius-sm);
}

.entry-content .wp-block-table td,
.entry-content .wp-block-table th,
.single-article__content .wp-block-table td,
.single-article__content .wp-block-table th {
    border-color: var(--border-color);
}

.entry-content .alignwide,
.single-article__content .alignwide {
    max-width: min(100%, calc(var(--container-max-width) - 2 * var(--spacing-lg)));
    margin-inline: auto;
}

.has-brand-color { color: var(--bg-gradient-start); }
.has-brand-background-color { background-color: var(--bg-gradient-start); color: var(--on-primary, var(--text-color-light)); }
.has-surface-background-color { background-color: var(--card-bg); }
.has-muted-color { color: var(--text-muted, var(--text-color)); }

/* ==========================================================================
   0.0.16 header controls
   ========================================================================== */

/* The icons must follow the button's colour (a global "button svg" rule sets
   the text colour, which swallowed every hover state). */
.theme-btn svg,
.cart-btn svg,
.menu-toggle svg {
    color: inherit;
}

/* Hover/focus reads like the menu links. */
.theme-btn:hover,
.theme-btn:focus-visible,
.cart-btn:hover,
.cart-btn:focus-visible {
    color: var(--link-hover-color, var(--link-color));
    background: transparent;
    box-shadow: none;
    transform: var(--lift);
}

/* Sized on the icon itself, so a plugin's ".icon" rules can't resize it. */
.cart-btn > svg.icon-cart,
.theme-btn > svg.icon {
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    flex: 0 0 24px;
}

.cart-btn .hidden-desktop {
    display: none;
}

/* Breathing room around the header search (it sits between the menu links). */

@media (max-width: 1024px) {
    .menu-item-search {
        margin-block: var(--spacing-sm);
        margin-inline: 0;
    }
}

/* Search suggestions with thumbnails */
.header-search__option a {
    display: flex;
    gap: var(--spacing-sm);
}

.header-search__thumb {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    background: var(--content-bg);
}

.header-search__thumb img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    display: block;
}

.header-search__thumb--empty {
    background: linear-gradient(135deg, var(--content-bg), var(--border-color));
}

.header-search__text {
    display: grid;
    gap: 2px;
    min-width: 0;
}

/* ==========================================================================
   0.0.17: CTA buttons and the mini cart
   ========================================================================== */

/* Reusable call-to-action buttons (also used by the mini cart and hero). */
.cta-btn-primary,
.cta-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 18px;
    border-radius: var(--border-radius-sm);
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.cta-btn-primary {
    background: var(--bg-gradient-start);
    color: var(--on-primary, var(--text-color-light));
    border: 2px solid var(--bg-gradient-start);
}

.cta-btn-primary:hover,
.cta-btn-primary:focus-visible {
    background: var(--bg-gradient-end);
    border-color: var(--bg-gradient-end);
    color: var(--on-primary, var(--text-color-light));
    text-decoration: none;
}

.cta-btn-secondary {
    background: transparent;
    color: var(--link-color, var(--focus-color));
    border: 2px solid var(--focus-color);
}

.cta-btn-secondary:hover,
.cta-btn-secondary:focus-visible {
    background: var(--content-bg);
    color: var(--link-hover-color, var(--link-color));
    text-decoration: none;
}

.cta-btn-primary:focus-visible,
.cta-btn-secondary:focus-visible {
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
}

/* Mini cart list */
.mini-cart__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mini-cart__item {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    align-items: start;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) 0;
    margin: 0;
    border-bottom: 1px solid var(--border-color);
}

.mini-cart__item-media {
    display: block;
    width: 56px;
}

.mini-cart__item-media img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: var(--border-radius-sm);
    display: block;
    margin: 0;
    float: none;
}

.mini-cart__item-body {
    display: grid;
    gap: 4px;
    min-width: 0;
}

/* The product name gets its own line; quantity × price sits underneath. */
.mini-cart__item-link {
    display: block;
    font-weight: 600;
    color: var(--text-color);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.mini-cart__item-link:hover,
.mini-cart__item-link:focus-visible {
    color: var(--link-hover-color, var(--link-color));
}

.mini-cart__item-quantity {
    display: block;
    font-size: var(--font-size-small);
    color: var(--text-muted, var(--text-color));
}

.mini-cart__item .variation {
    margin: 0;
    font-size: var(--font-size-small);
    color: var(--text-muted, var(--text-color));
}

/* Trash button, styled like the header's icon buttons. */
.mini-cart .mini-cart__remove {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    background: var(--card-bg);
    color: var(--text-muted, var(--text-color));
    font-size: 0;
    line-height: 0;
    text-decoration: none;
}

.mini-cart .mini-cart__remove:hover,
.mini-cart .mini-cart__remove:focus-visible {
    color: var(--danger);
    border-color: var(--danger);
    background: var(--danger-bg);
}

.mini-cart .mini-cart__remove svg {
    color: inherit;
}

.mini-cart .mini-cart__remove.is-busy {
    opacity: 0.5;
    pointer-events: none;
}

/* Footer: subtotal at the bottom, one full-width button per line. */
.mini-cart__footer {
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border-color);
    background: var(--card-bg);
    margin-top: auto;
    position: sticky;
    bottom: 0;
}

.mini-cart__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--spacing-sm);
    margin: 0 0 var(--spacing-md);
    font-size: var(--font-size-large);
}

.mini-cart__total strong {
    font-weight: 600;
}

.mini-cart__buttons {
    display: grid;
    gap: var(--spacing-sm);
    margin: 0;
}

.mini-cart__buttons .cta-btn-primary,
.mini-cart__buttons .cta-btn-secondary,
.mini-cart__buttons .button {
    width: 100%;
}

/* Empty state */
.mini-cart__empty {
    display: grid;
    justify-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-xl) var(--spacing-md);
    text-align: center;
    color: var(--text-muted, var(--text-color));
}

.mini-cart__empty-icon {
    color: var(--border-color);
}

.mini-cart__empty-message {
    margin: 0;
    font-size: var(--font-size-large);
    color: var(--text-color);
}

.mini-cart__loading {
    margin: 0;
    padding: var(--spacing-lg) 0;
    text-align: center;
    color: var(--text-muted, var(--text-color));
}

/* A visible focus ring on the header buttons (found by dev/tools/focus-order.js:
   an older "outline: none" in header.css removed it from the theme button). */
.header-actions .theme-btn:focus-visible,
.header-actions .cart-btn:focus-visible,
.site-header .menu-toggle:focus-visible {
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
    border-radius: var(--border-radius-sm);
}

/* CTA buttons keep their colours inside widget areas and content, where
   generic "a" colour rules (".widget a", ".entry-content a") are more specific. */
.widget a.cta-btn-primary,
.entry-content a.cta-btn-primary,
.before-footer a.cta-btn-primary,
.site-footer a.cta-btn-primary,
.mini-cart a.cta-btn-primary {
    color: var(--on-primary, var(--text-color-light));
    text-decoration: none;
}

.widget a.cta-btn-secondary,
.entry-content a.cta-btn-secondary,
.before-footer a.cta-btn-secondary,
.site-footer a.cta-btn-secondary,
.mini-cart a.cta-btn-secondary {
    color: var(--link-color, var(--focus-color));
    text-decoration: none;
}

.section-cta--brand a.cta-btn-secondary {
    color: var(--on-primary, var(--text-color-light));
}

/* ==========================================================================
   0.0.22 — mini cart layout, header labels
   ========================================================================== */

/* The drawer is a column: header, scrolling body, footer pinned to the bottom. */
.mini-cart__panel {
    display: flex;
    height: 100%;
}

.mini-cart__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.mini-cart__body > .widget_shopping_cart_content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.mini-cart__title {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.mini-cart__title-icon {
    flex: 0 0 auto;
    color: var(--link-color, var(--focus-color));
}

/* With the cart/appearance buttons outside the menu on phones, the words
   next to the icons are dropped: the buttons keep their aria-label
   ("Appearance settings", "Cart, 2 items"), so screen readers still hear
   the name. Inside the menu the words stay, as menu items need them. */
body:not(.header-controls-inside) .header-actions .theme-btn .hidden-desktop,
body:not(.header-controls-inside) .header-actions .cart-btn .hidden-desktop {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   Interaction states — one system (0.0.22)
   Checked by dev/tools/state-contrast.js, which forces :hover and
   :focus-visible on every control and measures the result.
   The "body" prefix outweighs the per-component rules in single.css,
   product.css and friends, which load after this file.
   ========================================================================== */

/* 1. Outline and icon controls: the surface stays a page surface. */
body .share-buttons__icon:hover,
body .share-buttons__icon:focus-visible,
body .content-section__arrow:hover,
body .content-section__arrow:focus-visible,
body .tarjava-theme-gallery-zoom:hover,
body .tarjava-theme-gallery-zoom:focus-visible,
body .btn-secondary:hover,
body .btn-secondary:focus-visible,
body .quick-view-btn:hover,
body .quick-view-btn:focus-visible,
body .menu-item--more__toggle:hover,
body .menu-item--more__toggle:focus-visible,
body .mini-cart__close:hover,
body .mini-cart__close:focus-visible,
body .section-lightbox__close:hover,
body .section-lightbox__close:focus-visible {
    background: var(--hover-surface);
    color: var(--hover-text);
    border-color: var(--focus-color);
}

/* 2. Filled buttons: brand gradient + on-primary, in any container. */
body a.cta-btn-primary,
body button.cta-btn-primary,
body .widget a.cta-btn-primary,
body .entry-content a.cta-btn-primary {
    background: var(--filled-bg);
    color: var(--filled-text);
    border-color: var(--filled-bg);
}

body a.cta-btn-primary:hover,
body a.cta-btn-primary:focus-visible,
body button.cta-btn-primary:hover,
body button.cta-btn-primary:focus-visible,
body .widget a.cta-btn-primary:hover,
body .widget a.cta-btn-primary:focus-visible,
body .entry-content a.cta-btn-primary:hover,
body .entry-content a.cta-btn-primary:focus-visible {
    background: var(--filled-bg-hover);
    border-color: var(--filled-bg-hover);
    color: var(--filled-text);
}

/* 3. Secondary buttons on a page surface. */
body a.cta-btn-secondary:hover,
body a.cta-btn-secondary:focus-visible,
body button.cta-btn-secondary:hover,
body button.cta-btn-secondary:focus-visible {
    background: var(--hover-surface);
    color: var(--hover-text);
    border-color: var(--focus-color);
}

/* 3b. On the brand band the secondary button is outlined in on-primary, and
       its hover inverts that same guaranteed pair. */
body .section-cta--brand a.cta-btn-secondary {
    background: transparent;
    color: var(--filled-text);
    border-color: var(--filled-text);
}

body .section-cta--brand a.cta-btn-secondary:hover,
body .section-cta--brand a.cta-btn-secondary:focus-visible {
    background: var(--filled-text);
    color: var(--filled-bg);
    border-color: var(--filled-text);
}

body .section-cta--brand a.cta-btn-primary {
    /* On the gradient band the primary button is the inverted pair. */
    background: var(--filled-text);
    color: var(--filled-bg);
    border-color: var(--filled-text);
}

body .section-cta--brand a.cta-btn-primary:hover,
body .section-cta--brand a.cta-btn-primary:focus-visible {
    background: transparent;
    color: var(--filled-text);
    border-color: var(--filled-text);
}

/* 4. One focus ring. */
body a:focus-visible,
body button:focus-visible,
body [role="tab"]:focus-visible,
body summary:focus-visible,
body input:focus-visible,
body select:focus-visible,
body textarea:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-color);
    outline-offset: var(--focus-ring-offset);
}

/* On the brand gradient (header gradient, CTA band) the ring uses on-primary,
   which is what is guaranteed to show against it. */
body .section-cta--brand a:focus-visible {
    outline-color: var(--filled-text);
}

/* Anchors, skip links, focus and scrollIntoView() stop below the fixed header
   (js/core/header.js keeps --header-height equal to the real header). */

/* 5. Three looks, one rule set. Hover and focus change colour — never an
      underline — and buttons also lift. Every pair is computed per preset
      (inc/Presets.php, js/core/theme.js) to pass AA on its own surface, so
      dark presets get the inverted pairs without extra rules.

      a) Link on a page or card surface (content, breadcrumbs on the page,
         footer): --link-color → --link-hover-color.
      b) Button (filled, outline, icon): background/colour change + --lift.
      c) Link on the brand gradient (card and widget headers, the FAQ bar,
         brand bands, and the breadcrumb on singular pages, which sits on the
         page gradient — archives load blog.css, which removes it): --on-primary →
         --on-primary-hover, over --on-primary-wash. On most presets the
         gradient leaves little room between on-primary and AA, so the wash
         carries the change: it darkens under light text and lightens under
         dark text, which only ever adds contrast.

      A surface opts into (c) by setting the context variables below; the
      base "a" rule reads them, so links inside need no rules of their own. */
.card-header,
.widget-title,
.entry-header,
.comments-title,
.modal-header,
.footer-faq,
.woocommerce-store-notice,
.demo_store,
.split--tone-brand,
.bento__item--brand,
.section-cta--brand,
.calculator__results,
.has-brand-background-color,
:is(.wp-singular, .single, .page) :is(.breadcrumbs, .woocommerce-breadcrumb) {
    --ctx-link: var(--on-primary, var(--text-color-light));
    --ctx-link-hover: var(--on-primary-hover, var(--on-primary, var(--text-color-light)));
    --ctx-link-wash: var(--on-primary-wash);
}

:is(.card-header, .widget-title, .entry-header, .comments-title, .modal-header, .footer-faq, .woocommerce-store-notice, .demo_store, .split--tone-brand, .bento__item--brand, .section-cta--brand, .calculator__results, .has-brand-background-color) a:not([class*="btn"], [class*="button"]),
:is(.wp-singular, .single, .page) :is(.breadcrumbs, .woocommerce-breadcrumb) a:not([class*="btn"], [class*="button"]) {
    color: var(--ctx-link, var(--link-color));
    border-radius: 3px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

:is(.card-header, .widget-title, .entry-header, .comments-title, .modal-header, .footer-faq, .woocommerce-store-notice, .demo_store, .split--tone-brand, .bento__item--brand, .section-cta--brand, .calculator__results, .has-brand-background-color) a:not([class*="btn"], [class*="button"]):is(:hover, :focus-visible),
:is(.wp-singular, .single, .page) :is(.breadcrumbs, .woocommerce-breadcrumb) a:not([class*="btn"], [class*="button"]):is(:hover, :focus-visible) {
    color: var(--ctx-link-hover, var(--link-hover-color));
    background-color: var(--ctx-link-wash, transparent);
    /* The same colour as a spread shadow: room around the text, no reflow. */
    box-shadow: 0 0 0 3px var(--ctx-link-wash, transparent);
    text-decoration: none;
    opacity: 1;
}

/* Text over a picture (image tiles, edge-to-edge tiles, the hero): white on
   a dark shade. Hover keeps it white and deepens the shade under it. */
:is(.bento__item--image, .full-bleed__item, .hero--has-image) a:not([class*="btn"], [class*="button"]):is(:hover, :focus-visible) {
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.35);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.35);
    border-radius: 3px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* Filled anchor buttons keep their text on hover (the global link hover
   colour turned it blue on the gradient: 1.4:1). */
body a.btn:not(.btn-secondary):is(:hover, :focus-visible) {
    color: var(--on-primary, var(--text-color-light));
}

/* On the brand gradient the focus ring is on-primary too. */
:is(.card-header, .widget-title, .entry-header, .footer-faq, .section-cta--brand, .split--tone-brand, .bento__item--brand) a:focus-visible {
    outline-color: var(--on-primary, var(--text-color-light));
}

/* (a) Links on a page surface: no underline, the link pair. */
body .breadcrumbs a:hover,
body .breadcrumbs a:focus-visible,
body .glossary-index a:hover,
body .glossary-index a:focus-visible,
body .archive-header a:hover,
body .archive-header a:focus-visible,
body .main-header a:hover,
body .main-header a:focus-visible {
    text-decoration: none;
}

/* (b) Buttons lift. Reduced motion (the OS setting or the theme's own
       toggle) keeps the colour change only. */
@media (prefers-reduced-motion: reduce) {
    :root {
        --lift: none;
    }
}

html[data-reduce-motion="true"] {
    --lift: none;
}

/* In-content skip links ("Skip the questions" in FAQ lists) carry
   WordPress' .screen-reader-text. Focused, they appear where they are, in
   the flow. Pinning them to the screen does not work there: widgets use
   container queries (container-type), which traps position: fixed inside
   the widget, and the link ended up hundreds of pixels above it. */
.skip-link.screen-reader-text:not(.skip-link--main):focus {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    display: inline-block;
    width: auto;
    height: auto;
    clip: auto;
    clip-path: none;
    overflow: visible;
    margin: 0 0 var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-md);
    background: var(--card-bg);
    color: var(--link-color, var(--text-color));
    border-radius: var(--border-radius-sm);
    box-shadow: 0 2px 10px var(--shadow-color);
    text-decoration: none;
    z-index: 1;
}

/* Header icon buttons outside the menu (phones and desktop): the same 44×44
   box, icons centred on one line. A mobile rule gives .theme-btn
   width: 100% for when it sits inside the menu; outside the menu that made it
   103px wide, so it ran under the hamburger and off the screen. */
body:not(.header-controls-inside) .header-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    flex: 0 0 auto;
}

body:not(.header-controls-inside) .header-actions .theme-btn,
body:not(.header-controls-inside) .header-actions .cart-btn {
    display: inline-grid;
    place-items: center;
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0;
    margin: 0;
    flex: 0 0 44px;
    position: relative;
    line-height: 0;
}

/* The count badge sits on the cart icon, not beside it. */
body:not(.header-controls-inside) .header-actions .cart-btn .cart-btn__count {
    position: absolute;
    top: 2px;
    inset-inline-end: 0;
}

/* The two icons of the theme button are stacked in the same cell. */
body:not(.header-controls-inside) .header-actions .theme-btn > svg {
    grid-area: 1 / 1;
}

@media (max-width: 1024px) {
    body:not(.header-controls-inside) .site-header .container {
        flex-wrap: nowrap;
    }

    body:not(.header-controls-inside) .site-header .menu-toggle {
        flex: 0 0 auto;
        margin-inline-start: var(--spacing-xs);
    }

    /* The branding gives way before the buttons do. */
    body:not(.header-controls-inside) .site-branding {
        min-width: 0;
        flex: 1 1 auto;
    }
}

/* The header search field had "outline: none" on focus with nothing in its
   place (found by dev/tools/focus-order.js). The ring is drawn on the field. */
body .header-search__input:focus,
body .header-search__input:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-color);
    outline-offset: var(--focus-ring-offset);
}

/* Roadmap 28: the footer is rendered only when it comes near the screen. */
.site-footer,
.footer-faq {
    content-visibility: auto;
    contain-intrinsic-block-size: auto 480px; /* height only (the shorthand with one value sets the width too) */
}