/*
 * QuikSEO layout fixes, loaded after the theme styles on the public, app and admin pages.
 *
 * Phones: the list tables (.table-custom) are 600 to 1,300 px wide, so every card that held one scrolled sideways.
 * Below 768 px each row becomes a card: the first visible cell (the name) on its own line, the other cells wrapped
 * underneath with their column name (data-label, set by quikseo.js) above the value.
 */

/*
 * QuikSEO design system (plan 7.1, ADR 0004): friendly and colorful. Bootstrap 4 stays the layout and component
 * base; the primary palette of the theme files is the QuikSEO violet (hue 252), and this layer sets the font, the
 * tokens (accent, gradient, radius, shadow) and the shape of the shared components. Light and dark theme styles.
 * White text on --primary and on the gradient keeps at least 4.5:1 (WCAG 2.2 AA).
 */

@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('../fonts/plus-jakarta-sans/plus-jakarta-sans-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('../fonts/plus-jakarta-sans/plus-jakarta-sans-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --qs-accent: hsl(16, 100%, 60%);
    --qs-accent-50: hsl(16, 100%, 96%);
    --qs-accent-700: hsl(16, 80%, 40%);
    --qs-pink: hsl(330, 85%, 60%);
    --qs-gradient: linear-gradient(120deg, hsl(252, 78%, 52%) 0%, hsl(285, 70%, 50%) 55%, hsl(330, 80%, 45%) 100%);
    --qs-gradient-soft: linear-gradient(120deg, hsl(252, 100%, 97%) 0%, hsl(285, 100%, 97%) 55%, hsl(16, 100%, 96%) 100%);
    --qs-radius: 1rem;
    --qs-radius-lg: 1.5rem;
    --qs-radius-pill: 999px;
    --qs-shadow: 0 1px 2px hsla(252, 40%, 20%, .06), 0 8px 24px hsla(252, 40%, 20%, .07);
    --qs-shadow-hover: 0 2px 4px hsla(252, 40%, 20%, .08), 0 16px 40px hsla(252, 40%, 20%, .12);
    --qs-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Type */
body,
.tooltip,
.popover,
button,
input,
select,
textarea {
    font-family: var(--qs-font);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 800;
    letter-spacing: -.02em;
}

.h6, h6 {
    letter-spacing: -.01em;
}

/* Links and focus */
a {
    color: var(--primary-600);
}

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

:focus-visible {
    outline: 3px solid var(--primary-300);
    outline-offset: 2px;
}

/* Buttons: pill shapes, the primary one with the brand gradient */
.btn {
    border-radius: .85rem;
    font-weight: 700;
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.btn-sm {
    border-radius: .65rem;
}

.btn-lg {
    border-radius: 1rem;
}

.btn-primary,
.btn-primary:not(:disabled):not(.disabled):active {
    background: var(--qs-gradient);
    border-color: transparent;
    box-shadow: 0 6px 18px hsla(270, 80%, 50%, .25);
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--qs-gradient);
    border-color: transparent;
    transform: translateY(-1px);
    box-shadow: 0 10px 24px hsla(270, 80%, 50%, .32);
}

.btn-outline-primary {
    border-width: 2px;
}

/* Cards and containers */
.card {
    border: 0;
    border-radius: var(--qs-radius-lg);
    box-shadow: var(--qs-shadow);
}

.card .card {
    box-shadow: none;
    border: 1px solid var(--gray-200);
}

.dropdown-menu {
    border: 0;
    border-radius: var(--qs-radius);
    box-shadow: var(--qs-shadow-hover);
}

/* Badges: pills */
.badge {
    border-radius: var(--qs-radius-pill);
    padding: .35em .7em;
    font-weight: 700;
}

/* Forms */
.form-control,
.custom-select {
    border-radius: .85rem;
}

.form-control-lg {
    border-radius: 1rem;
}

.form-control:focus,
.custom-select:focus {
    border-color: var(--primary-400);
    box-shadow: 0 0 0 .25rem var(--primary-100);
}

/* The brand name, while no logo image is uploaded: a gradient wordmark */
.navbar-brand,
.app-sidebar-title .navbar-brand {
    font-weight: 800;
    letter-spacing: -.03em;
    background: var(--qs-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
}

.navbar-brand img {
    -webkit-background-clip: border-box;
    background-clip: border-box;
    background: none;
}

/* Navigation: the active page as a gradient pill */
.app-sidebar-links > li.active > a:first-of-type,
.app-sidebar-links > li.active > a:first-of-type:hover {
    background: var(--qs-gradient);
    color: #fff;
    box-shadow: 0 6px 16px hsla(270, 80%, 50%, .22);
}

.app-sidebar-label {
    letter-spacing: .06em;
    font-size: .7rem;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background: var(--qs-gradient);
    color: #fff;
}

.website-tabs .nav-link {
    border-radius: var(--qs-radius-pill);
}

.website-tabs .nav-link:not(.active):hover {
    background: var(--primary-50);
    color: var(--primary-700) !important;
}

/* Home page: a soft brand gradient instead of the 66audit background pattern */
body .index-background {
    position: relative;
    overflow: hidden;
    background: var(--qs-gradient-soft);
    animation: none;
}

body .index-background::before {
    background: hsla(252, 90%, 60%, .22);
}

body .index-background::after {
    background: hsla(330, 90%, 60%, .18);
}

.index-background > .container {
    position: relative;
    z-index: 1;
}

body .index-header {
    font-size: clamp(2.1rem, 5.5vw, 3.75rem);
    font-weight: 800;
    line-height: 1.1;
    background: var(--qs-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

body .index-subheader {
    font-size: clamp(1.05rem, 2.2vw, 1.3rem);
    line-height: 1.6;
}

.index-content h2 {
    font-size: clamp(1.5rem, 3vw, 1.9rem);
}

.index-faq summary {
    cursor: pointer;
    list-style-position: outside;
}

.index-faq summary::marker {
    color: var(--primary);
}

body[data-theme-style="dark"] .index-background {
    background: linear-gradient(120deg, hsl(252, 40%, 12%) 0%, hsl(285, 35%, 12%) 55%, hsl(330, 35%, 12%) 100%);
}

/* Dark theme: the same shapes, softer shadows */
[data-theme-style="dark"] {
    --qs-shadow: 0 1px 2px hsla(0, 0%, 0%, .3), 0 8px 24px hsla(0, 0%, 0%, .25);
    --qs-shadow-hover: 0 2px 4px hsla(0, 0%, 0%, .35), 0 16px 40px hsla(0, 0%, 0%, .35);
}

[data-theme-style="dark"] a {
    color: var(--primary-300);
}

[data-theme-style="dark"] .card .card {
    border-color: var(--gray-200);
}

/* ------------------------------------------------------------------------------------------------------------------ */


/* The score history strip under an audit is a swipe strip with fading edges; its scrollbar is not needed */
.audit-archived-audits-wrapper {
    scrollbar-width: none !important;
}

.audit-archived-audits-wrapper::-webkit-scrollbar {
    display: none;
}

@media (max-width: 767.98px) {
    /* Rows with wide negative margins (home page cards) stay inside the container's gutter */
    .container > .row.mx-n4,
    .container .row.mx-n4 {
        margin-left: -15px !important;
        margin-right: -15px !important;
    }

    /* Page headers: the action buttons next to the title wrap instead of running off the screen */
    .flex-md-row > .d-flex.position-relative {
        flex-wrap: wrap;
        row-gap: .5rem;
    }

    /* Documentation tables wrap their text */
    .docs-page .table th,
    .docs-page .table td {
        white-space: normal !important;
        overflow-wrap: anywhere;
    }

    .table-custom-container.table-responsive {
        overflow-x: visible;
    }

    .table-custom,
    .table-custom tbody {
        display: block;
        width: 100%;
    }

    .table-custom thead {
        display: none;
    }

    .table-custom tbody tr {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: .5rem 1.25rem;
        padding: 1rem;
    }

    .table-custom tbody tr + tr {
        border-top: 1px solid var(--gray-100);
    }

    .table-custom tbody tr td {
        display: block;
        padding: 0;
        border-top: 0;
        min-width: 0;
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
    }

    .table-custom tbody tr td.d-none {
        display: none;
    }

    .table-custom tbody tr td.table-custom-primary {
        flex: 1 0 100%;
    }

    /* A cell spanning the whole table (an empty state) stays a plain line */
    .table-custom tbody tr td[colspan] {
        flex: 1 0 100%;
    }

    .table-custom tbody tr td[data-label]:not(.table-custom-primary)::before {
        content: attr(data-label);
        display: block;
        margin-bottom: .15rem;
        font-size: .7rem;
        font-weight: 600;
        letter-spacing: .02em;
        color: var(--gray-500);
    }

    /* Action menus and icon rows sit at the end of the card */
    .table-custom tbody tr td:last-child:not(.table-custom-primary) {
        margin-left: auto;
    }
}

/* Dark theme: the gradients made lighter so text keeps its contrast on dark backgrounds */
[data-theme-style="dark"] {
    --qs-gradient-text: linear-gradient(120deg, hsl(252, 95%, 78%) 0%, hsl(285, 90%, 78%) 55%, hsl(330, 95%, 78%) 100%);
}

body[data-theme-style="dark"] .index-header,
[data-theme-style="dark"] .navbar-brand {
    background: var(--qs-gradient-text);
    -webkit-background-clip: text;
    background-clip: text;
}

[data-theme-style="dark"] .app-sidebar-links > li.active > a:first-of-type,
[data-theme-style="dark"] .app-sidebar-links > li.active > a:first-of-type:hover {
    background: var(--qs-gradient);
    color: #fff;
}

/* Reading width of editorial text, and the severity select of the site contract */
.qs-prose {
    max-width: 52rem;
}

.qs-select-severity {
    min-width: 7.5rem;
}

/* Share buttons: brand colours (were style attributes of views/partials/share_buttons.php) */
.qs-share--808080 { color: #808080 !important; background-color: rgba(128, 128, 128, 0.1) !important; }
.qs-share--3a18f2 { color: #3a18f2 !important; background-color: rgba(58, 24, 242, 0.1) !important; }
.qs-share--3b5998 { color: #3b5998 !important; background-color: rgba(59, 89, 152, 0.1) !important; }
.qs-share--1877f2 { color: #1877F2 !important; background-color: rgba(24, 119, 242, 0.1) !important; }
.qs-share--1da1f2 { color: #1DA1F2 !important; background-color: rgba(29, 161, 242, 0.1) !important; }
.qs-share--e60023 { color: #E60023 !important; background-color: rgba(230, 0, 35, 0.1) !important; }
.qs-share--0077b5 { color: #0077B5 !important; background-color: rgba(0, 119, 181, 0.1) !important; }
.qs-share--ff4500 { color: #FF4500 !important; background-color: rgba(255, 69, 0, 0.1) !important; }
.qs-share--25d366 { color: #25D366 !important; background-color: rgba(37, 211, 102, 0.1) !important; }
.qs-share--0088cc { color: #0088cc !important; background-color: rgba(0, 136, 204, 0.1) !important; }
.qs-share--ffb700 { color: #FFB700 !important; background-color: rgba(255, 183, 0, 0.1) !important; }
.qs-share--464eb8 { color: #464EB8 !important; background-color: rgba(70, 78, 184, 0.1) !important; }

/* Rank number of the popular posts list on the blog pages (was an inline style attribute) */
.qs-blog-rank {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: normal;
}

/*
 * Visually hidden text (Bootstrap 4 .sr-only, .sr-only-focusable). The theme file does not define it and the Font Awesome
 * script only injects it once it runs, so without JavaScript every screen-reader text was shown on the page.
 */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
.sr-only-focusable:active, .sr-only-focusable:focus {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
}

/* QuikSEO: colours the public pages set with style attributes before (the public pages carry none): the footer socials
   (includes/admin_socials.php), the medals of Top Websites and the featured blog post */
.footer-social-wrapper.qs-social-threads { background-color: rgba(128, 128, 128, 0.1); }
.footer-social-wrapper.qs-social-threads i { color: #808080; }
.footer-social-wrapper.qs-social-youtube { background-color: rgba(255, 0, 0, 0.1); }
.footer-social-wrapper.qs-social-youtube i { color: #FF0000; }
.footer-social-wrapper.qs-social-facebook { background-color: rgba(24, 119, 242, 0.1); }
.footer-social-wrapper.qs-social-facebook i { color: #1877F2; }
.footer-social-wrapper.qs-social-x { background-color: rgba(29, 161, 242, 0.1); }
.footer-social-wrapper.qs-social-x i { color: #1DA1F2; }
.footer-social-wrapper.qs-social-instagram { background-color: rgba(193, 53, 132, 0.1); }
.footer-social-wrapper.qs-social-instagram i { color: #C13584; }
.footer-social-wrapper.qs-social-tiktok { background-color: rgba(105, 201, 208, 0.1); }
.footer-social-wrapper.qs-social-tiktok i { color: #69C9D0; }
.footer-social-wrapper.qs-social-linkedin { background-color: rgba(0, 119, 181, 0.1); }
.footer-social-wrapper.qs-social-linkedin i { color: #0077B5; }
.footer-social-wrapper.qs-social-whatsapp { background-color: rgba(37, 211, 102, 0.1); }
.footer-social-wrapper.qs-social-whatsapp i { color: #25D366; }
.footer-social-wrapper.qs-social-email { background-color: rgba(59, 89, 152, 0.1); }
.footer-social-wrapper.qs-social-email i { color: #3b5998; }
.qs-medal--1 { background: #fff3cd; }
.qs-medal--1 i { color: #d4af37; }
.qs-medal--2 { background: #f1f3f5; }
.qs-medal--2 i { color: #c0c0c0; }
.qs-medal--3 { background: #f3e1d0; }
.qs-medal--3 i { color: #cd7f32; }
.qs-featured-card { border-width: 2px; }
.announcement-wrapper [data-announcement-close] i { opacity: .5; }
.qs-toc-indent-1 { padding-left: 1.25rem; }
.qs-toc-indent-2 { padding-left: 2.5rem; }
.qs-toc-indent-3 { padding-left: 3.75rem; }
.qs-toc-indent-4 { padding-left: 5rem; }
.qs-rating-dim { opacity: .5; }
.qs-author-avatar { width: 4rem; height: 4rem; object-fit: cover; }
.qs-internal-notifications { width: 550px; max-width: 550px; }

/* Social login buttons (views/login, views/register): the black brand marks of X, Apple and GitHub light on the dark theme */
[data-theme-style="dark"] .btn-light img[src*="images/x.svg"],
[data-theme-style="dark"] .btn-light img[src*="images/apple.svg"],
[data-theme-style="dark"] .btn-light img[src*="images/github.svg"] { filter: invert(1); }