/* One header for every page: home, event, country, month, guides, contact,
   submit, custom diary and Results. Loaded after each page's own styles so
   the logo, menu text and Instagram icon match wherever the reader lands.
   Self contained on purpose: no variables from other stylesheets. */
.topbar > .headerInner, .topbar > .header { width: min(1180px, calc(100% - 48px)); margin: 0 auto; min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.topbar .brand { display: inline-flex; align-items: center; gap: 13px; color: #23322c; text-decoration: none; }
.topbar .brand img, .topbar .brandMark { width: 46px; height: 46px; flex: 0 0 46px; }
.topbar .brand span { display: grid; gap: 2px; }
.topbar .brand strong { font-size: 0.92rem; letter-spacing: 0.16em; line-height: 1.1; }
.topbar .brand small { color: #8f5430; font-size: 0.69rem; font-weight: 750; letter-spacing: 0.12em; }
/* Desktop menu: the same words at the same size on every page. */
.topbar .desktopNav, .topbar .headerRight, .topbar.resultsTopbar .headerInner .desktopDiaryLinks { display: flex; align-items: center; gap: 32px; color: #36423d; font-size: 0.9rem; font-weight: 650; }
.topbar .desktopNav a, .topbar .headerRight a, .topbar.resultsTopbar .headerInner .desktopDiaryLinks a { position: relative; color: inherit; font: inherit; text-decoration: none; white-space: nowrap; }
.topbar .desktopNav a::after, .topbar .headerRight a::after { position: absolute; right: 0; bottom: -7px; left: 0; height: 2px; background: #b8734a; content: ""; opacity: 0; transform: scaleX(0.5); transition: 180ms ease; }
.topbar .desktopNav a:hover::after, .topbar .desktopNav a:focus-visible::after, .topbar .headerRight a:hover::after, .topbar .headerRight a:focus-visible::after { opacity: 1; transform: scaleX(1); }
/* Instagram: a 36 px icon at the end of the desktop menu; an outlined 44 px button beside the menu button on phones. */
.topbar .socialLink { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-left: -8px; border-radius: 9px; color: #36423d; text-decoration: none; }
.topbar .socialLink svg { width: 20px; height: 20px; }
.topbar .socialLink::after { display: none; }
.topbar .socialLink:hover, .topbar .socialLink:focus-visible { background: #ebe7de; color: #23322c; }
.topbar .socialLinkPhone { display: none; }
.topbar .socialLinkBar { margin-left: auto; }
.topbar .mobileNav { display: none; position: relative; }
/* The phone menu button and its dropdown, the same on every page. */
.topbar .mobileNav summary { width: 44px; height: 44px; display: grid; place-content: center; gap: 5px; border: 1px solid #dadeda; border-radius: 10px; background: #fff; cursor: pointer; list-style: none; }
.topbar .mobileNav summary::-webkit-details-marker { display: none; }
.topbar .mobileNav summary::marker { content: ""; }
.topbar .mobileNav summary span { display: block; width: 21px; height: 2px; border-radius: 2px; background: #23322c; }
.topbar .mobileNav nav { position: absolute; top: 52px; right: 0; min-width: 210px; padding: 8px; display: grid; gap: 2px; border: 1px solid #dadeda; border-radius: 12px; background: #fff; box-shadow: 0 14px 35px rgba(27, 38, 33, 0.16); z-index: 1004; }
.topbar .mobileNav nav a { display: block; padding: 11px 13px; border-radius: 8px; color: #36423d; font-size: 0.86rem; font-weight: 700; white-space: nowrap; text-decoration: none; }
.topbar .mobileNav nav a:hover, .topbar .mobileNav nav a:focus-visible { background: #f5f3ee; color: #23322c; }
@media (max-width: 620px) {
  .topbar .desktopNav, .topbar .headerRight { display: none; }
  .topbar .mobileNav { display: block; }
  .topbar > .headerInner, .topbar > .header { gap: 12px; }
  .topbar .socialLinkPhone { display: inline-flex; }
  .topbar .socialLinkPhone, .topbar .socialLinkBar { width: 44px; height: 44px; margin-left: auto; border: 1px solid #dadeda; border-radius: 10px; background: #fff; color: #23322c; flex: 0 0 44px; }
  .topbar .socialLinkPhone + .mobileNav, .topbar .socialLinkBar + .mobileNav { margin-left: 0; }
  /* The brand stays on two short lines at the same size on every page. */
  .topbar > .headerInner, .topbar > .header { min-height: 72px; width: min(100% - 22px, 560px); }
  .topbar .brand { min-width: 0; gap: 10px; }
  .topbar .brand span { min-width: 0; }
  .topbar .brand img, .topbar .brandMark { width: 39px; height: 39px; flex-basis: 39px; }
  .topbar .brand strong { font-size: 0.76rem; white-space: nowrap; }
  .topbar .brand small { font-size: 0.58rem; white-space: nowrap; }
}
/* The Results header keeps its own 900 px breakpoint for its view buttons. */
@media (max-width: 900px) { .topbar.resultsTopbar .socialLinkBar { width: 44px; height: 44px; margin-left: auto; border: 1px solid #dadeda; border-radius: 10px; background: #fff; color: #23322c; flex: 0 0 44px; } }

/* Footer: small centred privacy policy and terms of use links on every page. */
footer .footerPrivacy, .siteFooter .footerPrivacy, .footer .footerPrivacy { margin: 18px 0 0; text-align: center; font-size: 0.8rem; color: inherit; }
footer .footerPrivacy a, .siteFooter .footerPrivacy a, .footer .footerPrivacy a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
footer .footerLines, .siteFooter .footerLines, .footer .footerLines { line-height: 1.6; }
footer .footerCopyright, .siteFooter .footerCopyright, .footer .footerCopyright { display: block; margin-top: 6px; }
/* The Guides link the guide build adds to every footer. It lives here, not in styles.css: the submit and custom diary pages do not load styles.css. */
footer .footerGuides, .siteFooter .footerGuides, .footer .footerGuides { display: block; margin-top: 10px; color: #e8b08f; font-size: 0.8rem; text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   Dark theme for the shared header (and the theme toggle button).
   Loaded on every page, so one block themes every header and keeps
   the toggle looking the same everywhere. Literal colours on purpose,
   matching this file's self-contained approach.
   ============================================================ */
.topbar .brand { margin-right: auto; }
.topbar .themeToggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: 0 0 40px; border: 1px solid #dadeda; border-radius: 10px; background: #fff; color: #23322c; cursor: pointer; transition: background .16s ease, border-color .16s ease, color .16s ease; }
.topbar .themeToggle:hover, .topbar .themeToggle:focus-visible { background: #ebe7de; }
.topbar .themeToggle:focus-visible { outline: 3px solid #b8734a; outline-offset: 2px; }
.topbar .themeToggle svg { width: 19px; height: 19px; }
.topbar .themeToggleSun { display: none; }
@media (max-width: 620px) { .topbar .themeToggle { width: 44px; height: 44px; flex-basis: 44px; } }

html[data-theme="dark"] .topbar .brand { color: #e8ece6; }
html[data-theme="dark"] .topbar .brand small { color: #dca074; }
html[data-theme="dark"] .topbar .desktopNav, html[data-theme="dark"] .topbar .headerRight, html[data-theme="dark"] .topbar.resultsTopbar .headerInner .desktopDiaryLinks { color: #c6cdc7; }
html[data-theme="dark"] .topbar .socialLink { color: #c6cdc7; }
html[data-theme="dark"] .topbar .socialLink:hover, html[data-theme="dark"] .topbar .socialLink:focus-visible { background: rgba(255,255,255,.08); color: #e8ece6; }
html[data-theme="dark"] .topbar .mobileNav summary { background: #1a201d; border-color: #2b332f; }
html[data-theme="dark"] .topbar .mobileNav summary span { background: #c9d1cb; }
html[data-theme="dark"] .topbar .mobileNav nav { background: #1a201d; border-color: #2b332f; box-shadow: 0 14px 35px rgba(0,0,0,.5); }
html[data-theme="dark"] .topbar .mobileNav nav a { color: #c6cdc7; }
html[data-theme="dark"] .topbar .mobileNav nav a:hover, html[data-theme="dark"] .topbar .mobileNav nav a:focus-visible { background: rgba(255,255,255,.06); color: #e8ece6; }
html[data-theme="dark"] .topbar .socialLinkPhone, html[data-theme="dark"] .topbar .socialLinkBar, html[data-theme="dark"] .topbar.resultsTopbar .socialLinkBar { background: #1a201d; border-color: #2b332f; color: #c6cdc7; }
html[data-theme="dark"] .topbar .themeToggle { background: #1a201d; border-color: #2b332f; color: #e8ece6; }
html[data-theme="dark"] .topbar .themeToggle:hover, html[data-theme="dark"] .topbar .themeToggle:focus-visible { background: #222a26; border-color: #3a443e; }
html[data-theme="dark"] .topbar .themeToggleSun { display: block; }
html[data-theme="dark"] .topbar .themeToggleMoon { display: none; }

html[data-theme="dark"] .topbar { background: #1a201d; border-bottom-color: rgba(255,255,255,.08); }