/* ==========================================================================
   GemsFarm theme: base
   Typography, compact rhythm, buttons, forms, fog + night backgrounds
   ========================================================================== */

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--gf-body);
    font-size: 14.5px;
    line-height: 1.6;
    font-weight: 400;
    color: var(--gf-ink-2);
    background: #fff;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a {
    transition: color .25s var(--gf-ease), opacity .25s var(--gf-ease);
}

a:hover {
    color: var(--gf-gold-700);
}

::selection {
    background: var(--gf-gold-200);
    color: var(--gf-ink);
}

:focus-visible {
    outline: 2px solid var(--gf-gold-500);
    outline-offset: 2px;
}

/* ---------- Type: Cormorant for display, Jost for everything else ---------- */
h1, h2, h3, h4,
.h1, .h2, .h3, .h4,
.s-title, .hero_title, .text-hero, .title-pop,
.font-instrument_serif, .font-playfair, .font-bebas {
    font-family: var(--gf-display);
    font-weight: 600;
    letter-spacing: .005em;
    color: inherit;
}

h1, h2, h3, h4 {
    line-height: 1.1;
    color: var(--gf-ink);
}

.text-hero {
    line-height: 1.02;
}

.cl-text-main { color: var(--gf-ink); }
.cl-text-4 { color: var(--text-4); }
.text-primary { color: var(--gf-gold-700) !important; }

/* ---------- Compact section rhythm (Omniva's spacing is far looser) ---------- */
[class*="flat-spacing"]:not([class*="flat-spacing-"]),
.flat-spacing-2, .flat-spacing-3, .flat-spacing-4, .flat-spacing-5,
.flat-spacing-6, .flat-spacing-7, .flat-spacing-8, .flat-spacing-9,
.flat-spacing-mix-2,
.themesFlat {
    padding-top: var(--gf-section-pad);
    padding-bottom: var(--gf-section-pad);
}

.spacing-bottom-1, .spacing-bottom-2, .spacing-bottom-8 {
    margin-bottom: clamp(22px, 3vw, 36px);
}

/* ---------- Section headings ---------- */
.sect-heading .s-title,
.sect-heading h2,
.sect-heading h3 {
    font-size: clamp(1.8rem, 3.4vw, 2.6rem);
    line-height: 1.1;
}

.sect-heading .s-desc {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
    color: var(--gf-muted);
}

.eyebrow-label,
.badge-sale-v2 {
    padding: 0;
    background: none;
    border-radius: 0;
}

.eyebrow-label .wrap,
.badge-sale-v2 .badge-wrap {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 0;
    background: none;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--gf-gold-700);
}

.eyebrow-label .wrap::before,
.eyebrow-label .wrap::after {
    content: "";
    width: 26px;
    height: 1px;
    background: var(--gf-gold-500);
    opacity: .6;
}

.badge-sale-v2 .badge-wrap {
    color: var(--gf-gold-200);
}

/* ---------- Buttons ---------- */
.tf-btn {
    height: 44px;
    padding-left: 24px;
    padding-right: 24px;
    font-family: var(--gf-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #fff;
    background: var(--gf-ink);
    border-radius: var(--gf-radius) !important;
}

.tf-btn .text-caption,
.tf-btn span {
    font-size: inherit;
    letter-spacing: inherit;
}

.tf-btn:hover {
    color: #fff;
    background: var(--gf-gold-500);
}

.tf-btn.btn-third:not(:hover),
.tf-btn.btn-fill:not(:hover) {
    color: var(--gf-night);
    background: var(--gf-gold-300);
}

.tf-btn.btn-third:hover {
    color: var(--gf-night);
    background: #fff;
}

.tf-btn.style-stroke-2:not(:hover),
.tf-btn.style-stroke-3:not(:hover),
.tf-btn.style-stroke-4:not(:hover) {
    color: var(--gf-ink);
    border-color: var(--gf-ink);
}

.tf-btn.style-stroke-2:hover,
.tf-btn.style-stroke-3:hover,
.tf-btn.style-stroke-4:hover {
    color: #fff;
    background: var(--gf-ink);
    border-color: var(--gf-ink);
}

.tf-btn.small {
    height: 38px;
}

/* Omniva sweeps a white gradient across .animate-btn; buttons here stay flat */
.animate-btn::after {
    display: none;
}

/* ---------- Forms ---------- */
.form-control,
.form-select,
.tf-field input,
input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="password"], input[type="search"], textarea, select {
    font-family: var(--gf-body);
    color: var(--gf-ink);
    border-color: var(--gf-line);
    border-radius: var(--gf-radius);
    box-shadow: none;
}

.form-control:focus,
.form-select:focus,
input:focus, textarea:focus, select:focus {
    border-color: var(--gf-gold-500);
    box-shadow: 0 0 0 3px rgba(253, 68, 0, .18);
    outline: none;
}

/* ---------- Flat tinted sections (light) ----------
   No gradients anywhere: each section is one solid, quiet tint, and neighbours alternate so the
   page reads as calm bands. Add .gf-fog (+ a tint modifier) to any section. */
.gf-fog,
.nk-hero-section,
.blog-hero,
.blog-single-header,
.thanks-section,
.account-page-wrapper {
    --fog-bg: var(--gf-ivory);
    position: relative;
    background: var(--fog-bg);
}

.gf-fog--emerald { --fog-bg: var(--gf-tint-emerald); }
.gf-fog--amethyst { --fog-bg: var(--gf-tint-amethyst); }
.gf-fog--sapphire { --fog-bg: var(--gf-tint-sapphire); }
.gf-fog--rose { --fog-bg: var(--gf-tint-rose); }
.gf-fog--aqua { --fog-bg: var(--gf-tint-aqua); }
.gf-fog--champagne { --fog-bg: var(--gf-tint-champagne); }
.nk-hero-section { --fog-bg: var(--gf-tint-sapphire); }
.blog-hero { --fog-bg: var(--gf-tint-rose); }
.blog-single-header { --fog-bg: var(--gf-tint-champagne); }
.thanks-section { --fog-bg: var(--gf-tint-emerald); }
.account-page-wrapper { --fog-bg: var(--gf-tint-champagne); }

/* ---------- Dark brand band: flat emerald, gold hairline. No particles or textures. ---------- */
.gf-night {
    position: relative;
    color: rgba(240, 236, 228, .8);
    background: var(--gf-emerald);
    border-top: 1px solid var(--gf-emerald-line);
    border-bottom: 1px solid var(--gf-emerald-line);
}

.gf-night h1, .gf-night h2, .gf-night h3, .gf-night h4 { color: #fff; }
.gf-night a:hover { color: var(--gf-gold-300); }

/* ---------- Width utilities (replace dynamic inline widths) ---------- */
.gf-w-0 { width: 0; }
.gf-w-5 { width: 5%; }   .gf-w-10 { width: 10%; }  .gf-w-15 { width: 15%; }  .gf-w-20 { width: 20%; }
.gf-w-25 { width: 25%; } .gf-w-30 { width: 30%; }  .gf-w-35 { width: 35%; }  .gf-w-40 { width: 40%; }
.gf-w-45 { width: 45%; } .gf-w-50 { width: 50%; }  .gf-w-55 { width: 55%; }  .gf-w-60 { width: 60%; }
.gf-w-65 { width: 65%; } .gf-w-70 { width: 70%; }  .gf-w-75 { width: 75%; }  .gf-w-80 { width: 80%; }
.gf-w-85 { width: 85%; } .gf-w-90 { width: 90%; }  .gf-w-95 { width: 95%; }  .gf-w-100 { width: 100%; }

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