/* ==========================================================================
   Lerwick Self Catering Apartment
   One stylesheet for all five pages. Colours and sizes are set in :root.
   ========================================================================== */

:root{
  /* Colours taken from your original Muse stylesheets */
  --red:#D51B32;        /* buttons, bars, menu panel */
  --red-dark:#A6371E;   /* menu hover */
  --hover:#141414;      /* button hover */
  --text:#4D4743;       /* body copy */
  --slate:#2C3C44;      /* secondary text */
  --grey:#555555;       /* header and footer band */
  --dark:#404040;       /* background behind the whole site */

  --site:1080px;        /* width of the white column */
  --pad:clamp(1rem,4vw,2.5rem);

  /* Trajan Pro and Museo Sans came from your Adobe/Typekit subscription.
     These two free fonts are the closest match. */
  --display:"Cinzel",Georgia,"Times New Roman",serif;
  --body:"Nunito Sans","Segoe UI",Helvetica,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

/* Dark patterned surround, visible either side of the site */
body{
  margin:0;
  color:var(--text);
  font:400 18px/25px var(--body);
  background:var(--dark) url("images/patterndgreybig.svg") repeat center top fixed;
  background-size:142px 142px;
}

/* The white column the site sits in */
.site{
  max-width:var(--site);
  min-height:100vh;
  margin-inline:auto;
  background:#fff;
  position:relative;
}

img{display:block;max-width:100%}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}

.wrap{width:100%;max-width:var(--site);margin-inline:auto;padding-inline:var(--pad)}

.skip-link{position:absolute;left:-9999px;top:0;background:var(--hover);color:#fff;padding:.75rem 1.25rem;z-index:60}
.skip-link:focus{left:0}

/* ===== Red bars (original heights: 21px, 8px, 9px) ======================= */
.bar{background:var(--red)}
.bar-top{height:21px}
.bar-thin{height:8px}
.bar-foot{height:9px}

/* ===== Header ============================================================ */
.site-header{
  background:var(--grey) url("images/patterngrey.svg") repeat center top;
  background-size:43px 43px;
  position:relative;
  z-index:30;
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-block:1.25rem;
}
.logo{display:block;line-height:0}
.logo img{width:clamp(11.5rem,26vw,17rem);height:auto}

/* Hamburger: three white rounded bars, as on your original site */
.nav-toggle{
  background:none;border:0;padding:.5rem;cursor:pointer;
  display:flex;flex-direction:column;gap:5px;
}
.nav-toggle span{display:block;width:30px;height:5px;border-radius:11px;background:#fff}

/* Red drop-down menu */
.site-nav{
  position:absolute;right:var(--pad);top:100%;
  min-width:15rem;
  background:var(--red);
  border-radius:0 0 10px 10px;
  display:none;
  box-shadow:0 8px 20px rgba(0,0,0,.25);
}
.site-nav.is-open{display:block}
.site-nav ul{list-style:none;margin:0;padding:.5rem 0 1rem}
.site-nav a{
  display:block;padding:0 18px;line-height:48px;
  color:#fff;font:700 16px var(--body);
  text-transform:uppercase;text-decoration:none;text-align:right;
}
.site-nav a:hover{background:var(--red-dark)}
.site-nav a[aria-current="page"]{color:var(--slate)}

/* ===== Hero photo ======================================================== */
.hero img{width:100%;height:auto;background:#4F4F4F}

/* ===== Page content, with the faint texture behind it ==================== */
.content{position:relative;padding-block:clamp(2.5rem,6vw,4rem);text-align:center}
.content::before{
  content:"";position:absolute;inset:0;
  background:var(--text) url("images/patternlgreybig.svg") repeat center top;
  background-size:142px 142px;
  opacity:.03;                 /* same 3% as the original */
  pointer-events:none;
}
.content > *{position:relative} /* keeps text above the texture */

h1,h2{font-family:var(--display);color:var(--text);margin:0}
h1{
  font-weight:500;
  font-size:clamp(1.5rem,3.6vw,2.4rem);
  line-height:1.3;
  letter-spacing:.06em;
  text-transform:uppercase;
  margin-bottom:1.5rem;
}
h2{
  font-weight:600;font-size:23px;line-height:32px;letter-spacing:2px;
  margin-bottom:1rem;
}
.subtitle{margin-bottom:2rem}

p{max-width:46rem;margin:0 auto 1.6rem}
.content p:last-child{margin-bottom:0}

/* ===== Buttons =========================================================== */
.button{
  display:inline-block;
  background:var(--red);color:#fff;
  font:700 14px/1 var(--body);letter-spacing:1px;
  text-transform:uppercase;text-decoration:none;
  padding:1.1rem 2rem;border:0;border-radius:10px;cursor:pointer;
  transition:background-color .18s ease;
}
.button:hover{background:var(--hover)}
.button-row{margin-bottom:2.5rem}

/* ===== Terms page sections =============================================== */
.terms h2{margin-top:2.5rem;font-size:20px;letter-spacing:1px}
.terms h2:first-of-type{margin-top:0}

/* ===== Photo slideshow =================================================== */
/* The slideshow styles live inside bookings.html, next to the slideshow
   itself, so it only needs that page and slideshow.js to work. */

/* ===== Contact details and form ========================================== */
.contact-details p{margin-bottom:.4rem}
.contact-details a{color:var(--red);font-weight:700;text-decoration:none}
.contact-details a:hover{text-decoration:underline}

.enquiry{max-width:34rem;margin:2.5rem auto 0;text-align:left}
.enquiry label{display:block;font-weight:700;font-size:15px;margin-bottom:.35rem}
.enquiry input,
.enquiry textarea{
  width:100%;
  font:400 17px/24px var(--body);
  color:var(--text);
  padding:.7rem .9rem;
  border:1px solid #C9C4BF;
  border-radius:6px;
  background:#fff;
  margin-bottom:1.25rem;
}
.enquiry textarea{min-height:9rem;resize:vertical}
.enquiry input:focus,
.enquiry textarea:focus{border-color:var(--red);outline:none;box-shadow:0 0 0 3px rgba(213,27,50,.15)}
.enquiry .button{width:100%}
.honeypot{position:absolute;left:-9999px}   /* spam trap, hidden from people */

.notice{
  max-width:34rem;margin:0 auto 1.5rem;
  padding:1rem 1.25rem;border-radius:10px;
  background:#EFF5EE;border:1px solid #BBD6B8;color:#2F5D2A;
}
.notice-error{background:#FCEEF0;border-color:#E9B6BE;color:#8E1120}

/* ===== Footer ============================================================ */
.site-footer{
  background:var(--grey) url("images/patterngrey.svg") repeat center top;
  background-size:43px 43px;
  color:#fff;text-align:center;
  font-size:14px;line-height:22px;
}
.site-footer .wrap{padding-block:2.5rem}
.site-footer p{margin:0;max-width:none}
.site-footer a{color:#fff;font-weight:700}

@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important}}