/*
Theme Name: SpotRivals
Theme URI: https://spotrivals.com
Author: WordpressExpert
Author URI: https://wordpressexpert.nl
Description: Custom theme for SpotRivals - competitive intelligence for small businesses. Implements the shared design palette (Plus Jakarta Sans, indigo primary, rust accent, dark-navy neutral). Global styles live here; page-specific styles live under /inc/css and are enqueued conditionally by functions.php.
Version: 0.1.0
Requires at least: 5.2
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v3 or Later
License URI: https://www.gnu.org/licenses/gpl.html
Text Domain: competitorwatch
Tags: one-column, custom-menu, translation-ready

Based on BlankSlate by Web Guy (GPL). BlankSlate reset and a11y helpers retained.
*/

/* ──────────────────────────────────────────────
   BlankSlate reset (preserved)
   ────────────────────────────────────────────── */

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}
body{line-height:1}
a{text-decoration-skip-ink:auto}
a[href^="tel"]{color:inherit;text-decoration:none}
button,input,select,textarea{font-family:inherit;font-size:100%}
button{outline:0}
ol,ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}
table{border-collapse:collapse;border-spacing:0}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}

/* Accessibility helpers from BlankSlate */
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important;word-break:normal}
.screen-reader-text:focus{background-color:#f7f7f7;border-radius:3px;box-shadow:0 0 2px 2px rgba(0,0,0,.6);clip:auto!important;clip-path:none;color:#007acc;display:block;font-size:14px;font-size:.875rem;font-weight:700;height:auto;right:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}
.skip-link{left:-9999rem;top:2.5rem;z-index:999999999;text-decoration:underline}
.skip-link:focus{display:block;left:6px;top:7px;font-size:14px;font-weight:600;text-decoration:none;line-height:normal;padding:15px 23px 14px;z-index:100000;right:auto}

/* ──────────────────────────────────────────────
   Design tokens
   ────────────────────────────────────────────── */

:root {
    --clrInk: #0F172A;
    --clrInk85: rgba(15, 23, 42, 0.85);
    --clrInk70: rgba(15, 23, 42, 0.68);
    --clrInk40: rgba(15, 23, 42, 0.4);
    --clrPrimary: #4F46E5;
    --clrPrimaryDark: #3730A3;
    --clrPrimarySoft: #EEF0FF;
    --clrAccent: #F97316;
    --clrAccentDark: #EA580C;
    --clrAccentSoft: #FFEDD5;
    --clrMuted: #717086;
    --clrPaper: #F4F3FB;
    --clrPaperDeep: #ECEAF6;
    --clrSurface: #FFFFFF;
    --clrBorder: rgba(15, 23, 42, 0.09);
    --clrBorderStrong: rgba(15, 23, 42, 0.16);

    --radiusSm: 10px;
    --radiusMd: 18px;
    --radiusLg: 28px;
    --radiusXl: 36px;
    --radiusPill: 999px;

    --shadowCard: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 28px -14px rgba(15, 23, 42, 0.18);
    --shadowLift: 0 2px 4px rgba(15, 23, 42, 0.04), 0 28px 56px -24px rgba(79, 70, 229, 0.32);

    --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --container: 1200px;
}

/* ──────────────────────────────────────────────
   Base
   ────────────────────────────────────────────── */

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: "Plus Jakarta Sans", system-ui, sans-serif;
    font-size: 17px;
    line-height: 1.62;
    color: var(--clrInk);
    background: var(--clrPaper);
    background-image:
        radial-gradient(ellipse 60% 50% at 0% 0%, rgba(79, 70, 229, 0.10), transparent 60%),
        radial-gradient(ellipse 50% 40% at 100% 10%, rgba(249, 115, 22, 0.08), transparent 60%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "ss01", "cv11";
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background-image: radial-gradient(circle at 1px 1px, rgba(15, 23, 42, 0.05) 1px, transparent 0);
    background-size: 28px 28px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black, transparent 70%);
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }

