/**
 * components.css - Reusable UI components used across the site.
 * Visual styling only: colours, borders, typography, hover states.
 * Layout and structure (flex, sizing, padding) belong in base.css.
 */

/* ========== Top navigation bar (styling only; layout in base.css) ========== */
.top-nav {
    position: relative;
    background: var(--background);
}

.top-nav::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--text-colour);
    border-radius: 2px;
}

.top-nav-links .nav-link {
    color: var(--text-colour);
    text-decoration: none;
    border-radius: 8px;
    font-size: var(--control-font-size);
    font-weight: 500;
    transition: background 0.2s, color 0.2s;
}

.top-nav-links .nav-link:hover {
    background: var(--secondary-colour);
    color: var(--text-colour);
}

.top-nav-links .nav-button {
    background: var(--primary-colour);
    color: var(--text-alt);
}

.top-nav-links .nav-button:hover {
    background: var(--primary-hover);
    color: var(--text-alt);
}

/* ========== Text section (styling only; layout in base.css) ========== */
.text-section h1,
.text-section h2,
.text-section h3,
.text-section p {
    margin: 0;
    color: var(--text-colour);
}

.text-section {
    border-top: 40px solid transparent;
    border-bottom: 40px solid transparent;
}

.text-section .button-row {
    width: auto;
    justify-content: center;
}

.text-section .button-row .button-item {
    flex: 0 0 auto;
}

.text-section .button-row .nav-button {
    width: auto;
}

.text-section h1 {
    font-size: clamp(48px, 4.8vw, 48px);
}

/* Media stack section – styling only */
.media-stack-card {
    width: min(100%, var(--card-w, clamp(200px, 25vw, 320px)));
    aspect-ratio: 5 / 7;
    height: var(--card-h, auto);
    background: var(--secondary-colour);
    border-radius: 12px;
    box-shadow: 0 14px 32px var(--shadow-medium);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: transform 700ms ease;
    transform: translateX(0);
}

.media-stack-card--with-text {
    padding: 12px;
    gap: 8px;
    justify-content: flex-start;
}

.media-stack-card--with-text p + p {
    margin-top: 0.3em;
}

.media-stack-card img,
.media-stack-card video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.media-stack-card--with-text img,
.media-stack-card--with-text video {
    width: 100%;
    height: auto;
    max-height: 60%;
    object-fit: contain;
}

.media-stack-card--video video {
    object-fit: cover;
    height: 100%;
    width: 100%;
}

.media-stack-card--video {
    aspect-ratio: auto;
    width: auto;
    height: var(--card-h, auto);
    max-width: 100%;
    overflow: hidden;
}

.media-carousel .media-stack-card--video {
    aspect-ratio: 5 / 7;
    width: min(100%, var(--card-w, clamp(200px, 25vw, 320px)));
    height: var(--card-h, auto);
    max-width: 100%;
    align-items: stretch;
    justify-content: stretch;
    overflow: hidden;
}

.media-carousel .media-stack-card--video video {
    align-self: stretch;
    width: 100%;
    height: 100%;
    object-position: center;
    object-fit: cover;
}

.media-stack-card--video.media-stack-card--with-text {
    aspect-ratio: 5 / 7;
    width: min(100%, var(--card-w, clamp(200px, 25vw, 320px)));
    height: var(--card-h, auto);
    max-width: 100%;
}

.media-stack-card p {
    margin: 0;
    padding: 12px;
    text-align: center;
    color: var(--text-colour);
}

.media-stack.is-fanned .media-stack-card {
    transform: translate(var(--x), var(--y)) rotate(var(--r));
}

.media-stack.is-collapsed .media-stack-card {
    transform: translateX(0);
}

.media-carousel {
    position: relative;
    padding-bottom: var(--carousel-controls-space, 112px);
}

.media-carousel .media-stack-card {
    opacity: 0;
    pointer-events: none;
    transition: transform 800ms ease, opacity 600ms ease;
    z-index: 1;
}

.media-carousel .media-stack-card.is-active {
    opacity: 1;
    pointer-events: auto;
}

.media-carousel .media-stack-card p {
    font-size: clamp(11px, 1.5vw, 13px);
    line-height: 1.25;
}

.media-carousel .media-stack-card.is-enter-from-left {
    opacity: 0;
    transform: translate(var(--x), var(--y)) rotate(var(--r)) translateX(-100vw);
}

.media-carousel .media-stack-card.is-enter-from-right {
    opacity: 0;
    transform: translate(var(--x), var(--y)) rotate(var(--r)) translateX(100vw);
}

.media-carousel .media-stack-card.is-exit-to-left {
    opacity: 0;
    transform: translate(var(--x), var(--y)) rotate(var(--r)) translateX(-100vw);
}

.media-carousel .media-stack-card.is-exit-to-right {
    opacity: 0;
    transform: translate(var(--x), var(--y)) rotate(var(--r)) translateX(100vw);
}

.media-carousel-controls {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    z-index: 2;
}

.media-carousel-controls .nav-button {
    width: 48px;
    height: 48px;
    padding: 0;
}

.media-carousel-indicator {
    text-align: center;
    color: var(--primary-colour);
    font-weight: 500;
    position: relative;
    z-index: 2;
}

.media-stack-card.is-bobbing {
    animation: media-stack-bob 1.6s ease-in-out infinite;
}

@keyframes media-stack-bob {
    0%, 100% { transform: translate(var(--x), var(--y)) rotate(var(--r)) translate(0, 0); }
    50% { transform: translate(var(--x), var(--y)) rotate(var(--r)) translate(0, -20px); }
}

.media-stack-card.is-focus {
    transform: translate(var(--x), calc(var(--y) - var(--focus-lift, 16px))) rotate(var(--r));
    z-index: 500;
}

.media-stack.is-fanned .media-stack-card.is-focus {
    transform: translate(var(--x), calc(var(--y) - var(--focus-lift, 16px))) rotate(var(--r));
    z-index: 500;
}

