/* ==========================================================================
   Site header / navigation
   ========================================================================== */

.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    height: var(--header-height);
    background: color-mix(in srgb, var(--color-background) 85%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
}

.site-header__logo {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    font-size: var(--text-lg);
    flex-shrink: 0;
}

.site-nav__list {
    display: none;
    align-items: center;
    gap: var(--space-6);
    font-weight: var(--weight-medium);
    font-size: var(--text-sm);
}

.site-nav__list a:hover {
    color: var(--color-primary);
}

@media (min-width: 1024px) {
    .site-nav__list {
        display: flex;
    }
}

.site-nav__item--has-mega {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    position: relative;
    gap: var(--space-1);
}

.site-nav__mega-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    color: currentColor;
}

.site-nav__mega-toggle svg {
    transition: transform var(--duration-base) var(--ease-standard);
}

.mega-menu {
    display: none;
}

@media (min-width: 1024px) {
    .site-nav__mega-toggle {
        pointer-events: none;
    }

    .mega-menu {
        position: absolute;
        top: calc(100% + var(--space-4));
        left: 50%;
        transform: translateX(-50%);
        z-index: var(--z-header);
        min-width: 560px;
        padding: var(--space-5);
        background: var(--color-background);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-lg);
    }

    .site-nav__item--has-mega:hover .mega-menu,
    .site-nav__item--has-mega:focus-within .mega-menu {
        display: block;
    }

    .site-nav__item--has-mega:hover .site-nav__mega-toggle svg,
    .site-nav__item--has-mega:focus-within .site-nav__mega-toggle svg {
        transform: rotate(180deg);
    }

    .mega-menu__inner {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-6);
    }

    .mega-menu__footer {
        margin-top: var(--space-4);
        padding-top: var(--space-4);
        border-top: 1px solid var(--color-border);
        text-align: right;
    }
}

@media (max-width: 1023px) {
    .mega-menu[data-open] {
        display: block;
        flex-basis: 100%;
        width: 100%;
        padding: var(--space-2) 0 var(--space-2) var(--space-4);
    }

    .mega-menu__inner {
        display: flex;
        flex-direction: column;
        gap: var(--space-4);
    }

    .mega-menu__footer {
        margin-top: var(--space-3);
    }
}

.mega-menu__group-title {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-2);
}

.mega-menu__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.mega-menu__link {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--color-text);
}

.mega-menu__link:hover {
    background: var(--color-surface);
    color: var(--color-primary);
}

.mega-menu__icon {
    display: inline-flex;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: var(--color-primary);
}

.mega-menu__icon svg {
    width: 100%;
    height: 100%;
}

.mega-menu__all-link {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-primary);
}

.site-nav__toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 0;
}

@media (min-width: 1024px) {
    .site-nav__toggle { display: none; }
}

.site-nav__toggle-bar {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--color-text);
    border-radius: var(--radius-full);
    transition: transform var(--duration-base) var(--ease-standard), opacity var(--duration-base);
}

@media (max-width: 1023px) {
    .site-nav__list {
        position: absolute;
        top: var(--header-height);
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        background: var(--color-background);
        border-bottom: 1px solid var(--color-border);
        padding: var(--space-4);
        gap: 0;
    }

    .site-nav__list:not([data-open]) {
        display: none;
    }

    .site-nav__list[data-open] {
        display: flex;
    }

    .site-nav__list li {
        padding: var(--space-3) 0;
        border-bottom: 1px solid var(--color-border);
    }
}

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    color: var(--color-text-secondary);
}

.theme-toggle:hover {
    background: var(--color-surface);
    color: var(--color-text);
}

.theme-toggle__icon--moon { display: none; }
:root[data-theme="dark"] .theme-toggle__icon--sun { display: none; }
:root[data-theme="dark"] .theme-toggle__icon--moon { display: block; }

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

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-family: var(--font-body);
    font-weight: var(--weight-semibold);
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-standard),
                border-color var(--duration-fast) var(--ease-standard),
                color var(--duration-fast) var(--ease-standard),
                transform var(--duration-fast) var(--ease-standard),
                box-shadow var(--duration-fast) var(--ease-standard);
    white-space: nowrap;
}

.btn:active {
    transform: translateY(1px);
}

.btn--sm { padding: var(--space-2) var(--space-3); font-size: var(--text-sm); }
.btn--md { padding: var(--space-3) var(--space-5); font-size: var(--text-base); }
.btn--lg { padding: var(--space-4) var(--space-8); font-size: var(--text-lg); }

.btn--primary {
    background: var(--color-primary);
    color: var(--color-on-primary);
    box-shadow: var(--shadow-sm);
}
.btn--primary:hover { background: var(--color-primary-hover); box-shadow: var(--shadow-md); }
.btn--primary:active { background: var(--color-primary-active); }

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

.btn--outline {
    background: transparent;
    border-color: var(--color-border-strong);
    color: var(--color-text);
}
.btn--outline:hover { border-color: var(--color-primary); color: var(--color-primary); }

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

.btn--danger {
    background: var(--color-danger);
    color: #ffffff;
}
.btn--danger:hover { filter: brightness(0.92); }

/* ==========================================================================
   Cards / Tool cards / Blog cards
   ========================================================================== */

.card {
    display: block;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
}

a.card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

.card__icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: var(--color-primary-50);
    color: var(--color-primary);
    margin-bottom: var(--space-4);
}

.card__title {
    font-size: var(--text-lg);
    margin-bottom: var(--space-2);
}

.card__body {
    font-size: var(--text-sm);
}

.tool-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-6);
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard), border-color var(--duration-base);
}

