/* ============================================================
   BASE.CSS — DJ's Dockside
   Tokens · Reset · Typography · Dividers · Animations · Utilities
   ============================================================ */

/* ── Design Tokens ── */
:root {
  --djs-navy:        #1d2e34;
  --djs-deep-blue:   #2e628b;
  --djs-sky:         #96c2da;
  --djs-sky-light:   #d6eaf5;
  --djs-sage:        #a6c6b3;
  --djs-sage-light:  #deeee6;
  --djs-sand:        #d8c6a5;
  --djs-sand-light:  #f5f0e6;
  --djs-gold:        #f1d97e;
  --djs-amber:       #e48343;
  --djs-amber-light: #fdf0e5;
  --djs-gray:        #6b7280;
  --djs-gray-light:  #f3f4f6;
  --djs-white:       #ffffff;
  --djs-off-white:   #faf9f6;

  --font-display: 'Carta Marina', sans-serif; 
  --font-script:  'Standing Flower Script', cursive;
  --font-body:    'Jost', sans-serif;

  --section-pad: 6rem 0;
  --transition:  0.32s cubic-bezier(0.4, 0, 0.2, 1);
  --shadow-sm:   0 2px 12px rgba(29,46,52,0.07);
  --shadow-md:   0 8px 32px rgba(29,46,52,0.10);
  --shadow-lg:   0 20px 60px rgba(29,46,52,0.14);

  /* MDB/Bootstrap border radius tokens */
  --bs-border-radius:       0.5rem;
  --bs-border-radius-sm:    0.25rem;
  --bs-border-radius-lg:    0.75rem;
  --bs-border-radius-xl:    1rem;
  --bs-border-radius-pill:  50rem;
}

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

body {
  font-family: var(--font-body);
  background: var(--djs-off-white);
  color: var(--djs-navy);
  font-weight: 300;
  line-height: 1.75;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a   { text-decoration: none; color: inherit; }

/* ── Typography ── */
.eyebrow {
  font-family: var(--font-script);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--djs-amber);
  display: block;
}

.eyebrow--blue  { color: var(--djs-deep-blue); }
.eyebrow--sage  { color: #5a8a6e; }
.eyebrow--sky   { color: var(--djs-sky); }
.eyebrow--deep  { color: var(--djs-deep-blue); }
.eyebrow--white { color: rgba(255,255,255,0.7); }

.section-title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
  font-weight: 300;
  line-height: 1.12;
  color: var(--djs-navy);
}

.section-title em         { font-style: italic; color: var(--djs-deep-blue); }
.section-title--white     { color: #fff; }
.section-title--white em  { color: var(--djs-sky); }

.section-subtitle {
  font-size: 1.02rem;
  font-weight: 300;
  color: var(--djs-gray);
  line-height: 1.7;
}

.lead {
  font-size: 1.02rem;
  font-weight: 300;
  color: var(--djs-gray);
  line-height: 1.75;
}

/* ── Dividers ── */
.rope-line {
  display: block;
  width: 48px;
  height: 2px;
  background: linear-gradient(90deg, var(--djs-amber), var(--djs-gold));
  border-radius: 2px;
  margin: 0.9rem 0 1.4rem;
}

.rope-line--center { margin-left: auto; margin-right: auto; }
.rope-line--blue   { background: linear-gradient(90deg, var(--djs-deep-blue), var(--djs-sky)); }
.rope-line--sage   { background: linear-gradient(90deg, var(--djs-sage), #7ab89a); }
.rope-line--white  { background: linear-gradient(90deg, rgba(255,255,255,0.6), rgba(255,255,255,0.2)); }

/* ── Animations ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(36px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes bob {
  0%,100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(8px); }
}

.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

.fade-up.in { opacity: 1; transform: translateY(0); }

.fade-up:nth-child(2) { transition-delay: 0.08s; }
.fade-up:nth-child(3) { transition-delay: 0.16s; }
.fade-up:nth-child(4) { transition-delay: 0.24s; }
.fade-up:nth-child(5) { transition-delay: 0.32s; }
.fade-up:nth-child(6) { transition-delay: 0.40s; }

/* ── Utilities ── */
.ph-label {
  display: flex; align-items: center; justify-content: center;
  font-size: 0.65rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,0.45); text-align: center; padding: 1rem;
  height: 100%;
}

/* ── Mobile base ── */
@media (max-width: 768px) {
  :root { --section-pad: 4rem 0; }
}

/* ── Global rounding defaults ── */
.activity-section__img,
.about-origin__img,
.owner-section__portrait,
.intro-img-main,
.intro-img-float,
.dine-img-main,
.page-hero__bg { border-radius: 0; } /* heroes stay sharp — intentional */

/* All content images and cards get rounded by default */
img:not(.nav-logo img):not(.footer-brand img):not(.bb-logo img):not(.act-bg):not(.owner-photo img) {
  border-radius: var(--bs-border-radius) !important; /* MDB's .rounded value */
}

.lodge-card,
.event-card,
.t-card,
.nearby-card,
.philosophy-card,
.about-stat,
.dine-feat,
.owner-quote,
.season-card,
.activity-section__img-ph {
  border-radius: var(--bs-border-radius);
}

ol, ul, dl {
  margin-bottom: 0px;
}