/* Smitsfield — house stylesheet.
   Shared by every page: reset, tokens, typography, header/nav/mobile menu,
   footer, buttons, hero, containers and the sf-* enquiry form.
   Page-specific rules live in /assets/pages/<slug>.css. See docs/SITE-SYSTEM.md.
   Values are copied from the computed styles of the production (Astra/Elementor)
   pages at 1440 and 390 so the rebuilt pages render identically. */

/* ---------- tokens ---------- */
:root {
  --c-sand: #ccc4ae;               /* link colour, contact details */
  --c-grey: #a9a3a3;               /* hover colour, icons, social buttons */
  --c-brown: #4c423a;              /* headings, nav */
  --c-text: rgba(77, 66, 58, .76); /* body copy */
  --c-cream: #f9f3ed;              /* page background below 921px */
  --c-white: #fff;
  --c-line: rgba(77, 65, 57, .11); /* hairlines */
  --c-black: #000;

  /* Family names are the ones the theme used; brand-fonts.css aliases them
     onto Baskerville (serif), Source Sans 3 (sans) and Kusack Signature (script). */
  --font-sans: 'Montserrat', sans-serif;
  --font-serif: 'Cormorant Garamond', 'Cormorant', serif;
  --font-script: 'auto', sans-serif;
  --font-script-alt: 'Great Vibes', handwriting;

  --header-z: 99;
  --bp-tablet: 921px; /* header switches to the mobile bar at and below this */
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 93.75%; -webkit-text-size-adjust: 100%; }
@media (max-width: 921px) { html { font-size: 85.5%; } }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* Elementor frontend.css */
body {
  margin: 0;
  position: relative;
  overflow-x: hidden;
  background: var(--c-white);
  color: var(--c-text);
  font: 400 1rem/1.85714285714286 var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media (max-width: 921px) { body { background: var(--c-cream); } }
img { max-width: 100%; height: auto; }
iframe { border: 0; }
a { color: var(--c-sand); text-decoration: none; transition: all .2s linear; } /* Astra: a{transition:all .2s linear} */
a:hover, a:focus { color: var(--c-grey); }
p { margin: 0 0 1.75em; }
ul, ol { margin: 0 0 1.5em 3em; padding: 0; }
li { line-height: 1.5em; }
button, input, select, textarea { font: inherit; color: inherit; margin: 0; }
input, textarea { transition: all .2s linear; }

/* ---------- typography ---------- */
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 20px;
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--c-brown);
}
h1 { font-size: 100px; line-height: 1em; text-transform: uppercase; }
h2 { font-size: 65px;  line-height: 1em; text-transform: uppercase; }
h3 { font-size: 34px;  line-height: 1em; font-family: var(--font-script-alt); }
h4 { font-size: 26px;  line-height: 1.2em; }
h5 { font-size: 22px;  line-height: 1.2em; }
h6 { font-size: 14px;  line-height: 1.2em; }
@media (max-width: 921px) {
  h1 { font-size: 70px; }
  h2 { font-size: 45px; }
  h3 { font-size: 23px; }
}
@media (max-width: 544px) {
  h1 { font-size: 40px; }
  h2 { font-size: 35px; }
  h3 { font-size: 20px; }
}
.script { font-family: var(--font-script); }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(1px, 1px, 1px, 1px); border: 0;
}
.skip-link:focus {
  position: absolute; left: 6px; top: 7px; z-index: 100000;
  width: auto; height: auto; margin: 0; padding: 15px 23px 14px; clip: auto;
  background: var(--c-white); color: var(--c-brown);
}

/* ---------- page shell ---------- */
.site { display: flex; flex-direction: column; min-height: 100vh; }
.site-content { flex: 1 1 auto; overflow-wrap: break-word; } /* Astra: .entry-content{word-wrap:break-word} */
.container { width: 100%; max-width: 1300px; margin: 0 auto; }

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  padding: 15px 25px;
  border: 1px solid var(--c-brown);
  background: transparent;
  color: var(--c-brown);
  font: 700 14px/1 var(--font-sans);
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .3s;
}
.btn:hover, .btn:focus { background: var(--c-brown); color: var(--c-white); }