.tool-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-3px);
    border-color: var(--color-primary-200);
}

.tool-card__icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: var(--color-primary-50);
    color: var(--color-primary);
}

.tool-card__title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-heading);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
}

.tool-card__description {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.blog-card {
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--duration-base) var(--ease-standard);
}

.blog-card:hover {
    box-shadow: var(--shadow-lg);
}

.blog-card__media {
    position: relative;
    display: block;
}

.blog-card__media img,
.blog-card__media-placeholder {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: linear-gradient(135deg, var(--color-primary-100), var(--color-secondary-500) 150%);
}

.blog-card__category {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
}

.blog-card__body {
    padding: var(--space-5);
}

.blog-card__meta {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-bottom: var(--space-2);
}

.blog-card__title {
    font-size: var(--text-lg);
    margin-bottom: var(--space-2);
}

.blog-card__title a:hover {
    color: var(--color-primary);
}

.blog-card__excerpt {
    font-size: var(--text-sm);
    margin-bottom: var(--space-4);
}

.blog-card__more {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-primary);
}

.blog-card__more svg {
    transition: transform var(--duration-fast) var(--ease-standard);
}

.blog-card:hover .blog-card__more svg {
    transform: translateX(3px);
}

/* ==========================================================================
   Alerts / Toasts
   ========================================================================== */

.alert {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid;
    font-size: var(--text-sm);
}

.alert--success { background: var(--color-success-bg); border-color: var(--color-success); color: var(--color-success); }
.alert--warning { background: var(--color-warning-bg); border-color: var(--color-warning); color: var(--color-warning); }
.alert--danger  { background: var(--color-danger-bg);  border-color: var(--color-danger);  color: var(--color-danger); }
.alert--info    { background: var(--color-info-bg);    border-color: var(--color-info);    color: var(--color-info); }

.alert__message { color: var(--color-text); flex: 1; }
.alert__close { color: inherit; opacity: 0.6; }
.alert__close:hover { opacity: 1; }

.toast-region {
    position: fixed;
    bottom: var(--space-6);
    right: var(--space-6);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-width: min(360px, calc(100vw - 2 * var(--space-6)));
}

.toast {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
    animation: toast-in var(--duration-slow) var(--ease-standard);
}

.toast--success { border-left: 4px solid var(--color-success); }
.toast--warning { border-left: 4px solid var(--color-warning); }
.toast--danger  { border-left: 4px solid var(--color-danger); }
.toast--info    { border-left: 4px solid var(--color-info); }

.toast__message { flex: 1; font-size: var(--text-sm); }

/* ==========================================================================
   Modal
   ========================================================================== */

.modal[hidden] { display: none; }

.modal__overlay {
    position: fixed;
    inset: 0;
    background: var(--color-overlay);
    z-index: var(--z-modal-overlay);
    animation: fade-in var(--duration-base) var(--ease-standard);
}

.modal__dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: var(--z-modal);
    width: min(520px, calc(100vw - 2 * var(--space-6)));
    max-height: calc(100vh - 2 * var(--space-8));
    overflow-y: auto;
    background: var(--color-surface-raised);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    animation: slide-up var(--duration-base) var(--ease-standard);
}

.modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--color-border);
}

.modal__title { font-size: var(--text-xl); }
.modal__close { font-size: var(--text-2xl); line-height: 1; color: var(--color-text-muted); }
.modal__close:hover { color: var(--color-text); }
.modal__body { padding: var(--space-6); }
.modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-6);
    border-top: 1px solid var(--color-border);
}

/* ==========================================================================
   Accordion / FAQ
   ========================================================================== */

.accordion__item {
    border-bottom: 1px solid var(--color-border);
}

.accordion__trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-5) 0;
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    text-align: left;
}

.accordion__chevron {
    flex-shrink: 0;
    transition: transform var(--duration-base) var(--ease-standard);
}

.accordion__trigger[aria-expanded="true"] .accordion__chevron {
    transform: rotate(180deg);
}

.accordion__panel[hidden] { display: none; }

.accordion__panel-inner {
    padding-bottom: var(--space-5);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
}

.faq {
    max-width: 760px;
    margin-inline: auto;
}

.faq__heading {
    text-align: center;
    margin-bottom: var(--space-8);
}

/* ==========================================================================
   Dropdown
   ========================================================================== */

.dropdown { position: relative; display: inline-block; }

.dropdown__trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-strong);
    font-size: var(--text-sm);
}

.dropdown__menu {
    position: absolute;
    top: calc(100% + var(--space-2));
    left: 0;
    min-width: 200px;
    z-index: var(--z-dropdown);
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: var(--space-2);
    animation: slide-up var(--duration-fast) var(--ease-standard);
}

.dropdown__menu[hidden] { display: none; }

.dropdown__menu a {
    display: block;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
}

.dropdown__menu a:hover {
    background: var(--color-surface);
    color: var(--color-primary);
}

/* ==========================================================================
   Progress bar / Spinner
   ========================================================================== */

.progress__track {
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--color-surface);
    overflow: hidden;
}

.progress__fill {
    height: 100%;
    background: var(--color-primary);
    border-radius: var(--radius-full);
    transition: width var(--duration-slow) var(--ease-standard);
}

.progress__label {
    display: block;
    margin-top: var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
}

.spinner { display: inline-flex; }

.spinner__circle {
    display: block;
    border-radius: 50%;
    border: 2.5px solid var(--color-border);
    border-top-color: var(--color-primary);
    animation: spin 0.7s linear infinite;
}

