/* ==========================================================================
   Highroller Deco & General Merchants, shared stylesheet
   Every page loads this one file. Colours are defined once as variables
   below, so changing a brand colour here changes it everywhere.
   ========================================================================== */

:root {
  /* --- Locked colour palette --- */
  --white: #FFFFFF;
  --neutral: #F7F9F6;      /* soft background for alternating sections */
  --green: #2E7D4F;        /* primary brand */
  --green-deep: #1F5A38;   /* hover states + footer */
  --orange: #F4A261;       /* secondary accent / CTAs */
  --orange-hover: #E08E4A;
  --charcoal: #2A2A2A;     /* body text */
  --muted: #6B7280;        /* captions, small print */

  /* --- Typography --- */
  --font-heading: 'Glory', 'Trebuchet MS', sans-serif;
  --font-body: 'Glory', 'Trebuchet MS', -apple-system, sans-serif;

  /* --- Spacing rhythm --- */
  --section-y: 5.5rem;     /* vertical padding inside a section */
  --max-width: 1140px;
}

/* --- Reset --------------------------------------------------------------- */

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

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

body {
  font-family: var(--font-body);
  font-size: 1.125rem; /* 18px, Glory runs slightly small at 16 */
  line-height: 1.7;
  color: var(--charcoal);
  background: var(--white);
}

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

a {
  color: var(--green);
  text-decoration: none;
  transition: color 0.25s ease;
}

a:hover {
  color: var(--green-deep);
}

/* --- Layout helpers ------------------------------------------------------ */

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

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

/* Alternating sections use the soft neutral to add rhythm down the page. */
.section--neutral {
  background: var(--neutral);
}

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

.section--green h2,
.section--green h3 {
  color: var(--white);
}

.text-center {
  text-align: center;
}

/* --- Typography ---------------------------------------------------------- */

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.2;
  color: var(--green);
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); }
h3 { font-size: 1.4375rem; } /* 23px, keeps clear of the 18px body */

p { margin-bottom: 1rem; }

p:last-child { margin-bottom: 0; }

.lead {
  font-size: 1.25rem;
  color: var(--muted);
  max-width: 60ch;
}

.section-intro {
  max-width: 60ch;
  margin: 0 auto 3rem;
  text-align: center;
  color: var(--muted);
}

/* Small orange divider used under section headings. */
.divider {
  width: 56px;
  height: 3px;
  background: var(--orange);
  border: 0;
  margin: 1.25rem 0 1.75rem;
}

.divider--center {
  margin-left: auto;
  margin-right: auto;
}

/* --- Buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1.75rem;
  border: 2px solid transparent;
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background-color 0.25s ease, border-color 0.25s ease,
              color 0.25s ease, transform 0.25s ease;
}

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

/* Orange is reserved for the main call to action so it pops against
   both the white base and the green brand colour. */
.btn--primary {
  background: var(--orange);
  color: var(--charcoal);
}

.btn--primary:hover {
  background: var(--orange-hover);
  color: var(--charcoal);
}

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

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

/* For use on a green background. */
.btn--light {
  background: var(--white);
  color: var(--green);
}

.btn--light:hover {
  background: var(--neutral);
  color: var(--green-deep);
}

.btn__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* --- Header / navigation ------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--white);
  border-bottom: 1px solid #E8ECE7;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

/* The business name is long, so the wordmark stacks: large first line,
   smaller second line. Keeps the header from wrapping awkwardly. */
.wordmark {
  font-family: var(--font-heading);
  line-height: 1.1;
  color: var(--green);
}

.wordmark:hover { color: var(--green); }

.wordmark__main {
  display: block;
  font-size: 1.4rem;
  font-weight: 700;
}

.wordmark__sub {
  display: block;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav__list {
  display: flex;
  gap: 1.75rem;
  list-style: none;
}

.nav__link {
  position: relative;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--charcoal);
  padding-bottom: 4px;
}

.nav__link:hover {
  color: var(--green);
}

/* Active nav item gets the green underline. */
.nav__link.is-active {
  color: var(--green);
  font-weight: 600;
}

.nav__link.is-active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--orange);
}

/* Hamburger, only visible on small screens. */
.nav-toggle {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0.5rem;
}

.nav-toggle__bar {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--green);
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.nav-toggle__bar + .nav-toggle__bar {
  margin-top: 5px;
}

/* --- Hero ---------------------------------------------------------------- */

.hero {
  background: var(--neutral);
  padding: clamp(4rem, 10vw, 7rem) 0;
}

.hero__inner {
  display: grid;
  gap: 3rem;
  align-items: center;
}

.hero__tagline {
  font-size: 1.125rem;
  color: var(--muted);
  margin: 0 0 2rem;
  max-width: 52ch;
}

.hero__image {
  border-radius: 6px;
  overflow: hidden;
}

/* --- Cards --------------------------------------------------------------- */

