/* Kendall Tiles — custom styles on top of Tailwind */

/* ============================================================
   THEME PALETTES — driven via CSS variables so the theme picker
   can swap colors live. Default = "brick" (current).
   Values are RGB triplets (no commas) so Tailwind's alpha-value
   modifier works (e.g. bg-ink/85).
   ============================================================ */

:root,
[data-theme="brick"] {
  --c-cream:        242 235 221;   /* warm beige */
  --c-ink:           43  34  24;   /* warm dark brown */
  --c-muted:        110  90  69;   /* warm muted brown */
  --c-line:         214 197 168;   /* warm tan border */
  --c-accent:       156  50  33;   /* brick red */
  --c-accent-dark:  122  38  21;
}

[data-theme="coastal"] {
  --c-cream:        244 237 222;
  --c-ink:           31  45  51;   /* deep slate-blue */
  --c-muted:         95 115 125;
  --c-line:         215 200 174;
  --c-accent:        15  96 104;   /* ocean teal */
  --c-accent-dark:   11  70  76;
}

[data-theme="adobe"] {
  --c-cream:        242 231 213;   /* warm clay-cream */
  --c-ink:           44  33  23;
  --c-muted:        125  95  70;
  --c-line:         221 201 168;
  --c-accent:       199 110  60;   /* burnt orange */
  --c-accent-dark:  168  88  45;
}

[data-theme="workshop"] {
  --c-cream:        242 235 221;
  --c-ink:           31  42  34;   /* deep forest-brown */
  --c-muted:         95 105  85;
  --c-line:         214 204 174;
  --c-accent:        47  90  64;   /* forest green */
  --c-accent-dark:   35  70  50;
}

[data-theme="slate"] {
  --c-cream:        240 234 217;
  --c-ink:           42  40  32;
  --c-muted:        110 105  80;
  --c-line:         212 200 172;
  --c-accent:       201 145  46;   /* mustard / ochre */
  --c-accent-dark:  168 115  30;
}

[data-theme="navy"] {
  --c-cream:        244 236 218;
  --c-ink:           24  41  63;   /* deep navy */
  --c-muted:         90 110 130;
  --c-line:         213 200 174;
  --c-accent:        33  76 111;   /* navy blue */
  --c-accent-dark:   20  55  85;
}


html { scroll-behavior: smooth; }

/* keep plain default font features — no modern OpenType tweaks */

/* ---------- Skip-to-content link (keyboard a11y) ----------
   Hidden until focused, then jumps into view at top-left. */
.skip-link {
  position: absolute;
  left: 0.75rem;
  top: -100px;
  z-index: 100;
  background: rgb(var(--c-ink));
  color: rgb(var(--c-cream));
  padding: 0.65rem 1rem;
  border-radius: 4px;
  font-size: 0.875rem;
  text-decoration: none;
  transition: top 150ms ease;
}
.skip-link:focus { top: 0.75rem; outline: 2px solid rgb(var(--c-accent)); outline-offset: 2px; }

/* ---------- Visible focus ring for keyboard users ---------- */
:focus-visible {
  outline: 2px solid rgb(var(--c-accent));
  outline-offset: 2px;
  border-radius: 2px;
}
input:focus-visible,
textarea:focus-visible,
select:focus-visible { outline: none; } /* form fields handle their own focus via border */

