/* AugyTravel — component styles (warm light · forest + clay)
   Utility classes come from Tailwind (CDN in base.html for now; compiled build in Phase 2).
   The colour tokens are mirrored in the Tailwind config in base.html. */

:root {
    --ivory:#F7F4EE; --cream:#FBF9F4; --sand:#ECE3D3; --sand-2:#E4D9C4;
    --forest:#1E4634; --forest-deep:#163528; --pine:#356B52; --moss:#6E8C77;
    --clay:#FFA500; --clay-soft:#FFC266; --clay-dark:#B37400; --ink:#23271F; --stone:#71766B;
}

html { scroll-behavior: smooth; }
body { font-family:'Plus Jakarta Sans',sans-serif; background:var(--ivory); color:var(--ink); }
.font-display { font-family:'Fraunces',serif; }
.em { font-family:'Fraunces',serif; font-style:italic; color:var(--clay); }

.eyebrow { font-size:.875rem; letter-spacing:.16em; text-transform:uppercase; color:var(--clay); font-weight:700; }
@media (min-width:640px) {
    .eyebrow { font-size:1rem; letter-spacing:.18em; }
}

/* Section kickers (eyebrow labels with no tracking-widest override — i.e.
   not the small compact tags used on package/vehicle cards) get a short
   accent rule in front, so they read as a deliberate section marker rather
   than plain small caps text. */
.eyebrow:not([class*="tracking-widest"]) {
    display:inline-flex; align-items:center; gap:.6rem;
}
.eyebrow:not([class*="tracking-widest"])::before {
    content:''; display:inline-block; width:26px; height:3px; border-radius:3px;
    background:linear-gradient(90deg,var(--clay),var(--clay-soft)); flex:none;
}

.btn { display:inline-flex; align-items:center; justify-content:center; gap:.55rem; font-weight:600;
    border-radius:10px; padding:.95rem 1.7rem; transition:.25s; cursor:pointer; text-decoration:none; font-size:.95rem; }
.btn-primary { background:var(--forest); color:var(--ivory); }
.btn-primary:hover { background:var(--forest-deep); transform:translateY(-2px); }
.btn-ghost { border:1.5px solid rgba(30,70,52,.28); color:var(--forest); }
.btn-ghost:hover { background:rgba(30,70,52,.05); }
.btn-clay { background:var(--clay); color:#fff; }
.btn-clay:hover { background:var(--clay-dark); transform:translateY(-2px); }

.card { background:#fff; border:1px solid var(--sand); border-radius:22px; overflow:hidden;
    transition:transform .35s, box-shadow .35s; }
.card:hover { transform:translateY(-6px); box-shadow:0 26px 50px -28px rgba(30,70,52,.4); }
.card:hover .ci { transform:scale(1.06); }
.ci { transition:transform .6s ease; width:100%; height:100%; object-fit:cover; }

.arch { border-radius:140px 140px 20px 20px; }
.arch-sm { border-radius:80px 80px 18px 18px; }
.softshadow { box-shadow:0 30px 70px -34px rgba(30,70,52,.45); }
.rule { height:1px; background:linear-gradient(90deg,transparent,rgba(255,165,0,.5),transparent); }
.grain { background-image:radial-gradient(rgba(30,70,52,.05) 1px,transparent 1px); background-size:22px 22px; }

.navlink { position:relative; color:#3d423a; font-weight:500; transition:.2s; }
.navlink:hover { color:var(--forest); }

/* Offer bar — continuous horizontal ticker */
.offer-ticker-track { display:flex; width:max-content; animation:offer-scroll 32s linear infinite; }
#offerBar:hover .offer-ticker-track { animation-play-state:paused; }
.offer-ticker-set { display:flex; align-items:center; flex-shrink:0; padding:.65rem 0; white-space:nowrap; }
.offer-item { display:inline-flex; align-items:center; padding:0 1.75rem; }
.offer-sep { opacity:.35; }
@keyframes offer-scroll { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
    .offer-ticker-track { animation:none; }
}

/* Scroll-reveal cards (trust strip stats, desktop/tablet only). Uses margin
   instead of transform so it doesn't fight Tailwind's own hover:-translate-y
   utilities on the same element. */
.reveal-card { opacity:0; margin-top:18px; transition:opacity .6s ease, margin-top .6s ease; }
.reveal-card.is-visible { opacity:1; margin-top:0; }
@media (prefers-reduced-motion: reduce) {
    .reveal-card { opacity:1; margin-top:0; transition:none; }
}

/* Trust-strip stats — mobile-only continuous ticker (desktop keeps the
   static, scroll-revealed row above since all cards already fit there). */
.stat-ticker-track { animation:stat-ticker-scroll 24s linear infinite; }
@keyframes stat-ticker-scroll { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
    .stat-ticker-track { animation:none; }
}
.navlink::after { content:''; position:absolute; left:0; bottom:-6px; height:2px; width:0; background:var(--clay); transition:width .3s; }
.navlink:hover::after { width:100%; }

::-webkit-scrollbar { width:10px; }
::-webkit-scrollbar-track { background:var(--sand); }
::-webkit-scrollbar-thumb { background:var(--forest); border-radius:5px; }

/* Hide scrollbar for carousels */
.no-scrollbar::-webkit-scrollbar { display:none; }
.no-scrollbar { -ms-overflow-style:none; scrollbar-width:none; }

/* Scroll-reveal (lightweight: opacity + transform only) */
.reveal { opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1); will-change:opacity, transform; }
.reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity:1 !important; transform:none !important; transition:none !important; }
}