.spinner--sm .spinner__circle { width: 16px; height: 16px; }
.spinner--md .spinner__circle { width: 24px; height: 24px; }
.spinner--lg .spinner__circle { width: 36px; height: 36px; border-width: 3px; }

/* ==========================================================================
   Search box
   ========================================================================== */

.search-box {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 480px;
}

.search-box__icon {
    position: absolute;
    left: var(--space-4);
    color: var(--color-text-muted);
    pointer-events: none;
}

.search-box__input {
    width: 100%;
    padding: var(--space-3) var(--space-4) var(--space-3) var(--space-10);
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border-strong);
    background: var(--color-surface-raised);
    font-size: var(--text-sm);
}

.search-box__input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

.search-box__submit {
    position: absolute;
    right: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: var(--color-on-primary);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
}

.search-box--lg {
    max-width: 640px;
    margin-inline: auto;
}

.search-box--lg .search-box__input {
    padding: var(--space-5) var(--space-6) var(--space-5) var(--space-12);
    font-size: var(--text-lg);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-md);
}

.search-box--lg .search-box__icon {
    left: var(--space-5);
}

.search-box--lg .search-box__submit {
    padding: var(--space-3) var(--space-6);
    font-size: var(--text-base);
}

/* ==========================================================================
   Upload area
   ========================================================================== */

.upload-area__dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    text-align: center;
    padding: var(--space-16) var(--space-6);
    border: 2px dashed var(--color-border-strong);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    cursor: pointer;
    transition: border-color var(--duration-base) var(--ease-standard), background-color var(--duration-base) var(--ease-standard);
}

.upload-area__dropzone:hover,
.upload-area__dropzone:focus-visible {
    border-color: var(--color-primary);
    background: var(--color-primary-50);
}

.upload-area__dropzone[data-dragover] {
    border-color: var(--color-primary);
    background: var(--color-primary-50);
}

.upload-area__icon { color: var(--color-primary); }
.upload-area__title { font-weight: var(--weight-semibold); }
.upload-area__hint { font-size: var(--text-xs); color: var(--color-text-muted); }

.upload-area__file-list {
    margin-top: var(--space-4);
}

.upload-area__file-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    margin-top: var(--space-2);
}

/* ==========================================================================
   Tables
   ========================================================================== */

.table-wrap { overflow-x: auto; }

.table {
    font-size: var(--text-sm);
}

.table th, .table td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
    text-align: left;
}

.table th {
    font-weight: var(--weight-semibold);
    color: var(--color-text-secondary);
    background: var(--color-surface);
}

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

.form-field { margin-bottom: var(--space-5); }

.form-field__label {
    display: block;
    margin-bottom: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
}

.form-field__input {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-strong);
    background: var(--color-surface-raised);
}

.form-field__input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

.form-field--error .form-field__input {
    border-color: var(--color-danger);
}

.form-field__help { margin-top: var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); }
.form-field__error { margin-top: var(--space-2); font-size: var(--text-xs); color: var(--color-danger); }

/* ==========================================================================
   Breadcrumb
   ========================================================================== */

.breadcrumb {
    padding-block: var(--space-4);
}

.breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.breadcrumb__item:not(:last-child)::after {
    content: '/';
    margin-left: var(--space-2);
    color: var(--color-text-muted);
}

.breadcrumb__item a:hover { color: var(--color-primary); }

/* ==========================================================================
   CTA section
   ========================================================================== */

.cta {
    background: linear-gradient(135deg, var(--color-primary-700), var(--color-primary-500));
    border-radius: var(--radius-xl);
    padding: var(--space-16) var(--space-8);
}

.cta__inner {
    max-width: 560px;
    margin-inline: auto;
    text-align: center;
}

