/* =========================================================
   StoryBookBag — stylesheet
   Colours come from the brief. Gold is used only for lines and
   decoration, never for text (it is too light to read on off-white).
   ========================================================= */

/* ---------- Fonts (self-hosted, SIL Open Font License — see /fonts) ---------- */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/cormorant-garamond-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 600; font-display: swap;
  src: url("../fonts/cormorant-garamond-latin-600-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 600; font-display: swap;
  src: url("../fonts/cormorant-garamond-latin-ext-600-italic.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Lora"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/lora-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Lora"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/lora-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Lora"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("../fonts/lora-latin-400-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Lora"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("../fonts/lora-latin-ext-400-italic.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Lora"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/lora-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Lora"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/lora-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------- Colours from the brief ---------- */
:root {
  --green: #173C2A;
  --burgundy: #4A171C;
  --maroon: #781F32;
  --offwhite: #F7F1E6;
  --gold: #A88A50;          /* decoration only */
  --heading: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --body: "Lora", Georgia, "Times New Roman", serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--offwhite);
  color: var(--burgundy);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.7;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--maroon); text-underline-offset: 3px; }
a:hover { color: var(--green); }

/* Visible keyboard focus everywhere */
:focus-visible { outline: 3px solid var(--maroon); outline-offset: 3px; }

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--green); color: var(--offwhite); padding: .6rem 1rem; text-decoration: none;
}
.skip-link:focus { top: 1rem; color: var(--offwhite); }

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

h1, h2, h3 { font-family: var(--heading); font-weight: 600; line-height: 1.2; margin: 0 0 .5em; }
h1, h2 { color: var(--green); }
h3 { color: var(--burgundy); }
h1 { font-size: clamp(2.1rem, 5vw, 3rem); }
h2 { font-size: clamp(1.8rem, 4vw, 2.5rem); }
p { margin: 0 0 1.1em; }

/* ---------- Header: seasonal banner + navigation ---------- */
.banner img { width: 100%; display: none; }
/* season.js sets data-season on <html>; without JavaScript the autumn banner shows */
html[data-season="spring"] .banner-spring,
html[data-season="summer"] .banner-summer,
html[data-season="autumn"] .banner-autumn,
html[data-season="winter"] .banner-winter,
html:not([data-season]) .banner-autumn { display: block; }
/* On phones the banner is shown taller and trimmed at the sides so the name stays readable */
@media (max-width: 700px) {
  .banner img { height: 130px; object-fit: cover; object-position: center; }
}
@media (max-width: 480px) {
  .banner img { height: 100px; }
}

.site-nav { padding: 1rem 1rem .5rem; }
.site-nav ul {
  list-style: none; margin: 0 auto; padding: 0;
  display: flex; align-items: center; justify-content: center; gap: clamp(.6rem, 2.5vw, 1.6rem);
}
.site-nav a {
  font-family: var(--heading); font-weight: 600; color: var(--green);
  font-size: clamp(1.3rem, 3.2vw, 1.75rem); text-decoration: none; padding: .2rem .3rem;
}
.site-nav a:hover { color: var(--maroon); }
.nav-flourish { width: clamp(60px, 22vw, 300px); height: auto; }
.nav-flourish.left { object-fit: cover; object-position: right center; }
.nav-flourish.right { object-fit: cover; object-position: left center; }
.nav-leaf { width: clamp(18px, 3vw, 28px); height: auto; }
@media (max-width: 560px) { .nav-flourish { display: none; } }

/* ---------- Sections ---------- */
main { display: block; }
.section {
  max-width: 46rem; margin: 0 auto; padding: 2.5rem 1.25rem;
  text-align: center; scroll-margin-top: 1rem;
}
.subheading { font-family: var(--heading); font-style: italic; font-weight: 600; color: var(--maroon); font-size: clamp(1.35rem, 3vw, 1.7rem); }

/* Thin-line decorative flourish between sections */
.divider { max-width: 46rem; margin: 0 auto; padding: 0 1.25rem; }
.divider img { width: 100%; max-width: 640px; margin: 0 auto; }

.teaser-image { margin: 1.5rem auto 0; width: 100%; max-width: 560px; border-radius: 4px; }

