/* =========================================================
   ROOKHILL & CO. — MAIN STYLESHEET
   Purpose:
   This file controls the full visual presentation of the
   single-page Rookhill & Co. website.

   Design direction:
   - understated
   - classic
   - accessible refinement
   - generous spacing
   - premium but not overly exclusive
========================================================= */


/* =========================================================
   1. CSS VARIABLES
   These are the core brand colors, fonts, and layout values.
   Changing these values will update the site globally.
========================================================= */

:root {
  --color-black: #0f0f0f;
  --color-white: #ffffff;
  --color-cream: #f7f2ea;
  --color-navy: #111d2e;
  --color-gold: #c6a15b;
  --color-forest: #1f3b2d;
  --color-burgundy: #5a1f2b;
  --color-gray: #6f6f6f;
  --color-light-gray: #e8e1d6;

  --font-display: "Cinzel", Georgia, serif;
  --font-editorial: "Cormorant Garamond", Georgia, serif;
  --font-body: "Inter", Arial, sans-serif;

  --container-width: 1180px;
  --section-padding: 96px;
  --transition: 220ms ease;
}


/* =========================================================
   2. GLOBAL RESET
   A small reset to make spacing and sizing more predictable.
========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-cream);
  color: var(--color-black);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
}

img {
  display: block;
  width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input {
  font: inherit;
}


/* =========================================================
   3. ACCESSIBILITY UTILITIES
   .sr-only keeps labels available to screen readers while
   hiding them visually.
========================================================= */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* =========================================================
   4. SHARED LAYOUT
========================================================= */

.container {
  width: min(100% - 40px, var(--container-width));
  margin-inline: auto;
}

.narrow {
  max-width: 760px;
  text-align: center;
}

.section {
  padding: var(--section-padding) 0;
}

.section-heading {
  max-width: 720px;
  margin-bottom: 48px;
}

.section-heading h2,
.story-content h2,
.amazon-section h2,
.signup-copy h2 {
  margin: 0 0 18px;
  font-family: var(--font-editorial);
  font-size: clamp(2.2rem, 4vw, 4rem);
  font-weight: 500;
  line-height: 1.05;
}

.section-heading p,
.story-content p,
.amazon-section p,
.signup-copy p {
  color: var(--color-gray);
}

.eyebrow {
  margin: 0 0 14px;
  color: var(--color-gold);
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}


/* =========================================================
   5. BUTTONS + TEXT LINKS
========================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 28px;
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
  cursor: pointer;
}

.btn-primary {
  background: var(--color-navy);
  color: var(--color-white);
  border-color: var(--color-navy);
}

.btn-primary:hover {
  background: var(--color-black);
  border-color: var(--color-black);
}

/* =========================================================
   OUTLINE BUTTON
   Used in the hero section for secondary actions.
   Elegant white outline with subtle hover effect.
========================================================= */

.btn-outline-light {

    background: transparent;
    color: #ffffff;
    border: 1px solid rgba(255,255,255,.85);
}

.btn-outline-light:hover {
    background: #ffffff;
    color: var(--color-navy);
    border-color: #ffffff;
}

.btn-secondary {
  background: transparent;
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.7);
}

.btn-secondary:hover {
  background: var(--color-white);
  color: var(--color-black);
}

.text-link {
  display: inline-block;
  margin-top: 18px;
  color: var(--color-navy);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--color-gold);
  padding-bottom: 4px;
}


/* =========================================================
   6. HEADER / NAVIGATION
   The header is fixed so it remains visible while scrolling.
========================================================= */

/* .site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 20;
  background: rgba(15, 15, 15, 0.72);
  backdrop-filter: blur(12px);
  color: var(--color-white);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
} */

/* =========================================================
   HEADER
   Version 2
   Solid navy instead of glass effect.
========================================================= */

/* .site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: var(--color-navy);
    border-bottom: 1px solid rgba(255,255,255,.08);
    transition: background .25s ease;
} */

/* =========================================================
   HEADER
========================================================= */

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 92px;
    background: var(--color-navy);
    border-bottom: 1px solid rgba(255,255,255,.08);
    z-index: 1000;
}



/* .header-inner {
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
} */

.header-inner{
    display:flex;
    justify-content:space-between;
    align-items:center;
    height:100%;
}



/* .brand-logo {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.18em;
} */

.brand-logo{
    display:flex;
    align-items:center;
}

