@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Inter:wght@400;500;600;700;800&display=swap");

/* The Sunshine — shared styles
   NOTE: colors are stored as "R G B" channel triplets (no commas, no rgb()).
   This is required so Tailwind's opacity modifiers (e.g. text-foreground/70,
   bg-background/85, border-border/70) resolve correctly. If these are ever
   defined as full color strings like oklch(...) or var(--x), Tailwind cannot
   apply the opacity slash and silently falls back to black text.
   Colors sourced from official logo: Deep orange #f9972d, Dark #1a1a1a, Yellow #f5c400 */

:root {
  --sun: 249 151 45;          /* #f9972d — logo sun belly orange */
  --sun-deep: 210 110 10;     /* #d26e0a — deeper logo orange */
  --sun-soft: 254 243 220;    /* #fef3dc — light warm yellow */
  --sun-yellow: 245 196 0;    /* #f5c400 — logo sun ray yellow */
  --cream: 254 252 247;
  --ink: 26 26 26;            /* #1a1a1a — logo text black */
  --background: 253 251 247;
  --foreground: 26 26 26;
  --card: 255 255 255;
  --border: 235 225 210;
  --muted: 246 241 232;
  --muted-foreground: 120 110 98;
  --success: 73 153 96;
  --font-sans: "Inter", system-ui, sans-serif;
  --font-display: "Fraunces", Georgia, serif;
}

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

body {
  background: rgb(var(--background));
  color: rgb(var(--foreground));
  font-family: "Inter", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.font-display {
  font-family: "Fraunces", Georgia, serif;
}

/* Performance: ensure fonts don't block rendering */
@font-face {
  font-display: swap;
}

/* Keyboard focus visible outline for accessibility */
:focus-visible {
  outline: 2px solid rgb(var(--sun));
  outline-offset: 2px;
  border-radius: 4px;
}
button:focus-visible, a:focus-visible {
  outline: 2px solid rgb(var(--sun));
  outline-offset: 3px;
}

/* Skip to content link for accessibility */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: rgb(var(--sun));
  color: #fff;
  padding: 8px 16px;
  z-index: 9999;
  font-size: 14px;
  font-weight: 600;
  border-radius: 0 0 8px 0;
  transition: top .2s;
}
.skip-link:focus {
  top: 0;
}

/* Marquee */
.marquee-track {
  animation: marquee 18s linear infinite;
  width: max-content;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Simple fade/slide-up reveal */
[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .marquee-track { animation: none; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* Hide scrollbar for pill rows */
.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* Line clamp utility */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

input[type="range"].accent-sun { accent-color: rgb(var(--sun)); }
input[type="checkbox"].accent-sun { accent-color: rgb(var(--sun)); }

.shadow-card {
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 8px 24px -12px rgb(0 0 0 / 0.08);
}
.shadow-pop {
  box-shadow: 0 10px 40px -10px rgb(var(--sun-deep) / 0.35);
}

/* Print styles */
@media print {
  .marquee-track, #site-header nav, #wa-fab, #back-to-top { display: none; }
}

/* Blog cover images — always full width, no crop */
.blog-cover-img,
img[src*="blog-covers"] {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  aspect-ratio: auto !important;
  display: block;
}

/* Header logo sizing */
.site-header-logo {
  width: 150px;
  height: auto;
  max-width: none;
  display: block;
}
@media (max-width: 767px) {
  .site-header-logo { width: 110px; }
}


/* ORIGINAL TYPOGRAPHY RESTORED */
body, button, input, select, textarea, option {
  font-family: "Inter", system-ui, sans-serif;
}
.font-sans { font-family: "Inter", system-ui, sans-serif !important; }
.font-display { font-family: "Fraunces", Georgia, serif !important; }

/* FULL-WIDTH LAYOUT WITH 80PX DESKTOP SIDE SPACING */
*, *::before, *::after { box-sizing: border-box; }
html, body { width: 100%; max-width: 100%; overflow-x: clip; }
main { width: 100%; max-width: none; }
main > section:not([aria-label="Featured collections"]),
main > .mx-auto,
.max-w-7xl,
.max-w-6xl,
.mx-auto.max-w-none {
  width: 100% !important;
  max-width: none !important;
  padding-left: 80px !important;
  padding-right: 80px !important;
}
/* Hero remains edge-to-edge; its content keeps an 80px safe area. */
section[aria-label="Featured collections"] { width: 100%; max-width: none; }
section[aria-label="Featured collections"] .hero-copy {
  padding-left: 80px !important;
  padding-right: 80px !important;
}

@media (max-width: 1199px) {
  main > section:not([aria-label="Featured collections"]),
  main > .mx-auto,
  .max-w-7xl,
  .max-w-6xl,
  .mx-auto.max-w-none {
    padding-left: 48px !important;
    padding-right: 48px !important;
  }
  section[aria-label="Featured collections"] .hero-copy {
    padding-left: 48px !important;
    padding-right: 48px !important;
  }
}
@media (max-width: 767px) {
  main > section:not([aria-label="Featured collections"]),
  main > .mx-auto,
  .max-w-7xl,
  .max-w-6xl,
  .mx-auto.max-w-none {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  section[aria-label="Featured collections"] .hero-copy {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* Reliable desktop navigation dropdown interaction */
@media (min-width: 1024px) {
  #site-header nav,
  #site-header nav ul,
  #site-header .nav-dropdown-item {
    overflow: visible !important;
  }
  #site-header .nav-dropdown-menu {
    pointer-events: auto;
  }
  #site-header .nav-dropdown-item::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 8px;
  }
}