.grid {
  display: grid;
  gap: 1.75rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.card {
  background: var(--white);
  border: 1px solid #E8ECE7;
  border-radius: 6px;
  padding: 2rem 1.75rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(42, 42, 42, 0.08);
}

.card__icon {
  width: 40px;
  height: 40px;
  color: var(--orange);
  margin-bottom: 1rem;
}

.card h3 {
  margin-bottom: 0.5rem;
}

.card p {
  color: var(--muted);
  font-size: 1.0625rem;
}

/* --- Trust points -------------------------------------------------------- */

.trust {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.trust__item h3 {
  color: var(--white);
  margin-bottom: 0.5rem;
}

.trust__item p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.95rem;
}

.trust__number {
  display: block;
  font-family: var(--font-heading);
  font-size: 2rem;
  color: var(--orange);
  margin-bottom: 0.25rem;
}

/* --- Service detail rows (Services page) --------------------------------- */

.service-row {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 56px 1fr;
  align-items: start;
  padding: 2.5rem 0;
  border-bottom: 1px solid #E8ECE7;
}

.service-row:last-of-type {
  border-bottom: 0;
}

.service-row__icon {
  width: 44px;
  height: 44px;
  color: var(--orange);
}

.service-row p {
  color: var(--muted);
  max-width: 68ch;
}

/* --- Gallery ------------------------------------------------------------- */

.gallery-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.gallery-item {
  position: relative;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  border-radius: 6px;
  overflow: hidden;
  display: block;
  width: 100%;
}

/* Job photos come off a phone in a mix of portrait and landscape, so crop
   them all to a common shape. Otherwise the grid rows go ragged. */
.gallery-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.gallery-item:hover img {
  transform: scale(1.04);
}

.gallery-item__label {
  display: block;
  padding: 0.75rem 0.25rem 0;
  font-size: 0.9rem;
  color: var(--muted);
  text-align: left;
}

/* --- Video clips --------------------------------------------------------- */

.video-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin-top: 2.5rem;
}

.video-item {
  margin: 0;
}

.video-item video {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: 6px;
  background: var(--charcoal);
}

/* --- Lightbox ------------------------------------------------------------ */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: rgba(31, 90, 56, 0.92);
}

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

.lightbox img {
  max-width: 100%;
  max-height: 85vh;
  border-radius: 4px;
}

.lightbox__close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  background: none;
  border: 0;
  color: var(--white);
  font-size: 2.5rem;
  line-height: 1;
  cursor: pointer;
}

/* --- Contact ------------------------------------------------------------- */

.contact-grid {
  display: grid;
  gap: 3rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: start;
}

.contact-number {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  color: var(--green);
  display: inline-block;
  margin-bottom: 1.5rem;
}

.form-field {
  margin-bottom: 1.25rem;
}

.form-field label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.form-field input,
.form-field textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 1px solid #D8DED6;
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--charcoal);
  background: var(--white);
  transition: border-color 0.25s ease;
}

.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--green);
}

.form-note {
  font-size: 0.875rem;
  color: var(--muted);
  margin-top: 1rem;
}

.form-optional {
  font-weight: 400;
  color: var(--muted);
}

/* Confirmation tick on thanks.html */
.confirm-tick {
  width: 64px;
  height: 64px;
  color: var(--orange);
  margin: 0 auto 1.5rem;
}

/* --- Footer -------------------------------------------------------------- */

.site-footer {
  background: var(--green-deep);
  color: rgba(255, 255, 255, 0.85);
  padding: 3.5rem 0 2rem;
  font-size: 0.9rem;
}

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

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

.site-footer__inner {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  padding-bottom: 2rem;
}

.site-footer h3 {
  color: var(--white);
  font-size: 1.1rem;
  margin-bottom: 0.75rem;
}

.site-footer__links {
  list-style: none;
}

.site-footer__links li {
  margin-bottom: 0.4rem;
}

.site-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 1.5rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.65);
}

/* --- Responsive ---------------------------------------------------------- */

@media (min-width: 860px) {
  .hero__inner {
    grid-template-columns: 1.1fr 1fr;
  }

  /* On the home page the image takes the larger share of the row. The hero
     container stays at the site width, so the extra size comes purely from
     the column ratio. Scoped to .hero so About is unaffected. */
  .hero .hero__inner {
    grid-template-columns: 1fr 1.6fr;
  }

  /* The narrower headline column needs a smaller cap than the site default
     (3.5rem), or the h1 wraps into a cramped stack beside the image. */
  .hero h1 {
    font-size: clamp(2rem, 3.5vw, 3rem);
  }
}

@media (max-width: 859px) {
  :root {
    --section-y: 3.5rem;
  }

  .nav-toggle {
    display: block;
  }

  /* Nav collapses into a dropdown panel under the header. */
  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--white);
    border-bottom: 1px solid #E8ECE7;
    padding: 1rem 1.5rem 1.5rem;
    display: none;
  }

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

  .nav__list {
    flex-direction: column;
    gap: 0;
  }

  .nav__list li {
    border-bottom: 1px solid #F0F3EF;
  }

  .nav__link {
    display: block;
    padding: 0.85rem 0;
  }

  .nav__link.is-active::after {
    display: none;
  }

  .nav .btn {
    margin-top: 1rem;
    justify-content: center;
  }

  .site-header__inner {
    position: relative;
  }

  .service-row {
    grid-template-columns: 1fr;
  }
}

/* Respect users who have asked for less motion. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}