.brand-logo img{
    height:96px;
    width:auto;
    display:block;
    /* transform:translateY(-3px); */
}


.main-nav{
    display:flex;
    gap:52px;
    align-items:center;
}

.main-nav a {
    color: rgba(255,255,255,.95);
    font-family: var(--font-display);
    font-size: .88rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    transition: color .25s ease;

}

.main-nav a:hover{
    color: var(--color-gold);
}





/* =========================================================
   7. HERO SECTION
   Replace the background image path with your final hero image.
========================================================= */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  color: var(--color-white);
  background:
    linear-gradient(rgba(8, 11, 17, 0.35), rgba(8, 11, 17, 0.55)),
    url("images/hero-rookhill.png") center / cover no-repeat;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(7, 10, 15, 0.78) 0%,
    rgba(7, 10, 15, 0.48) 44%,
    rgba(7, 10, 15, 0.14) 100%
  );
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 700px;
  padding-top: 130px;
}

.hero h1 {
  margin: 0;
  font-family: var(--font-editorial);
  font-size: clamp(3.3rem, 8vw, 7.5rem);
  font-weight: 500;
  line-height: 0.94;
}

.hero-subtitle {
  max-width: 520px;
  margin: 26px 0 34px;
  color: rgba(255, 255, 255, 0.84);
  font-size: 1.05rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}


/* =========================================================
   8. BRAND STATEMENT
   A quiet transition after the hero.
========================================================= */

.brand-statement {
  padding: 70px 0;
  background: var(--color-white);
}

.brand-statement p {
  margin: 0;
  font-family: var(--font-editorial);
  font-size: clamp(1.8rem, 3.2vw, 3rem);
  line-height: 1.18;
  color: var(--color-navy);
}


/* =========================================================
   9. COLLECTION SECTION
========================================================= */

.collection-section {
  background: var(--color-cream);
}

.collection-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.collection-card {
  background: var(--color-white);
  overflow: hidden;
  border: 1px solid rgba(17, 29, 46, 0.08);
  transition: transform var(--transition), box-shadow var(--transition);
}

.collection-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 50px rgba(17, 29, 46, 0.1);
}

.collection-card img {
  height: 360px;
  object-fit: cover;
}

.collection-card-content {
  padding: 30px;
}

.collection-card h3 {
  margin: 0 0 10px;
  font-family: var(--font-editorial);
  font-size: 1.85rem;
  font-weight: 500;
  color: var(--color-navy);
}

.collection-card p {
  margin: 0;
  color: var(--color-gray);
  font-size: 0.95rem;
}


/* =========================================================
   10. STORY SECTION
========================================================= */

.story-section {
  background: var(--color-white);
}

.story-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}

.story-image img {
  min-height: 620px;
  object-fit: cover;
}

.story-content {
  max-width: 520px;
}

.story-content p {
  margin: 0 0 18px;
}


/* =========================================================
   11. WHY ROOKHILL / PILLARS SECTION
========================================================= */

.pillars-section {
  background: var(--color-navy);
  color: var(--color-white);
}

.pillars-section .section-heading p {
  color: rgba(255, 255, 255, 0.72);
}

.pillars-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, 0.18);
}

.pillar {
  background: var(--color-navy);
  padding: 34px 28px;
}

.pillar h3 {
  margin: 0 0 12px;
  font-family: var(--font-editorial);
  font-size: 1.55rem;
  font-weight: 500;
}

.pillar p {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.92rem;
}


/* =========================================================
   12. AMAZON CTA SECTION
========================================================= */

.amazon-section {
  background: var(--color-forest);
  color: var(--color-white);
  text-align: center;
}

.amazon-section p {
  color: rgba(255, 255, 255, 0.76);
}

.amazon-section .btn-primary {
  margin-top: 18px;
  background: var(--color-gold);
  color: var(--color-black);
  border-color: var(--color-gold);
}

.amazon-section .btn-primary:hover {
  background: var(--color-white);
  border-color: var(--color-white);
}


/* =========================================================
   13. MAILERLITE SIGNUP SECTION
   This is styled to look native to the Rookhill site.
   Later, if you paste in MailerLite's embed form, we can
   restyle the embedded classes to match this design.
========================================================= */

.signup-section {
  background: var(--color-cream);
}

.signup-box {
  max-width: 920px;
  padding: 56px;
  background: var(--color-white);
  border: 1px solid rgba(17, 29, 46, 0.08);
  text-align: center;
}