h1, h2, h3, h4 {
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

mark {
    background: none;
    color: var(--clrAccent);
    font-style: italic;
    font-weight: 800;
    position: relative;
    white-space: nowrap;
}
mark::after {
    content: "";
    position: absolute;
    left: -0.04em;
    right: -0.04em;
    bottom: 0.06em;
    height: 0.14em;
    background: var(--clrAccent);
    opacity: 0.22;
    border-radius: 2px;
}

/* ──────────────────────────────────────────────
   Layout primitives
   ────────────────────────────────────────────── */

main { display: block; }

main > section {
    max-width: var(--container);
    margin-inline: auto;
    padding: clamp(4rem, 9vw, 8rem) clamp(1.25rem, 4vw, 3rem);
}

.sectionLabel {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--clrMuted);
    margin: 0 0 1.5rem;
}
.sectionLabel::before {
    content: "";
    width: 36px;
    height: 1px;
    background: currentColor;
}

.sectionHeader {
    margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
    max-width: 62ch;
}
.sectionHeader h2 {
    font-size: clamp(2rem, 4.5vw, 3.5rem);
    letter-spacing: -0.035em;
    line-height: 1.04;
}
.sectionHeader .sectionLead {
    margin-top: 1.25rem;
    color: var(--clrInk70);
    font-size: 1.125rem;
    max-width: 52ch;
}

/* ──────────────────────────────────────────────
   Buttons
   ────────────────────────────────────────────── */

.primaryButton {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 1rem 1.7rem;
    background: var(--clrPrimary);
    color: #fff;
    text-decoration: none;
    border-radius: var(--radiusPill);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 260ms var(--ease), transform 260ms var(--ease), box-shadow 260ms var(--ease);
    box-shadow: 0 1px 2px rgba(79, 70, 229, 0.28), 0 18px 36px -18px rgba(79, 70, 229, 0.55);
}
.primaryButton::after {
    content: "→";
    transition: transform 260ms var(--ease);
}
.primaryButton:hover {
    background: var(--clrPrimaryDark);
    transform: translateY(-1px);
    box-shadow: 0 1px 2px rgba(79, 70, 229, 0.32), 0 24px 44px -18px rgba(79, 70, 229, 0.65);
}
.primaryButton:hover::after { transform: translateX(4px); }
.primaryButton:focus-visible {
    outline: 2px solid var(--clrPrimary);
    outline-offset: 3px;
}
.primaryButtonLarge {
    padding: 1.2rem 2rem;
    font-size: 1rem;
}
.primaryButtonFull {
    justify-content: center;
    width: 100%;
}
.primaryButtonDisabled {
    background: var(--clrPaperDeep);
    color: var(--clrMuted);
    cursor: default;
    pointer-events: none;
    box-shadow: none;
    border-color: var(--clrBorder);
}
.primaryButtonDisabled::after { content: none; }

.ghostButton {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    text-decoration: none;
    color: var(--clrInk);
    font-size: 0.95rem;
    font-weight: 500;
    border-radius: var(--radiusPill);
    transition: background 220ms var(--ease);
}
.ghostButton::after {
    content: "→";
    transition: transform 240ms var(--ease);
}
.ghostButton:hover { background: rgba(15, 23, 42, 0.06); }
.ghostButton:hover::after { transform: translateX(3px); }

.headerActions {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: auto;
}

.authLink {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    padding: 0.5rem 0.85rem;
    text-decoration: none;
    color: var(--clrInk70);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: -0.005em;
    border-radius: var(--radiusPill);
    transition: color 200ms var(--ease), background 200ms var(--ease);
}
.authLink svg {
    flex: none;
    opacity: 0.7;
    transition: opacity 200ms var(--ease);
}
.authLink:hover {
    color: var(--clrInk);
    background: rgba(15, 23, 42, 0.06);
}
.authLink:hover svg { opacity: 1; }

.navCta {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.95rem 0.5rem 0.8rem;
    background: var(--clrInk);
    color: #fff;
    border-radius: var(--radiusPill);
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    transition: transform 200ms var(--ease), background 200ms var(--ease);
}
.navCta svg {
    flex: none;
    opacity: 0.9;
}
.navCta:hover {
    background: var(--clrPrimary);
    transform: translateY(-1px);
}

/* ──────────────────────────────────────────────
   Form primitives - shared across auth, dashboard,
   add-competitor, settings, any custom form the
   theme renders. Page-specific sheets may override.
   ────────────────────────────────────────────── */

.formField {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.fieldLabel {
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--clrInk);
}

