/* ═══════════════════════════════════════════════════════════
   public-layout.css
   Shared layout for all customer-facing pages.
   Includes: fonts, design tokens, reset, nav, shared components.
   ═══════════════════════════════════════════════════════════ */

/* ─── Fonts ─────────────────────────────────────────────────
   Kanit served locally from /fonts/ — no CDN dependency.
   ─────────────────────────────────────────────────────────── */
@font-face {
    font-family: 'Kanit';
    src: url('/fonts/Kanit-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Kanit';
    src: url('/fonts/Kanit-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Kanit';
    src: url('/fonts/Kanit-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Kanit';
    src: url('/fonts/Kanit-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Kanit';
    src: url('/fonts/Kanit-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ─── Design Tokens ──────────────────────────────────────────
   All brand values live here. Pages and components inherit
   from these variables — never hard-code colours or spacing.
   ─────────────────────────────────────────────────────────── */
:root {
    /* Brand — sage green (from logo turtle) */
    --lt-sage:          #8ABF88;
    --lt-sage-dark:     #5B8F59;
    --lt-sage-mid:      #6FAA6E;
    --lt-sage-light:    #EAF4E9;
    --lt-sage-xlight:   #F4FAF3;

    /* Accent — warm stone / crystal gold */
    --lt-stone:         #C4A97A;
    --lt-stone-dark:    #9E7F4F;
    --lt-stone-light:   #F6EDE0;   /* warm parchment-stone (was cool #EEF4EE) */
    --lt-stone-xlight:  #FAF5ED;   /* warm parchment (was cool #F2F6F2) */

    /* Neutrals — warm-shifted for brand warmth */
    --lt-ink:           #28281F;   /* warm near-black */
    --lt-text:          #4A4A3A;   /* warm neutral body (was cool teal #3D4840) */
    --lt-text-soft:     #6A6A58;   /* warm soft (was #5E6B60) */
    --lt-text-muted:    #A0A090;   /* warm muted (was #96A498) */
    --lt-border:        #E0D8CF;   /* warm parchment border (was cool #D8E2D9) */
    --lt-border-light:  #ECE6DC;   /* warm light border (was #E5EDE6) */

    /* Surfaces — warm cream, not cool green-cream */
    --lt-cream:         #FAF8F3;   /* warm cream (was cool #F4F7F4) */
    --lt-white:         #FFFEFB;   /* warm white (was #FFFFFF) */

    /* Page backgrounds (2-tone sage + cream) */
    --bg-page:          #F1F6EF;   /* pale sage — default body bg */
    --bg-section-alt:   #FBF8F1;   /* warm cream — alternating sections */
    --bg-surface:       #FFFFFF;   /* cards */
    --bg-accent-sage:   #E6F0E4;   /* sage accent sections */

    /* Section spacing tokens */
    --section-y-lg:     96px;      /* hero, large feature sections */
    --section-y-md:     72px;      /* standard sections */
    --section-y-sm:     56px;      /* compact subsections */

    /* Typography */
    --font:             'Kanit', system-ui, sans-serif;
    --fw-light:         300;
    --fw-regular:       400;
    --fw-medium:        500;
    --fw-semibold:      600;
    --fw-bold:          700;

    /* Layout */
    --container:        1200px;
    --gutter:           clamp(16px, 4vw, 32px);
    --nav-h:            64px;

    /* Spacing scale */
    --sp-xs:    4px;
    --sp-sm:    8px;
    --sp-md:    16px;
    --sp-lg:    24px;
    --sp-xl:    40px;
    --sp-2xl:   52px;
    --sp-3xl:   80px;

    /* Hero-scale spacing — used by .lt-section and CTA band.
       Fluid: 64px at narrow → 96px at wide viewports. */
    --sp-section: clamp(64px, 8vw, 96px);

    /* Border radius */
    --r-sm:     6px;
    --r-md:     12px;
    --r-lg:     20px;
    --r-xl:     32px;
    --r-full:   9999px;

    /* Shadows */
    --shadow-sm:    0 1px 4px rgba(40, 40, 31, .08);
    --shadow-md:    0 4px 16px rgba(40, 40, 31, .12);
    --shadow-lg:    0 8px 32px rgba(40, 40, 31, .18);

    /* Transition */
    --ease:     0.25s ease;
}

/* ─── Reset ──────────────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

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

body {
    font-family: var(--font);
    font-weight: var(--fw-light);
    font-size: 16px;
    line-height: 1.75;
    color: var(--lt-text);
    background: var(--bg-page);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

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

button {
    cursor: pointer;
    border: none;
    background: none;
    font-family: var(--font);
}

/* ─── Container ──────────────────────────────────────────── */
.lt-container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* ─── Section scaffolding ────────────────────────────────── */
.lt-section {
    padding-block: var(--sp-section);
}

.lt-section--sm {
    padding-block: var(--sp-2xl);
}

.lt-section-header {
    text-align: center;
    margin-bottom: var(--sp-2xl);
}

.lt-section-label {
    display: inline-block;
    width: max-content;
    max-width: 100%;
    font-size: 12px;
    font-weight: var(--fw-semibold);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--lt-sage-dark);
    margin-bottom: var(--sp-md);
}

.lt-section-title {
    font-size: clamp(26px, 4vw, 40px);
    font-weight: var(--fw-semibold);
    color: var(--lt-ink);
    line-height: 1.3;
    white-space: pre-line;
    text-wrap: balance;       /* prevents widowed/orphaned words (modern browsers) */
    word-break: keep-all;     /* Thai + Latin: don't break mid-word */
}

.lt-section-sub {
    margin-top: var(--sp-md);
    font-size: 15px;
    color: var(--lt-text-soft);
    max-width: 500px;
    margin-inline: auto;
    line-height: 1.8;
}

/* ─── Buttons ────────────────────────────────────────────── */
.lt-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-sm);
    padding: 13px 30px;
    border-radius: var(--r-full);
    font-family: var(--font);
    font-size: 14px;
    font-weight: var(--fw-medium);
    letter-spacing: .03em;
    white-space: nowrap;
    transition:
        background var(--ease),
        color var(--ease),
        box-shadow var(--ease),
        transform var(--ease);
}

.lt-btn:active {
    transform: scale(.97);
}

.lt-btn--primary {
    background: var(--lt-sage);
    color: #fff;
}

.lt-btn--primary:hover {
    background: var(--lt-sage-dark);
    box-shadow: var(--shadow-md);
}

.lt-btn--outline {
    background: transparent;
    color: var(--lt-ink);
    box-shadow: inset 0 0 0 1.5px var(--lt-border);
}

.lt-btn--outline:hover {
    box-shadow: inset 0 0 0 1.5px var(--lt-sage);
    color: var(--lt-sage-dark);
}

.lt-btn--ghost-white {
    background: rgba(255, 255, 255, .22);
    color: #fff;
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.lt-btn--ghost-white:hover {
    background: rgba(255, 255, 255, .34);
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .90);
}

/* ─── Badge ──────────────────────────────────────────────── */
.lt-badge {
    display: inline-block;
    width: max-content;
    max-width: 100%;
    padding: 4px 14px;
    border-radius: var(--r-full);
    font-size: 12px;
    font-weight: var(--fw-medium);
    letter-spacing: .06em;
    background: var(--lt-sage-light);
    color: var(--lt-sage-dark);
}

/* ─── Navigation ─────────────────────────────────────────── */
/*
  Nav sits over a light cream hero — always opaque, dark text.
  On scroll, a subtle shadow reinforces the fixed position.
  If a future page needs a transparent-over-dark-image nav,
  add class `lt-nav--over-dark` to <header> and style it here.
*/
.lt-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    height: var(--nav-h);
    background: rgba(241, 246, 239, .92);   /* --bg-page at 92% */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: box-shadow var(--ease);
}

.lt-nav--scrolled {
    box-shadow: 0 1px 0 var(--lt-border-light), var(--shadow-sm);
}

.lt-nav__inner {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.lt-nav__brand {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.lt-nav__logo {
    height: 44px;
    width: auto;
}

.lt-nav__wordmark {
    font-size: 22px;
    font-weight: var(--fw-medium);
    color: var(--lt-sage-dark);
    letter-spacing: .3px;
    white-space: nowrap;
}

/* Desktop nav links */
.lt-nav__links {
    display: flex;
    align-items: center;
    gap: 30px;
}

.lt-nav__link {
    font-size: 14px;
    font-weight: var(--fw-medium);
    color: var(--lt-text);
    transition: color var(--ease);
    position: relative;
}

.lt-nav__link::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--lt-sage);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--ease);
}

.lt-nav__link:hover {
    color: var(--lt-sage-dark);
}

.lt-nav__link:hover::after {
    transform: scaleX(1);
}

/* CTA pill in nav */
.lt-nav__cta {
    padding: 9px 22px;
    border-radius: var(--r-full);
    font-size: 13px;
    font-weight: var(--fw-medium);
    letter-spacing: .02em;
    background: var(--lt-sage);
    color: #fff !important;
    transition: background var(--ease), box-shadow var(--ease);
}

.lt-nav__cta::after {
    display: none;
}

.lt-nav__cta:hover {
    background: var(--lt-sage-dark);
    box-shadow: var(--shadow-sm);
    color: #fff !important;
}

/* Hamburger — dark bars to match light nav */
.lt-nav__hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    padding: 6px;
    /* iOS Safari: reset default button appearance so flex layout renders */
    -webkit-appearance: none;
    appearance: none;
    background: none;
    border: none;
    cursor: pointer;
}

