/* =========================================================
   Thrifty Theme — design tokens, base typography, layout
   Mirrors the plugin's landing-page palette so the homepage
   shortcode and the rest of the site read as one product.
   ========================================================= */

:root {
    --tt-red:          #DC2626;
    --tt-red-dark:     #B91C1C;
    --tt-red-light:    #EF4444;
    --tt-red-glow:     rgba(220, 38, 38, 0.3);
    --tt-black:        #0D0D0D;
    --tt-charcoal:     #1A1A1A;
    --tt-graphite:     #2A2A2A;
    --tt-steel:        #6e7e8c;
    --tt-steel-light:  #aab6c2;
    --tt-light:        #f3f4f6;
    --tt-light-2:      #e5e7eb;
    --tt-border:       #d8dde3;
    --tt-text:         #2a2a2a;
    --tt-text-light:   #5e6470;
    --tt-success:      #22c55e;
    --tt-success-dark: #16a34a;
    --tt-danger:       #ef4444;
    --tt-warn:         #eab308;

    --tt-font:         'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --tt-heading:      'Oswald', 'Roboto', sans-serif;

    --tt-radius-sm: 6px;
    --tt-radius:    10px;
    --tt-radius-lg: 16px;
    --tt-radius-xl: 24px;
    --tt-radius-pill: 999px;

    --tt-shadow-sm:   0 2px 6px rgba(0,0,0,0.06);
    --tt-shadow:      0 8px 20px rgba(0,0,0,0.08);
    --tt-shadow-lg:   0 18px 40px rgba(0,0,0,0.14);
    --tt-shadow-pop:  0 25px 60px rgba(0,0,0,0.22);

    --tt-ease:    cubic-bezier(0.25, 0.8, 0.25, 1);
    --tt-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
    --tt-tx:      0.25s var(--tt-ease);

    --tt-header-h:        78px;
    --tt-announce-h:      40px;
    --tt-container:       1240px;

    --tt-z-header:        90;
    --tt-z-drawer:        110;
    --tt-z-overlay:       105;
    --tt-z-toast:         200;
    --tt-z-scroll-top:    80;
}

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

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

body.thrifty-body {
    margin: 0;
    font-family: var(--tt-font);
    font-size: 16px;
    line-height: 1.6;
    color: var(--tt-text);
    background: #ffffff;
    overflow-x: clip;
}

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

a {
    color: var(--tt-red);
    text-decoration: none;
    transition: color var(--tt-tx);
}
a:hover { color: var(--tt-red-dark); }

h1, h2, h3, h4, h5 {
    font-family: var(--tt-heading);
    font-weight: 700;
    color: var(--tt-black);
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1.15;
    margin: 0 0 0.5em;
}

p { margin: 0 0 1em; }

.thrifty-container {
    max-width: var(--tt-container);
    margin: 0 auto;
    padding: 0 24px;
}

/* Full-width page body — used by page.php when the post hosts the
   [thrifty_quick_form] shortcode. The Easy Builder ships its own sticky
   header, controls, and inner padding; constraining it to the default
   .thrifty-page-body 920px max-width wastes ~60% of horizontal space
   on a 1920px monitor. Dual-class selector wins regardless of source
   order over the base .thrifty-page-body { max-width: 920px } rule
   that's defined later in this file. */
.thrifty-page-body.thrifty-page-body--full {
    max-width: none;
    margin: 0;
    padding: 0;
}

.screen-reader-text {
    border: 0; clip: rect(1px,1px,1px,1px); -webkit-clip-path: inset(50%); clip-path: inset(50%);
    height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important;
}