/* ---------- header ---------- */
.site-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: var(--header-z);
}
.site-header__bar {
  position: relative;
  z-index: 4;
  margin: 10px;
  padding: 0 35px;
  min-height: 80px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  column-gap: 20px;
  align-items: center;
  background: rgba(255, 255, 255, .61);
}
.site-brand {
  display: flex;
  align-items: center;
  padding: 15px 15px 15px 0;
  line-height: 1;
}
.site-brand a, .site-brand img { display: block; }
.site-brand img { width: 154px; max-width: none; }

.site-nav ul {
  display: flex;
  flex-wrap: nowrap;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-serif);
  font-weight: 500;
  text-transform: uppercase;
}
.site-nav--left ul { justify-content: flex-end; }
.site-nav li { display: flex; flex-direction: column; justify-content: center; white-space: nowrap; line-height: inherit; }
.site-nav a {
  position: relative;
  display: flex;
  align-items: center;
  height: 80px;
  line-height: 80px;
  padding: 0 clamp(5px, .55vw, 12px);
  font-size: clamp(11px, .88vw, 15px);
  color: var(--c-brown);
}
.site-nav a::before {
  content: "";
  position: absolute;
  bottom: 0; right: 50%;
  width: calc(100% - 1.2em); height: 1px;
  background: transparent;
  transform: scale(0, 0) translate(-50%, 0);
  transition: transform .3s ease-in-out;
}
.site-nav li:hover > a { color: var(--c-grey); }
.site-nav li:hover > a::before { background: currentColor; transform: scale(1, 1) translate(50%, 0); }
/* current page: #6b625a at rest AND while hovered (production's sf-nav-fix rule is !important);
   the hover underline then draws in #6b625a via currentColor */
.site-nav a[aria-current="page"], .site-nav li:hover > a[aria-current="page"] { color: #6b625a; }

/* mobile bar + off-canvas menu */
.site-header__mobile { display: none; }
.menu-toggle {
  display: flex;
  align-items: center;
  padding: .5em;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: var(--c-white);
  font-size: 1.5em;
  line-height: 1;
  cursor: pointer;
}
.menu-toggle:focus { border: 1px dotted var(--c-white); outline: 1px dotted var(--c-white); outline-offset: 0; }
.menu-toggle svg { display: block; width: 20px; height: 20px; fill: currentColor; }
.menu-toggle .icon-close { display: none; }
.menu-toggle[aria-expanded="true"] .icon-menu { display: none; }
.menu-toggle[aria-expanded="true"] .icon-close { display: block; }
.mobile-menu { background: var(--c-white); }
.mobile-menu[hidden] { display: none; }
.mobile-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-serif);
  font-size: 1em;   /* 13.68px at tablet widths */
  line-height: 3;
  text-transform: uppercase;
}
@media (max-width: 544px) { .mobile-menu ul { font-size: .8em; } } /* 10.944px on phones */
.mobile-menu li { line-height: inherit; }
.mobile-menu a {
  display: block;
  padding: 10px 20px;
  border-bottom: 1px solid var(--c-line);
  background: var(--c-white);
  color: var(--c-brown);
}
.mobile-menu a[aria-current="page"] { color: var(--c-text); }
.mobile-menu li:hover > a { color: var(--c-text); background: var(--c-cream); }

@media (max-width: 921px) {
  .site-header__desktop { display: none; }
  .site-header__mobile { display: block; }
  .site-header__mobile .site-header__bar {
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
  }
  .site-brand { padding: 1em 0; }
}
@media (max-width: 544px) {
  .site-header__mobile .site-header__bar { margin: 0; }
  .site-brand img { width: 128px; }
}

/* ---------- hero (full-bleed image, script kicker, uppercase title) ---------- */
.hero {
  position: relative;
  background-color: var(--c-white);
  background-position: center center;
  background-size: cover;
  padding: 200px 0 100px;
  text-align: center;
}
.hero::before { content: ""; position: absolute; inset: 0; background: var(--c-black); opacity: .09; }
.hero__inner { position: relative; padding: 12% 6.5% 6.5%; }
.hero__kicker {
  margin: 0 0 10px;
  font-family: var(--font-script);
  font-size: 68px;
  line-height: 1;
  color: var(--c-white);
}
.hero h1 { margin: 0; color: var(--c-white); }
@media (min-width: 1025px) { .hero--fixed { background-attachment: fixed; } }
@media (max-width: 1024px) { .hero__inner { padding: 33% 6.5% 8%; } }
@media (max-width: 767px) {
  .hero { padding: 0 0 48px; }
  .hero__inner { padding: 66% 0 13%; }
  .hero__kicker { font-size: 35px; }
}

