/* ============================================================
   Lotus Girl Travel — brand & design-system layer
   Loaded after built/screen.css in default.hbs (cascades on top).
   This file replaces the Code-injection <style> block; it is the
   single source of truth for the brand. Plain CSS (no build step).
   ============================================================ */

/* Fraunces (headings) — not bundled with Source, loaded from Google.
   Inter (body) and MoonTime (script accent) are bundled in the theme. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500;1,9..144,600&display=swap');

/* MoonTime — decorative script accent (logo-style flourishes only,
   NOT a heading/body font). Bundled at assets/fonts/moontime.ttf. */
@font-face {
    font-family: "MoonTime";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/moontime.ttf") format("truetype");
}

/* ---- 1. Brand tokens -------------------------------------- */
:root {
    --lg-ivory: #F7F3EA;
    --lg-warm-white: #FCFAF4;
    --lg-teal: #3E6B66;
    --lg-olive: #6B6840;          /* a11y-safe olive for small text/eyebrows (AA on ivory) */
    --lg-olive-deco: #7C7A4E;     /* decorative/large only (>=18.66px bold) */
    --lg-ink: #2B2B28;
    --lg-stone: #6E6A60;
    --lg-sand: #E4DCCB;
    --lg-pale-teal: #DCE7E2;

    /* Map brand fonts into Source's font hooks */
    --gh-font-heading: 'Fraunces', Georgia, serif;
    --gh-font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Retint Source's neutral system to the brand palette */
    --color-primary-text: var(--lg-ink);
    --color-darker-gray: var(--lg-ink);
    --color-secondary-text: var(--lg-stone);
    --color-border: var(--lg-sand);
}

/* ---- 2. Typography ---------------------------------------- */
h1, h2, h3, h4, h5, h6,
.is-title,
.gh-article-title, .gh-card-title, .post-card-title,
.gh-header-title, .gh-cta-title, .gh-footer-signup-header {
    font-family: var(--gh-font-heading);
}

body { color: var(--lg-ink); }

blockquote,
.gh-content blockquote {
    font-family: var(--gh-font-heading);
    font-style: italic;
    border-left: 3px solid var(--lg-olive);
}

/* Decorative script accent utility */
.lgt-script {
    font-family: "MoonTime", cursive;
    font-weight: 400;
    line-height: 1.1;
}

/* ---- 3. Eyebrows / tag labels (olive, uppercase) ---------- */
/* Card eyebrow — Source hides it by default; we surface it brand-wide. */
.gh-card-tag {
    display: block;
    margin-bottom: 6px;
    font-family: var(--gh-font-body);
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--lg-olive);
}

/* Article header eyebrow (primary tag) — olive, not teal */
.gh-article-tag {
    color: var(--lg-olive);
    font-weight: 600;
    letter-spacing: 0.08em;
}

/* Shared eyebrow used on tag pages and custom sections */
.lgt-eyebrow {
    font-family: var(--gh-font-body);
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--lg-olive);
    margin-bottom: 10px;
}

/* ---- 4. Meta ---------------------------------------------- */
.gh-card-meta, .gh-article-meta-content,
.gh-card-date, .gh-card-author, time {
    color: var(--lg-stone);
}

/* ---- 5. Editor callouts ----------------------------------- */
/* "Good to know" info callout = pale-teal + olive rule (no form). */
.kg-callout-card-grey,
.kg-callout-card.kg-callout-card-grey {
    background: var(--lg-pale-teal);
    border-left: 3px solid var(--lg-olive);
}

/* ============================================================
   6. Homepage — Browse-by-pillar tiles
   ============================================================ */
.lgt-pillars { margin-top: max(6vw, 56px); }

.lgt-section-title {
    margin-bottom: calc(var(--grid-gap) / 2);
    padding-bottom: 12px;
    font-family: var(--gh-font-body);
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 0.025em;
    text-transform: uppercase;
    color: var(--lg-olive);
    border-bottom: 1px solid var(--lg-sand);
}

.lgt-pillar-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--grid-gap);
}