.cta__heading { color: #ffffff; margin-bottom: var(--space-4); }
.cta__body { color: rgba(255, 255, 255, 0.85); margin-bottom: var(--space-8); }
.cta .btn--primary { background: #ffffff; color: var(--color-primary-700); }
.cta .btn--primary:hover { background: var(--color-primary-50); }

/* ==========================================================================
   Hero (homepage)
   ========================================================================== */

.hero {
    padding-block: var(--space-16);
    text-align: center;
}

.hero__eyebrow {
    display: inline-block;
    margin-bottom: var(--space-4);
    color: var(--color-primary);
    font-weight: var(--weight-semibold);
    font-size: var(--text-sm);
}

.hero__title {
    max-width: 820px;
    margin-inline: auto;
    margin-bottom: var(--space-5);
}

.hero__subtitle {
    max-width: 620px;
    margin-inline: auto;
    margin-bottom: var(--space-8);
    font-size: var(--text-lg);
}

.hero__search {
    display: flex;
    justify-content: center;
    margin-bottom: var(--space-4);
}

@media (min-width: 1024px) {
    .hero { padding-block: var(--space-24); }
}

/* ==========================================================================
   Site footer
   ========================================================================== */

.site-footer {
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
    padding-block: var(--space-16) var(--space-8);
}

.site-footer__inner {
    display: grid;
    gap: var(--space-8);
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 768px) {
    .site-footer__inner {
        grid-template-columns: 2fr repeat(3, 1fr);
    }
}

.site-footer__name {
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    font-size: var(--text-lg);
}

.site-footer__tagline {
    margin-top: var(--space-2);
    font-size: var(--text-sm);
}

.site-footer__col h3 {
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    margin-bottom: var(--space-4);
}

.site-footer__col li {
    margin-bottom: var(--space-2);
    font-size: var(--text-sm);
}

.site-footer__col a:hover { color: var(--color-primary); }

.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    justify-content: space-between;
    margin-top: var(--space-12);
    padding-top: var(--space-8);
    border-top: 1px solid var(--color-border);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* ==========================================================================
   Error page
   ========================================================================== */

.error-page {
    padding-block: var(--space-24);
    text-align: center;
}

.error-page__code {
    font-family: var(--font-heading);
    font-size: var(--text-5xl);
    font-weight: var(--weight-bold);
    color: var(--color-primary-200);
}

/* ==========================================================================
   Prompt #2 additions — homepage sections
   ========================================================================== */

/* ---- Header search toggle + slide-down panel ---- */

.header-search-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    color: var(--color-text-secondary);
}

.header-search-toggle:hover {
    background: var(--color-surface);
    color: var(--color-text);
}

.header-search-panel {
    border-bottom: 1px solid var(--color-border);
    background: var(--color-background);
    padding-block: var(--space-4);
    animation: slide-up var(--duration-fast) var(--ease-standard);
}

.header-search-panel[hidden] { display: none; }

.header-search-panel .search-box { max-width: none; }

/* ---- Hero ---- */

.hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.hero__bg {
    position: absolute;
    inset: -10%;
    z-index: -1;
    pointer-events: none;
}

.hero__bg span {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.35;
    animation: hero-drift 18s ease-in-out infinite;
}

.hero__bg span:nth-child(1) {
    width: 380px;
    height: 380px;
    top: -80px;
    left: 5%;
    background: var(--color-primary-400);
}

.hero__bg span:nth-child(2) {
    width: 320px;
    height: 320px;
    top: 40%;
    right: 8%;
    background: var(--color-secondary-500);
    animation-delay: -6s;
}

.hero__bg span:nth-child(3) {
    width: 260px;
    height: 260px;
    bottom: -60px;
    left: 35%;
    background: var(--color-accent-500);
    animation-delay: -11s;
}

:root[data-theme="dark"] .hero__bg span {
    opacity: 0.18;
}

.hero__inner {
    display: grid;
    gap: var(--space-12);
    align-items: center;
    grid-template-columns: 1fr;
    text-align: center;
}

@media (min-width: 1024px) {
    .hero__inner {
        grid-template-columns: 1.1fr 0.9fr;
        text-align: left;
    }
}

.hero__content .hero__title,
.hero__content .hero__subtitle,
.hero__content .hero__search {
    margin-inline: auto;
}

@media (min-width: 1024px) {
    .hero__content .hero__title,
    .hero__content .hero__subtitle,
    .hero__content .hero__search {
        margin-inline: 0;
    }
}

.hero__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    justify-content: center;
    margin-bottom: var(--space-8);
}

@media (min-width: 1024px) {
    .hero__ctas { justify-content: flex-start; }
}

.hero__trust {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-5);
    justify-content: center;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

@media (min-width: 1024px) {
    .hero__trust { justify-content: flex-start; }
}

.hero__trust-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.hero__trust-item svg {
    color: var(--color-success);
    flex-shrink: 0;
}

.hero__illustration {
    display: flex;
    justify-content: center;
}

.hero__illustration svg {
    width: 100%;
    max-width: 380px;
    height: auto;
}

.hero__illustration-float {
    animation: hero-float 5s ease-in-out infinite;
    transform-origin: center;
}

@keyframes hero-drift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(30px, -20px) scale(1.06); }
}

@keyframes hero-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* ---- Section heading + intro (shared by most homepage sections) ---- */

.section-heading {
    max-width: 640px;
    margin-inline: auto;
    text-align: center;
    margin-bottom: var(--space-10);
}

.section-heading__eyebrow {
    display: inline-block;
    margin-bottom: var(--space-3);
    color: var(--color-primary);
    font-weight: var(--weight-semibold);
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.section-heading p {
    margin-top: var(--space-3);
}

/* ---- Search filter chips (homepage search section) ---- */

.search-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: center;
    margin-top: var(--space-5);
}

.search-filters__chip {
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border-strong);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    background: var(--color-surface-raised);
    transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}

.search-filters__chip[aria-pressed="true"] {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-on-primary);
}

.search-filters__chip:hover:not([aria-pressed="true"]) {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* ---- Tool category groups (Section 5: All PDF Tools) ---- */

.category-group {
    scroll-margin-top: calc(var(--header-height) + var(--space-4));
    margin-bottom: var(--space-16);
}

.category-group:last-child {
    margin-bottom: 0;
}

.category-group__header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.category-group__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: var(--color-primary-50);
    color: var(--color-primary);
    flex-shrink: 0;
}

.category-group__title {
    font-size: var(--text-xl);
}

.category-group__description {
    font-size: var(--text-sm);
    margin-top: 2px;
}

/* ---- Feature item (Sections 8 & 10) ---- */

.feature-item {
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
}

.feature-item__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: var(--color-primary-50);
    color: var(--color-primary);
    flex-shrink: 0;
}

.feature-item__title {
    font-size: var(--text-base);
    margin-bottom: var(--space-1);
}

.feature-item__description {
    font-size: var(--text-sm);
}

.trust-band {
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    padding: var(--space-10) var(--space-8);
}

/* ---- Timeline (Section 7: How It Works) ---- */

.timeline {
    display: grid;
    gap: var(--space-10);
    grid-template-columns: 1fr;
    max-width: 900px;
    margin-inline: auto;
    position: relative;
}

@media (min-width: 768px) {
    .timeline {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-6);
    }

    .timeline::before {
        content: '';
        position: absolute;
        top: 28px;
        left: calc(100% / 6);
        right: calc(100% / 6);
        height: 2px;
        background: repeating-linear-gradient(to right, var(--color-border-strong) 0 8px, transparent 8px 16px);
        z-index: -1;
    }
}

