/*
Theme Name:   Bespoke Garden Rooms
Theme URI:    https://bespokegardenroomsballycastle.co.uk/
Description:  Child theme for Bespoke Garden Rooms Ballycastle. Registers the garden room post type and taxonomy, and holds the brand design tokens. Built on Hello Elementor.
Author:       Bespoke Garden Rooms Ballycastle
Template:     hello-elementor
Version:      1.0.0
Text Domain:  bgr
*/

/* --------------------------------------------------------------------------
   Design tokens
   These mirror the approved homepage concept. Set the same values in
   Elementor > Site Settings > Global Colors / Global Fonts so the builder UI
   and this stylesheet never drift apart.
   -------------------------------------------------------------------------- */

:root {
  /* Core palette */
  --bgr-basalt:      #191D1B; /* header, footer, dark bands */
  --bgr-basalt-soft: #242A26;
  --bgr-lichen:      #EEF0EA; /* page ground */
  --bgr-paper:       #FBFCFA; /* card surface */
  --bgr-surface-2:   #E6E9E1; /* alternating section ground */
  --bgr-cedar:       #A4632F; /* the single accent */
  --bgr-cedar-deep:  #8A5227; /* accent hover */
  --bgr-ink:         #1B201D; /* body text */
  --bgr-slate:       #5E6660; /* muted text */
  --bgr-rule:        #D6DAD1; /* borders */

  /* Type */
  --bgr-font-display: "Newsreader", ui-serif, Georgia, "Times New Roman", serif;
  --bgr-font-body:    "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Spacing scale */
  --bgr-s1: 8px;
  --bgr-s2: 14px;
  --bgr-s3: 22px;
  --bgr-s4: 34px;
  --bgr-s5: 52px;
  --bgr-s6: 76px;
  --bgr-s7: 104px;

  /* Shell */
  --bgr-content-width: 1240px;
  --bgr-radius: 3px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

body {
  background: var(--bgr-lichen);
  color: var(--bgr-ink);
  font-family: var(--bgr-font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--bgr-font-display);
  font-weight: 400;
  line-height: 1.12;
  text-wrap: balance;
}

/* The display face carries the page at light weights. */
h1 { font-weight: 300; letter-spacing: -0.015em; }
h2 { font-weight: 300; letter-spacing: -0.012em; }

/* Italic display type is the accent device throughout the design. */
h1 em, h2 em, h3 em {
  font-style: italic;
  color: var(--bgr-cedar);
}

/* --------------------------------------------------------------------------
   Shared components
   Class names are applied via the Elementor "CSS Classes" field on each widget
   so styling lives here in version control rather than only in the database.
   -------------------------------------------------------------------------- */

/* Uppercase label above a section heading. */
.bgr-eyebrow {
  font-family: var(--bgr-font-body);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bgr-cedar);
}

/* Introductory paragraph, held to a readable measure. */
.bgr-lede {
  font-size: clamp(17px, 1.6vw, 19.5px);
  line-height: 1.7;
  color: var(--bgr-slate);
  max-width: 62ch;
}

/* Full-bleed hero. Height, not aspect-ratio: an aspect-ratio combined with a
   max-height makes the box shrink horizontally on wide screens and leaves a
   gap beside the image. */
.bgr-hero {
  width: 100%;
  height: min(80vh, 58vw);
  min-height: 560px;
}

/* Keeps hero copy clear of the slide caption plate pinned to the bottom. */
.bgr-hero-copy {
  padding-bottom: 96px;
}

/* Slide caption: project name and location, bottom left of the hero. */
.bgr-plate-num {
  font-family: var(--bgr-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #E0B78D;
  font-variant-numeric: tabular-nums;
}

.bgr-plate-name {
  font-family: var(--bgr-font-display);
  font-style: italic;
  color: #fff;
}

/* Category and listing cards. */
.bgr-card {
  background: var(--bgr-paper);
  border: 1px solid var(--bgr-rule);
  border-radius: var(--bgr-radius);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.bgr-card:hover {
  transform: translateY(-4px);
  border-color: var(--bgr-cedar);
  box-shadow: 0 2px 4px rgba(25, 29, 27, 0.06), 0 24px 48px -20px rgba(25, 29, 27, 0.22);
}

.bgr-card img {
  transition: transform 0.6s ease;
}

.bgr-card:hover img {
  transform: scale(1.05);
}

/* Numbered process step. The rule above step one is accented; the rest are not,
   which marks the start of the sequence without numbering every divider. */
.bgr-step {
  border-top: 2px solid var(--bgr-rule);
  padding-top: var(--bgr-s3);
}

.bgr-step--first {
  border-top-color: var(--bgr-cedar);
}

.bgr-step-n {
  font-family: var(--bgr-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--bgr-cedar);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Accessibility
   -------------------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--bgr-cedar);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}