/* ---------- footer ---------- */
.site-footer {
  background: url(/wp-content/uploads/2022/11/bg-07.png) no-repeat center top / cover fixed;
}
.site-footer__main {
  padding: 5% 26.5%;
  border-top: 1px solid var(--c-line);
  background: var(--c-white);
}
.site-footer__main .container { max-width: 1300px; }
.footer-nav { margin: 0 0 10px; }
.footer-nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-nav li { display: flex; flex-direction: column; justify-content: center; line-height: inherit; }
.footer-nav a { display: flex; align-items: center; padding: 35px; color: var(--c-black); }
.footer-nav a[aria-current="page"], .footer-nav a:hover { color: var(--c-grey); }
.footer-social { text-align: center; }
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 35px; height: 35px;
  margin: 0 6px;
  padding: 10px;
  background: var(--c-grey);
  vertical-align: middle;
  line-height: 1;
}
.footer-social a:first-child { margin-left: 0; }
.footer-social a:last-child { margin-right: 0; }
.footer-social a:hover { background: var(--c-black); }
.footer-social a { transition: all .01s; }
.footer-social svg { display: block; width: 15px; height: 15px; fill: var(--c-white); }
.site-footer__bottom { padding: 20px 0; min-height: 80px; }
.site-footer__bottom .container { min-height: 80px; text-align: center; }
.site-footer__bottom p { margin: 0; }
@media (max-width: 921px) {
  .site-footer__main { padding: 9.75% 6.5% 6.5%; }
  .site-footer__main .container { padding-bottom: 10px; }
  .footer-nav a { padding: 20px 30px 30px; }
}
@media (max-width: 544px) {
  .site-footer { padding: 0 3.5px; }
  .footer-nav ul { display: grid; justify-content: center; margin: 60px 0 50px; }
  .footer-nav li { align-items: center; }
  .footer-nav a { padding: 5px; }
  .site-footer__bottom { padding: 26px 20px 20px; }
}