/* ========== Segmented button: one rule set for all views. Segments size to label + same padding everywhere. ========== */
.segmented-button {
    display: inline-flex;
    align-items: stretch;
    border-radius: 15px;
    background: var(--primary-colour);
}

.segmented-button-item {
    position: relative;
}

.segmented-button-item:not(:first-child)::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 60%;
    min-height: 12px;
    background: var(--text-alt);
    border-radius: 1px;
    z-index: 1;
    pointer-events: none;
}

.segmented-button-item .nav-button,
.segmented-button-item > a.nav-button,
a.segmented-button-item.nav-button {
    border: none;
    border-radius: 0;
    background: var(--primary-colour);
    color: var(--text-alt);
    min-height: var(--button-min-height);
    padding: 8px 14px;
}

.segmented-button-item:first-child .nav-button,
.segmented-button-item:first-child > a.nav-button,
.segmented-button-item:first-child.nav-button {
    border-radius: 13px 0 0 13px;
}

.segmented-button-item:last-child .nav-button,
.segmented-button-item:last-child > a.nav-button,
.segmented-button-item:last-child.nav-button {
    border-radius: 0 13px 13px 0;
}

/* Hover: colour change only, no vertical movement or opacity (unlike standard .nav-button:hover) */
.segmented-button-item .nav-button:hover,
.segmented-button-item > a.nav-button:hover,
a.segmented-button-item.nav-button:hover {
    background: var(--primary-hover);
    color: var(--text-alt);
    transform: none;
    opacity: 1;
}

/* Dropdown open state: segment looks active */
.segmented-button-item.dropdown.show .nav-button,
.segmented-button-item.dropdown:hover .nav-button {
    background: var(--primary-hover);
    color: var(--text-alt);
}

/* Segmented button collapse: when it doesn't fit, show hamburger + dropdown (JS adds wrapper and dropdown) */
.segmented-button-wrapper {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    min-width: 0;
}

.segmented-button-dropdown {
    display: none;
}

.segmented-button-wrapper.segmented-button-collapsed .segmented-button {
    display: none !important;
}

.segmented-button-wrapper.segmented-button-collapsed .segmented-button-dropdown {
    display: inline-block;
}

.segmented-button-hamburger {
    width: var(--button-min-height);
    min-width: var(--button-min-height);
    height: var(--button-min-height);
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background: var(--primary-colour);
    color: var(--text-alt);
    border: none;
}

.segmented-button-hamburger:hover {
    background: var(--primary-hover);
    color: var(--text-alt);
}

.segmented-button-hamburger svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: inherit;
}

/* ========== Site footer ========== */
.site-footer {
    position: relative;
    color: var(--text-colour);
    padding: 12px 12px;
    text-align: center;
    background: var(--background);
}

.site-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--text-colour);
    border-radius: 2px;
}

.site-footer .container {
    max-width: 800px;
    margin: 0 auto;
}

.site-footer p {
    color: var(--text-colour);
    font-family: "Roboto", sans-serif;
    font-size: 16px;
    line-height: 1.5;
    margin: 0 0 20px 0;
}

.site-footer-links {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 10px;
    font-size: 24px;
}

.site-footer-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--button-min-height);
    min-width: var(--button-min-height);
    height: var(--button-min-height);
    padding: 0;
    border-radius: 15px;
    background: var(--primary-colour);
    color: var(--text-alt);
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}

.site-footer-links a:hover {
    background: var(--primary-hover);
    color: var(--text-alt);
}

/* Footer social icons: mask + background so icon colour is reliable (SVG as background-image does not inherit currentColor). Default = text-alt on primary button. */
.site-footer-links .fa-tiktok,
.site-footer-links .fa-instagram,
.site-footer-links .fa-youtube {
    background-color: var(--text-alt);
    background-image: none;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}
.site-footer-links .fa-tiktok {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='white' d='M448 209.9a210.1 210.1 0 0 1 -122.8-39.3V349.4A162.6 162.6 0 1 1 185 188.3V278.2a74.6 74.6 0 1 0 52.2 71.2V0l88 0a121.2 121.2 0 0 0 1.9 22.2h0A122.2 122.2 0 0 0 381 102.4a121.4 121.4 0 0 0 67 20.1z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='white' d='M448 209.9a210.1 210.1 0 0 1 -122.8-39.3V349.4A162.6 162.6 0 1 1 185 188.3V278.2a74.6 74.6 0 1 0 52.2 71.2V0l88 0a121.2 121.2 0 0 0 1.9 22.2h0A122.2 122.2 0 0 0 381 102.4a121.4 121.4 0 0 0 67 20.1z'/%3E%3C/svg%3E");
}
.site-footer-links .fa-instagram {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='white' d='M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='white' d='M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z'/%3E%3C/svg%3E");
}
.site-footer-links .fa-youtube {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath fill='white' d='M549.7 124.1c-6.3-23.7-24.8-42.3-48.3-48.6C458.8 64 288 64 288 64S117.2 64 74.6 75.5c-23.5 6.3-42 24.9-48.3 48.6-11.4 42.9-11.4 132.3-11.4 132.3s0 89.4 11.4 132.3c6.3 23.7 24.8 41.5 48.3 47.8C117.2 448 288 448 288 448s170.8 0 213.4-11.5c23.5-6.3 42-24.2 48.3-47.8 11.4-42.9 11.4-132.3 11.4-132.3s0-89.4-11.4-132.3zm-317.5 213.5V175.2l142.7 81.2-142.7 81.2z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath fill='white' d='M549.7 124.1c-6.3-23.7-24.8-42.3-48.3-48.6C458.8 64 288 64 288 64S117.2 64 74.6 75.5c-23.5 6.3-42 24.9-48.3 48.6-11.4 42.9-11.4 132.3-11.4 132.3s0 89.4 11.4 132.3c6.3 23.7 24.8 41.5 48.3 47.8C117.2 448 288 448 288 448s170.8 0 213.4-11.5c23.5-6.3 42-24.2 48.3-47.8 11.4-42.9 11.4-132.3 11.4-132.3s0-89.4-11.4-132.3zm-317.5 213.5V175.2l142.7 81.2-142.7 81.2z'/%3E%3C/svg%3E");
}