/* ---------- Forms ---------- */
form { text-align: left; margin: 1.5rem auto 0; max-width: 32rem; }
.field { margin-bottom: 1rem; }
label { display: block; font-weight: 600; color: var(--green); margin-bottom: .3rem; }
input[type="text"], input[type="email"], input[type="date"], textarea {
  width: 100%; font: inherit; color: var(--burgundy); background: #fff;
  border: 1px solid var(--green); border-radius: 3px; padding: .65rem .75rem;
}
textarea { min-height: 9rem; resize: vertical; }
.check { display: flex; gap: .6rem; align-items: flex-start; margin-bottom: .8rem; font-size: .95rem; }
.check input { margin-top: .35rem; width: 1.15rem; height: 1.15rem; flex: 0 0 auto; accent-color: var(--green); }
.check label { font-weight: 400; color: var(--burgundy); margin: 0; }
.small { font-size: .9rem; }
.field-help { margin: .3rem 0 0; }
input[type="date"] { min-height: 2.9rem; }
button, .button {
  font-family: var(--heading); font-weight: 600; font-size: 1.3rem;
  background: var(--green); color: var(--offwhite); border: 0; border-radius: 3px;
  padding: .55rem 1.6rem; cursor: pointer; display: inline-block; text-decoration: none;
}
button:hover, .button:hover { background: var(--maroon); color: var(--offwhite); }
button[disabled] { opacity: .7; cursor: wait; }
.form-actions { text-align: center; margin-top: 1.2rem; }

/* Honeypot: hidden from people and screen readers, visible to spam bots */
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.form-message { margin-top: 1rem; text-align: center; font-weight: 600; }
.form-message.ok { color: var(--green); }
.form-message.error { color: var(--maroon); }

/* Optional subtle page-turn animation for the newsletter thank-you */
.page-turn { animation: pageTurn .9s ease-out; transform-origin: left center; }
@keyframes pageTurn {
  from { transform: perspective(900px) rotateY(-75deg); opacity: 0; }
  to   { transform: perspective(900px) rotateY(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .page-turn { animation: none; } }

/* ---------- Social icons ---------- */
.social { list-style: none; padding: 0; margin: 1.5rem 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.social a { display: block; padding: 4px; border-radius: 50%; }
.social img { width: 44px; height: 44px; }
.social a:hover img { opacity: .75; }

/* ---------- Contact ---------- */
.envelope { width: 100%; max-width: 420px; margin: 0 auto 1.5rem; }
.closing { margin-top: 2.5rem; font-style: italic; }

/* ---------- Footer ---------- */
.site-footer { text-align: center; padding: 2rem 1.25rem 2.5rem; font-size: .95rem; }
.site-footer .tagline { font-family: var(--heading); font-style: italic; font-weight: 600; color: var(--maroon); font-size: 1.4rem; margin-bottom: .3rem; }
.footer-legal { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .4rem 1rem; margin-top: .8rem; }
.footer-legal img { width: 32px; height: 32px; }
.footer-legal a { color: var(--burgundy); }

/* ---------- Legal / error pages ---------- */
.page-header { text-align: center; padding: 1.5rem 1rem 0; }
.page-header a { display: inline-block; }
.page-header img { width: 96px; height: 96px; margin: 0 auto; }
.legal { max-width: 46rem; margin: 0 auto; padding: 1.5rem 1.25rem 2rem; text-align: left; }
.legal h1 { text-align: center; }
.legal h2 { font-size: 1.7rem; margin-top: 1.8rem; }
.legal ul { padding-left: 1.3rem; }
.placeholder { background: #FFE9A8; color: #4A171C; padding: 0 .25rem; }
.center { text-align: center; }

/* ---------- Cookie notice ---------- */
.cookie-notice {
  position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 50;
  max-width: 36rem; margin: 0 auto; background: var(--offwhite); color: var(--burgundy);
  border: 1px solid var(--green); border-radius: 4px; padding: 1rem 1.2rem;
  box-shadow: 0 4px 18px rgba(23, 60, 42, .18); font-size: .95rem;
}
.cookie-notice p { margin: 0 0 .7rem; }
.cookie-notice .actions { display: flex; flex-wrap: wrap; gap: .8rem 1.2rem; align-items: center; }
.cookie-notice button { font-size: 1.15rem; padding: .35rem 1.3rem; }
.cookie-notice[hidden] { display: none; }
/* While the notice is open, extra space at the bottom keeps the footer links reachable */
body.has-notice { padding-bottom: 15rem; }
@media (min-width: 700px) { body.has-notice { padding-bottom: 10rem; } }
@media (max-width: 420px) {
  .social { gap: .35rem; }
  .social img { width: 40px; height: 40px; }
}