/* =========================================================================
   RUSTIC KNOTS: SITE STYLESHEET
   =========================================================================
   Colour palette and fonts are pulled from the Rustic Knots logo and the
   original "coming soon" page, so the new site matches the existing brand.

   If you ever want to change the look of the WHOLE site (colours, fonts,
   spacing), this is the only file you need to touch.
   ========================================================================= */

:root {
  /* Brand colours (from logo + original site) */
  --primary-colour: #4a3728;       /* dark brown - headings, footer */
  --background-1: #f9f6f0;         /* cream - main page background */
  --background-2: #e8dcc4;         /* tan - alternate section background */
  --text-colour: #333333;          /* body text */
  --accent-colour: #8b5e3c;        /* medium brown - links, buttons */
  --accent-colour-dark: #6e4a2e;   /* hover state for buttons/links */
  --tool-handle-colour: #ac8e68;   /* lighter brown - borders, dividers */
  --white: #ffffff;

  /* Fonts */
  --font-heading: 'Rye', 'Georgia', serif;
  --font-body: 'Helvetica Neue', Arial, sans-serif;

  /* Layout */
  --max-width: 1160px;
  --radius: 10px;
}

/* -------------------------------------------------------------------------
   Reset & base
   ------------------------------------------------------------------------- */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--background-1);
  color: var(--text-colour);
  line-height: 1.6;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--accent-colour);
  text-decoration: none;
}

a:hover {
  color: var(--accent-colour-dark);
}

h1, h2, h3 {
  font-family: var(--font-heading);
  color: var(--primary-colour);
  line-height: 1.25;
  margin-top: 0;
}

h1 { font-size: 2.6em; }
h2 { font-size: 1.9em; }
h3 { font-size: 1.3em; }

p {
  margin: 0 0 1em 0;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  padding: 64px 0;
}

.section--alt {
  background: var(--background-2);
}

.section-title {
  text-align: center;
  margin-bottom: 12px;
}

.section-subtitle {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 40px auto;
  color: #5a5a5a;
}

/* -------------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  padding: 14px 30px;
  border-radius: 50px;
  font-weight: bold;
  font-family: var(--font-body);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
  text-align: center;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-primary {
  background: var(--accent-colour);
  color: var(--white);
}

.btn-primary:hover {
  background: var(--accent-colour-dark);
  color: var(--white);
}

.btn-outline {
  background: transparent;
  border-color: var(--primary-colour);
  color: var(--primary-colour);
}

.btn-outline:hover {
  background: var(--primary-colour);
  color: var(--white);
}

/* Placeholder "buy" button - greyed out until a real link is added.
   See js/products-data.js for instructions on activating it. */
.btn-placeholder {
  background: #d9d2c4;
  color: #8a8275;
  pointer-events: none;
  cursor: not-allowed;
}

/* -------------------------------------------------------------------------
   Header / navigation
   ------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--background-1);
  border-bottom: 3px solid var(--accent-colour);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  padding-bottom: 12px;
}

.site-logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.site-logo img {
  height: 56px;
  width: 56px;
  border-radius: 50%;
}

.site-logo-text {
  font-family: var(--font-heading);
  color: var(--primary-colour);
  font-size: 1.5em;
  white-space: nowrap;
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.8em;
  color: var(--primary-colour);
  cursor: pointer;
}

.main-nav ul {
  list-style: none;
  display: flex;
  gap: 32px;
  margin: 0;
  padding: 0;
}

.main-nav a {
  color: var(--primary-colour);
  font-weight: bold;
  text-transform: uppercase;
  font-size: 0.92em;
  letter-spacing: 0.5px;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}

.main-nav a:hover,
.main-nav a[aria-current="page"] {
  color: var(--accent-colour);
  border-bottom-color: var(--accent-colour);
}

/* -------------------------------------------------------------------------
   Hero (home page)
   ------------------------------------------------------------------------- */
.hero {
  background: linear-gradient(135deg, var(--background-2), var(--background-1) 60%);
  text-align: center;
  padding: 80px 0 70px;
}

.hero img.hero-logo {
  margin: 0 auto 24px auto;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  box-shadow: 0 10px 30px rgba(74, 55, 40, 0.25);
}

.hero h1 {
  font-size: 3em;
  margin-bottom: 8px;
}

.hero .tagline {
  font-size: 1.2em;
  color: var(--accent-colour);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 28px;
}