.site-footer h3 {
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    margin-bottom: 10px;
    color: var(--text-colour);
}

.site-footer .footer-copy {
    margin-bottom: 10px;
}

.site-footer .footer-privacy a {
    color: var(--text-colour);
    text-decoration: underline;
}

.site-footer .footer-privacy a:hover {
    opacity: 0.9;
}

.site-footer .footer-legal {
    margin-bottom: 0;
}

.site-footer .footer-legal a {
    color: var(--text-colour);
    text-decoration: underline;
}

.site-footer .footer-legal a:hover {
    opacity: 0.9;
}

.site-footer .footer-legal-sep {
    margin: 0 0.35em;
    opacity: 0.8;
}

/* ========== Site dialog (overlay + panel; close via button or click outside) ========== */
.site-dialog-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.4);
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.site-dialog-overlay.active {
    display: flex;
}

.site-dialog {
    position: relative;
    background: var(--background);
    color: var(--text-colour);
    border-radius: 15px;
    padding: 24px;
    max-width: 400px;
    width: 100%;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
}

.site-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.site-dialog .site-dialog-close {
    flex-shrink: 0;
}

.site-dialog .site-dialog-close img {
    width: 18px;
    height: 18px;
    filter: brightness(0) invert(1);
}

.site-dialog-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 500;
}

.site-dialog-content {
    margin: 0;
}

.site-dialog-content a {
    color: var(--primary-colour);
    text-decoration: underline;
}

.site-dialog-content a:hover {
    opacity: 0.9;
}

/* ========== Applet pages: nav and footer use primary background; buttons white with text-colour words, dividers and icons; logo inverted ========== */
body.applet-page .top-nav {
    background: var(--primary-colour);
}

body.applet-page .top-nav::after {
    display: none;
}

body.applet-page .top-nav .segmented-button {
    background: var(--background);
}

body.applet-page .top-nav .segmented-button-item:not(:first-child)::before {
    background: var(--primary-colour);
}

body.applet-page .top-nav .segmented-button-item .nav-button,
body.applet-page .top-nav .segmented-button-item > a.nav-button,
body.applet-page .top-nav a.segmented-button-item.nav-button {
    background: var(--background);
    color: var(--primary-colour);
}

body.applet-page .top-nav .segmented-button-item .nav-button:hover,
body.applet-page .top-nav .segmented-button-item > a.nav-button:hover,
body.applet-page .top-nav a.segmented-button-item.nav-button:hover {
    background: var(--secondary-colour);
    color: var(--primary-colour);
}

body.applet-page .top-nav .segmented-button-item.dropdown.show .nav-button,
body.applet-page .top-nav .segmented-button-item.dropdown:hover .nav-button {
    background: var(--secondary-colour);
    color: var(--primary-colour);
}

body.applet-page .site-footer {
    background: var(--primary-colour);
    color: var(--text-alt);
}

body.applet-page .site-footer::before {
    display: none;
}

body.applet-page .site-footer p,
body.applet-page .site-footer h3,
body.applet-page .site-footer .footer-privacy a,
body.applet-page .site-footer .footer-legal a {
    color: var(--text-alt);
}

body.applet-page .site-footer-links a {
    background: var(--background);
    color: var(--primary-colour);
}

body.applet-page .site-footer-links a:hover {
    background: var(--secondary-colour);
    color: var(--primary-colour);
}

/* Applet footer social icons: same mask, icon fill = primary-colour (overrides default text-alt) */
body.applet-page .site-footer-links .fa-tiktok,
body.applet-page .site-footer-links .fa-instagram,
body.applet-page .site-footer-links .fa-youtube {
    background-color: var(--primary-colour);
}

/* ========== Nav buttons (segmented control items, dropdown triggers) ========== */
.nav-button {
    background: var(--primary-colour);
    border-radius: 15px;
    color: var(--text-alt);
    padding: 8px 8px;
    margin: 0;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    width: 100%;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    min-height: var(--button-min-height);
    font-size: var(--control-font-size);
    font-weight: 500;
}

.nav-button:hover {
    background: var(--primary-hover);
    color: var(--text-alt);
    text-decoration: none;
    transform: translateY(-2px);
    opacity: 0.9;
}

.button-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
}

.button-row .button-item {
    flex: 1 1 calc((100% - 24px) / 4);
    min-width: 0;
    box-sizing: border-box;
}

.button-row .button-item .dropdown {
    width: 100%;
    box-sizing: border-box;
    display: block;
}

.button-row .nav-button {
    width: 100%;
    box-sizing: border-box;
}

/* Dropdown: single implementation for nav and segmented-button dropdowns. Column of separate buttons, no outer rectangle. */
.dropdown {
    position: relative;
}

.dropdown-toggle {
    white-space: nowrap;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 8px;
    padding: 0;
    list-style: none;
    display: none;
    flex-direction: column;
    gap: 8px;
    z-index: 1000;
    box-sizing: border-box;
    /* At least as wide as trigger; grow so all option text fits on one line */
    min-width: 100%;
    width: max-content;
    /* No background/border on container – each option is its own button */
    background: transparent;
    border: none;
}

.dropdown-menu li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.dropdown-menu.show {
    display: flex !important;
}

.dropdown:hover .dropdown-menu,
.dropdown-menu:hover {
    display: flex;
}

/* Each option: 8px padding. base.css excludes .dropdown-item from .top-nav-links a { padding: 0 } so this applies. */
.dropdown-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    min-height: var(--button-min-height);
    padding: 8px 8px;
    margin: 0;
    border-radius: 15px;
    background: var(--primary-colour);
    color: var(--text-alt);
    text-decoration: none;
    text-align: center;
    font-size: var(--control-font-size);
    font-weight: 500;
    white-space: nowrap;
    line-height: 1.4;
    transition: background 0.2s, color 0.2s;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--primary-hover);
    color: var(--text-alt);
}