.lt-nav__hamburger span {
    display: block;
    width: 100%;   /* explicit — Safari flex-column doesn't always auto-stretch */
    height: 2px;   /* 1.5px can subpixel-round to 0 on high-DPI iOS */
    background: var(--lt-ink);
    border-radius: 2px;
    transition: transform var(--ease), opacity var(--ease);
    transform-origin: center;
}

.lt-nav__hamburger.is-open span:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
}

.lt-nav__hamburger.is-open span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.lt-nav__hamburger.is-open span:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
}

/* Mobile drawer */
.lt-nav__mobile {
    background: var(--lt-white);
    border-bottom: 1px solid var(--lt-border-light);
    padding: var(--sp-md) var(--gutter) var(--sp-lg);
    box-shadow: var(--shadow-md);
}

.lt-nav__mobile-link {
    display: block;
    padding: 14px 0;
    font-size: 16px;
    font-weight: var(--fw-medium);
    color: var(--lt-text);
    border-bottom: 1px solid var(--lt-border-light);
}

.lt-nav__mobile-link:last-child {
    border-bottom: none;
}

/* ─── Nav active state ───────────────────────────────────── */
.lt-nav__link.is-active:not(.lt-nav__cta) {
    color: var(--lt-sage-dark);
}

.lt-nav__link.is-active:not(.lt-nav__cta)::after {
    transform: scaleX(1);
}

