/* ==========================================================================
   Global — CSS variables, resets, typography, container, section utilities.
   Source of truth: landerblock_homepage_template.html
   ========================================================================== */

:root {
    --primary: #6d7cff;
    --secondary: #8a4bd6;
    --dark: #111827;
    --text: #1f2937;
    --muted: #6b7280;
    --light: #f5f7fb;
    --white: #ffffff;
    --border: #e8ecf4;
    --shadow: 0 10px 30px rgba(17, 24, 39, 0.08);
    --radius-lg: 24px;
    --radius-md: 18px;
    --radius-sm: 12px;
    --container: 1366px;
    --grad-hero: linear-gradient(135deg, #6d7cff, #8a4bd6);
}

/* --- Base resets & typography --- */

body {
    font-family: 'Outfit', sans-serif;
    background: var(--light);
    color: var(--text);
    line-height: 1.6;
}

/* --- Headings --- */

h1, h2, h3, h4, h5, h6 {
    color: var(--dark);
    font-weight: 700;
    line-height: 1.2;
    margin-top: 0;
    margin-bottom: 0.6em;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    color: inherit;
}

h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
    color: var(--secondary);
}

h1 { font-size: clamp(32px, 4vw, 48px); font-weight: 800; }
h2 { font-size: clamp(26px, 3vw, 36px); font-weight: 800; }
h3 { font-size: clamp(20px, 2.5vw, 26px); }
h4 { font-size: 20px; }
h5 { font-size: 17px; }
h6 { font-size: 15px; }

/* --- Paragraphs and lists --- */

p {
    margin-bottom: 1em;
    color: var(--text);
}

ul, ol {
    color: var(--text);
    margin-bottom: 1em;
    padding-left: 1.5em;
}

li {
    margin-bottom: 0.4em;
    color: var(--text);
}

a {
    color: inherit;
    text-decoration: none;
}

a:hover {
    color: var(--secondary);
}

img {
    max-width: 100%;
    display: block;
}

/* --- Container override --- */

.container {
    width: 80%;
    max-width: var(--container);
    margin: 0 auto;
}

@media (max-width: 768px) {
    .container {
        width: 90%;
    }
}

@media (max-width: 480px) {
    .container {
        width: calc(100% - 32px);
    }
}

/* --- Responsive grid utilities --- */

.lb-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.lb-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.lb-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

@media (max-width: 768px) {
    .lb-grid-2 { grid-template-columns: 1fr; gap: 24px; }
    .lb-grid-3 { grid-template-columns: 1fr; }
    .lb-grid-4 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
    .lb-grid-4 { grid-template-columns: 1fr; }
}

/* --- Section padding utilities --- */

.lb-section {
    padding: 26px 0;
}

.lb-pt--none    { padding-top: 0; }
.lb-pt--small   { padding-top: 24px; }
.lb-pt--medium  { padding-top: 48px; }
.lb-pt--large   { padding-top: 64px; }

.lb-pb--none    { padding-bottom: 0; }
.lb-pb--small   { padding-bottom: 24px; }
.lb-pb--medium  { padding-bottom: 48px; }
.lb-pb--large   { padding-bottom: 64px; }

/* --- Section background utilities --- */

.lb-bg--default     { background: var(--light); }
.lb-bg--light-grey  { background: #f0f2f7; }
.lb-bg--gradient    { background: var(--grad-hero); color: var(--white); }
.lb-bg--gradient h1, .lb-bg--gradient h2, .lb-bg--gradient h3,
.lb-bg--gradient h4, .lb-bg--gradient h5, .lb-bg--gradient h6,
.lb-bg--gradient p, .lb-bg--gradient li, .lb-bg--gradient a,
.lb-bg--gradient .checklist-item, .lb-bg--gradient strong { color: var(--white) !important; }

/* Stat box values keep their accent colour even inside gradient sections */
.lb-bg--gradient .stat-box strong { color: var(--secondary) !important; }
.lb-bg--gradient .stat-box span { color: rgba(255,255,255,0.7) !important; }
.lb-bg--white-card  { background: var(--white); }

/* --- Guide content link styling --- */

.guide-content a,
.single-guide-wrapper a:not(.btn):not(.icon-btn):not(.guide-link),
.tab-pane a,
.entry-content a {
    color: var(--secondary);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(138, 75, 214, 0.3);
    text-underline-offset: 2px;
    transition: color 0.15s, text-decoration-color 0.15s;
}

.guide-content a:hover,
.single-guide-wrapper a:not(.btn):not(.icon-btn):not(.guide-link):hover,
.tab-pane a:hover,
.entry-content a:hover {
    color: var(--primary);
    text-decoration-color: var(--primary);
}

/* --- Guide content headings --- */

.guide-content h2 {
    color: var(--primary);
    font-size: clamp(22px, 3vw, 28px);
    font-weight: 800;
    margin-top: 40px;
    margin-bottom: 16px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
}

.guide-content h2:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.guide-content h3 {
    color: var(--secondary);
    font-size: clamp(18px, 2.5vw, 22px);
    font-weight: 700;
    margin-top: 32px;
    margin-bottom: 12px;
}

.guide-content h4 {
    color: var(--dark);
    font-weight: 700;
    margin-top: 24px;
    margin-bottom: 10px;
}

/* Guide sidebar sticky — desktop only */
.guide-sidebar-sticky {
    position: sticky;
    top: 110px;
}

@media (max-width: 991px) {
    .guide-sidebar-sticky {
        position: static;
    }
}

/* --- Guide CTA block --- */

.guide-cta {
    background: var(--grad-hero);
    border-radius: var(--radius-lg);
    padding: 32px;
    margin-top: 32px;
    text-align: center;
}

.guide-cta h3 {
    color: var(--white) !important;
    font-size: 22px;
    font-weight: 800;
    margin: 0 0 10px;
    border: none;
    padding: 0;
}

.guide-cta p {
    color: rgba(255,255,255,0.85) !important;
    font-size: 15px;
    margin-bottom: 20px;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

.guide-cta .btn {
    background: var(--white);
    color: var(--secondary) !important;
    font-weight: 700;
}

.guide-cta .btn:hover {
    opacity: 0.9;
}

/* --- Cart count badge --- */

.icon-btn {
    position: relative;
}

.cart-count {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--secondary);
    color: var(--white);
    font-size: 10px;
    font-weight: 800;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    line-height: 1;
}

/* --- Main wrapper --- */

.lb-main {
    min-height: 60vh;
}

/* --- Bootstrap overrides --- */

.card {
    border-radius: var(--radius-lg);
    border-color: var(--border);
}