.dropdown-toggle::after {
    display: none !important;
}

/* Section wrappers */
.content-section,
.button-section,
.video-section {
    padding: 0;
    width: 100%;
    box-sizing: border-box;
}

/* ========== Content layouts: 1, 2 and 4 columns + carousel ==========
 * Column layout: .content-section > .container > .content-cols .content-cols-1|2|3|4,
 *   with .content-cell children (each cell can hold text, image, pdf, map, etc.).
 * Single block: .content-section > .container > .content-card (same look as one cell).
 * Carousel: .content-section > .container > .walkthrough-section > .walkthrough-container >
 *   .carousel-container > .carousel-slides > .carousel-slide (each slide any content type).
 * Titles: use <h1> inside each rounded container (.content-cell, .carousel-slide); no titles outside columns. */

.content-cell h1:first-child,
.carousel-slide h1:first-child {
    margin-top: 0;
}

.content-cols {
    display: grid;
    gap: 16px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
    align-items: center;
}

.content-cols-1 {
    grid-template-columns: 1fr;
}

.content-cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

/* 3 columns: centre column ~2× edge columns (like 4-col with cols 2+3 merged) */
.content-cols-3 {
    grid-template-columns: 1fr 2fr 1fr;
}

.content-cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 768px) {
    .content-cols-3 {
        grid-template-columns: 1fr;
    }
    .content-cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .content-cols-2,
    .content-cols-3,
    .content-cols-4 {
        grid-template-columns: 1fr;
    }
}

/* Content box pattern: shared card look for .content-cell, .content-card, .carousel-box */
.content-cell,
.content-card,
.carousel-box {
    padding: 16px;
    border-radius: 20px;
    background: var(--secondary-colour);
    box-shadow: 0 10px 30px var(--shadow-light);
    box-sizing: border-box;
}

/* Content cell: one slot in column layout or carousel; text centred. */
.content-cell {
    min-width: 0;
    text-align: center;
    align-self: center;
}

.content-cell > :first-child {
    margin-top: 0;
}

.content-cell > :last-child {
    margin-bottom: 0;
}

.content-cell img {
    width: 100%;
    height: auto;
    max-height: 50vh;
    object-fit: contain;
    border-radius: 20px;
    display: block;
}

.content-cell iframe {
    width: 100%;
    height: 400px;
    min-height: 300px;
    border: none;
    border-radius: 20px;
    display: block;
}

/* Cells that contain only media (image, video, pdf, map): no grey rounded box */
.content-cell:has(> a:only-child > img),
.content-cell:has(> img:only-child),
.content-cell:has(> div[id^="videoWrapper"]:only-child),
.content-cell:has(> iframe:only-child) {
    background: transparent;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
}

/* Single full-width card (one column, one slot). */
.content-card {
    min-width: 0;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.content-card > :first-child {
    margin-top: 0;
}

.content-card > :last-child {
    margin-bottom: 0;
}

.content-card:has(> a:only-child > img),
.content-card:has(> img:only-child),
.content-card:has(> div[id^="videoWrapper"]:only-child),
.content-card:has(> iframe:only-child) {
    background: transparent;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
}

/* Legacy section wrappers: same as .content-card (backward-compat). Prefer content-cols + content-cell. */
.walkthrough-section {
    margin-bottom: 0;
}

/* Content box pattern: shared card look for wrappers */
.walkthrough-container,
.video-container {
    min-width: 0;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px;
    border-radius: 20px;
    background: var(--secondary-colour);
    box-shadow: 0 10px 30px var(--shadow-light);
    box-sizing: border-box;
}

.map-container {
    min-width: 0;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px;
    border-radius: 20px;
    background: var(--background);
    box-shadow: 0 10px 30px var(--shadow-light);
    box-sizing: border-box;
}

/* Applet template (visual)
 * Pair with base.css layout classes: body.applet-page + .applet-shell.
 * Use .applet-card on the main inset surface, optionally add .applet-card--padded. */
.applet-card {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    background: var(--background);
    border-radius: 20px;
    box-shadow: 0 10px 30px var(--shadow-light);
    box-sizing: border-box;
    overflow: hidden;
}

.applet-card--padded {
    padding: 16px;
}

/* PDF wrapper: minimal chrome (used on privacy-policy, electioneer pages) */
.pdf-container {
    min-width: 0;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    padding: 16px 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    box-sizing: border-box;
}

.video-wrapper {
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.video-item {
    flex: 0 0 calc(50% - 5px);
    min-width: 0;
}

.video-player {
    width: 100%;
    height: auto;
    border-radius: 20px;
    border: none;
    object-fit: contain;
    display: block;
}

.pdf-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Carousel: prev/next buttons outside slide area, vertically centred. Standard typography in slides; optional two-column layout. */
.content-carousel {
    width: 100%;
    box-sizing: border-box;
}

.content-carousel-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
}

/* Standard button with chevron icon; sits left/right of slide area, centred vertically */
.carousel-nav {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    padding: 0;
    border-radius: 15px;
    background: var(--primary-colour);
    color: var(--text-alt);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
}

.carousel-nav:hover {
    background: var(--primary-hover);
    color: var(--text-alt);
}

.carousel-nav:focus {
    outline: 2px solid var(--primary-colour);
    outline-offset: 2px;
}

.carousel-nav i {
    font-size: 18px;
    font-weight: bold;
    color: inherit;
}

/* Rounded box around slide area (inherits content-box pattern above) */
.carousel-box {
    flex: 1;
    min-width: 0;
}

.carousel-slide-area {
    width: 100%;
    overflow: hidden;
    border-radius: 20px;
    transition: height 0.3s ease;
}

.carousel-slides {
    display: flex;
    transition: transform 0.3s ease;
}

.carousel-slide {
    width: 100%;
    min-width: 100%;
    flex-shrink: 0;
    height: fit-content;
    padding: 0;
    box-sizing: border-box;
}

/* Standard typography in slides – no special text class */
.carousel-slide h1,
.carousel-slide h2,
.carousel-slide h3,
.carousel-slide p {
    margin-top: 0;
    margin-bottom: 0.75em;
    color: var(--text-colour);
}

.carousel-slide p:last-child,
.carousel-slide > *:last-child {
    margin-bottom: 0;
}

/* Optional two-column layout within a slide (image + text) */
.carousel-slide-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: start;
}