/* ---------- sf-* enquiry form (verbatim from /assets/css/sf-enquiry.css) ---------- */
.sf-enquiry{display:grid;gap:16px;text-align:left}
.sf-enquiry .sf-required-note{margin:0;font-size:13px;opacity:.75}
.sf-enquiry .sf-req{color:#c0392b}
.sf-enquiry .sf-field{display:grid;gap:6px}
.sf-enquiry label{font-size:14px}
.sf-enquiry input[type=text],.sf-enquiry input[type=email],.sf-enquiry input[type=tel],
.sf-enquiry input[type=date],.sf-enquiry input[type=number],.sf-enquiry textarea{
  width:100%;padding:9px 12px;border:1px solid #e2e2e2;border-radius:3px;
  background:#fafafa;font:inherit;font-size:15px;color:inherit;box-sizing:border-box}
.sf-enquiry textarea{resize:vertical;min-height:120px}
.sf-enquiry input:focus,.sf-enquiry textarea:focus{outline:0;border-color:#9a9a9a;background:#fff}
.sf-enquiry .sf-consent label{display:flex;gap:9px;align-items:flex-start;font-size:13px;line-height:1.5;opacity:.85}
.sf-enquiry .sf-consent input{margin-top:3px;flex:0 0 auto}
.sf-enquiry button{justify-self:start;margin-top:4px;padding:10px 22px;
  border:1px solid #cfcfcf;border-radius:3px;background:#fff;color:inherit;
  font:inherit;font-size:13px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.sf-enquiry button:hover{background:#f2f2f2;border-color:#a9a9a9}
.sf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.sf-status{margin:0 0 18px;padding:12px 14px;border-radius:3px;font-size:14px}
.sf-status[data-tone=ok]{background:#eef4ee;border:1px solid #c6dcc6}
.sf-status[data-tone=bad]{background:#f8eded;border:1px solid #e0c2c2}

/* ---------- lightbox (site.js) ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .85);
}
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 92vw; max-height: 92vh; box-shadow: 0 0 40px rgba(0, 0, 0, .6); }
.lightbox button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .15);
  color: var(--c-white);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}
.lightbox button:hover { background: rgba(255, 255, 255, .3); }
.lightbox__prev { left: 16px; }
.lightbox__next { right: 16px; }
.lightbox .lightbox__close { top: 16px; right: 16px; transform: none; }

/* ---------- entrance animations (site.js; usage in docs/SITE-SYSTEM.md) ----------
   [data-anim="<name>"] reproduces Elementor's elementor-invisible -> "animated <name>":
   the element keeps its box but is visibility:hidden until its first pixel enters
   the viewport; site.js then adds .is-animated (+ .anim-<name>) after data-anim-delay ms.
   Duration 1.25s like .animated, "slow" 2s / "fast" .75s; timing ease, fill none,
   so the final state is the element's natural one. Reduced motion: the element is
   simply shown (Elementor 3.32 does the same). */
[data-anim] { visibility: hidden; }
[data-anim].is-animated { visibility: visible; }
.is-animated { animation-duration: 1.25s; }
.is-animated--slow { animation-duration: 2s; }
.is-animated--fast { animation-duration: .75s; }
.anim-fadeIn { animation-name: fadeIn; }
.anim-slideInUp { animation-name: slideInUp; }
@keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }
/* Production's effective slideInUp is the Fusion (animate.css v1) definition, loaded after
   Elementor's and therefore winning: fade in while rising from 2000px below. */
@keyframes slideInUp { 0% { opacity: 0; transform: translateY(2000px); } 100% { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .is-animated { animation: none !important; } }

/* ---------- timeline line fill (site.js; the UAEL timeline widget's scroll behaviour) ----------
   ol.timeline > li.timeline__item > .timeline__marker. The grey fill runs from the first
   marker's top and grows so its lower end sits on the viewport's vertical midline
   (tracks scroll 1:1, no easing), saturating at the full line height + 7px. site.js sets
   --tl-x / --tl-top / --tl-fill on the list; items and markers above the midline carry
   .timeline__item--in-view / .timeline__marker--in-view (no visual change, as on production). */
.timeline { position: relative; }
.timeline::before {
  content: "";
  position: absolute;
  z-index: 1;                     /* above the items' own line pieces, below the markers */
  top: var(--tl-top, 0);
  left: var(--tl-x, 50%);
  width: 2px;
  height: var(--tl-fill, 0);
  background: var(--c-grey);
}

/* ---------- sf-* pages (/book-a-tour/, /get-a-quote/): the Contact page's width and columns ---------- */
/* 6.5% side inset and 6% top/bottom like .contact; two equal columns with a 6.5% gap and a hairline
   down the middle above 1024px, stacked below (the page CSS places each block in a column). */
.sf-page { padding: 6% 6.5%; }
@media (min-width: 1025px) {
  .sf-page {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 6.5%;
    align-items: start;
    background: linear-gradient(var(--c-line), var(--c-line)) 50% 0 / 1px 100% no-repeat content-box;
  }
}

/* ---------- band: full-width parallax photo with a heading and copy (/our-venue/ features, /accommodation/) ---------- */
/* A page sets the photo with a modifier: .band--<name> { background-image: url(...) } */
.band {
  position: relative;
  padding: 8%;
  background: center center / cover no-repeat;
}
.band::before { content: ""; position: absolute; inset: 0; background: var(--c-black); opacity: .5; }
.band__inner { position: relative; }
.band h2 { margin: 0 0 20px; color: var(--c-white); }
.band p {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.2; /* unitless, as production had it: 16px copy then rounds to 19.1875px lines */
  color: var(--c-white);
}
@media (min-width: 1025px) { .band { background-attachment: fixed; } }
@media (max-width: 767px) {
  .band::before { opacity: .55; }
  .band p { font-size: 16px; }
}