.skip-link {
    position: absolute; top: -100px; left: 8px;
    background: var(--tt-black); color: #fff; padding: 10px 16px; border-radius: var(--tt-radius);
    z-index: 1000; transition: top 0.2s ease;
}
.skip-link:focus { top: 8px; color: #fff; }

:focus-visible {
    outline: 3px solid var(--tt-red);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ----- Buttons (shared) ----- */
.thrifty-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 28px;
    font-family: var(--tt-font);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    border-radius: var(--tt-radius-pill);
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.18s var(--tt-spring), box-shadow var(--tt-tx), background-color var(--tt-tx), color var(--tt-tx), border-color var(--tt-tx);
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
}
.thrifty-btn:hover { transform: translateY(-2px); text-decoration: none; }

.thrifty-btn-large { padding: 17px 38px; font-size: 15px; }

.thrifty-btn-primary {
    background: linear-gradient(135deg, var(--tt-red), var(--tt-red-dark));
    border-color: var(--tt-red-dark);
    color: #fff;
    box-shadow: 0 6px 18px rgba(220,38,38,0.32);
}
.thrifty-btn-primary:hover {
    background: linear-gradient(135deg, var(--tt-red-light), var(--tt-red));
    color: #fff;
    box-shadow: 0 10px 24px rgba(220,38,38,0.42);
}

.thrifty-btn-dark {
    background: var(--tt-black);
    border-color: var(--tt-black);
    color: #fff;
}
.thrifty-btn-dark:hover { background: var(--tt-charcoal); color: #fff; }

.thrifty-btn-ghost {
    background: transparent;
    border-color: var(--tt-black);
    color: var(--tt-black);
}
.thrifty-btn-ghost:hover { background: var(--tt-black); color: #fff; }

.thrifty-btn-light {
    background: #fff;
    border-color: #fff;
    color: var(--tt-black);
}
.thrifty-btn-light:hover { background: var(--tt-light); }

/* ----- Generic content / page wrappers ----- */
.thrifty-page-header {
    background: linear-gradient(135deg, var(--tt-black) 0%, var(--tt-charcoal) 60%, var(--tt-red-dark) 130%);
    color: #fff;
    padding: 80px 0 60px;
    position: relative;
    overflow: hidden;
}
.thrifty-page-header::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at 75% 30%, rgba(220,38,38,0.18) 0%, transparent 55%),
                radial-gradient(ellipse at 10% 80%, rgba(220,38,38,0.10) 0%, transparent 50%);
    pointer-events: none;
}
.thrifty-page-header > .thrifty-container { position: relative; z-index: 1; }
.thrifty-page-eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    color: var(--tt-red);
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.thrifty-page-title {
    font-size: clamp(32px, 4.5vw, 56px);
    color: #fff;
    margin: 0 0 8px;
    letter-spacing: 1.5px;
}
.thrifty-page-body {
    padding: 60px 24px 90px;
    max-width: 920px;
    font-size: 17px;
    line-height: 1.75;
}
.thrifty-page-body :is(h2, h3, h4) { color: var(--tt-black); margin-top: 1.5em; }
.thrifty-page-body img { border-radius: var(--tt-radius); margin: 1em 0; }
.thrifty-page-body blockquote {
    border-left: 4px solid var(--tt-red);
    margin: 1.5em 0;
    padding: 0.5em 0 0.5em 24px;
    background: var(--tt-light);
    border-radius: 0 var(--tt-radius) var(--tt-radius) 0;
    font-style: italic;
    color: var(--tt-text);
}

/* ----- Pagination ----- */
.thrifty-archive .nav-links,
.thrifty-archive .navigation.pagination .nav-links {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin: 50px 0 30px;
    flex-wrap: wrap;
}
.thrifty-archive .nav-links a,
.thrifty-archive .nav-links span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border-radius: var(--tt-radius);
    font-weight: 700;
    font-size: 14px;
    background: #fff;
    border: 1px solid var(--tt-border);
    color: var(--tt-text);
    text-decoration: none;
    transition: var(--tt-tx);
}
.thrifty-archive .nav-links a:hover {
    background: var(--tt-black);
    border-color: var(--tt-black);
    color: #fff;
}
.thrifty-archive .nav-links .current {
    background: var(--tt-red);
    border-color: var(--tt-red);
    color: #fff;
}

/* ----- Generic empty / front fallback ----- */
.thrifty-empty,
.thrifty-front-fallback {
    text-align: center;
    padding: 80px 24px;
    color: var(--tt-text-light);
}