.timeline__step {
    text-align: center;
}

.timeline__marker {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-on-primary);
    margin-bottom: var(--space-4);
    box-shadow: var(--shadow-md);
}

.timeline__number {
    position: absolute;
    bottom: -6px;
    right: -6px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-accent);
    color: #ffffff;
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    border: 2px solid var(--color-background);
}

.timeline__title {
    font-size: var(--text-lg);
    margin-bottom: var(--space-2);
}

.timeline__description {
    font-size: var(--text-sm);
    max-width: 260px;
    margin-inline: auto;
}

/* ---- Footer social icons ---- */

.site-footer__social {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-5);
}

.site-footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
}

.site-footer__social a:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

/* ==========================================================================
   Prompt #3 additions — PDF tool pages
   ========================================================================== */

.upload-area__settings {
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border);
    display: grid;
    gap: var(--space-2) var(--space-6);
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .upload-area__settings {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }
}

.upload-area__settings .form-field {
    margin-bottom: 0;
}

.upload-area__actions {
    margin-top: var(--space-6);
    display: flex;
    justify-content: center;
}

.tool-panel {
    max-width: 720px;
    margin-inline: auto;
}

.tool-progress {
    margin-top: var(--space-6);
}

.tool-progress[hidden] { display: none; }

.tool-result {
    margin-top: var(--space-6);
}

.tool-result[hidden] { display: none; }

.tool-result__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    justify-content: center;
    margin-top: var(--space-5);
}

.tool-intro {
    max-width: 720px;
    margin-inline: auto;
    text-align: center;
    margin-bottom: var(--space-10);
}

.tool-how-to {
    max-width: 640px;
    margin-inline: auto;
}

.tool-how-to ol {
    list-style: decimal;
    padding-left: var(--space-6);
}

.tool-how-to li {
    padding-left: var(--space-2);
    margin-bottom: var(--space-3);
    color: var(--color-text-secondary);
}

.tool-how-to li::marker {
    color: var(--color-primary);
    font-weight: var(--weight-semibold);
}

/* ==========================================================================
   Prompt #4 additions — tool landing page sections
   ========================================================================== */

/* Centered single-column hero variant for tool pages (no illustration
   graphic), composed with the existing .hero/.hero__inner from Prompt #2
   rather than changing them — the homepage hero is untouched. */
.hero--tool .hero__inner {
    grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
    .hero--tool .hero__inner {
        grid-template-columns: 1fr;
        text-align: center;
    }
}

.hero--tool .hero__content {
    max-width: 720px;
    margin-inline: auto;
}

/* Prompt #2's desktop hero rules (margin-inline: 0, justify-content:
   flex-start) assume the two-column homepage layout with an
   illustration; re-center them for this single-column variant. */
@media (min-width: 1024px) {
    .hero--tool .hero__content .hero__title,
    .hero--tool .hero__content .hero__subtitle {
        margin-inline: auto;
    }

    .hero--tool .hero__ctas,
    .hero--tool .hero__trust {
        justify-content: center;
    }
}

/* Long-form educational content (the "What Is This Tool?" section) —
   comfortable line length and paragraph spacing for sustained reading. */
.prose {
    max-width: 720px;
    margin-inline: auto;
}

.prose p {
    margin-bottom: var(--space-4);
    line-height: var(--leading-relaxed);
}

.prose a {
    color: var(--color-primary);
    text-decoration: underline;
    text-decoration-color: var(--color-primary-200);
    text-underline-offset: 2px;
}

.prose a:hover {
    text-decoration-color: currentColor;
}

/* Prompt #12 CLS fix: in-article Markdown images (src/Blog/MarkdownRenderer.php)
   have no way to carry real width/height — plain "![alt](url)" syntax
   doesn't support them — so the browser has no reserved space until the
   image loads. A 16:9 default is a reasonable approximation for typical
   article screenshots/diagrams and eliminates the shift in the common
   case; it's imperfect for a genuinely square or portrait image, which
   will simply letterbox/crop slightly rather than distort (object-fit:
   contain preserves the original image, nothing is ever cropped away). */
.prose img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    background: var(--color-surface);
    border-radius: var(--radius-md);
    margin-block: var(--space-6);
}

/* Simple bullet list for the Supported Files section's limitations —
   mirrors .tool-how-to's marker treatment for visual consistency. */
.tool-limitations {
    max-width: 720px;
    margin-inline: auto;
}

.tool-limitations li {
    list-style: disc;
    margin-left: var(--space-6);
    margin-bottom: var(--space-2);
    color: var(--color-text-secondary);
}

.tool-limitations li::marker {
    color: var(--color-primary);
}

.tool-limitations a {
    color: var(--color-primary);
    text-decoration: underline;
}

/* Four-step timeline variant (the existing 3-column .timeline from
   Prompt #2 stays exactly as the homepage uses it). */
@media (min-width: 768px) {
    .timeline--4 {
        grid-template-columns: repeat(4, 1fr);
    }

    .timeline--4::before {
        left: calc(100% / 8);
        right: calc(100% / 8);
    }
}

/* ==========================================================================
   Prompt #5 additions — blog system
   ========================================================================== */

/* Reading progress bar (assets/js/components/reading-progress.js) */
.reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary-500));
    z-index: calc(var(--z-header) + 1);
    transition: width var(--duration-fast) linear;
}

/* Article layout: content + sticky sidebar ToC on desktop, stacked on mobile. */
.article-layout {
    display: grid;
    gap: var(--space-10);
    grid-template-columns: 1fr;
    align-items: start;
}