.lt-nav__cta.is-active {
    background: var(--lt-sage-dark);
}

/* ─── Footer CTA Band ────────────────────────────────────── */
.lt-cta-band {
    background: var(--lt-sage-dark);
    text-align: center;
    padding-block: var(--sp-3xl);
}

.lt-cta-band__label {
    font-size: 11px;
    font-weight: var(--fw-semibold);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
    margin-bottom: 18px;
}

.lt-cta-band__title {
    font-size: clamp(26px, 4vw, 44px);
    font-weight: var(--fw-semibold);
    color: #fff;
    line-height: 1.3;
    margin-bottom: 16px;
    max-width: 680px;
    margin-inline: auto;
    text-wrap: balance;
}

.lt-cta-band__sub {
    font-size: 15px;
    color: rgba(255, 255, 255, .72);
    font-weight: var(--fw-light);
    line-height: 1.75;
    max-width: 440px;
    margin-inline: auto;
    margin-bottom: 38px;
}

/* ─── Site Footer ────────────────────────────────────────── */
.lt-footer {
    background: var(--lt-ink);
    padding-top: var(--sp-3xl);
    padding-bottom: var(--sp-2xl);
}

/* Three-column body: Brand | Navigation | Social */
.lt-footer__body {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: clamp(32px, 6vw, 80px);
    align-items: start;
    margin-bottom: var(--sp-2xl);
}

/* ── Brand column ── */
.lt-footer__brand-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.lt-footer__brand-link {
    display: inline-block;
}

.lt-footer__logo {
    height: 36px;
    width: auto;
    filter: brightness(0) invert(1);
    opacity: .50;
}

.lt-footer__tagline {
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .30);
    margin-top: 2px;
}

.lt-footer__brand-desc {
    font-size: 13px;
    color: rgba(255, 255, 255, .42);
    line-height: 1.72;
    font-weight: var(--fw-light);
    max-width: 200px;
    margin-top: 4px;
}