/* ---------- Hero photo placeholder ---------- */
.tile-hero-placeholder {
  background-color: #cbb7a1;
  background-image:
    /* warm bloom */
    radial-gradient(120% 80% at 20% 10%, rgba(255, 240, 220, 0.85), transparent 55%),
    radial-gradient(80% 60% at 85% 90%, rgba(60, 40, 30, 0.55), transparent 60%),
    /* travertine-like banding */
    repeating-linear-gradient(115deg,
      rgba(120, 90, 65, 0.10) 0 6px,
      rgba(255, 245, 230, 0.06) 6px 18px,
      rgba(70, 50, 40, 0.08) 18px 32px),
    linear-gradient(160deg, #c9b193 0%, #8c6a4e 100%);
}

/* ---------- Category placeholders ----------
   Each uses a base color + subtle pattern that reads as that material.
   Replace with <img> in markup whenever real photos are available. */

.cat-porcelain {
  background-color: #d8dadd;
  background-image:
    radial-gradient(60% 50% at 30% 30%, rgba(255,255,255,0.7), transparent 60%),
    radial-gradient(70% 60% at 80% 80%, rgba(120,130,140,0.35), transparent 60%),
    linear-gradient(140deg, #e3e5e8 0%, #b9bcc1 100%);
}

.cat-ceramic {
  /* glossy cream subway-tile feel */
  background-color: #efe7da;
  background-image:
    repeating-linear-gradient(90deg,
      rgba(0,0,0,0.05) 0 1px, transparent 1px 70px),
    repeating-linear-gradient(0deg,
      rgba(0,0,0,0.05) 0 1px, transparent 1px 35px),
    radial-gradient(80% 60% at 30% 20%, rgba(255,255,255,0.75), transparent 60%),
    linear-gradient(160deg, #f3ecdf 0%, #d8c9ad 100%);
}

.cat-bathroom {
  /* cool blue-grey, hexagonal hint via gradients */
  background-color: #c9d2d3;
  background-image:
    radial-gradient(60% 60% at 20% 80%, rgba(255,255,255,0.5), transparent 60%),
    radial-gradient(70% 60% at 80% 20%, rgba(70,90,100,0.35), transparent 60%),
    linear-gradient(150deg, #dbe3e4 0%, #97a7ac 100%);
}

.cat-travertine {
  background-color: #c8a988;
  background-image:
    repeating-linear-gradient(110deg,
      rgba(80, 55, 35, 0.10) 0 4px,
      rgba(255, 240, 220, 0.10) 4px 14px),
    radial-gradient(80% 70% at 70% 20%, rgba(255,235,210,0.7), transparent 60%),
    linear-gradient(150deg, #d9bb97 0%, #8e6a48 100%);
}

.cat-wood {
  /* warm engineered oak planks */
  background-color: #a37853;
  background-image:
    repeating-linear-gradient(0deg,
      rgba(0,0,0,0.18) 0 1px, transparent 1px 60px),
    repeating-linear-gradient(95deg,
      rgba(255,255,255,0.05) 0 22px,
      rgba(60,40,25,0.08) 22px 44px),
    linear-gradient(160deg, #b88a5f 0%, #7a542f 100%);
}

.cat-vinyl {
  /* mid-toned LVP plank */
  background-color: #8d7763;
  background-image:
    repeating-linear-gradient(0deg,
      rgba(0,0,0,0.20) 0 1px, transparent 1px 70px),
    repeating-linear-gradient(92deg,
      rgba(255,255,255,0.04) 0 18px,
      rgba(40,30,20,0.10) 18px 38px),
    linear-gradient(160deg, #9b8470 0%, #65503e 100%);
}

.cat-laminate {
  /* lighter wood-look */
  background-color: #c8a87d;
  background-image:
    repeating-linear-gradient(0deg,
      rgba(0,0,0,0.14) 0 1px, transparent 1px 65px),
    repeating-linear-gradient(94deg,
      rgba(255,255,255,0.08) 0 20px,
      rgba(80,55,30,0.06) 20px 40px),
    linear-gradient(160deg, #d6b88c 0%, #9c7b53 100%);
}

.cat-outdoor {
  /* large stone paver grid */
  background-color: #9aa0a0;
  background-image:
    repeating-linear-gradient(0deg,
      rgba(0,0,0,0.22) 0 2px, transparent 2px 90px),
    repeating-linear-gradient(90deg,
      rgba(0,0,0,0.22) 0 2px, transparent 2px 90px),
    radial-gradient(70% 60% at 25% 30%, rgba(255,255,255,0.4), transparent 60%),
    linear-gradient(150deg, #b1b6b6 0%, #6e7575 100%);
}

/* ---------- Subtle interactive polish ---------- */
.group:hover .cat-porcelain,
.group:hover .cat-ceramic,
.group:hover .cat-bathroom,
.group:hover .cat-travertine,
.group:hover .cat-wood,
.group:hover .cat-vinyl,
.group:hover .cat-laminate,
.group:hover .cat-outdoor {
  filter: brightness(1.04) saturate(1.05);
  transition: filter 300ms ease;
}

/* ---------- FAQ accordion ----------
   Uses <details>/<summary> for native accessibility & zero JS.
   The +/− toggle is drawn with two pseudo-elements for clean transitions. */
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary { position: relative; }
.faq-item .faq-toggle {
  position: relative;
  width: 18px;
  height: 18px;
  display: inline-block;
}
.faq-item .faq-toggle::before,
.faq-item .faq-toggle::after {
  content: "";
  position: absolute;
  background: rgb(var(--c-accent));
  transition: transform 200ms ease;
}
.faq-item .faq-toggle::before { /* horizontal bar */
  left: 0; right: 0; top: 50%;
  height: 2px; margin-top: -1px;
}
.faq-item .faq-toggle::after  { /* vertical bar (becomes hidden when open) */
  top: 0; bottom: 0; left: 50%;
  width: 2px; margin-left: -1px;
}
.faq-item[open] .faq-toggle::after { transform: scaleY(0); }
.faq-item > summary:hover .faq-toggle::before,
.faq-item > summary:hover .faq-toggle::after { background: rgb(var(--c-accent-dark)); }


/* ---------- Form polish ---------- */
input::placeholder,
textarea::placeholder { color: #a8a39c; }


/* =============================================================
   ANIMATIONS — kept subtle so the site doesn't read "modern web"
   ============================================================= */

/* 1. Slow Ken Burns drift on the hero photo.
   25s cycle, scale 1.0 → 1.08, with a tiny pan. Imperceptible per second
   but the photo never quite sits still. */
@keyframes kenBurns {
  0%   { transform: scale(1.00) translate(0, 0); }
  50%  { transform: scale(1.08) translate(-1.5%, -1%); }
  100% { transform: scale(1.00) translate(0, 0); }
}
.ken-burns {
  animation: kenBurns 28s ease-in-out infinite;
  transform-origin: center center;
  will-change: transform;
}

/* 2. Fade-up reveal on scroll. JS toggles .is-visible when the
   section enters the viewport. */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 600ms ease-out, transform 600ms ease-out;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 3. Hover zoom on photo cards. Container must clip (overflow hidden);
   image inside scales gently on hover. */
.photo-card {
  overflow: hidden;
}
.photo-card img,
.photo-card iframe {
  transition: transform 700ms ease;
  will-change: transform;
}
.photo-card:hover img,
.photo-card:hover iframe {
  transform: scale(1.04);
}

/* 4. Open-now status indicator.
   The dot pulses gently when the shop is currently open. */
.open-status {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  line-height: 1;
  color: #f0c277;            /* amber — closed default (visible on dark) */
}
.open-status .dot {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 9999px;
  background: #e9a648;       /* amber — closed default */
  flex-shrink: 0;
}
.open-status.is-open {
  color: #6fd385;            /* bright green — open */
}
.open-status.is-open .dot {
  background: #5fc873;       /* bright green — open */
  box-shadow: 0 0 0 0 rgba(95, 200, 115, 0.7);
  animation: openPulse 2.2s ease-out infinite;
}
@keyframes openPulse {
  0%   { box-shadow: 0 0 0 0 rgba(95, 200, 115, 0.6); }
  70%  { box-shadow: 0 0 0 12px rgba(95, 200, 115, 0); }
  100% { box-shadow: 0 0 0 0 rgba(95, 200, 115, 0); }
}

/* 5. Button press feedback — slight depress on click. */
a.bg-accent,
a.bg-ink,
button[type="submit"] {
  transition: background-color 200ms ease, transform 120ms ease, filter 120ms ease;
}
a.bg-accent:active,
a.bg-ink:active,
button[type="submit"]:active {
  transform: translateY(1px);
  filter: brightness(0.95);
}


/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, .ken-burns, .open-status.is-open .dot { transition: none !important; animation: none !important; }
  .reveal { opacity: 1; transform: none; }
}


/* =============================================================
   PRINT STYLES — give readers a useful black-on-white version
   with no photos, no animations, no sticky CTAs, all FAQs open,
   and URLs printed beside web links so it's useful offline.
   ============================================================= */
@media print {
  html, body {
    background: #fff !important;
    color: #000 !important;
    font-size: 11pt;
  }
  /* Hide chrome and decorative content */
  nav, #navToggle, #mobileNav, .skip-link,
  img, iframe, svg, .open-status,
  .ken-burns, .photo-card { display: none !important; }

  /* Hide the mobile sticky call-bar (fixed-position link) and any fixed banners */
  body > a.fixed, body > .fixed { display: none !important; }

  /* Neutralize all backgrounds so coloured panels don't waste toner */
  * { background: transparent !important; color: #000 !important;
      box-shadow: none !important; text-shadow: none !important; }
  [class*="border"] { border-color: #ccc !important; }

  /* Hero gets compact: drop overlay, keep the text */
  section { padding: 0.8rem 0 !important; }

  /* Expand every FAQ item so its answer prints */
  details, details[open] { display: block !important; }
  details > summary { font-weight: 600; list-style: none; }
  details > *:not(summary) { display: block !important; }

  /* Show URLs beside external links and emails */
  a[href^="http"]::after,
  a[href^="mailto:"]::after {
    content: " (" attr(href) ")"; font-size: 0.85em; color: #444;
  }

  /* Avoid awkward page breaks */
  h1, h2, h3, h4 { page-break-after: avoid; }
  section, footer, details { page-break-inside: avoid; }
}