/* ----- Search form ----- */
.thrifty-search-form {
    display: flex;
    background: #fff;
    border: 2px solid var(--tt-border);
    border-radius: var(--tt-radius-pill);
    padding: 4px;
    max-width: 480px;
    transition: border-color var(--tt-tx), box-shadow var(--tt-tx);
}
.thrifty-search-form:focus-within {
    border-color: var(--tt-red);
    box-shadow: 0 0 0 4px var(--tt-red-glow);
}
.thrifty-search-input {
    flex: 1;
    border: 0;
    background: transparent;
    padding: 10px 18px;
    font: inherit;
    color: var(--tt-text);
    outline: none;
}
.thrifty-search-submit {
    border: 0;
    background: var(--tt-black);
    color: #fff;
    width: 44px; height: 44px;
    border-radius: 50%;
    cursor: pointer;
    transition: var(--tt-tx);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.thrifty-search-submit:hover { background: var(--tt-red); }

/* ----- 404 ----- */
.thrifty-404 {
    background: linear-gradient(135deg, var(--tt-black) 0%, var(--tt-charcoal) 100%);
    color: #fff;
    min-height: 70vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}
.thrifty-404::before {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(circle at 15% 30%, rgba(220,38,38,0.18), transparent 50%),
        radial-gradient(circle at 85% 70%, rgba(220,38,38,0.10), transparent 50%);
}
.thrifty-404-inner { position: relative; z-index: 1; text-align: center; padding: 80px 24px; }
.thrifty-404-code {
    font-family: var(--tt-heading);
    font-size: clamp(120px, 22vw, 240px);
    line-height: 0.9;
    background: linear-gradient(180deg, #fff 0%, var(--tt-red) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 12px;
    letter-spacing: 4px;
}
.thrifty-404-title {
    color: #fff;
    font-size: clamp(28px, 4vw, 44px);
    margin-bottom: 12px;
}
.thrifty-404-subtitle {
    color: rgba(255,255,255,0.72);
    max-width: 520px;
    margin: 0 auto 32px;
    font-size: 17px;
}
.thrifty-404-actions {
    display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
    margin-bottom: 36px;
}
.thrifty-404-search {
    max-width: 520px; margin: 0 auto;
}
.thrifty-404-search p { color: rgba(255,255,255,0.6); font-size: 14px; margin-bottom: 10px; }
.thrifty-404-search .thrifty-search-form {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.15);
}
.thrifty-404-search .thrifty-search-input { color: #fff; }
.thrifty-404-search .thrifty-search-input::placeholder { color: rgba(255,255,255,0.5); }

/* ----- Pre-footer CTA strip ----- */
.thrifty-prefooter {
    background: linear-gradient(135deg, var(--tt-red), var(--tt-red-dark));
    color: #fff;
    padding: 64px 24px;
    position: relative;
    overflow: hidden;
}
.thrifty-prefooter::before {
    content: ''; position: absolute; inset: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="d" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1.2" fill="rgba(255,255,255,0.12)"/></pattern></defs><rect width="100" height="100" fill="url(%23d)"/></svg>');
    pointer-events: none;
}
.thrifty-prefooter-inner {
    position: relative;
    max-width: var(--tt-container);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}
.thrifty-prefooter-eyebrow {
    display: inline-block;
    font-size: 12px; font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.85);
    margin-bottom: 8px;
}
.thrifty-prefooter h2 {
    font-size: clamp(28px, 3.6vw, 42px);
    color: #fff;
    margin: 0 0 6px;
}
.thrifty-prefooter p {
    color: rgba(255,255,255,0.85);
    font-size: 17px;
    margin: 0;
    max-width: 520px;
}
.thrifty-prefooter-actions {
    display: flex; gap: 12px; flex-wrap: wrap;
}
.thrifty-prefooter .thrifty-btn-primary {
    background: var(--tt-black);
    border-color: var(--tt-black);
    box-shadow: 0 8px 22px rgba(0,0,0,0.3);
}
.thrifty-prefooter .thrifty-btn-primary:hover {
    background: var(--tt-charcoal); color: #fff;
}
.thrifty-prefooter .thrifty-btn-ghost { color: #fff; border-color: #fff; }
.thrifty-prefooter .thrifty-btn-ghost:hover { background: #fff; color: var(--tt-black); }

/* ----- Toast notifications ----- */
.thrifty-toast-stack {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: var(--tt-z-toast);
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}
.thrifty-toast {
    pointer-events: auto;
    background: var(--tt-black);
    color: #fff;
    border-radius: var(--tt-radius);
    padding: 14px 18px;
    font-size: 14px;
    font-weight: 600;
    box-shadow: var(--tt-shadow-pop);
    border-left: 4px solid var(--tt-red);
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 260px;
    max-width: 360px;
    transform: translateX(120%);
    opacity: 0;
    transition: transform 0.4s var(--tt-spring), opacity 0.25s ease;
}
.thrifty-toast.is-visible { transform: translateX(0); opacity: 1; }
.thrifty-toast-icon {
    width: 32px; height: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(34,197,94,0.18);
    color: var(--tt-success);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px;
}
.thrifty-toast-error .thrifty-toast-icon { background: rgba(239,68,68,0.18); color: var(--tt-danger); }
.thrifty-toast-error { border-left-color: var(--tt-danger); }

/* ----- Scroll-to-top ----- */
.thrifty-scroll-top {
    position: fixed;
    bottom: 24px;
    left: 24px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--tt-black);
    color: var(--tt-red);
    border: 2px solid var(--tt-red);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity var(--tt-tx), transform var(--tt-tx), background var(--tt-tx), color var(--tt-tx);
    z-index: var(--tt-z-scroll-top);
    box-shadow: var(--tt-shadow);
}
.thrifty-scroll-top.is-visible {
    opacity: 1; pointer-events: auto; transform: translateY(0);
}
.thrifty-scroll-top:hover {
    background: var(--tt-red); color: #fff;
}

/* ----- Page transition fade-in ----- */
@keyframes thrifty-page-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}
.thrifty-main { animation: thrifty-page-in 0.4s var(--tt-ease); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .thrifty-main { animation: none; }
}

/* ----- Responsive container padding ----- */
@media (max-width: 768px) {
    .thrifty-container { padding: 0 18px; }
    .thrifty-page-header { padding: 60px 0 40px; }
    .thrifty-page-body { padding: 40px 18px 60px; font-size: 16px; }
    .thrifty-prefooter { padding: 48px 18px; }
    .thrifty-prefooter-inner { flex-direction: column; align-items: flex-start; }
}