@media (max-width: 600px) {
    .carousel-slide-cols {
        grid-template-columns: 1fr;
    }
}

.carousel-slide img {
    width: 100%;
    height: auto;
    max-height: 50vh;
    object-fit: contain;
    border-radius: 20px;
    display: block;
}

.carousel-slide iframe {
    width: 100%;
    height: 50vh;
    min-height: 300px;
    border: none;
    border-radius: 20px;
    display: block;
}

.carousel-slide a {
    display: block;
    border-radius: 20px;
    overflow: hidden;
}

.carousel-indicator {
    text-align: center;
    margin-top: 12px;
    color: var(--primary-colour);
    font-weight: 500;
}

/* Legacy: .carousel-container kept as alias for .carousel-slide-area for backward compatibility */
.carousel-container {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    border-radius: 20px;
    transition: height 0.3s ease;
}

.pdf-viewer {
    width: 100%;
    height: 80vh;
    min-height: 400px;
    max-height: 67vh;
    border: none;
    border-radius: 20px;
}

.pdf-viewer-small {
    width: 100%;
    height: 53vh;
    min-height: 400px;
    max-height: 67vh;
    border: none;
    border-radius: 20px;
}

/* Mobile: full-width containers */
@media (max-width: 600px) {
    .walkthrough-container,
    .video-container,
    .pdf-container,
    .map-container,
    .content-cols,
    .content-card {
        width: 100% !important;
        max-width: 100vw !important;
    }
    .walkthrough-container,
    .video-container,
    .pdf-container,
    .map-container {
        padding: 12px !important;
    }
}

/* Cookie banner - primary background, text-alt for banner text; secondary buttons with text-colour */
.cookie-banner {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background: var(--primary-colour) !important;
    color: var(--text-alt) !important;
    padding: 15px 20px;
    box-shadow: 0 -2px 10px var(--shadow-medium);
    z-index: 10000;
    transform: translateY(100%);
    transition: transform 0.3s ease-in-out;
    border-top: 2px solid var(--text-alt);
    box-sizing: border-box;
}

.cookie-banner-visible {
    transform: translateY(0);
}

.cookie-banner-hidden {
    transform: translateY(100%);
}

.cookie-banner-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.cookie-banner-text {
    flex: 1;
    min-width: 250px;
}

.cookie-banner-text p {
    margin: 0;
    font-size: clamp(12px, 1.5vw, 16px);
    line-height: 1.5;
    color: var(--text-alt) !important;
}

.cookie-banner-text a {
    color: var(--text-alt);
    text-decoration: underline;
}

.cookie-banner-buttons {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.cookie-btn {
    background: var(--secondary-colour);
    border-radius: 15px;
    color: var(--text-colour);
    padding: 4px 4px;
    margin: 0;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    min-height: var(--button-min-height);
    font-size: clamp(14px, 1.5vw, 16px);
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    cursor: pointer;
    min-width: 100px;
}

.cookie-btn:hover {
    background: var(--secondary-colour);
    color: var(--text-colour);
    text-decoration: none;
    transform: translateY(-2px);
    opacity: 0.9;
}

@media (max-width: 767px) {
    .cookie-banner {
        padding: 12px 15px;
    }
    .cookie-banner-content {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .cookie-banner-buttons {
        width: 100%;
        justify-content: stretch;
    }
    .cookie-btn {
        flex: 1;
    }
}

/* Home button (sub-pages) */
.home-button {
    background: var(--primary-colour) !important;
    border-radius: 15px;
    color: var(--text-alt);
    padding: 12px 16px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    margin: 20px auto;
    width: var(--button-min-height);
    min-width: var(--button-min-height);
    height: var(--button-min-height);
}

.home-button:hover {
    text-decoration: none;
    transform: translateY(-2px);
    opacity: 0.9;
    background: var(--primary-hover) !important;
}

/* ========== Finance page (tool bar, calculator, chart, controls). Scope with body.finance-page if needed. ========== */
.finance-tool-bar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 12px 12px 0;
    box-sizing: border-box;
}

.finance-tool-bar + .calculator-content {
    padding: 12px;
    box-sizing: border-box;
    background: var(--background);
}

.finance-tool-bar .segmented-button-item .nav-button.active,
.finance-tool-bar .segmented-button-item.active .nav-button {
    background: var(--secondary-colour);
    color: var(--text-colour);
}

.finance-tool-bar .segmented-button-dropdown .dropdown-item.active {
    background: var(--secondary-colour);
    color: var(--text-colour);
}

.finance-tool-bar #downloadBtn {
    margin-left: auto;
}

/* ========== Finance calculator shared (chart, controls, about, currency, csv) ========== */
.calculator-container {
    padding: 0;
    width: 100%;
    box-sizing: border-box;
    position: relative;
}

.chart-container {
    width: 100%;
    height: 600px;
    margin-bottom: 30px;
    position: relative;
}

.chart-canvas {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    cursor: crosshair;
}

.chart-tooltip {
    position: absolute;
    background: var(--overlay-dark);
    color: var(--text-alt);
    padding: 10px 15px;
    border-radius: 8px;
    font-size: 14px;
    pointer-events: none;
    z-index: 1000;
    white-space: normal;
    box-shadow: 0 4px 12px var(--shadow-medium);
    max-width: 280px;
    min-width: 200px;
    line-height: 1.5;
}