.lgt-pillar-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 220px;
    padding: 24px;
    overflow: hidden;
    background: var(--lg-warm-white);
    border: 1px solid var(--lg-sand);
    color: var(--lg-ink);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.lgt-pillar-tile:hover {
    opacity: 1;
    transform: translateY(-3px);
    box-shadow: 0 12px 28px -16px rgba(43, 43, 40, 0.4);
}

.lgt-pillar-tile.has-image {
    background-size: cover;
    background-position: center;
    color: #fff;
    border: 0;
    min-height: 260px;
}

.lgt-pillar-tile.has-image::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(43,43,40,0) 30%, rgba(43,43,40,0.62) 100%);
}

.lgt-pillar-tile > * { position: relative; }

.lgt-pillar-eyebrow {
    font-family: var(--gh-font-body);
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--lg-olive);
    margin-bottom: 6px;
}

.lgt-pillar-tile.has-image .lgt-pillar-eyebrow { color: rgba(255,255,255,0.85); }

.lgt-pillar-name {
    font-family: var(--gh-font-heading);
    font-size: 2.2rem;
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.lgt-pillar-desc {
    margin-top: 8px;
    font-family: var(--gh-font-body);
    font-size: 1.4rem;
    line-height: 1.45;
    color: var(--lg-stone);
}

.lgt-pillar-tile.has-image .lgt-pillar-desc { color: rgba(255,255,255,0.92); }

@media (max-width: 991px) {
    .lgt-pillar-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
    .lgt-pillar-grid { grid-template-columns: 1fr; }
    .lgt-pillar-tile { min-height: 160px; }
}

/* ============================================================
   6b. "What I'm Obsessing Over This Week" — homepage module
   Editorial Strip: photo left, editorial note right. Auto-pulls
   the latest post tagged `obsessions`; hidden when none exists.
   ============================================================ */
.lgt-obsession { margin-top: max(5vw, 48px); }

.lgt-obsession-inner {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: clamp(24px, 3vw, 48px);
    align-items: stretch;
    min-height: 340px;
    overflow: hidden;
    background: var(--lg-warm-white);
    border: 1px solid var(--lg-sand);
}

.lgt-obsession-media { height: 100%; }
.lgt-obsession-media img { width: 100%; height: 100%; object-fit: cover; }

.lgt-obsession-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(28px, 3vw, 48px) clamp(28px, 3vw, 48px) clamp(28px, 3vw, 48px) 0;
}

.lgt-obsession-eyebrow {
    font-family: var(--gh-font-body);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--lg-olive);
}

.lgt-obsession-date {
    margin-top: 2px;
    font-family: var(--gh-font-body);
    font-size: 1.2rem;
    letter-spacing: 0.02em;
    color: var(--lg-stone);
}

.lgt-obsession-title {
    margin-top: 12px;
    font-family: var(--gh-font-heading);
    font-size: clamp(2.4rem, 1.4vw + 2rem, 3.4rem);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -0.015em;
}

.lgt-obsession-title a { color: var(--lg-ink); }
.lgt-obsession-title a:hover { color: var(--lg-teal); opacity: 1; }

.lgt-obsession-note {
    margin-top: 12px;
    max-width: 48ch;
    font-size: 1.6rem;
    line-height: 1.55;
    color: var(--lg-ink);
}

.lgt-obsession-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    width: fit-content;
    margin-top: 22px;
    padding: 0.72em 1.4em;
    font-family: var(--gh-font-body);
    font-weight: 600;
    font-size: 1.45rem;
    line-height: 1;
    color: #fff;
    background: var(--lg-teal);
    border-radius: 100px;
}
.lgt-obsession-btn:hover { opacity: 0.92; }

/* section header row (title + archive link) — Hybrid: links to the archive */
.lgt-obsession-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    margin-bottom: calc(var(--grid-gap) / 2);
    padding-bottom: 12px;
    border-bottom: 1px solid var(--lg-sand);
}
.lgt-obsession-head h2 {
    font-family: var(--gh-font-body);
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 0.025em;
    text-transform: uppercase;
    color: var(--lg-olive);
}
.lgt-obsession-archive {
    flex-shrink: 0;
    font-family: var(--gh-font-body);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--lg-teal);
}
.lgt-obsession-archive:hover { opacity: 0.8; }