.signup-copy {
  max-width: 620px;
  margin: 0 auto 28px;
}

.signup-form {
  display: flex;
  max-width: 560px;
  margin: 0 auto;
  border: 1px solid var(--color-light-gray);
  background: var(--color-white);
}

.signup-form input {
  flex: 1;
  min-width: 0;
  border: 0;
  padding: 0 20px;
  color: var(--color-black);
  outline: none;
}

.signup-form input::placeholder {
  color: #9a9187;
}

.signup-form .btn {
  border-radius: 0;
}

.form-note {
  margin: 18px 0 0;
  color: var(--color-gray);
  font-size: 0.82rem;
}


/* =========================================================
   14. FOOTER
========================================================= */

.site-footer {
  background: var(--color-black);
  color: var(--color-white);
  padding: 58px 0 28px;
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  gap: 36px;
  padding-bottom: 42px;
}

.footer-logo {
  margin: 0 0 10px;
  font-family: var(--font-display);
  letter-spacing: 0.18em;
  font-weight: 600;
}

.footer-tagline {
  margin: 0;
  max-width: 360px;
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.92rem;
}

.footer-nav {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
}

.footer-nav a {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.footer-nav a:hover {
  color: var(--color-gold);
}

.footer-bottom {
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-bottom p {
  margin: 0;
  color: rgba(255, 255, 255, 0.48);
  font-size: 0.78rem;
}


/* =========================================================
   15. RESPONSIVE DESIGN — TABLETS
========================================================= */

@media (max-width: 900px) {
  :root {
    --section-padding: 72px;
  }

  .main-nav {
    gap: 18px;
  }

  .collection-grid,
  .story-layout,
  .pillars-grid {
    grid-template-columns: 1fr 1fr;
  }

  .story-layout {
    gap: 44px;
  }

  .story-image img {
    min-height: 460px;
  }
}


/* =========================================================
   16. RESPONSIVE DESIGN — MOBILE
========================================================= */

@media (max-width: 680px) {
  .container {
    width: min(100% - 28px, var(--container-width));
  }

  .header-inner {
    min-height: 68px;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
  }

  .brand-logo {
    font-size: 0.86rem;
  }

  .main-nav {
    gap: 14px;
  }

  .main-nav a {
    font-size: 0.64rem;
  }

  .hero {
    min-height: 88vh;
    text-align: left;
  }

  .hero-content {
    padding-top: 110px;
  }

  .hero h1 {
    font-size: clamp(3rem, 15vw, 4.4rem);
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .brand-statement {
    padding: 54px 0;
  }

  .collection-grid,
  .story-layout,
  .pillars-grid {
    grid-template-columns: 1fr;
  }

  .section-heading {
    margin-bottom: 34px;
  }

  .collection-card img {
    height: 300px;
  }

  .story-image img {
    min-height: 360px;
  }

  .signup-box {
    padding: 38px 24px;
  }

  .signup-form {
    flex-direction: column;
    border: 0;
    gap: 12px;
  }

  .signup-form input {
    min-height: 52px;
    border: 1px solid var(--color-light-gray);
  }

  .footer-inner {
    flex-direction: column;
  }

  .footer-nav {
    flex-direction: column;
    gap: 12px;
  }
}

/* =========================================================
   UTILITY CLASSES
   Small collection of reusable spacing helpers.
========================================================= */

/* Margin Top */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mt-5 { margin-top: 3rem; }

/* Margin Bottom */
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: .5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }
.mb-5 { margin-bottom: 3rem; }

/* Padding Top */
.pt-0 { padding-top: 0; }
.pt-1 { padding-top: .5rem; }
.pt-2 { padding-top: 1rem; }
.pt-3 { padding-top: 1.5rem; }
.pt-4 { padding-top: 2rem; }
.pt-5 { padding-top: 3rem; }

/* Padding Bottom */
.pb-0 { padding-bottom: 0; }
.pb-1 { padding-bottom: .5rem; }
.pb-2 { padding-bottom: 1rem; }
.pb-3 { padding-bottom: 1.5rem; }
.pb-4 { padding-bottom: 2rem; }
.pb-5 { padding-bottom: 3rem; }

/* Text Alignment */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* Display */
.d-none { display: none; }
.d-block { display: block; }
.d-flex { display: flex; }

/* Width */
.w-100 { width: 100%; }