.chart-tooltip .tooltip-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    white-space: nowrap;
    padding: 6px 0;
    border-bottom: 1px solid var(--border-light);
}

.chart-tooltip .tooltip-row:last-child {
    border-bottom: none;
}

.chart-tooltip .tooltip-row.tooltip-row-wrap {
    white-space: normal;
    align-items: flex-end;
}

.chart-tooltip .tooltip-row.tooltip-row-wrap .tooltip-label {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.4;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.chart-tooltip .tooltip-row.tooltip-row-wrap .tooltip-value {
    flex: 0 0 auto;
    text-align: right;
    align-self: flex-end;
    margin-left: 16px;
    white-space: nowrap;
}

.chart-tooltip .tooltip-label {
    text-align: left;
    flex: 1 1 auto;
}

.chart-tooltip .tooltip-value {
    text-align: right;
    flex: 0 0 auto;
}

.controls-section {
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    gap: 0 20px;
    width: 100%;
    box-sizing: border-box;
    align-items: stretch;
}

.control-group {
    flex: 1 1 calc(25% - 15px);
    min-width: 0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 200px;
}

.control-input-group {
    margin: 0 0 20px 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.control-input-group:last-child {
    margin-bottom: 0;
}

.control-input-group label {
    display: block;
    color: var(--primary-colour);
    font-weight: 500;
    font-size: 18px;
    margin: 0 0 15px 0;
    padding: 0;
    line-height: 1.4;
}

.control-input-group input,
.control-input-group select {
    width: 100%;
    height: 42px;
    padding: 10px;
    border: 2px solid var(--secondary-colour);
    border-radius: 8px;
    font-size: 14px;
    box-sizing: border-box;
    transition: border-color 0.3s ease;
}

.control-input-group input:focus,
.control-input-group select:focus {
    outline: none;
    border-color: var(--primary-colour);
}

.person-gender-wrapper select,
.person-age-wrapper input {
    width: 100%;
    height: 42px;
    padding: 10px;
    border: 2px solid var(--secondary-colour);
    border-radius: 8px;
    font-size: 14px;
    box-sizing: border-box;
    transition: border-color 0.3s ease;
}

.person-gender-wrapper select:focus,
.person-age-wrapper input:focus {
    outline: none;
    border-color: var(--primary-colour);
}

.person-gender-wrapper:hover > .thumb-tooltip,
.person-age-wrapper:hover > .thumb-tooltip {
    opacity: 1;
}

.control-input-group .input-wrapper {
    position: relative;
}

.control-input-group .currency-symbol,
.control-input-group .percent-symbol {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-colour);
    font-weight: 500;
    font-size: 14px;
}

.control-input-group .currency-symbol {
    left: 10px;
}

.control-input-group .currency-input {
    padding-left: 28px;
}

.control-input-group .percent-symbol {
    right: 10px;
    left: auto;
}

.control-input-group .percent-input {
    padding-right: 28px;
    min-width: 50px;
}

.control-input-group .input-wrapper:hover .thumb-tooltip,
.control-input-group:hover .thumb-tooltip,
.checkbox-container:hover .thumb-tooltip {
    opacity: 1;
}

.control-input-group .input-wrapper,
.control-input-group {
    position: relative;
}

.control-input-group > .thumb-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 8px;
}

.about-section {
    width: 100%;
    padding: 0;
    position: relative;
}

.about-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.about-buttons {
    display: flex;
    gap: 8px;
    align-items: center;
}

.about-text {
    margin: 0;
    color: var(--text-colour);
    font-size: 14px;
    line-height: 1.5;
}

.about-text-spaced {
    margin: 15px 0 0 0;
}

.about-list {
    margin: 10px 0 0 0;
    padding-left: 20px;
}

/* Icon-only button: same size as .btn-blue (uses --button-min-height) */
.csv-button {
    background: var(--primary-colour);
    border: 2px solid var(--primary-colour);
    color: var(--text-alt);
    width: var(--button-min-height);
    min-width: var(--button-min-height);
    height: var(--button-min-height);
    border-radius: 15px;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.csv-button:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
}

.csv-button img {
    width: 18px;
    height: 18px;
    filter: brightness(0) invert(1);
}

.csv-button:hover .thumb-tooltip {
    opacity: 1;
}

@media (max-width: 900px) {
    body.finance-page .control-group {
        flex: 1 1 calc(50% - 10px);
        min-width: calc(50% - 10px);
    }
    .control-group:nth-child(n+3) {
        margin-top: 20px;
    }
}

@media (max-width: 600px) {
    .calculator-container {
        margin: 0 auto;
        padding: 0;
        width: 100%;
        max-width: 100vw;
        box-sizing: border-box;
    }
    .chart-container {
        height: 450px;
        margin-bottom: 20px;
    }
    .controls-section {
        margin-top: 15px;
        width: 100%;
        max-width: 100vw;
    }
    .control-group {
        flex: 1 1 calc(50% - 10px);
        min-width: calc(50% - 10px);
    }
    .control-group:nth-child(n+3) {
        margin-top: 20px;
    }
}

/* ========== Shared UI from holiday-planner (map, sliders, checkbox, buttons, accordion, textbox) ========== */

/* Control group labels (used with sliders/accordions) */
.control-header {
    color: var(--primary-colour);
    font-weight: 500;
    font-size: 24px;
    margin: 0 0 20px 0;
}

.control-label {
    color: var(--primary-colour);
    font-weight: 500;
    font-size: 18px;
    margin-bottom: 15px;
    display: block;
}

/* Map container and header */
.map-container-ui {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 4px 20px var(--shadow-subtle);
    overflow: hidden;
}

.map-header {
    margin-bottom: 12px;
}

.map-header h2 {
    color: var(--primary-colour);
    font-weight: 500;
    margin: 0;
}

/* Leaflet zoom controls - themed to primary */
.leaflet-control-zoom {
    border: none !important;
    box-shadow: none !important;
    border-radius: 15px !important;
    overflow: hidden !important;
}