.fieldLabelRow {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.fieldHelper {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--clrPrimary);
    text-decoration: none;
    transition: color 200ms var(--ease);
}
.fieldHelper:hover {
    color: var(--clrPrimaryDark);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.fieldInput {
    width: 100%;
    padding: 0.95rem 1.1rem;
    background: var(--clrPaper);
    border: 1px solid var(--clrBorder);
    border-radius: var(--radiusSm);
    font: inherit;
    font-size: 0.98rem;
    color: var(--clrInk);
    letter-spacing: -0.005em;
    transition: background 200ms var(--ease), border-color 200ms var(--ease), box-shadow 200ms var(--ease);
    -webkit-appearance: none;
    appearance: none;
}
.fieldInput::placeholder { color: var(--clrInk40); }
.fieldInput:hover { border-color: var(--clrBorderStrong); }
.fieldInput:focus {
    outline: none;
    background: var(--clrSurface);
    border-color: var(--clrPrimary);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.14);
}

select.fieldInput {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23717086' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 14px 14px;
    padding-right: 2.5rem;
    cursor: pointer;
}

.fieldRow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.9rem;
}

.fieldHint {
    font-size: 0.78rem;
    color: var(--clrMuted);
    letter-spacing: -0.005em;
    margin-top: 0.15rem;
}

@media (max-width: 520px) {
    .fieldRow { grid-template-columns: 1fr; gap: 1.15rem; }
}

