/* Hand-written styles. Edit this file to restyle; site.css (generated from the old theme) stays untouched.
   Colours are variables so a restyle is a few lines. */
:root {
  --brand: #0087cc;      /* main blue */
  --brand-dark: #006ba3;
  --ink: #222;
  --card-bg: #fff;
  --card-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}

/* behaviour classes toggled by assets/js/site.js */
.animated { animation-duration: 1s; animation-fill-mode: both; }
.fadeIn { animation-name: fadeIn; }
.topbar.hidden { display: none; }
#return-to-top.visible { display: block; }

/* accordion: native <details> instead of the old toggle script */
details.vc_toggle > summary { list-style: none; }
details.vc_toggle > summary::-webkit-details-marker { display: none; }
details.vc_toggle > .vc_toggle_content { display: block; }
.vc_toggle_default[open] .vc_toggle_icon::after,
.vc_toggle_default[open] .vc_toggle_icon::before { visibility: hidden; }

/* map card (footer map is 375px high, the contact page map 450px at 90% width) */
.map-card { position: relative; height: 375px; background: #e8edf1; border-radius: 2px; overflow: hidden; }
.map-card { margin-bottom: 6px; } /* the old iframe sat on a text baseline: same spacing */
.map-wide { width: 90%; margin: 0 auto; }
.map-wide .map-card { height: 450px; }
.map-card > .map-canvas, .map-card > .map-canvas.maplibregl-map { position: absolute; inset: 0; }
.map-fallback { position: absolute; right: 10px; bottom: 10px; margin: 0; font-size: 13px; }
.map-info { position: absolute; top: 10px; left: 10px; z-index: 2; max-width: 240px; padding: 12px 14px; background: var(--card-bg); color: var(--ink); box-shadow: var(--card-shadow); border-radius: 2px; font-size: 13px; line-height: 1.45; }
.map-info strong { display: block; font-size: 15px; margin-bottom: 2px; }
.map-info address { margin: 0 0 8px; font-style: normal; }
.map-info .map-link { display: block; color: var(--brand); text-decoration: none; padding: 2px 0; }
.map-info .map-link:hover, .map-info .map-link:focus-visible { color: var(--brand-dark); text-decoration: underline; }
.map-pin { width: 34px; height: 34px; margin: 0; cursor: default; }
.maplibregl-ctrl-attrib a { color: inherit; }

/* notice before leaving to external services (dialog and /extern/ pages) */
#ext-dialog { max-width: 520px; width: calc(100% - 32px); padding: 24px; border: 0; border-radius: 2px; box-shadow: 0 8px 32px rgba(0, 0, 0, .35); color: var(--ink); }
#ext-dialog::backdrop { background: rgba(0, 0, 0, .55); }
#ext-dialog h2, .extern-page h2 { margin-top: 0; font-size: 24px; }
.ext-url code { word-break: break-all; font-size: 12px; }
.ext-actions { margin: 20px 0 0; display: flex; gap: 10px; flex-wrap: wrap; }
.extern-page { padding: 60px 0; min-height: 50vh; }

/* home-page notice (src/data/announcement.json) */
.announcement p{color:#000}
/* announcement types: colours and icons (info = original turquoise) */
.announcement.announcement-vacation{background-color:#e8f3fb;border-color:#b9dcf2}.announcement-vacation .vc_message_box-icon{color:var(--brand)}
.announcement-vacation .vc_message_box-icon i::before{content:"\f073"}
.announcement.announcement-warning{background-color:#fff6e0;border-color:#f3d98b}.announcement-warning .vc_message_box-icon{color:#e09b00}
.announcement-warning .vc_message_box-icon i::before{content:"\f071"}
.announcement.announcement-alert{background-color:#fdeaea;border-color:#f0b4b4}.announcement-alert .vc_message_box-icon{color:#c62828}
.vc_message_box.announcement a{color:var(--brand);text-decoration:underline}