/* Woodalls — Custom styles matching we-sell-it.co.uk palette */

/* ── Brand CSS variables (matching live site exactly) ─────────────────────── */
:root {
  --primary-blue:  #2c2e72;
  --dark-navy:     #2c2e72;
  --accent-gold:   #849cbc;
  --gold:          #849cbc;
  --bg-light:      #f1f2f3;
  --soft:          #f9fafb;
  --text-dark:     #2c2e72;
  --text-light:    #6c757d;
  --line:          #e5e7eb;
  --white:         #ffffff;
  --footer-bg:     #121213;
}

/* ── Playfair Display: correct weight + lining numerals ──────────────────── */
/* Playfair Display has no weight 300 — font-light causes iOS/Android to fall
   back to the system serif font. Override to 400 (the true lightest weight). */
.font-serif.font-light {
  font-weight: 400;
}
.font-serif,
h1, h2, h3, h4, h5, h6 {
  font-variant-numeric: lining-nums;
  font-feature-settings: 'lnum' 1, 'onum' 0;
  -webkit-font-feature-settings: 'lnum' 1, 'onum' 0;
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
body {
  color: var(--primary-blue);
  font-family: Roboto, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* ── Top bar ─────────────────────────────────────────────────────────────── */
.top-bar-gradient {
  background: linear-gradient(135deg, var(--dark-navy) 0%, var(--primary-blue) 100%);
}

/* ── Animations ──────────────────────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideIn {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
.animate-fade-up  { animation: fadeUp 0.6s ease-out both; }
.animate-slide-in { animation: slideIn 0.3s ease-out both; }

/* ── Navigation underline hover (white version for navy header) ──────────── */
.nav-link-white {
  position: relative;
}
.nav-link-white::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--accent-gold);
  transition: width 0.3s;
}
.nav-link-white:hover::after,
.nav-link-white[aria-current="page"]::after {
  width: 100%;
}

/* ── Navigation underline hover (navy version for white header) ──────────── */
.nav-link {
  position: relative;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--primary-blue);
  transition: width 0.3s;
}
.nav-link:hover::after,
.nav-link[aria-current="page"]::after {
  width: 100%;
}

/* ── Accent gradient line (used under section headings) ──────────────────── */
.accent-line::after {
  content: '';
  display: block;
  width: 100px;
  height: 3px;
  background: linear-gradient(to right, var(--gold), var(--primary-blue));
  margin: 12px auto 0;
}

/* ── Primary buttons ─────────────────────────────────────────────────────── */
.btn-primary {
  background-color: var(--white);
  color: var(--primary-blue);
  border: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 12px 35px;
  font-size: 14px;
  transition: all 0.3s;
  display: inline-block;
  cursor: pointer;
}
.btn-primary:hover {
  background-color: var(--primary-blue);
  color: var(--white);
}

/* ── Hero slider crossfade ───────────────────────────────────────────────── */
.hero-slide {
  transition: opacity 0.7s ease-in-out;
}
#hero-slider {
  isolation: isolate;
}

/* ── Enquiry sidebar ─────────────────────────────────────────────────────── */
#enquiry-sidebar.open {
  transform: translateX(0);
}

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

/* ── Sticky header shadow ────────────────────────────────────────────────── */
#site-header.scrolled {
  box-shadow: 0 4px 20px rgba(23,78,135,0.4);
}

/* ── Flash messages ──────────────────────────────────────────────────────── */
#flash-messages > div {
  animation: slideIn 0.3s ease-out both;
}

/* ── Focus visible ───────────────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
}

/* ── Quantity spinner: hide native arrows (custom +/- buttons used instead) ── */
#enquiry-qty::-webkit-inner-spin-button,
#enquiry-qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
#enquiry-qty { -moz-appearance: textfield; }

/* ── Mobile: prevent iOS input zoom on focus (16px minimum) ──────────────── */
@media (max-width: 767px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="search"],
  input[type="url"],
  input[type="number"],
  input[type="password"],
  textarea,
  select {
    font-size: 16px;
  }
}

/* ── Mobile: minimum touch target sizing hints ───────────────────────────── */
@media (max-width: 767px) {
  .nav-link,
  .nav-link-white {
    padding-top: 4px;
    padding-bottom: 4px;
  }
}

/* ── Reduced motion preference ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Scrollbar ───────────────────────────────────────────────────────────── */
#enquiry-sidebar::-webkit-scrollbar       { width: 4px; }
#enquiry-sidebar::-webkit-scrollbar-track { background: var(--bg-light); }
#enquiry-sidebar::-webkit-scrollbar-thumb { background: var(--line); }

/* Hide scrollbars for horizontal scroll containers (non-Tailwind utility) */
.scrollbar-none { scrollbar-width: none; -ms-overflow-style: none; }
.scrollbar-none::-webkit-scrollbar { display: none; }

/* ── Site footer gold accent line (scoped to top-level <footer>) ─────────── */
body > footer::before {
  content: '';
  background: linear-gradient(to right, transparent, var(--gold), transparent);
  height: 1px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}