.userChip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.28rem 0.85rem 0.28rem 0.3rem;
    background: var(--clrInk);
    color: #fff;
    border-radius: var(--radiusPill);
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    transition: background 200ms var(--ease), transform 200ms var(--ease);
}
.userChip:hover {
    background: var(--clrPrimary);
    transform: translateY(-1px);
}
.userChipAvatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
.userChipName {
    max-width: 10ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ──────────────────────────────────────────────
   Site header
   ────────────────────────────────────────────── */

.siteHeader {
    position: sticky;
    top: 0.75rem;
    z-index: 50;
    margin: 0.75rem auto 0;
    max-width: 1120px;
    padding: 0.35rem 0.4rem 0.35rem 1.05rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: saturate(180%) blur(22px);
    -webkit-backdrop-filter: saturate(180%) blur(22px);
    border: 1px solid var(--clrBorder);
    border-radius: var(--radiusPill);
    box-shadow: var(--shadowCard);
}
.brandMark {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9375rem;
    letter-spacing: -0.015em;
    color: var(--clrInk);
}
.brandGlyph {
    width: 22px;
    height: 22px;
    color: var(--clrPrimary);
}
.primaryNav {
    flex: 1 1 auto;
    min-width: 0;
}
.primaryNav ul {
    display: flex;
    gap: 1.4rem;
    justify-content: center;
}
.primaryNav a {
    text-decoration: none;
    font-size: 0.83rem;
    font-weight: 500;
    color: var(--clrInk70);
    transition: color 200ms var(--ease);
}
.primaryNav a:hover { color: var(--clrInk); }

/* ──────────────────────────────────────────────
   Hamburger - mobile-only toggle for .primaryNav
   Same DOM as desktop; re-skinned via .siteHeader.navOpen
   ────────────────────────────────────────────── */

.hamburger {
    display: none;
    width: 38px;
    height: 38px;
    padding: 0;
    margin: 0;
    background: transparent;
    border: 1px solid var(--clrBorder);
    border-radius: var(--radiusPill);
    color: var(--clrInk);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex: none;
    transition: background 200ms var(--ease), border-color 200ms var(--ease);
}
.hamburger:hover {
    background: rgba(15, 23, 42, 0.05);
    border-color: var(--clrBorderStrong);
}
.hamburger:focus-visible {
    outline: 2px solid var(--clrPrimary);
    outline-offset: 2px;
}
.hamburgerBox {
    display: block;
    width: 20px;
    height: 14px;
    position: relative;
}
.hamburgerBar {
    display: block;
    position: absolute;
    left: 0;
    width: 20px;
    height: 1px;
    background: currentColor;
    transform-origin: 50% 50%;
    transition: transform 280ms var(--ease), top 280ms var(--ease), opacity 180ms var(--ease);
}
.hamburgerBar:nth-child(1) { top: 0; }
.hamburgerBar:nth-child(2) { top: 6px; }
.hamburgerBar:nth-child(3) { top: 12px; }
.hamburger[aria-expanded="true"] .hamburgerBar:nth-child(1) {
    top: 6px;
    transform: rotate(45deg);
}
.hamburger[aria-expanded="true"] .hamburgerBar:nth-child(2) {
    opacity: 0;
}
.hamburger[aria-expanded="true"] .hamburgerBar:nth-child(3) {
    top: 6px;
    transform: rotate(-45deg);
}

/* ──────────────────────────────────────────────
   Site footer
   ────────────────────────────────────────────── */

.siteFooter {
    max-width: var(--container);
    margin: 0 auto;
    padding: 4rem clamp(1.25rem, 4vw, 3rem) 2rem;
}
.footerInner {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.3fr;
    gap: 3rem;
    padding-bottom: 3rem;
    border-bottom: 1px solid var(--clrBorder);
}
.footerBrand .brandMark { margin-bottom: 1rem; }
.footerBrand p {
    color: var(--clrMuted);
    font-size: 0.925rem;
    max-width: 30ch;
    line-height: 1.6;
}
.siteFooter nav h3,
.siteFooter address h3 {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--clrMuted);
    margin-bottom: 1.25rem;
}
.siteFooter nav ul {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.siteFooter nav a {
    text-decoration: none;
    font-size: 0.925rem;
    color: var(--clrInk70);
    transition: color 200ms var(--ease);
}
.siteFooter nav a:hover { color: var(--clrInk); }
.siteFooter address {
    font-style: normal;
    font-size: 0.925rem;
    color: var(--clrInk70);
    line-height: 1.7;
}
.siteFooter address a {
    color: var(--clrPrimary);
    text-decoration: none;
    font-weight: 500;
}
.siteFooter address a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}
.copyLine {
    margin-top: 1.75rem;
    font-size: 0.8rem;
    color: var(--clrMuted);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.copyLine a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ──────────────────────────────────────────────
   Motion - initial hidden state for scroll-revealed elements

   Applied only when JS has set `hasJs` on <html> via the inline
   script in header.php. If JS fails or is disabled, the class is
   never set and everything renders normally.
   ────────────────────────────────────────────── */

html.hasJs :is(
    .sectionHeader,
    .statsList > div,
    .stepList li,
    .featureCard,
    .showcaseFigure,
    .priceCard,
    .testimonialFigure,
    .faqSection details,
    .ctaSection,
    .pricingNote,
    .footerInner > *
) {
    opacity: 0;
    transform: translateY(20px);
    will-change: opacity, transform;
}

@media (prefers-reduced-motion: reduce) {
    html.hasJs :is(
        .sectionHeader,
        .statsList > div,
        .stepList li,
        .featureCard,
        .showcaseFigure,
        .priceCard,
        .testimonialFigure,
        .faqSection details,
        .ctaSection,
        .pricingNote,
        .footerInner > *
    ) {
        opacity: 1;
        transform: none;
    }
}

/* ──────────────────────────────────────────────
   Responsive - global chrome
   ────────────────────────────────────────────── */

@media (max-width: 960px) {
    .siteHeader {
        gap: 0.5rem;
        padding-right: 0.4rem;
    }

    .hamburger { display: inline-flex; }

    .primaryNav {
        position: absolute;
        top: calc(100% + 0.65rem);
        left: 0;
        right: 0;
        flex: 0 0 auto;
        background: rgba(255, 255, 255, 0.96);
        backdrop-filter: saturate(180%) blur(22px);
        -webkit-backdrop-filter: saturate(180%) blur(22px);
        border: 1px solid var(--clrBorder);
        border-radius: var(--radiusLg);
        box-shadow: var(--shadowCard);
        padding: 0.5rem 0.65rem;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition: opacity 260ms var(--ease), transform 260ms var(--ease), visibility 260ms var(--ease);
        pointer-events: none;
    }
    .siteHeader.navOpen .primaryNav {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
    }
    .primaryNav ul {
        flex-direction: column;
        gap: 0;
        align-items: stretch;
        justify-content: flex-start;
    }
    .primaryNav li {
        border-bottom: 1px solid var(--clrBorder);
    }
    .primaryNav li:last-child {
        border-bottom: 0;
    }
    .primaryNav a {
        display: block;
        padding: 0.9rem 1rem;
        font-size: 0.95rem;
    }

    .footerInner {
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem;
    }
    .footerBrand { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
    .authLink span,
    .navCta span { display: none; }
    .authLink { padding: 0.5rem; }
    .navCta { padding: 0.5rem 0.7rem; }

    .footerInner { grid-template-columns: 1fr; }
}