/* ── Column headings (Navigation + Social) ── */
.lt-footer__col-heading {
    font-size: 11px;
    font-weight: var(--fw-semibold);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .28);
    margin-bottom: var(--sp-md);
}

/* ── Navigation column ── */
.lt-footer__nav-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.lt-footer__nav-link {
    font-size: 13px;
    font-weight: var(--fw-light);
    color: rgba(255, 255, 255, .50);
    transition: color var(--ease);
}

.lt-footer__nav-link:hover {
    color: rgba(255, 255, 255, .88);
}

/* ── Social column ── */
.lt-footer__social-col {
    display: flex;
    flex-direction: column;
}

.lt-footer__social-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lt-footer__social-link {
    font-size: 13px;
    font-weight: var(--fw-medium);
    color: rgba(255, 255, 255, .50);
    transition: color var(--ease);
    white-space: nowrap;
}

.lt-footer__social-link:hover {
    color: var(--lt-sage);
}

/* ── Bottom bar ── */
.lt-footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, .07);
    padding-top: var(--sp-lg);
}

.lt-footer__copy {
    font-size: 12px;
    color: rgba(255, 255, 255, .22);
    text-align: center;
}

/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width: 767px) {
    .lt-nav__links {
        display: none;
    }

    .lt-nav__hamburger {
        display: flex;
    }

    /* Footer: single column on mobile */
    .lt-footer__body {
        grid-template-columns: 1fr;
        gap: var(--sp-xl);
    }

    .lt-footer__brand-desc {
        max-width: 100%;
    }

    /* Navigation: wrap into 2-column pill grid on mobile */
    .lt-footer__nav-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px 20px;
    }

    /* Social: horizontal row */
    .lt-footer__social-links {
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--sp-md);
    }

    .lt-footer__copy {
        text-align: left;
    }
}

/* CTA band tighter on mobile */
@media (max-width: 640px) {
    .lt-cta-band {
        padding-block: clamp(48px, 12vw, 72px);
    }

    .lt-section-header {
        margin-bottom: var(--sp-xl);
    }
}

/* ═══════════════════════════════════════════════════════════
   Support modal — "ส่งผักบุ้งเป็นกำลังใจให้เต่าน้อย"
   Reusable across pages via partials/support-modal.blade.php
   ═══════════════════════════════════════════════════════════ */
.lt-support-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(40, 40, 31, .55);
    z-index: 999;
    align-items: center;
    justify-content: center;
    padding: 24px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.lt-support-overlay.open { display: flex; }

.lt-support-box {
    background: var(--lt-white);
    border-radius: var(--r-xl);
    padding: 28px 24px 20px;
    width: 100%;
    max-width: 340px;
    text-align: center;
    box-shadow: var(--shadow-lg);
    animation: ltSupportPopIn .22s ease;
    box-sizing: border-box;
}
@keyframes ltSupportPopIn {
    from { transform: scale(.9); opacity: 0; }
    to   { transform: scale(1);  opacity: 1; }
}

.lt-support-box__title {
    font-size: 16px;
    color: var(--lt-ink);
    font-weight: var(--fw-medium);
    margin-bottom: 6px;
    line-height: 1.4;
}
.lt-support-box__sub {
    font-size: 13px;
    color: var(--lt-text-soft);
    line-height: 1.65;
    margin-bottom: 18px;
}
.lt-support-box__img {
    width: 220px;
    height: 220px;
    max-width: 100%;
    object-fit: contain;
    border-radius: var(--r-md);
    border: 1px solid var(--lt-border);
    display: block;
    margin: 0 auto 16px;
    background: #fff;
}

.lt-support-box__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 11px 16px;
    border-radius: var(--r-full);
    font-family: var(--font);
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: opacity var(--ease), border-color var(--ease);
    box-sizing: border-box;
    margin-top: 8px;
}
.lt-support-box__btn--ig {
    background: linear-gradient(135deg, #F9A825 0%, #E91E63 50%, #9C27B0 100%);
    color: #fff;
    border: none;
}
.lt-support-box__btn--ig:hover { opacity: .9; }
.lt-support-box__btn--close {
    background: none;
    border-color: var(--lt-border);
    color: var(--lt-text-soft);
}
.lt-support-box__btn--close:hover {
    border-color: var(--lt-sage);
}