@media (max-width: 767px) {
    .lgt-obsession-inner { grid-template-columns: 1fr; min-height: 0; }
    .lgt-obsession-media { aspect-ratio: 16 / 10; }
    .lgt-obsession-body { padding: 4px 24px 28px; }
}

/* ============================================================
   6c. Shop hub — category tiles (page-shop.hbs)
   ============================================================ */
.lgt-shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
    gap: var(--grid-gap);
}

/* "What I'm using lately" homepage strip reuses .lgt-obsession-head + .lgt-shop-grid */
.lgt-using { margin-top: max(6vw, 56px); }

/* ============================================================
   6d. Hero — eyebrow / descriptor / reassurance (Landing)
   Inherits the header text color (white over the cover image).
   ============================================================ */
.lgt-hero-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.lgt-hero-eyebrow {
    font-family: var(--gh-font-body);
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.82;
}

.lgt-hero-descriptor {
    max-width: 32ch;
    font-family: var(--gh-font-body);
    font-size: clamp(1.7rem, 0.4vw + 1.6rem, 2rem);
    line-height: 1.45;
    opacity: 0.92;
}

.lgt-hero-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: 100%;
}

.lgt-hero-reassure {
    font-family: var(--gh-font-body);
    font-size: 1.3rem;
    letter-spacing: 0.02em;
    opacity: 0.8;
}

/* ============================================================
   6e. About teaser (homepage, before footer)
   ============================================================ */
.lgt-about { margin-top: max(6vw, 56px); }

.lgt-about-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.lgt-about-title {
    margin-top: 6px;
    font-family: var(--gh-font-heading);
    font-size: clamp(2.6rem, 1.6vw + 2.1rem, 3.6rem);
    font-weight: 500;
    letter-spacing: -0.015em;
}

.lgt-about-text {
    margin-top: 14px;
    font-size: 1.75rem;
    line-height: 1.55;
    color: var(--lg-ink);
}

.lgt-about-link {
    margin-top: 18px;
    font-family: var(--gh-font-body);
    font-weight: 600;
    font-size: 1.5rem;
    color: var(--lg-teal);
}
.lgt-about-link:hover { opacity: 0.8; }

.lgt-about-sig {
    margin-top: 14px;
    font-size: 3.4rem;
    line-height: 1;
    color: var(--lg-olive);
}

/* ============================================================
   7. Newsletter band (Pale Teal) — homepage / tag pages
   ============================================================ */
.lgt-band {
    margin-top: max(6vw, 56px);
}

.lgt-band-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: clamp(48px, 4vw + 32px, 80px) clamp(24px, 3vw + 16px, 56px);
    background: var(--lg-pale-teal);
}

.lgt-band-title {
    font-family: var(--gh-font-heading);
    font-size: clamp(2.8rem, 1.4vw + 2.2rem, 3.8rem);
    font-weight: 500;
    letter-spacing: -0.015em;
    color: var(--lg-ink);
}

.lgt-band-sub {
    max-width: 560px;
    margin-top: 4px;
    font-size: 1.7rem;
    line-height: 1.45;
    color: var(--lg-ink);
}

.lgt-band .gh-form {
    margin-top: 24px;
    background-color: #fff;
}

.lgt-band-fine {
    margin-top: 16px;
    font-size: 1.3rem;
    color: var(--lg-stone);
}

/* ============================================================
   8. Footer — 4-column structure
   ============================================================ */
.lgt-footer-columns {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--grid-gap);
    padding-block: 8px 56px;
    margin-bottom: 56px;
    border-bottom: 1px solid var(--lg-sand);
}

.lgt-footer-col h3 {
    font-family: var(--gh-font-body);
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--lg-olive);
    margin-bottom: 16px;
}

.lgt-footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lgt-footer-col a {
    font-size: 1.5rem;
    color: var(--lg-ink);
}

.lgt-footer-col a:hover { color: var(--lg-teal); opacity: 1; }

@media (max-width: 767px) {
    .lgt-footer-columns { grid-template-columns: repeat(2, 1fr); gap: 32px; }
}