@media (min-width: 1024px) {
    .article-layout {
        grid-template-columns: minmax(0, 1fr) 260px;
    }

    .article-layout--reverse {
        grid-template-columns: 260px minmax(0, 1fr);
    }

    .article-layout--reverse .article-toc {
        order: -1;
    }
}

.article-toc {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
}

@media (min-width: 1024px) {
    .article-toc {
        position: sticky;
        top: calc(var(--header-height) + var(--space-6));
        max-height: calc(100vh - var(--header-height) - var(--space-12));
        overflow-y: auto;
    }
}

.article-toc__title {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    margin-bottom: var(--space-3);
}

.article-toc__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    font-size: var(--text-sm);
}

.article-toc__item--level-3 {
    padding-left: var(--space-4);
}

.article-toc__item a {
    color: var(--color-text-secondary);
    display: block;
    padding-block: var(--space-1);
    border-left: 2px solid transparent;
    padding-left: var(--space-3);
    margin-left: calc(var(--space-3) * -1);
    transition: color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}

.article-toc__item a:hover,
.article-toc__item a[aria-current="true"] {
    color: var(--color-primary);
    border-left-color: var(--color-primary);
}

/* Article header meta (author / dates / reading time) */
.article-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-block: var(--space-4);
}

.article-meta__author {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-secondary);
    font-weight: var(--weight-medium);
}

.article-featured-image {
    width: 100%;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    margin-bottom: var(--space-8);
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* Article body typography — extends .prose (Prompt #4) with the elements
   long-form articles actually use: code blocks, blockquotes, images. */
.article-body h2 {
    margin-top: var(--space-12);
    margin-bottom: var(--space-4);
    scroll-margin-top: calc(var(--header-height) + var(--space-6));
}

.article-body h3 {
    margin-top: var(--space-8);
    margin-bottom: var(--space-3);
    scroll-margin-top: calc(var(--header-height) + var(--space-6));
}

.article-body ul,
.article-body ol {
    margin: var(--space-4) 0 var(--space-4) var(--space-6);
}

.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }

.article-body li {
    margin-bottom: var(--space-2);
    color: var(--color-text-secondary);
    padding-left: var(--space-1);
}

.article-body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    margin-block: var(--space-4);
}

.article-body blockquote {
    border-left: 3px solid var(--color-border-strong);
    padding-left: var(--space-4);
    margin: var(--space-6) 0;
    color: var(--color-text-secondary);
    font-style: italic;
}

.article-body pre {
    background: var(--color-text);
    color: var(--color-text-on-dark);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
    overflow-x: auto;
    margin: var(--space-6) 0;
    font-size: var(--text-sm);
}

.article-body pre code {
    background: none;
    padding: 0;
    color: inherit;
}

.article-body code {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 0.1em 0.4em;
    font-size: 0.9em;
}

.article-body .alert {
    margin: var(--space-6) 0;
}

.article-body table {
    font-size: var(--text-sm);
}

.article-body hr {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: var(--space-10) 0;
}

/* Share buttons */
.share-buttons {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.share-buttons__label {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text-muted);
}

.share-buttons__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-full);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    transition: color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}

.share-buttons__link:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

/* Tag chips (category/tag clouds, article tag lists) */
.tag-chip {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-4);
    border-radius: var(--radius-full);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    transition: color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard);
}

.tag-chip:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
    background: var(--color-primary-50);
}

.tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

/* Pagination */
.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-top: var(--space-10);
}

.pagination__pages {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.pagination__page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding-inline: var(--space-2);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.pagination__page:hover {
    background: var(--color-surface);
}

.pagination__page--current {
    background: var(--color-primary);
    color: var(--color-on-primary);
}

.pagination__ellipsis {
    display: inline-flex;
    align-items: center;
    color: var(--color-text-muted);
}

.pagination__link {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-primary);
}

/* Newsletter section */
.newsletter {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-12) var(--space-8);
}

.newsletter__inner {
    max-width: 560px;
    margin-inline: auto;
    text-align: center;
}

.newsletter__heading {
    margin-bottom: var(--space-3);
}

.newsletter__body {
    margin-bottom: var(--space-6);
}

.newsletter__form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    justify-content: center;
}

.newsletter__input {
    flex: 1 1 260px;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-strong);
    background: var(--color-surface-raised);
}

.newsletter__input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

/* Comments placeholder (article page) */
.comments-placeholder {
    text-align: center;
    padding: var(--space-10) var(--space-6);
    background: var(--color-surface);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-lg);
}

/* Featured-article variant of .blog-card (Prompt #2): horizontal layout on desktop, larger media. */
@media (min-width: 768px) {
    .blog-card--featured {
        display: grid;
        grid-template-columns: 1.1fr 1fr;
    }

    .blog-card--featured .blog-card__media img,
    .blog-card--featured .blog-card__media-placeholder {
        height: 100%;
        aspect-ratio: auto;
    }

    .blog-card--featured .blog-card__body {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: var(--space-8);
    }

    .blog-card--featured .blog-card__title {
        font-size: var(--text-2xl);
    }
}

/* ==========================================================================
   Prompt #6 additions — programmatic SEO pages
   ========================================================================== */

/* Generic bulleted list, visually identical to .tool-limitations (Prompt #4)
   but named for its actual reuse on pSEO pages (Tips, Common Mistakes)
   rather than only "supported file limitations". */
.simple-list {
    max-width: 720px;
    margin-inline: auto;
}

.simple-list li {
    list-style: disc;
    margin-left: var(--space-6);
    margin-bottom: var(--space-3);
    color: var(--color-text-secondary);
}