.leaflet-control-zoom a {
    background-color: var(--primary-colour) !important;
    color: var(--text-alt) !important;
    width: 34px !important;
    height: 34px !important;
    font-size: 18px !important;
    font-weight: bold !important;
    font-family: "Roboto", sans-serif !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.leaflet-control-zoom-in {
    border-top-left-radius: 15px !important;
    border-top-right-radius: 15px !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.leaflet-control-zoom-out {
    border-bottom-left-radius: 15px !important;
    border-bottom-right-radius: 15px !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

.leaflet-control-zoom a:hover {
    background-color: var(--primary-hover) !important;
}

.leaflet-control-zoom a:active {
    background-color: var(--primary-hover) !important;
    transform: scale(0.95);
}

/* Slider - single and dual thumb */
.slider-container {
    position: relative;
}

.single-range-slider,
.dual-range-slider {
    position: relative;
    height: 8px;
    margin: 0 12px;
}

.slider-track {
    position: absolute;
    width: 100%;
    height: 8px;
    background: var(--secondary-colour);
    border-radius: 5px;
}

.slider-range {
    position: absolute;
    height: 8px;
    background: var(--primary-colour);
    border-radius: 5px;
}

.slider-thumb {
    position: absolute;
    width: 24px;
    height: 24px;
    margin-left: -12px;
    margin-top: -8px;
    border-radius: 50%;
    background: var(--primary-colour);
    cursor: pointer;
    box-shadow: 0 2px 5px var(--shadow-medium);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-alt);
    font-weight: bold;
    font-size: 12px;
    -webkit-user-select: none;
    user-select: none;
    z-index: 10;
}

.slider-thumb:hover {
    background: var(--primary-hover);
    transform: scale(1.1);
}

.slider-thumb:active {
    transform: scale(1.05);
}

.thumb-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 8px;
    padding: 4px 8px;
    background: var(--overlay-dark);
    color: var(--text-alt);
    font-size: 11px;
    white-space: nowrap;
    border-radius: 4px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}

.slider-thumb:hover .thumb-tooltip {
    opacity: 1;
}

.thumb-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: var(--overlay-dark);
}

.slider-labels {
    position: relative;
    margin-top: 10px;
    height: 20px;
}

.slider-label {
    position: absolute;
    font-size: 14px;
    color: var(--text-colour);
    white-space: nowrap;
    transform: translateX(-50%);
}

.slider-value {
    text-align: center;
    margin-top: 10px;
    font-size: 16px;
    color: var(--primary-colour);
    font-weight: 500;
}

/* Checkbox - primary accent */
input[type="checkbox"] {
    accent-color: var(--primary-colour);
}

input[type="checkbox"].checkbox-large {
    transform: scale(1.5);
    transform-origin: left center;
    margin-right: 10px;
    vertical-align: middle;
}

label:not(.control-label) {
    font-size: 14px;
    line-height: 1.2;
}

/* Primary UI button: use .btn-blue in markup; .btn-primary-ui is an alias. */
.btn-primary-ui,
.btn-blue {
    background: var(--primary-colour);
    color: var(--text-alt);
    width: var(--button-min-height);
    min-width: var(--button-min-height);
    height: var(--button-min-height);
    padding: 0;
    border-radius: 15px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.3s ease;
}

.btn-primary-ui:hover,
.btn-blue:hover {
    background: var(--primary-hover);
    color: var(--text-alt);
    transform: translateY(-2px);
}

.btn-primary-ui.active,
.btn-blue.active {
    background: var(--primary-hover);
    transform: scale(0.95);
    box-shadow: inset 0 2px 4px var(--shadow-medium);
}

/* Standard button icon: one rule for all (font icon) – 18px bold, explicit size so 1em never varies */
.btn-primary-ui i,
.btn-blue i,
.accordion-toggle i,
.ellipsis-toggle i,
.carousel-nav i {
    font-size: 18px;
    font-weight: bold;
    color: var(--text-alt);
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    flex-shrink: 0;
}

.carousel-nav i {
    color: inherit;
}

.btn-primary-ui img,
.btn-blue img,
.btn-primary-ui svg,
.btn-blue svg,
.site-dialog .site-dialog-close svg {
    width: 18px;
    height: 18px;
}

.btn-primary-ui img,
.btn-blue img {
    flex-shrink: 0;
}

.btn-primary-ui svg,
.btn-blue svg,
.site-dialog .site-dialog-close svg {
    flex-shrink: 0;
    color: var(--text-alt);
}

/* Accordion expand/collapse button (.accordion-toggle and .ellipsis-toggle for compatibility) */
.accordion-toggle,
.ellipsis-toggle {
    background: var(--primary-colour);
    border-radius: 15px;
    color: var(--text-alt);
    padding: 12px 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    margin: 0;
    width: var(--button-min-height);
    min-width: var(--button-min-height);
    height: var(--button-min-height);
    cursor: pointer;
}

.accordion-toggle i,
.ellipsis-toggle i {
    display: block;
    transition: transform 0.3s ease;
}

.accordion-toggle:hover,
.ellipsis-toggle:hover {
    background: var(--primary-hover);
    color: var(--text-alt);
    transform: translateY(-2px);
}

.accordion-toggle.active i,
.ellipsis-toggle.active i {
    transform: rotate(180deg);
}

/* Accordion content */
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.accordion-content.active {
    max-height: 400px;
    padding-bottom: 20px;
    overflow: visible;
}

.accordion-content .slider-thumb {
    z-index: 10;
}

/* Textbox */
.input-text-ui {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--secondary-colour);
    border-radius: 8px;
    font-size: 14px;
    box-sizing: border-box;
    color: var(--text-colour);
    background: var(--background);
}

.input-text-ui:focus {
    outline: none;
    border-color: var(--primary-colour);
}

/* Textbox inside .home-controls (holiday-planner compatibility) */
.home-controls input[type="text"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--secondary-colour);
    border-radius: 8px;
    font-size: 14px;
    box-sizing: border-box;
    color: var(--text-colour);
    background: var(--background);
}