.hero-cta {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

/* -------------------------------------------------------------------------
   Page header banner (non-home pages)
   ------------------------------------------------------------------------- */
.page-banner {
  background: var(--background-2);
  text-align: center;
  padding: 56px 0;
}

.page-banner p {
  max-width: 600px;
  margin: 0 auto;
  color: #5a4a3a;
}

/* -------------------------------------------------------------------------
   Cards (general)
   ------------------------------------------------------------------------- */
.card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(74, 55, 40, 0.08);
  padding: 32px;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

/* -------------------------------------------------------------------------
   Testimonials (scrolling widget)
   ------------------------------------------------------------------------- */
.testimonials {
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}

.testimonial-track {
  display: flex;
  gap: 24px;
  width: max-content;
  animation: scroll-testimonials 38s linear infinite;
}

.testimonials:hover .testimonial-track {
  animation-play-state: paused;
}

@keyframes scroll-testimonials {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.testimonial-card {
  flex: 0 0 320px;
  background: var(--white);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: 0 8px 20px rgba(74, 55, 40, 0.08);
  border-top: 4px solid var(--accent-colour);
}

.testimonial-card .stars {
  color: var(--accent-colour);
  letter-spacing: 2px;
  margin-bottom: 10px;
}

.testimonial-card p {
  font-style: italic;
  color: var(--text-colour);
}

.testimonial-card .author {
  font-weight: bold;
  font-style: normal;
  color: var(--primary-colour);
  margin: 0;
}

/* Respect users who prefer reduced motion: stop the marquee and let them
   scroll the row manually instead. */
@media (prefers-reduced-motion: reduce) {
  .testimonial-track {
    animation: none;
    overflow-x: auto;
  }
}

/* -------------------------------------------------------------------------
   Products page
   ------------------------------------------------------------------------- */
.product-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(74, 55, 40, 0.08);
  overflow: hidden;
  margin-bottom: 56px;
}

.product-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  background: var(--background-2);
}

.product-gallery img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.product-gallery img:hover {
  opacity: 0.85;
}

.product-body {
  padding: 32px;
}

.product-specs {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
}

.product-specs th,
.product-specs td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--background-2);
  font-size: 0.95em;
}

.product-specs th {
  width: 40%;
  color: var(--primary-colour);
}

.product-highlights {
  margin: 0 0 20px 0;
  padding-left: 20px;
}

.product-highlights li {
  margin-bottom: 6px;
}

.product-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 20px;
}

.placeholder-note {
  font-size: 0.85em;
  color: #8a7c6a;
}

/* Lightbox for product gallery images */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(20, 14, 8, 0.85);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.lightbox.is-open {
  display: flex;
}

.lightbox img {
  max-width: 90vw;
  max-height: 85vh;
  border-radius: 6px;
}

.lightbox-close {
  position: absolute;
  top: 24px;
  right: 32px;
  font-size: 2em;
  color: var(--white);
  background: none;
  border: none;
  cursor: pointer;
}

/* Bespoke callout */
.bespoke-callout {
  background: var(--primary-colour);
  color: var(--background-1);
  border-radius: var(--radius);
  padding: 40px;
  text-align: center;
}

.bespoke-callout h2 {
  color: var(--background-1);
}

.bespoke-callout .btn-primary {
  background: var(--background-1);
  color: var(--primary-colour);
}

.bespoke-callout .btn-primary:hover {
  background: var(--white);
}

/* -------------------------------------------------------------------------
   About page
   ------------------------------------------------------------------------- */
.profile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.profile-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(74, 55, 40, 0.08);
  padding: 32px;
  text-align: center;
}

.profile-photo-placeholder {
  width: 160px;
  height: 160px;
  margin: 0 auto 20px auto;
  border-radius: 50%;
  background: var(--background-2);
  border: 3px dashed var(--tool-handle-colour);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--accent-colour);
  font-size: 0.85em;
  padding: 10px;
}

.profile-role {
  color: var(--accent-colour);
  text-transform: uppercase;
  font-size: 0.85em;
  letter-spacing: 1px;
  margin-bottom: 14px;
}

/* -------------------------------------------------------------------------
   Contact page
   ------------------------------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 40px;
  align-items: start;
}

.contact-email-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(74, 55, 40, 0.08);
  padding: 32px;
  text-align: center;
}

.contact-email-card a {
  font-size: 1.3em;
  font-weight: bold;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 6px;
  font-weight: bold;
  color: var(--primary-colour);
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--tool-handle-colour);
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 1em;
  background: var(--white);
}

.form-group input:focus,
.form-group textarea:focus {
  outline: 2px solid var(--accent-colour);
}

/* Honeypot field - hidden from real visitors, helps catch spam bots */
.hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
}

.form-status {
  margin-top: 16px;
  font-weight: bold;
}

.form-status.success { color: #2f6b2f; }
.form-status.error { color: #a33; }

/* -------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------- */
.site-footer {
  background: var(--primary-colour);
  color: var(--background-1);
  padding: 48px 0 24px;
  margin-top: 40px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 32px;
}

.site-footer h3 {
  color: var(--background-1);
  font-size: 1.1em;
}

.site-footer a {
  color: var(--background-2);
}

.site-footer a:hover {
  color: var(--white);
}

.footer-nav {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-nav li {
  margin-bottom: 8px;
}

.footer-bottom {
  border-top: 1px solid rgba(249, 246, 240, 0.2);
  padding-top: 20px;
  text-align: center;
  font-size: 0.85em;
  color: var(--background-2);
}

/* -------------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------------- */
@media (max-width: 820px) {
  .grid-2,
  .profile-grid,
  .contact-grid,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .product-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 700px) {
  .nav-toggle {
    display: block;
  }

  .main-nav {
    display: none;
    width: 100%;
  }

  .main-nav.is-open {
    display: block;
  }

  .site-header .container {
    flex-wrap: wrap;
  }

  .main-nav ul {
    flex-direction: column;
    gap: 4px;
    padding: 16px 0;
  }

  .hero h1 {
    font-size: 2.2em;
  }

  .product-gallery {
    grid-template-columns: repeat(2, 1fr);
  }

  .product-gallery img {
    height: 130px;
  }
}