.simple-list li::marker {
    color: var(--color-primary);
}

/* Task hub page: variant link grid (/{task}) */
.variant-grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 768px) {
    .variant-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.variant-grid__link {
    display: block;
    padding: var(--space-4) var(--space-5);
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    text-align: center;
    transition: border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}

.variant-grid__link:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* HTML sitemap page */
.html-sitemap__group {
    margin-bottom: var(--space-10);
}

.html-sitemap__group h2 {
    margin-bottom: var(--space-4);
}

.html-sitemap__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
}

.html-sitemap__links a {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.html-sitemap__links a:hover {
    color: var(--color-primary);
}

/* ==========================================================================
   Prompt #9 additions — Company & Legal pages (About stats/timeline reuse
   the existing .timeline block above; this adds the stat-counter grid used
   on the About page and a couple of small form/contact-page primitives).
   ========================================================================== */

.stats {
    display: grid;
    gap: var(--space-6);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 768px) {
    .stats {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.stat {
    text-align: center;
    padding: var(--space-6) var(--space-4);
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.stat__value {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--text-4xl);
    font-weight: var(--weight-bold);
    color: var(--color-primary);
    line-height: 1.1;
}

.stat__label {
    display: block;
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

/* Contact page: support-category grid and the honeypot field that keeps
   basic form-scraping bots out without a CAPTCHA — hidden via the native
   `hidden` attribute (see components/form-elements.php usage in
   pages/pages/contact.php) so non-JS bots that still fill every input in a
   parsed form don't get flagged as real submissions, while assistive tech
   never encounters it at all. */
.form-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.support-categories {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: var(--space-6) 0;
}

@media (min-width: 640px) {
    .support-categories {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.support-categories__item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.support-categories__item svg {
    color: var(--color-primary);
    flex-shrink: 0;
}

/* ==========================================================================
   Prompt #10 additions — instant search, favorites, PWA install, keyboard
   shortcuts, empty states, skeleton loaders, mobile/touch and premium
   micro-interaction polish. Everything here consumes the exact same custom
   properties as Prompts #1-#9 — no new colors, spacing or radius values.
   ========================================================================== */

/* ---- Instant search suggestions (assets/js/components/instant-search.js) ---- */

.search-box { position: relative; }

.search-suggest {
    position: absolute;
    top: calc(100% + var(--space-2));
    left: 0;
    right: 0;
    z-index: var(--z-dropdown);
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    padding: var(--space-2) 0;
    max-height: min(60vh, 420px);
    overflow-y: auto;
    animation: slide-up var(--duration-base) var(--ease-standard);
}

.search-suggest__group {
    padding: var(--space-2) var(--space-4) var(--space-1);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
}

.search-suggest__list {
    list-style: none;
}

.search-suggest__list li a {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-2) var(--space-4);
    color: var(--color-text);
    text-decoration: none;
}

.search-suggest__list li.is-active a,
.search-suggest__list li:hover a {
    background: var(--color-primary-50);
}

:root[data-theme="dark"] .search-suggest__list li.is-active a,
:root[data-theme="dark"] .search-suggest__list li:hover a {
    background: var(--color-surface);
}

.search-suggest__title {
    font-weight: var(--weight-medium);
}

.search-suggest__title mark {
    background: var(--color-accent);
    color: #ffffff;
    border-radius: 3px;
    padding: 0 2px;
}

.search-suggest__desc {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-suggest__empty {
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

/* ---- Favorites (assets/js/components/favorites.js) ---- */

.tool-card { position: relative; }

.favorite-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    border-radius: var(--radius-full);
    transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}

.favorite-toggle:hover {
    background: var(--color-primary-50);
    color: var(--color-accent);
    transform: scale(1.08);
}

.favorite-toggle.is-active {
    color: var(--color-accent);
}

.favorite-toggle.is-active svg path {
    fill: currentColor;
}

.tool-card__favorite {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    z-index: 2;
}

.hero__title-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.hero__title-row .favorite-toggle {
    color: var(--color-text-on-dark);
    opacity: 0.85;
}

.hero__title-row .favorite-toggle:hover,
.hero__title-row .favorite-toggle.is-active {
    opacity: 1;
    background: rgba(255, 255, 255, 0.15);
}

/* ---- PWA install banner (assets/js/pwa.js) ---- */

.install-banner {
    position: fixed;
    left: var(--space-4);
    right: var(--space-4);
    bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
    z-index: var(--z-toast);
    display: flex;
    align-items: center;
    gap: var(--space-4);
    max-width: 480px;
    margin: 0 auto;
    padding: var(--space-4);
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    opacity: 0;
    transform: translateY(16px);
    transition: opacity var(--duration-slow) var(--ease-standard), transform var(--duration-slow) var(--ease-standard);
}

.install-banner.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.install-banner__icon {
    flex-shrink: 0;
    display: flex;
}

.install-banner__text {
    flex: 1;
    min-width: 0;
}

.install-banner__title {
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    margin: 0;
}

.install-banner__desc {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin: 2px 0 0;
}

.install-banner__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    flex-shrink: 0;
}

@media (max-width: 480px) {
    .install-banner {
        flex-wrap: wrap;
    }
    .install-banner__actions {
        flex-direction: row;
        width: 100%;
    }
    .install-banner__actions .btn {
        flex: 1;
    }
}

/* ---- Keyboard shortcuts help dialog ---- */

kbd {
    display: inline-block;
    min-width: 1.6em;
    padding: 0.15em 0.5em;
    text-align: center;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-bottom-width: 2px;
    border-radius: var(--radius-sm);
}

.shortcuts-list div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border);
}

.shortcuts-list div:last-child {
    border-bottom: none;
}

.shortcuts-list dd {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

/* ---- Empty states ---- */

.empty-state {
    text-align: center;
    padding: var(--space-16) var(--space-6);
    background: var(--color-surface);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-lg);
}

.empty-state__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin-bottom: var(--space-4);
    border-radius: var(--radius-full);
    background: var(--color-primary-50);
    color: var(--color-primary);
}

.empty-state h2 {
    margin-bottom: var(--space-2);
}

.empty-state p {
    max-width: 48ch;
    margin-inline: auto;
}

.empty-state__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
    margin-top: var(--space-6);
}

/* ---- Skeleton loaders ---- */

.skeleton {
    position: relative;
    overflow: hidden;
    background: var(--color-surface);
    border-radius: var(--radius-md);
}

.skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-border-strong) 60%, transparent), transparent);
    animation: skeleton-sweep 1.6s ease-in-out infinite;
}