.home-controls input[type="text"]:focus {
    outline: none;
    border-color: var(--primary-colour);
}

/* Loading indicator (.loading-indicator-ui and .loading-indicator for compatibility) */
.loading-indicator-ui,
.loading-indicator {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary-colour);
    color: var(--text-alt);
    padding: 8px 12px;
    border-radius: 8px;
    box-shadow: 0 2px 10px var(--shadow-medium);
    z-index: 2002;
    display: none;
}

.loading-indicator-ui.active,
.loading-indicator.active {
    display: block;
}

/* Loading ellipsis animation - bouncing dots (for buttons) */
.loading-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--text-alt);
    line-height: 1;
    gap: 3px;
}

.loading-ellipsis span {
    display: inline-block;
    width: 4px;
    height: 4px;
    background-color: currentColor;
    border-radius: 50%;
    animation: bounce-dot 1.2s infinite;
}

.loading-ellipsis span:nth-child(1) {
    animation-delay: 0s;
}

.loading-ellipsis span:nth-child(2) {
    animation-delay: 0.2s;
}

.loading-ellipsis span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes bounce-dot {
    0%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-8px);
    }
}

/* Icon set (from static/icons.css) */
.fas,
.fab {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.fa-home {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath fill='currentColor' d='M575.8 255.5c0 18-15 32.1-32 32.1h-32l.7 160.2c0 2.7-.2 5.4-.5 8.1V472c0 22.1-17.9 40-40 40H456c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1H416 392c-22.1 0-40-17.9-40-40V448 384c0-17.7-14.3-32-32-32H256c-17.7 0-32 14.3-32 32v64 24c0 22.1-17.9 40-40 40H160 128.1c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2H104c-22.1 0-40-17.9-40-40V360c0-.9 0-1.9 .1-2.8V287.6H32c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z'/%3E%3C/svg%3E");
}

/* Chevrons and UI icons: fill white for use on primary-colour buttons (text-alt) */
.fa-chevron-left {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='white' d='M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z'/%3E%3C/svg%3E");
}

.fa-chevron-right {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='white' d='M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z'/%3E%3C/svg%3E");
}

.fa-chevron-down {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='white' d='M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z'/%3E%3C/svg%3E");
}

.fa-search {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='white' d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/svg%3E");
}

.fa-location-dot {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='white' d='M215.7 499.2C267 435 384 279.4 384 192C384 86 298 0 192 0S0 86 0 192c0 87.4 117 243 168.3 307.2c12.3 15.3 35.1 15.3 47.4 0zM192 128a64 64 0 1 1 0 128 64 64 0 1 1 0-128z'/%3E%3C/svg%3E");
}

.fa-redo {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='white' d='M463.5 224H472c13.3 0 24-10.7 24-24V72c0-9.7-5.8-18.5-14.8-22.2s-19.3-1.7-26.2 5.2L413.4 96.6c-87.6-86.5-228.7-86.2-315.8 1c-87.5 87.5-87.5 229.3 0 316.8s229.3 87.5 316.8 0c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0c-62.5 62.5-163.8 62.5-226.3 0s-62.5-163.8 0-226.3c62.2-62.2 162.7-62.5 225.3-1L327 183c-6.9 6.9-8.9 17.2-5.2 26.2s12.5 14.8 22.2 14.8H463.5z'/%3E%3C/svg%3E");
}

/* Footer social icons: use currentColor so they inherit link colour (white on default footer, primary on applet) */
.fa-tiktok {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='currentColor' d='M448 209.9a210.1 210.1 0 0 1 -122.8-39.3V349.4A162.6 162.6 0 1 1 185 188.3V278.2a74.6 74.6 0 1 0 52.2 71.2V0l88 0a121.2 121.2 0 0 0 1.9 22.2h0A122.2 122.2 0 0 0 381 102.4a121.4 121.4 0 0 0 67 20.1z'/%3E%3C/svg%3E");
}

.fa-instagram {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='currentColor' d='M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z'/%3E%3C/svg%3E");
}

.fa-youtube {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath fill='currentColor' d='M549.7 124.1c-6.3-23.7-24.8-42.3-48.3-48.6C458.8 64 288 64 288 64S117.2 64 74.6 75.5c-23.5 6.3-42 24.9-48.3 48.6-11.4 42.9-11.4 132.3-11.4 132.3s0 89.4 11.4 132.3c6.3 23.7 24.8 41.5 48.3 47.8C117.2 448 288 448 288 448s170.8 0 213.4-11.5c23.5-6.3 42-24.2 48.3-47.8 11.4-42.9 11.4-132.3 11.4-132.3s0-89.4-11.4-132.3zm-317.5 213.5V175.2l142.7 81.2-142.7 81.2z'/%3E%3C/svg%3E");
}

i.fa-home {
    filter: invert(26%) sepia(82%) saturate(1247%) hue-rotate(193deg) brightness(91%) contrast(98%);
}

/* Site-wide: no borders on any button – overrides inline styles and other CSS */
button,
.nav-button,
a.nav-button,
.cookie-btn,
.dropdown-item,
.btn-blue,
.btn-primary-ui,
.accordion-toggle,
.ellipsis-toggle,
.carousel-nav,
.home-button,
.site-footer-links a,
.leaflet-control-zoom a,
.segmented-button .segmented-button-item .nav-button,
.segmented-button .segmented-button-item > a.nav-button,
.segmented-button a.segmented-button-item.nav-button {
    border: none !important;
}

/* When running as installed PWA (standalone/fullscreen), hide top nav and footer */
@media (display-mode: standalone), (display-mode: fullscreen) {
    .top-nav,
    .site-footer {
        display: none !important;
    }
}

/* Fallback when JS adds class (e.g. iOS Safari standalone) */
body.pwa-standalone .top-nav,
body.pwa-standalone .site-footer {
    display: none !important;
}