@charset "utf-8";
/* ============================================================================
   seasonal.css  —  GDL seasonal themes
   ----------------------------------------------------------------------------
   Written 17 September 2026. Loaded by header.php only while a theme is on,
   and everything in here is behind html[data-season="..."], so out of season
   the file does nothing at all.

   What a theme changes, and deliberately what it does not:

     - the accent red #CE122D becomes the event's colour, but ONLY on the site
       furniture: the left edge of a hero, the top edge of a card, the line
       under the menu bar and the greeting banner. Buttons, status badges and
       alerts are left alone — a green Save button at Christmas is confusing,
       and a red error message has to stay red whatever month it is.
     - the logo gets the event's decoration drawn over the corner of it, unless
       there is a real image for the event, in which case header.php uses that
       instead (Images/GDL-Christmas.png and so on).
     - a slim greeting bar appears under the menu.
     - seasonal.js draws the falling snow, leaves and so on over the page.

   Each event switches off independently on the admin page; the data-season-no-*
   attributes below are how that reaches the CSS.
   ========================================================================== */


/* ============================================================================
   1.  THE PALETTE
   ========================================================================== */

html[data-season="newyear"]     { --season-accent: #C9A227; --season-accent2: #8A6D14; --season-ink: #fff; }
html[data-season="valentines"]  { --season-accent: #D6336C; --season-accent2: #9B1F4A; --season-ink: #fff; }
html[data-season="pancake"]     { --season-accent: #C98A2E; --season-accent2: #8E6017; --season-ink: #fff; }
html[data-season="mothers"]     { --season-accent: #E0679A; --season-accent2: #A8396A; --season-ink: #fff; }
html[data-season="stgeorge"]    { --season-accent: #C8102E; --season-accent2: #8E0A20; --season-ink: #fff; }
html[data-season="easter"]      { --season-accent: #5E9E45; --season-accent2: #3F6E2E; --season-ink: #fff; }
html[data-season="trooping"]    { --season-accent: #1B3A8C; --season-accent2: #102254; --season-ink: #fff; }
html[data-season="fathers"]     { --season-accent: #2F5D8A; --season-accent2: #1D3C5C; --season-ink: #fff; }
html[data-season="halloween"]   { --season-accent: #E8630A; --season-accent2: #A34405; --season-ink: #fff; }
html[data-season="bonfire"]     { --season-accent: #E2661A; --season-accent2: #A0430C; --season-ink: #fff; }
html[data-season="remembrance"] { --season-accent: #8C1120; --season-accent2: #1A1A1A; --season-ink: #fff; }
html[data-season="birthday"]    { --season-accent: #CE122D; --season-accent2: #8E0A20; --season-ink: #fff; }
html[data-season="christmas"]   { --season-accent: #0F7B41; --season-accent2: #0A5A2F; --season-ink: #fff; }


/* ============================================================================
   2.  THE ACCENT
   ----------------------------------------------------------------------------
   Colour only — never a size, a position or a background people rely on. Every
   rule here changes a border-colour on something that already has that border,
   so a page with no card border is simply untouched.
   ========================================================================== */

html[data-season]:not([data-season-no-accent]) [class*="hero"] {
    border-left-color: var(--season-accent);
}

html[data-season]:not([data-season-no-accent]) [class*="card"] {
    border-top-color: var(--season-accent);
}

/* A hairline of the event's colour right across, under the menu bar. */
html[data-season]:not([data-season-no-accent]) .sticky {
    box-shadow: inset 0 -3px 0 var(--season-accent);
}

/* The motion layer's open-menu underline follows the season too. */
html[data-season]:not([data-season-no-accent]).gdl-motion .navbar .dropbtn::after {
    background: var(--season-accent);
}

/* Remembrance is black and deep red rather than a colour scheme: no bright
   edge across the top of the page, just the poppy and the line. */
html[data-season="remembrance"]:not([data-season-no-accent]) .sticky {
    box-shadow: inset 0 -3px 0 #8C1120;
}


/* ============================================================================
   3.  THE GREETING BAR
   ========================================================================== */

.gdl-season-banner {
    background: linear-gradient(90deg, var(--season-accent2), var(--season-accent));
    color: var(--season-ink);
    text-align: center;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 0.4rem 1rem;
    line-height: 1.3;
}

.gdl-season-banner span { display: inline-block; }

html[data-season="remembrance"] .gdl-season-banner {
    background: #1A1A1A;
    border-top: 2px solid #8C1120;
    border-bottom: 2px solid #8C1120;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-size: 0.78rem;
}

@media (max-width: 900px) {
    .gdl-season-banner { font-size: 0.68rem; padding: 0.3rem 0.6rem; }
}


/* ============================================================================
   4.  THE LOGO DECORATION
   ----------------------------------------------------------------------------
   Used when there is no themed image on the server yet, so every event works
   from the day it is switched on. Drop an Images/GDL-Christmas.png (or
   GDL-Halloween.png, GDL-Easter.png …) in and header.php uses that instead and
   none of this applies.

   Each drawing is an inline SVG — nothing to upload, and it stays sharp at any
   size. They are plain generic symbols: a hat, a poppy, a pumpkin. The crown
   and the blue trooping palette are kept here even though that event was
   removed from seasonal_lib.php, so putting it back is a single paste.
   ========================================================================== */

.gdl-season-logo {
    position: relative;
    display: inline-block;
    line-height: 0;
}

/* ----------------------------------------------------------------------------
   Keeping the mark on the logo when the header shrinks
   ----------------------------------------------------------------------------
   The mark is sized and placed as a percentage of its wrapper, so the wrapper
   has to be exactly the size of the picture. main.css hangs the logo's margins
   off the <img> itself — 50px normally, and 100px left plus 150px right once
   .fixed-header comes on at 70px of scroll. Those margins were being counted
   into the wrapper, so the wrapper stayed wide while the logo shrank and the
   mark sat still instead of shrinking with it.

   So: the margins move to the wrapper and come off the image. The wrapper is
   then the picture, the percentages hold at every size, and the same 0.2s ease
   main.css uses on the logo is used here so they shrink together.

   If you ever change those margins in main.css, change them here as well.
   -------------------------------------------------------------------------- */

header1 .logo .gdl-season-logo {
    margin-left: 50px;
    transition: all linear .2s;
}
header1 .logo .gdl-season-logo img {
    margin-left: 0;
}

header1.fixed-header .logo .gdl-season-logo {
    margin-left: 100px;
    margin-right: 150px;
    margin-top: 15px;
}
header1.fixed-header .logo .gdl-season-logo img {
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
}

/* Tablet and phone: main.css centres the logo with auto margins, so the
   wrapper takes those instead and the image sits flush inside it. */
@media screen and (max-width: 1049px) {
    header1 .logo .gdl-season-logo,
    header1.fixed-header .logo .gdl-season-logo {
        display: block;
        width: fit-content;       /* shrink to the picture, then centre it */
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 0;
    }
    header1 .logo .gdl-season-logo img,
    header1.fixed-header .logo .gdl-season-logo img {
        margin: 0 auto;
    }
}

@media (max-width: 900px) {
    header1 .logo .gdl-season-logo,
    header1.fixed-header .logo .gdl-season-logo {
        margin-top: 0 !important;
    }
    header1 .logo .gdl-season-logo img,
    header1.fixed-header .logo .gdl-season-logo img {
        margin: 0 auto !important;
    }
}

.gdl-season-logo::after {
    content: "";
    position: absolute;
    top: -9%;
    left: -1.5%;
    height: 38%;
    aspect-ratio: 1 / 1;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    pointer-events: none;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

/* Christmas — a hat over the first letter */
.gdl-decor-hat::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg stroke='%23141414' stroke-width='5' stroke-linejoin='round' stroke-linecap='round' paint-order='stroke'%3E%3Cpath d='M12 70 C14 42 31 17 55 10 C71 5 86 12 89 24 C92 35 84 43 73 43 C62 43 57 52 55 70 Z' fill='%23DA1A32'/%3E%3Cellipse cx='33' cy='72' rx='25' ry='10.5' fill='%23FFFFFF'/%3E%3Ccircle cx='84' cy='32' r='12' fill='%23FFFFFF'/%3E%3C/g%3E%3Cg stroke='%23141414' stroke-width='2.6' fill='none' stroke-linecap='round' opacity='.9'%3E%3Cpath d='M21 68 q4 -9 2 -15'/%3E%3Cpath d='M32 66 q4 -9 2 -15'/%3E%3Cpath d='M43 67 q4 -9 3 -14'/%3E%3C/g%3E%3C/svg%3E");
}

/* Remembrance — a poppy */
.gdl-decor-poppy::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg stroke='%23141414' stroke-width='5' stroke-linejoin='round' stroke-linecap='round' paint-order='stroke'%3E%3Cg fill='%23DA1A32' transform='translate(50 53) rotate(18)'%3E%3Cpath d='M0 4 C-24 -6 -30 -30 -13 -40 C-8 -43 -4 -42 0 -39 C4 -42 8 -43 13 -40 C30 -30 24 -6 0 4 Z'/%3E%3Cpath d='M0 4 C-24 -6 -30 -30 -13 -40 C-8 -43 -4 -42 0 -39 C4 -42 8 -43 13 -40 C30 -30 24 -6 0 4 Z' transform='rotate(90)'/%3E%3Cpath d='M0 4 C-24 -6 -30 -30 -13 -40 C-8 -43 -4 -42 0 -39 C4 -42 8 -43 13 -40 C30 -30 24 -6 0 4 Z' transform='rotate(180)'/%3E%3Cpath d='M0 4 C-24 -6 -30 -30 -13 -40 C-8 -43 -4 -42 0 -39 C4 -42 8 -43 13 -40 C30 -30 24 -6 0 4 Z' transform='rotate(270)'/%3E%3C/g%3E%3Ccircle cx='50' cy='53' r='11' fill='%23141414'/%3E%3C/g%3E%3C/svg%3E");
}

/* Halloween — a pumpkin */
.gdl-decor-pumpkin::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg stroke='%23141414' stroke-width='5' stroke-linejoin='round' stroke-linecap='round' paint-order='stroke'%3E%3Cpath d='M53 26 C53 16 58 9 66 6' fill='none' stroke-width='6'/%3E%3Crect x='45' y='17' width='11' height='16' rx='5' fill='%234E7A2A'/%3E%3Cellipse cx='50' cy='61' rx='37' ry='30' fill='%23EE7211'/%3E%3C/g%3E%3Cg stroke='%23141414' stroke-width='3.4' fill='none' stroke-linecap='round'%3E%3Cpath d='M50 33 v56'/%3E%3Cpath d='M30 38 C25 48 25 74 30 84'/%3E%3Cpath d='M70 38 C75 48 75 74 70 84'/%3E%3C/g%3E%3C/svg%3E");
}

/* Valentine's — a heart */
.gdl-decor-heart::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg stroke='%23141414' stroke-width='5' stroke-linejoin='round' stroke-linecap='round' paint-order='stroke'%3E%3Cpath d='M50 88 C8 58 12 24 33 18 C43 15.4 49 22 50 31 C51 22 57 15.4 67 18 C88 24 92 58 50 88 Z' fill='%23DA1A32'/%3E%3Cpath d='M31 35 C29 29 32 25 36 24' fill='none' stroke='%23FFFFFF' stroke-width='5' opacity='.9'/%3E%3C/g%3E%3C/svg%3E");
}

/* Mother's Day — a daffodil */
.gdl-decor-flower::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg stroke='%23141414' stroke-width='5' stroke-linejoin='round' stroke-linecap='round' paint-order='stroke'%3E%3Cg fill='%23F5C518' transform='translate(50 52)'%3E%3Cpath d='M0 0 C-11 -9 -13 -27 0 -35 C13 -27 11 -9 0 0 Z'/%3E%3Cpath d='M0 0 C-11 -9 -13 -27 0 -35 C13 -27 11 -9 0 0 Z' transform='rotate(60)'/%3E%3Cpath d='M0 0 C-11 -9 -13 -27 0 -35 C13 -27 11 -9 0 0 Z' transform='rotate(120)'/%3E%3Cpath d='M0 0 C-11 -9 -13 -27 0 -35 C13 -27 11 -9 0 0 Z' transform='rotate(180)'/%3E%3Cpath d='M0 0 C-11 -9 -13 -27 0 -35 C13 -27 11 -9 0 0 Z' transform='rotate(240)'/%3E%3Cpath d='M0 0 C-11 -9 -13 -27 0 -35 C13 -27 11 -9 0 0 Z' transform='rotate(300)'/%3E%3C/g%3E%3Ccircle cx='50' cy='52' r='14' fill='%23E8890C'/%3E%3C/g%3E%3C/svg%3E");
}

/* Father's Day — a spanner */
.gdl-decor-spanner::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg stroke='%23141414' stroke-width='5' stroke-linejoin='round' stroke-linecap='round' paint-order='stroke' transform='rotate(-30 50 50)'%3E%3Cpath d='M30 8 h12 v15 h16 v-15 h12 v25 a13 13 0 0 1 -7 11 v33 a14 14 0 0 1 -26 0 V44 a13 13 0 0 1 -7 -11 Z' fill='%23D5DEE6'/%3E%3Ccircle cx='50' cy='77' r='7.5' fill='%23141414' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
}

/* St George's Day — the cross */
.gdl-decor-cross::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg stroke='%23141414' stroke-width='5' stroke-linejoin='round' stroke-linecap='round' paint-order='stroke'%3E%3Crect x='8' y='20' width='84' height='60' rx='3' fill='%23FFFFFF'/%3E%3C/g%3E%3Cg stroke='%23141414' stroke-width='4' stroke-linejoin='round'%3E%3Crect x='39' y='20' width='22' height='60' fill='%23DA1A32' stroke='none'/%3E%3Crect x='8' y='39' width='84' height='22' fill='%23DA1A32' stroke='none'/%3E%3Cpath d='M39 20 v19 H8 M92 39 H61 V20 M61 61 v19 M39 80 V61 H8 M92 61 H61' fill='none'/%3E%3C/g%3E%3C/svg%3E");
}

/* Easter — a painted egg */
.gdl-decor-egg::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3CclipPath id='e'%3E%3Cellipse cx='50' cy='56' rx='28' ry='38'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg stroke='%23141414' stroke-width='5' stroke-linejoin='round' stroke-linecap='round' paint-order='stroke'%3E%3Cellipse cx='50' cy='56' rx='28' ry='38' fill='%23F5C518'/%3E%3C/g%3E%3Cg clip-path='url(%23e)'%3E%3Cpath d='M16 44 q17 -11 34 0 q17 11 34 0 v12 q-17 11 -34 0 q-17 -11 -34 0 Z' fill='%233E9B4F'/%3E%3Cpath d='M16 70 q17 -11 34 0 q17 11 34 0 v10 q-17 11 -34 0 q-17 -11 -34 0 Z' fill='%23D6336C'/%3E%3C/g%3E%3Cg stroke='%23141414' stroke-width='5' stroke-linejoin='round' stroke-linecap='round' paint-order='stroke' fill='none'%3E%3Cellipse cx='50' cy='56' rx='28' ry='38'/%3E%3C/g%3E%3C/svg%3E");
}

/* Pancake Day — one going over */
.gdl-decor-pancake::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg stroke='%23141414' stroke-width='5' stroke-linejoin='round' stroke-linecap='round' paint-order='stroke'%3E%3Cg transform='rotate(-13 46 34)'%3E%3Cellipse cx='46' cy='34' rx='28' ry='9' fill='%23EFAF57'/%3E%3C/g%3E%3Cpath d='M74 74 h16 a6 6 0 0 1 0 12 h-16 Z' fill='%238A5A2E'/%3E%3Cellipse cx='44' cy='75' rx='30' ry='10' fill='%23C8D2DA'/%3E%3C/g%3E%3C/svg%3E");
}

/* Trooping the Colour — a crown */
.gdl-decor-crown::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg stroke='%23141414' stroke-width='5' stroke-linejoin='round' stroke-linecap='round' paint-order='stroke'%3E%3Cpath d='M10 66 L19 28 L34 46 L50 18 L66 46 L81 28 L90 66 Z' fill='%23F0B429'/%3E%3Crect x='10' y='66' width='80' height='15' rx='5' fill='%23E09B14'/%3E%3Ccircle cx='50' cy='36' r='6' fill='%232A4FA8'/%3E%3C/g%3E%3C/svg%3E");
}

/* Bonfire Night — a sparkler */
.gdl-decor-spark::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg stroke='%23141414' stroke-width='5' stroke-linejoin='round' stroke-linecap='round' paint-order='stroke'%3E%3Cpath d='M50 5 L58 34 L82 18 L66 42 L95 50 L66 58 L82 82 L58 66 L50 95 L42 66 L18 82 L34 58 L5 50 L34 42 L18 18 L42 34 Z' fill='%23F5C518'/%3E%3Ccircle cx='50' cy='50' r='10' fill='%23FFFFFF'/%3E%3C/g%3E%3C/svg%3E");
}

/* New Year — a star */
.gdl-decor-star::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg stroke='%23141414' stroke-width='5' stroke-linejoin='round' stroke-linecap='round' paint-order='stroke'%3E%3Cpath d='M50 8 L61.5 35 L91 38 L68.5 57.5 L75 87 L50 71.5 L25 87 L31.5 57.5 L9 38 L38.5 35 Z' fill='%23F0B429'/%3E%3C/g%3E%3C/svg%3E");
}

/* The company birthday — a candle */
.gdl-decor-candle::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg stroke='%23141414' stroke-width='5' stroke-linejoin='round' stroke-linecap='round' paint-order='stroke'%3E%3Crect x='39' y='43' width='22' height='50' rx='5' fill='%23FFFFFF'/%3E%3Cpath d='M50 6 C59 20 62 27 62 33 A12 12 0 0 1 38 33 C38 27 41 20 50 6 Z' fill='%23F5A623'/%3E%3C/g%3E%3Cg stroke='%23141414' stroke-width='4' stroke-linejoin='round'%3E%3Crect x='39' y='55' width='22' height='8' fill='%23DA1A32' stroke='none'/%3E%3Crect x='39' y='74' width='22' height='8' fill='%23DA1A32' stroke='none'/%3E%3Cpath d='M39 55 h22 M39 63 h22 M39 74 h22 M39 82 h22' stroke-width='3'/%3E%3Cpath d='M50 33 v10' stroke-width='4'/%3E%3C/g%3E%3C/svg%3E");
}

/* On a phone the logo is 40vw, so the decoration needs pulling in a touch. */
@media (max-width: 900px) {
    .gdl-season-logo::after { width: 22%; top: -12%; }
}


/* ============================================================================
   5.  THE EFFECT CANVAS
   ----------------------------------------------------------------------------
   seasonal.js puts this in. Above the page so the snow falls in front of the
   cards, but below the menu bar (z-index 2000) and the fly-outs (9999) so it
   can never sit over something you are trying to click. It never takes a
   click either way — pointer-events is off.
   ========================================================================== */

.gdl-season-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1200;
    pointer-events: none;
}


/* ============================================================================
   6.  GET OUT OF THE WAY
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .gdl-season-canvas { display: none !important; }
}

@media print {
    .gdl-season-canvas,
    .gdl-season-banner { display: none !important; }
    .gdl-season-logo::after { display: none !important; }
    html[data-season] .sticky { box-shadow: none !important; }
}