@keyframes skeleton-sweep {
    100% { transform: translateX(100%); }
}

.skeleton--text { height: 0.9em; margin-bottom: var(--space-2); }
.skeleton--title { height: 1.6em; width: 60%; margin-bottom: var(--space-4); }
.skeleton--card { height: 180px; border-radius: var(--radius-lg); }

/* ---- Error / offline pages ---- */

.error-page__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    margin-bottom: var(--space-4);
    border-radius: var(--radius-full);
    background: var(--color-primary-50);
    color: var(--color-primary);
}

.error-page__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
    margin-top: var(--space-6);
}

/* ---- Premium micro-interactions: reusable, opt-in classes ---- */

.glass-panel {
    background: color-mix(in srgb, var(--color-surface-raised) 80%, transparent);
    backdrop-filter: blur(12px);
    border: 1px solid var(--color-border);
}

.hover-lift {
    transition: transform var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
}

.hover-lift:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

/* prefers-reduced-motion override lives in reset.css (loaded first) — see
   that file rather than duplicating the same universal-selector block here. */

/* ---- Mobile / touch target polish ---- */

@media (max-width: 767px) {
    .btn,
    .favorite-toggle,
    .accordion__trigger,
    .header-search-toggle,
    .theme-toggle,
    .site-nav__toggle {
        min-height: 44px;
    }

    .install-banner {
        padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
    }
}

a, button, input, select, textarea {
    -webkit-tap-highlight-color: transparent;
}

/* ==========================================================================
   Prompt #11: Productivity tools — instant-tool panel (text/encoding/hash/
   password/identifier/color/code/date/QR — the non-PDF, client-side-only
   tools). Reuses .tool-panel, .form-field, .btn, .grid exactly as authored;
   everything below is additive.
   ========================================================================== */

.instant-tool__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.instant-tool__fields {
    gap: var(--space-4);
}

.instant-tool__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.instant-tool__actions .btn svg {
    margin-right: var(--space-2);
}

.instant-tool__note {
    margin: var(--space-2) 0 0;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.instant-tool__note--error {
    color: var(--color-danger);
    font-weight: var(--weight-medium);
}

.instant-tool__output {
    margin-top: var(--space-6);
}

.instant-tool__output-textarea {
    width: 100%;
    font-family: var(--font-mono, monospace);
    font-size: var(--text-sm);
    resize: vertical;
}

.instant-tool__placeholder {
    padding: var(--space-8) var(--space-4);
    text-align: center;
    color: var(--color-text-muted);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-md);
}

.form-field--checkbox {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
}

.form-field__checkbox {
    width: 18px;
    height: 18px;
    accent-color: var(--color-primary);
    flex-shrink: 0;
}

.form-field__input--color {
    height: 44px;
    padding: var(--space-1);
    cursor: pointer;
}

/* ---- Stat grid (word/character counter, JSON/XML validators, date/time tools) ---- */

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-3);
}

.stat-grid__item {
    padding: var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.stat-grid__item dt {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: var(--space-1);
}

.stat-grid__item dd {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
}

/* ---- Swatch grid (color palette/picker/random-color) ---- */

.swatch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: var(--space-3);
}

.swatch-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-surface-raised);
    box-shadow: var(--shadow-sm);
}

.swatch-card__color {
    display: block;
    height: 70px;
}

.swatch-card__code {
    display: block;
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
    text-align: center;
    word-break: break-all;
}

/* ---- Gradient preview (gradient-generator) ---- */

.gradient-preview {
    height: 140px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
}

.gradient-preview__code {
    margin-top: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: var(--font-mono, monospace);
    font-size: var(--text-sm);
    white-space: pre-wrap;
    word-break: break-word;
}

/* ---- QR / barcode preview ---- */

.qr-preview {
    display: flex;
    justify-content: center;
    padding: var(--space-4);
    background: var(--color-surface);
    border-radius: var(--radius-md);
}

.qr-preview img {
    max-width: 100%;
    height: auto;
    image-rendering: pixelated;
}

/* ---- Password strength meter ---- */

.meter__label {
    margin: var(--space-2) 0 0;
    font-weight: var(--weight-semibold);
}

.meter__notes {
    margin: var(--space-2) 0 0;
    padding-left: var(--space-5);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.meter [data-instant-meter-fill] {
    transition: width var(--duration-base) var(--ease-standard), background-color var(--duration-base) var(--ease-standard);
}

.meter [data-instant-meter-fill][data-strength="weak"] { background: var(--color-danger); }
.meter [data-instant-meter-fill][data-strength="fair"] { background: var(--color-warning); }
.meter [data-instant-meter-fill][data-strength="strong"] { background: var(--color-success); }