/*
Theme Name: Generic Child Theme
Template: seeko
Version: 1.0.3
*/


/* 1. SECTION: Header */
/* Header */

/* 1.1 Header pills: Login (signed out), LOGOUT and DASHBOARD (signed in). All three carry .header-login-btn.
   AMENDMENT S82 2026-05-01: text + icon flipped to navy (#031B83) per Rob.
   Was gold-on-white, off-brand vs LB-023. Now navy-on-white + gold border.
   T-S266-045 (02/11/26), Rob, verbatim: "There should be one rule for their size and they should be the same." This
   rule is now the ONE place the three pills take their size, colour and border from. Until 02/11/26 the same sizing
   was declared in two parallel copies (1.2.1 plus 1.2.4 here, and functions.php 1.7 printed after this sheet as
   style#header-btn-critical, with its own 767px block) on top of this rule's older values and a 400px block in 10.2.1;
   at 360 each pill had its font-size declared 3 times and each padding side 5 times, the winner picked by selector
   weight (LOGOUT and Login sized by functions.php 1.7, DASHBOARD by 1.2.1 and 1.2.4), which is how DASHBOARD alone
   shrank at 400px and below from 01/07/26 (S124) to 02/11/26. The values below are the ones every pill rendered with
   on 02/11/26 before the consolidation, measured signed in and signed out at 320 to 1920 (results/s266/T-S266-045):
   S198 29/08/26 pixel sizes (Rob: "make these buttons slightly smaller so that there are maybe 3 or 4 pixels of blue
   above and below": 16px line box + 6px padding + 2px borders = 32px in the 40px bar), S89 10/05/26 150px fixed width
   below 768, S124 01/07/26 the signed-out Login pill matching LOGOUT and DASHBOARD (cream fill, 2px gold border,
   Rob: the white Login was off-brand). !important stays where the winning declarations carried it. */
/* 1.1.1 Header pill base: every size, colour and border declaration, plus the below-768 fixed width */
.header-login-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    text-decoration: none !important;
    font-family: Montserrat, sans-serif !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    line-height: 16px !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    padding: 6px 20px !important;
    min-width: 185px !important;
    box-sizing: border-box !important;
    margin: 0 4px !important;
    border-radius: 10px !important;
    background-color: #FFFBE6 !important;
    color: #031B83 !important;
    border: 2px solid #CC9900 !important;
    outline: none;
    box-shadow: none !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}
/* Below 768 both signed-in pills (and Login) are one fixed width so they match whatever the label length (S89):
   2 x 150 + 4 x 4px margins + the 10px gap of .uks-topbar__auth = 326px, which fits at 340 and up; from 325px down
   the row's cap (11.1, T-S266-024) shrinks the two together. One side padding for all three: 12px (LOGOUT's; the
   fixed width hides the old 0.7rem DASHBOARD had, and at 320 it makes the two shrink by exactly the same amount). */
@media (max-width: 767px) {
    .header-login-btn {
        min-width: 0 !important;
        width: 150px !important;
        padding: 6px 12px !important;
    }
}
/* S82 — login icon SVG inherits currentColor so it flips with the text */
.header-login-btn:not(.logged-in):not(.header-logout-btn) .login-icon svg {
    stroke: #031B83 !important;
    fill: #031B83 !important;
}
/* end of 1.1.1 */

/* 1.1.2 Logged-in variant — natural-case text */
.header-login-btn.logged-in {
    text-transform: none; /* Natural case for "Hi, Name" */
}
/* end of 1.1.2 */

/* 1.1.3 Login button icon container */
.header-login-btn .login-icon {
    margin-right: 8px;
    display: inline-flex;
    align-items: center;
    height: 1em;
    vertical-align: middle;
}
/* end of 1.1.3 */

/* 1.1.4 Login button icon svg sizing and stroke (the stroke moved here from functions.php 1.7 on 02/11/26, T-S266-045) */
.header-login-btn .login-icon svg {
    width: 1em;
    height: 1em;
    vertical-align: middle;
    stroke: #031B83 !important;
    /* T-S246-003 (FAULTS row 150) 13/10/26: the old position:relative / top:-1px lifted every top bar icon 1px, and measured
       by ink at 360 and 1280 that left Logout 1.0 px, Dashboard 0.6 px and Login 0.6 px ABOVE the button midline. Removed;
       the icon span is already centred by .login-icon (align-items:center), the same centring the label has. Value source:
       Rob, 13/10/26, icon and label centred in the button, checked by ink against the box midline. */
}
/* end of 1.1.4 */

/* 1.1.5 Login button hover (scale + invert to gold bg + navy text) */
.header-login-btn:hover {
    /* S198: was #FFD700, a non-brand yellow left over from the gold-block era, and the only
       header state that did not hover to the cream-hover token. All three states (Login,
       Logout, Dashboard) now behave identically.
       T-S266-045 (02/11/26): the border-color and the !important on transform and box-shadow moved here from
       functions.php 1.7, so this is the one hover rule for all three pills. */
    transform: translateY(-1px) !important;
    box-shadow: none !important;
    background-color: #FFF5CC !important;
    color: #031B83 !important;
    border-color: #CC9900 !important;
    text-decoration: none !important;
}
/* end of 1.1.5 */
/* end of 1.1 */

/* 1.2 Unified header logout + logged-in dashboard button sizing (S58) */
/* AMENDMENT S58 2026-04-14: Unified header button sizing — LOGOUT + DASHBOARD must
   be visually identical. Previous rogue .header-logout-btn block (font-size 0.85rem,
   padding 0.2rem 0.8rem) made LOGOUT smaller than DASHBOARD. This replaces it with
   a combined rule targeting BOTH .header-logout-btn and .header-login-btn.logged-in
   so they share every dimension-related property. Colour is inherited from the
   base .header-login-btn rule above (gold bg + navy text).
   T-S266-045 (02/11/26): the SIZING left this section. Every size declaration (border width, box-sizing, font family
   and weight, font-size, letter-spacing, padding, min-width, line-height, margin, and the whole below-768 block that
   was 1.2.4) now lives only in 1.1.1, which all three pills carry; 1.2.1 keeps its colour and shape lines, at the
   same values as 1.1.1. */
/* 1.2.1 Logout + dashboard buttons: colour and shape (sizing in 1.1.1 since 02/11/26) */
/* S198 29/08/26 (Rob): the solid gold block is retired - "I've never liked that colour.
   It's just too much as a block. It's okay as a border." Both header buttons now carry the
   same treatment as Register Your Venue and Save billing details: cream fill, gold border,
   navy label. The S198 pixel sizing and its reasons are recorded at 1.1.1. */
.header-logout-btn,
.header-login-btn.logged-in {
    background-color: #FFFBE6 !important;
    color: #031B83 !important;
    text-transform: uppercase !important;
    text-align: center !important;
    border-radius: 10px !important;
    text-decoration: none !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
/* end of 1.2.1 */

/* 1.2.2 Logout + dashboard buttons — D055 invert hover */
.header-logout-btn:hover,
.header-login-btn.logged-in:hover {
    /* S73 T-FU-S73-01 2026-04-20 — D055 invert fix: was #FFD700 (non-brand yellow) + navy kept;
       now proper invert navy bg + gold text to match all other D055 hovers site-wide. */
    /* S198: resting state is cream now, so the hover steps to the cream-hover token and
       lifts, matching .btn-option--cta. A navy fill belonged to a gold resting state and
       would now read as a jump rather than a hover. The scale(1.05) goes with it - it was
       inflating the button past its neighbour. */
    background-color: #FFF5CC !important;
    color: #031B83 !important;
    border-color: #CC9900 !important;
    box-shadow: none !important;
    transform: translateY(-1px);
    text-decoration: none !important;
}
/* end of 1.2.2 */

/* 1.2.3 Logout + dashboard buttons — icon stroke colour */
.header-logout-btn .login-icon svg,
.header-login-btn.logged-in .login-icon svg {
    stroke: #031B83;
}
/* end of 1.2.3 */

/* 1.2.4 REMOVED (T-S266-045, 02/11/26): the below-768 sizing (min-width 0, width 150px, S89 10/05/26; vertical padding
   6px, T-S246-003 13/10/26) is the 767px block of 1.1.1, one rule for all three pills. Its side padding was 0.7rem
   (11.2px) against the 12px LOGOUT and Login took from functions.php 1.7; 12px for all three now, hidden by the
   fixed 150px width. */
/* end of 1.2 */
/* end of 1 */


/* 2. SECTION: Pricing Page */
/* Pricing Page */


/* 2.1 Pricing card base gradients + text colours per tier */
/* Pricing cards — base blue style (Free, Premium, Venue) */
/* 2.1.1 Default pricing card — blue gradient */
.pricing-card {
    background-image: linear-gradient(45deg, #031B83 0%, #00CCFF 100%) !important;
}
/* end of 2.1.1 */

/* 2.1.2 Default pricing card descendants — gold text */
.pricing-card * {
    color: #CC9900 !important;
}
/* end of 2.1.2 */

/* 2.1.3 Standard + Organiser cards — gold gradient */
/* Gold style — Standard & Organiser */
.pricing-card.pricing-basic,
.pricing-card.pricing-pro {
    background-image: linear-gradient(45deg, #CC9900 0%, #FFD700 100%) !important;
}
/* end of 2.1.3 */

/* 2.1.4 Standard + Organiser descendants — blue text */
.pricing-card.pricing-basic *,
.pricing-card.pricing-pro * {
    color: #031B83 !important;
}
/* end of 2.1.4 */

/* 2.1.5 Premium card — blue gradient (matches default) */
/* Blue style — Premium (same as Free/Venue base) */
.pricing-card.pricing-intermediate {
    background-image: linear-gradient(45deg, #031B83 0%, #00CCFF 100%) !important;
}
/* end of 2.1.5 */

/* 2.1.6 Premium card descendants — gold text */
.pricing-card.pricing-intermediate * {
    color: #CC9900 !important;
}
/* end of 2.1.6 */

/* 2.1.7 Blue cards — gold pricing titles (PMPro override) */
/* Force gold titles on blue cards — override PMPro h3 !important from functions.php */
.pricing-card .pricing-title,
.pricing-card h3.pricing-title,
#pmpro_form .pricing-card .pricing-title,
.pmpro_checkout .pricing-card .pricing-title {
    color: #CC9900 !important;
}
/* end of 2.1.7 */

/* 2.1.8 Gold cards — blue pricing titles (PMPro override) */
/* Standard & Organiser (gold cards) — titles stay blue */
.pricing-card.pricing-basic .pricing-title,
.pricing-card.pricing-pro .pricing-title,
#pmpro_form .pricing-card.pricing-basic .pricing-title,
#pmpro_form .pricing-card.pricing-pro .pricing-title,
.pmpro_checkout .pricing-card.pricing-basic .pricing-title,
.pmpro_checkout .pricing-card.pricing-pro .pricing-title {
    color: #031B83 !important;
}
/* end of 2.1.8 */

/* 2.1.9 PMPro notice box (.pmpro_message.pmpro_alert, e.g. the "check your email" reset confirmation) —
   on-brand. PMPro base.css styles it as a pale-yellow warning (bg #FFF8E0, text #6C5101, border #FFEEBA);
   rebrand to the canonical cream + gold + navy notice (Rob 24/07/26). body-scoped (0,2,1) beats base.css's
   (0,2,0) regardless of load order, so no !important is needed. */
body .pmpro_message.pmpro_alert {
    background-color: #fffbe6;
    border: 1px solid #CC9900;
    color: #031B83;
    text-align: center;
}
/* end of 2.1.9 */

/* 2.1.10 PMPro error red becomes the brand red, everywhere PMPro draws one (X06, S238, the 26th of September 2026).
   Rob 24/09/26: "just add a red border to that red box, but obviously the correct red"; Rob 26/09/26: every stock
   PMPro red on the login and checkout screens (the required asterisk, the weak-password state, error input borders,
   error text) becomes the brand red too; and the standing S228 ruling "One red, #C41C1C, everywhere"
   (COMMENTS_page44.md 51).
   PMPro base.css paints all of these from four tokens it defines on :root, stock Bootstrap danger colours:
   error-background #F8D7DA, error-border #F5C6CB, error-text #721C24, error-link #843534. Consumers (base.css 3.8.6):
   the message box .pmpro_message.pmpro_error (65) and its links (86), .pmpro_form_input-error borders (133),
   #pass-strength-result.short, the weak-password meter (333), .pass1.short (361), .pmpro_tag-error (466), the required
   asterisk .pmpro_asterisk abbr (617), and variation_1.css .pmpro_btn-delete (185).
   2.1.10.1 re-points the four tokens at the brand tokens (docs/BRAND_GUIDE.md 1.5: --color-error #C41C1C,
   --color-error-bg rgba(196, 28, 28, 0.06)), so every consumer follows and keeps following after a PMPro update.
   base.css loads AFTER this file, so a plain :root here would lose on order; html:root is (0,1,1) against its (0,1,0)
   and wins on specificity. No !important needed. The fill, border and text are worn the way Rob ruled for the red
   Decline control (S219, COMMENTS_page43.md 38): light brand wash, brand red border and text, never a block of red. */
html:root {
    --pmpro--color--error-background: var(--color-error-bg);
    --pmpro--color--error-border: var(--color-error);
    --pmpro--color--error-text: var(--color-error);
    --pmpro--color--error-link: var(--color-error);
}
/* 2.1.10.2 The box Rob named. .pmpro_message draws a 1px border, which is what read as "no border"; every other outline
   on the same cards is 2px (the reset card and its inputs 2px gold, page-polish.css §73.5; the login card 2px navy; the
   checkout message box 2px). Width only: the colours come from 2.1.10.1. (0,2,1) beats base.css (0,1,0). */
body .pmpro_message.pmpro_error {
    border-width: 2px;
}
/* 2.1.10.3 The one PMPro error red that is NOT tokenised: base.css 134 hardcodes the errored-input halo as
   box-shadow 0 0 0 0.2rem #f8d7da inside a nested .pmpro block, (0,3,0). Same halo, the colour swapped for the
   error-background token (the brand wash), which is the value PMPro would have used had it tokenised it.
   (0,3,1) beats (0,3,0) regardless of load order. */
body .pmpro .pmpro_form_input.pmpro_form_input-error {
    box-shadow: 0 0 0 0.2rem var(--pmpro--color--error-background);
}
/* end of 2.1.10 */
/* 2.1.11 The Strong state of the password strength meter wears the platform's positive green (S245 row 9, Rob 06/10/26, three pictures of the change-password form:
   "'strong' has no dark green border"). MEASURED LIVE (the meter's own element, id pass-strength-result with class strong, placed on /login/ in the browser inside the real cascade,
   1280, nothing saved; the real form needs a reset key, which only an email makes): PMPro base.css paints .strong from its three success tokens, which are the stock Bootstrap
   pale greens: ground #d4edda, border #c3e6cb (one shade darker than its own ground, so it reads as no border) and text #0F441C. The short state beside it already wears the brand
   red in full (2.1.10.1: red wash, red border, red text). Strong now wears the same shape in the platform's one positive green, the pair D-499 made the single source of truth for a
   confirmed positive state (page-polish.css 43.1.2 .btn-option--select.active, and 36.4 .uks-block-toast.is-unblock): ground #EAF4EC, border #2F7D4F, text #2F6B47 (5.69 to 1).
   Only this one state and only its three colours: the width, padding, radius and the other four states stay PMPro's. body in front of the id makes it (1,1,1) against base.css (1,1,0), so
   it wins on specificity with no !important and no dependence on load order. The same rule reaches the checkout's own meter (functions.php 8917, the same id), which is meant. */
/* S9-61b (14/10/26, D-869). Rob: "replace all 68 with the site greens". The Strong meter state wears the guide tokens, not literals: wash = var(--color-success-bg), border and text = var(--color-success) (design-tokens.css lines 38-39). The ground, border and text hexes named in the paragraph above are history. */
body #pass-strength-result.strong {
    background-color: var(--color-success-bg);
    border-color: var(--color-success);
    color: var(--color-success);
}
/* end of 2.1.11 */
/* 2.1.12 The Weak and Medium states of the password strength meter wear the platform's red and amber, each with a border that shows (FAULTS 12, Rob, the 16th of October 2026, with pictures of the Weak and Medium pills under the password box: "the weak and medium indicators do not have borders. The weak colours should be the style sheet red tokens and the medium one looks correct for the kind of middle ground amber orange whatever it is. So that looks fine, but just make sure they've got the right borders and make sure the reds are the correct reds.").
   MEASURED LIVE on the Free tier sign-up, 1280 and 360, headless, the meter put in each state exactly as functions.php's own handler does it (removeClass, addClass, html(pwsL10n.<level>); no password typed): PMPro base.css paints .bad (Weak) and .good (Medium) from its stock alert tokens. Weak was a peach ground (255, 236, 217) with brown text (153, 93, 29) and a border of (255, 221, 177), Medium a pale yellow ground (255, 248, 224) with brown text (108, 81, 1) and a border of (255, 238, 186), each border one shade off its own ground, which reads as no border at all, and Weak was orange, not the platform's red. .short (Very weak and Mismatch) already wears the brand red in full (2.1.10.1) and .strong the green (2.1.11); both carry a 1px border in their own token colour, which is the shape given here to the other two.
   Now: Weak is the red trio of .tier-status--err and .ei-chip--declined (--color-error-bg ground, --color-error border and text), Medium is the amber trio of .ev-status--pending and .att-chip--waitlist (--color-warning-bg ground, --color-warning border and text), on the 1px border and 8px corners every state of the meter already has. Tokens, not literals (docs/BRAND_GUIDE.md 1.5: --color-error #C41C1C, --color-warning #D97706). This extends 2.1.11, whose sentence that the other four states stay PMPro's is no longer true of .bad and .good. body in front of the id makes each rule (1,1,1) against base.css (1,1,0), so it wins on specificity with no !important and no dependence on load order. The same rules reach every other place that draws this meter, which is meant.
   The label: the engine's ink rule (capital top to baseline of the rendered Nunito Sans against the box midline) read the label 0.797px ABOVE the middle of the box in all five states at 1280 and 360, from PMPro's even 4px top and bottom padding. 5px 12px 3px, the same trick as .att-chip's 6px 12px 4px, puts it at +0.203px. The box stays 35.59px tall. */
body #pass-strength-result {
    padding: 5px 12px 3px;
}
body #pass-strength-result.bad {
    background-color: var(--color-error-bg);
    border-color: var(--color-error);
    color: var(--color-error);
}
body #pass-strength-result.good {
    background-color: var(--color-warning-bg);
    border-color: var(--color-warning);
    color: var(--color-warning);
}
/* end of 2.1.12 */
/* end of 2.1 */
/* <!-- AMENDMENT v2.4 (2026-04-04): Complete pricing card overhaul — compact, no animations, uniform height --> */

/* 2.2 Kill pricing animations (Seeko hover + Elementor entrance) */
/* Kill ALL pricing animations — Seeko theme hover, Elementor entrance, everything */
/* 2.2.1 Kill all transitions/animations across pricing card subtree */
.pricing-card,
.pricing-card *,
.pricing-card .pricing-price,
.pricing-card .pricing-price strong,
.pricing-card .pricing-price strong > span,
.pricing-card .pricing-price > span,
.pricing-card h4.pricing-price,
.pricing-card .btn-pricing,
.pricing-card .btn-pricing .btn,
.pricing-card .btn-pricing a.btn {
    transition: none !important;
    animation: none !important;
}
/* end of 2.2.1 */

/* 2.2.2 Kill Elementor fadeInUp entrance on pricing-card wrappers */
/* Kill Elementor fadeInUp entrance animation on pricing card widget wrappers */
.uksp-widget:has(.pricing-card),
.uksp-element:has(.pricing-card) {
    animation: none !important;
    animation-duration: 0s !important;
    animation-delay: 0s !important;
    transition: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}
/* end of 2.2.2 */

/* 2.2.3 Force Elementor invisible-state visible on pricing-card */
.uksp-invisible:has(.pricing-card) {
    visibility: visible !important;
    opacity: 1 !important;
}
/* end of 2.2.3 */

/* 2.2.4 Kill .animated/.fadeInUp class animations on pricing-card */
.animated:has(.pricing-card),
.fadeInUp:has(.pricing-card) {
    animation: none !important;
    animation-duration: 0s !important;
}
/* end of 2.2.4 */
/* end of 2.2 */

/* 2.3 Compact card base + title */
/* Compact card base — override Seeko's bloated 2rem padding */
/* 2.3.1 Pricing card flex column + tight padding */
.pricing-card {
    display: flex !important;
    flex-direction: column !important;
    padding: 1rem 1.25rem !important;
    margin-bottom: 0 !important;
}
/* end of 2.3.1 */

/* 2.3.2 Compact pricing title */
/* Compact title — override Seeko's 1rem padding + 27px margin */
.pricing-card .pricing-title {
    padding: 0.4rem 0 !important;
    margin-bottom: 0.5rem !important;
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
}
/* end of 2.3.2 */

/* 2.3.3 Popular card — top margin reset */
.pricing-popular.pricing-card {
    margin-top: 0;
}
/* end of 2.3.3 */

/* 2.3.4 Popular card title divider spacing */
.pricing-popular.pricing-card .pricing-title::after {
    margin-top: 0.3rem !important;
}
/* end of 2.3.4 */
/* end of 2.3 */

/* 2.4 Compact feature list + description */
/* Compact feature list */
/* 2.4.1 Pricing-features list container */
.pricing-card .pricing-features {
    margin-bottom: 0.5rem !important;
    padding: 0 !important;
}
/* end of 2.4.1 */

/* 2.4.2 Pricing-features list items */
.pricing-card .pricing-features li {
    padding: 0.15rem 0 !important;
    margin: 0 !important;
    font-size: 0.9rem !important;
    line-height: 1.4 !important;
}
/* end of 2.4.2 */

/* 2.4.3 Pricing description block compacted */
/* Compact description */
.pricing-card .pricing-desc {
    margin-bottom: 0.25rem !important;
    max-height: none !important;
}
/* end of 2.4.3 */
/* end of 2.4 */

/* 2.5 Compact price layout */
/* Compact price — override Seeko's padding and flex layout */
/* 2.5.1 Compact price block (padding + margin) */
.pricing-card .pricing-price,
.pricing-card h4.pricing-price {
    padding: 0.4rem 0 !important;
    margin-bottom: 0.5rem !important;
}
/* end of 2.5.1 */
/* end of 2.5 */

/* 2.6 Force price subscription text to always show */
/* Force price subscription text ("per Month") to always show — Seeko hides it */
/* 2.6.1 Pricing-price direct span — block + visible */
.pricing-card .pricing-price > span {
    height: auto !important;
    overflow: visible !important;
    opacity: 1 !important;
    max-width: none !important;
    display: block !important;
}
/* end of 2.6.1 */

/* 2.6.2 Pricing-price strong > span — visibility unlock */
.pricing-card .pricing-price strong > span {
    max-width: none !important;
    opacity: 1 !important;
    overflow: visible !important;
}
/* end of 2.6.2 */
/* end of 2.6 */

/* 2.7 Force pricing button to always show (override Seeko hover-reveal) */
/* Force button to always show — override Seeko's height:0 hover-reveal mechanism */
/* 2.7.1 Pricing button container always-visible base */
.pricing-card .btn-pricing {
    height: auto !important;
    overflow: visible !important;
    margin-top: auto !important;
    padding: 0 !important;
}
/* end of 2.7.1 */

/* 2.7.2 Pricing button container hover (kill Seeko outline + size) */
.pricing-card .btn-pricing:hover {
    border: none !important;
    outline: none !important;
    height: auto !important;
}
/* end of 2.7.2 */
/* end of 2.7 */



/* 2.8 Pricing card buttons — opposing colours per tier */
/* Button Opposing Colors Per Card — gold button on blue cards, blue button on gold cards */
/* 2.8.1 Blue cards (default + Premium) — gold button base */
.pricing-card .btn-pricing a.btn,
.pricing-card.pricing-intermediate .btn-pricing a.btn {
    background: linear-gradient(-135deg, #FFD700 5%, #CC9900 50%) !important;
    border-radius: 0.43rem !important;
    opacity: 1 !important;
    color: #031B83 !important;
    display: block !important;
    width: 100% !important;
    border: none !important;
}
/* end of 2.8.1 */

/* 2.8.2 Blue cards — gold button hover */
.pricing-card .btn-pricing a.btn:hover,
.pricing-card.pricing-intermediate .btn-pricing a.btn:hover {
    background: linear-gradient(225deg, #FFD700 50%, #CC9900 100%) !important;
    color: black !important;
}
/* end of 2.8.2 */

/* 2.8.3 Gold cards (Standard + Organiser) — blue button base */
.pricing-card.pricing-basic .btn-pricing a.btn,
.pricing-card.pricing-pro .btn-pricing a.btn {
    background: linear-gradient(-135deg, #00CCFF 5%, #031B83 50%) !important;
    border-radius: 0.43rem !important;
    opacity: 1 !important;
    color: #CC9900 !important;
    display: block !important;
    width: 100% !important;
    border: none !important;
}
/* end of 2.8.3 */

/* 2.8.4 Gold cards — blue button hover */
.pricing-card.pricing-basic .btn-pricing a.btn:hover,
.pricing-card.pricing-pro .btn-pricing a.btn:hover {
    background: linear-gradient(225deg, #00CCFF 50%, #031B83 100%) !important;
    color: black !important;
}
/* end of 2.8.4 */
/* end of 2.8 */
/* end of 2 */







/* 3. SECTION: Profile Page */
/* Profile Page */

/* 3.1 Remove breadcrumbs from profile page */
/* Remove breadcrumbs from profile page */
.svq-breadcrumb { display: none; }
/* end of 3 */


/* 4. SECTION: Media & rtMedia (upload, gallery, notifications) */
/* 4.1 Generic rtMedia uploader div + buttons */
/* Generic Media Upload and Gallery Styles */
/* 4.1.1 rtMedia uploader container */
.rtmedia-uploader-div {
    background-color: #FAFAFA;
    border: 2px solid #031B83;
    border-radius: 0.43rem;
    padding: 1rem;
}
/* end of 4.1.1 */

/* 4.1.2 rtMedia uploader file-input + button base */
.rtmedia-uploader-div .rtm-file-input,
.rtmedia-uploader-div button {
    font-family: "Montserrat", sans-serif !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    border-radius: 0.43rem !important;
    padding: 0.25rem 1rem !important;
    box-shadow: 0 12px 20px -16px rgba(2, 22, 106, 0.6) !important;
    background-color: #031B83 !important;
    color: #FAFAFA !important;
    transition: transform 0.4s ease-in-out !important;
}
/* end of 4.1.2 */
/* end of 4.1 */

/* 4.2 rtMedia uploader button hover (hover-capable vs touch split) */
/* P2.33b — only apply hover scale on real hover devices to prevent
   touch-tap overflow on phones/tablets.
   Phase 2a S65: background-color lifted to base (identical across both media queries). */
/* 4.2.1 rtMedia uploader button base hover (background only) */
.rtmedia-uploader-div button:hover,
.rtmedia-uploader-div button.photo-limit-disabled:hover {
    background-color: #002060 !important;
}
/* end of 4.2.1 */
/* 4.2.2 Hover-capable devices — apply scale */
@media (hover: hover) and (pointer: fine) {
    .rtmedia-uploader-div button:hover,
    .rtmedia-uploader-div button.photo-limit-disabled:hover {
        transform: scale(1.1) !important;
    }
}
/* end of 4.2.2 */
/* 4.2.3 Touch devices — suppress scale to prevent overflow */
@media (hover: none) {
    .rtmedia-uploader-div button:hover,
    .rtmedia-uploader-div button.photo-limit-disabled:hover {
        transform: none !important;
    }
}
/* end of 4.2.3 */

/* 4.2.4 Photo-limit-disabled button state */
.rtmedia-uploader-div button.photo-limit-disabled {
    background-color: #031B83 !important; /* Preserve base color when disabled */
    opacity: 0.7 !important;
    cursor: not-allowed !important;
}
/* end of 4.2.4 */
/* end of 4.2 */

/* 4.3 rtMedia container, list-item, thumbnail */
/* 4.3.1 rtMedia list container */
.rtmedia-container .rtmedia-list {
    border: 2px solid #CC9900;
    border-radius: 0.43rem;
    padding: 1rem;
    background-color: #FAFAFA;
    box-shadow: 0 2px 5px rgba(2, 22, 106, 0.2);
}
/* end of 4.3.1 */

/* 4.3.2 rtMedia list item */
.rtmedia-container .rtmedia-list-item {
    border-radius: 0.43rem;
    overflow: hidden;
    margin: 0.5rem;
}
/* end of 4.3.2 */

/* 4.3.3 rtMedia item thumbnail base */
.rtmedia-item-thumbnail img {
    border-radius: 0.43rem;
    box-shadow: 0 1px 3px rgba(2, 22, 106, 0.3);
    transition: transform 0.3s ease;
}
/* end of 4.3.3 */

/* 4.3.4 rtMedia item thumbnail hover */
.rtmedia-item-thumbnail img:hover {
    transform: scale(1.05);
}
/* end of 4.3.4 */
/* end of 4.3 */

/* 4.4 rtMedia item title typography */
.rtmedia-item-title h4 {
    font-family: "Montserrat", sans-serif;
    font-size: 1.25rem;
    color: #031B83;
    text-transform: uppercase;
    margin-top: 0.5rem;
}

/* 4.5 BuddyPress item-list tabs — brand navy */
#buddypress .item-list-tabs li a,
#buddypress .item-list-tabs li span {
    color: #031B83 !important;
}

/* 4.6 rtMedia options buttons */
/* 4.6.1 rtMedia options buttons base */
#rtm-media-options a,
#rtm-media-options button {
    background-color: #031B83 !important;
    color: #FAFAFA !important;
    border-radius: 0.43rem !important;
    padding: 0.25rem 1rem !important;
}
/* end of 4.6.1 */

/* 4.6.2 rtMedia options buttons hover */
#rtm-media-options a:hover,
#rtm-media-options button:hover {
    background-color: #002060 !important;
}
/* end of 4.6.2 */
/* end of 4.6 */

/* 4.7 rtMedia success/warning notifications */
/* rtMedia success/warning notifications — on brand */
/* 4.7.1 rtMedia success notification */
.rtmedia-success {
    /* S210 06/09/26: was #FFF8E1, an off-brand cream. One cream on this site, #FFFBE6. */
    background-color: #FFFBE6 !important;
    color: #031B83 !important;
    border: 1px solid #CC9900 !important;
    border-bottom: 1px solid #CC9900 !important;
    border-radius: 6px !important;
    text-shadow: none !important;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: 13px;
}
/* end of 4.7.1 */

/* 4.7.2 rtMedia warning notification */
.rtmedia-warning {
    /* S213 browns (Rob, S207: "brown text and amber borders are not brand colours; blue or gold
       only"). Was #fff3cd behind #856404 brown text. Its sibling 4.7.1 was put on the one brand
       cream behind navy in S210 and this one was missed, so the pair disagreed. */
    background-color: #FFFBE6 !important;
    color: #031B83 !important;
    border: 1px solid #CC9900 !important;
    border-bottom: 1px solid #CC9900 !important;
    border-radius: 6px !important;
    text-shadow: none !important;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: 13px;
}
/* end of 4.7.2 */
/* end of 4.7 */
/* end of 4 */

/* 6. SECTION: Mobile header + rtMedia overrides (≤768px) */
@media (max-width: 768px) {
    /* 6.1 rtMedia list padding tightened on mobile */
    .rtmedia-container .rtmedia-list {
        padding: 0.75rem;
    }
    /* end of 6.1 */

    /* 6.2 rtMedia uploader buttons tightened on mobile */
    .rtmedia-uploader-div .rtm-file-input,
    .rtmedia-uploader-div button {
        padding: 0.2rem 0.8rem;
        font-size: 0.9rem;
    }
    /* end of 6.2 */

}
/* end of 6 */

/* 8. SECTION: BuddyPress profile navigation */
/* 8.1, 8.2 and 8.3 [REMOVED X05, S238, 26/09/2026] hid the BuddyPress nav items
   #xprofile-personal-li and #customise-personal-li and offset #item-body #item-nav per tab.
   BuddyPress's primary member nav is no longer printed at all (the custom sidenav is the only
   member nav, buddypress/legacy/members/single/home.php 1.3), so none of those elements exist.
   Rob, 24/09/2026: nothing hidden, the only links are the ones attached to the buttons you can see. */

/* 8.4 Remove white background on all tabs */
/* Remove white background on all tabs */
#item-body,
#item-body .col-inner {
    background-color: transparent !important; /* Clear background */
}    
    
/* 8.5 Media tab: subnav offsets */
/* 8.5.1 [REMOVED X05, S238, 26/09/2026] offset #item-body #item-nav on the media tab; that element is
   no longer printed. */
/* end of 8.5.1 */

/* 8.5.2 Media tab — subnav offsets (rtmedia menu/uploader) */
/* Move subnav (rtmedia menu/uploader) down on media tab */
.media #subnav.item-list-tabs,
.media .rtm-media-type-list {
    margin-top: 30px !important; /* Push down; variant: 20px */
    padding-top: 10px; /* Extra space if needed */
}
/* end of 8.5.2 */

/* 8.6 Activity subnav offset fix for items with counts */
/* Fix activity subnav offset for items with counts */
.activity #subnav.item-list-tabs ul li a {
    display: flex;
    align-items: center;
}
/* end of 8 */





/* 9. SECTION: Blog Page */
/* Blog Page */

/* 9.1 Generic blog index styles (hide defaults, brand btn-tag, meta alignment) */
/* Generic blog index styles */
/* 9.1.1 Hide blog index entry titles */
.blog .entry-title {
    display: none !important;
}
/* end of 9.1.1 */

/* 9.1.2 Blog page entry-content top-spacing reset */
.page-id-[blog-page-id] .site-main .entry-content > *:first-child {
    margin-top: 0; /* Clean top spacing */
}
/* end of 9.1.2 */

/* 9.1.3 Hide Seeko blog intro block */
.blog .svq-blog-intro {
        display: none !important;
}
/* end of 9.1.3 */

/* 9.1.4 Hide author-wrapper */
.author-wrapper {
    display: none !important;
}
/* end of 9.1.4 */

/* 9.1.5 Hide entry-footer */
.entry-footer {
    display: none !important;
}
/* end of 9.1.5 */

/* 9.1.6 Hide post nav2 (next/prev) */
.nav2-post {
    display: none !important;
}
/* end of 9.1.6 */

/* 9.1.7 Brand btn-tag base colours */
.btn-tag {
    background-color: #CC9900;
    color: #031B83 !important; /* AMENDMENT S47: D055 brand rule */
}
/* end of 9.1.7 */

/* 9.1.8 Brand btn-tag hover */
.btn-tag:hover {
    background-color: #FFD700 !important;
    color: #031B83 !important;
}
/* end of 9.1.8 */

/* 9.1.9 Meta-category bottom margin */
.meta-category {
    margin-bottom: 2.5rem !important;
}
/* end of 9.1.9 */

/* 9.1.10 Entry-middle centred */
.entry-middle {
    text-align: center;
}
/* end of 9.1.10 */

/* 9.1.11 Meta-category centred (duplicate selector — paired with 9.1.9 for alignment override) */
.meta-category {
    text-align: center;
}
/* end of 9.1.11 */



/* 9.2 Blog cards — clean card design with brand accents */
/* Blog Cards — clean card design with brand accents */

/* Base card styles — white card, subtle shadow, gold accent border */
.post-card {
    background: #FFFFFF !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(3, 27, 131, 0.08) !important;
    padding: 0 !important;
    transition: box-shadow 0.25s ease, transform 0.25s ease !important;
    overflow: hidden !important;
    border: 1px solid rgba(3, 27, 131, 0.06) !important;
    background-image: none !important;
}

/* 9.3 Blog card hover lift */
/* Subtle lift on hover — no scale to prevent mobile overflow */
.post-card:hover {
    box-shadow: 0 6px 20px rgba(3, 27, 131, 0.12) !important;
    transform: translateY(-3px) !important;
    border-color: rgba(204, 153, 0, 0.3) !important;
}

/* 9.4 Blog card text colours + typography */
/* Text colors — navy headings, muted body */
.post-card * {
    color: #1A1A2E !important;
    font-family: "Nunito Sans", Sans-serif !important;
}
.post-card h2, .post-card h3, .post-card h4 {
    font-family: "Montserrat", Sans-serif !important;
    font-weight: 700 !important;
    color: #031B83 !important;
    line-height: 1.3 !important;
}

/* 9.5 Blog card category tag (gold pill) */
/* Category tag — gold pill */
.post-card .btn-tag,
.post-card .meta-category a {
    background: #CC9900 !important;
    color: #031B83 !important;
    border-radius: 9999px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    padding: 3px 12px !important;
}

/* 9.6 Blog card hero image */
/* Hero image — full width, cropped to ratio */
.aimg-card-hover img {
    border-radius: 12px 12px 0 0 !important;
    box-shadow: none !important;
    width: 100% !important;
    height: 200px !important;
    object-fit: cover !important;
}

/* 9.7 Gold accent bar at top of card */
/* Gold accent bar at top of card */
.post-card::before {
    content: '';
    display: block;
    height: 4px;
    background: linear-gradient(90deg, #CC9900 0%, #FFD700 100%);
}

/* No alternating backgrounds — consistent clean white cards */

/* 9.8 Entry content padding */
/* Entry content — comfortable padding */
.entry-content {
    padding: 1rem 1.25rem !important;
    margin: 0 !important;
}

/* 9.9 Seeko theme .btn-primary brand override (D055) */
/* D055 brand override: Seeko theme .btn-primary gold bg must use blue text */
.btn.btn-primary,
.btn.btn-primary:hover,
.btn.btn-primary:focus {
    color: #031B83 !important;
}
/* end of 9 */


/* 10. SECTION: Mobile responsive overrides — 360px floor */
/* ============================================================================
   MOBILE RESPONSIVE — 360px floor (Nothing Phone 3a)
   ============================================================================ */

/* 10.1 Mobile breakpoint (≤768px) — hover kills, full-bleed cards, overflow guards */
@media (max-width: 768px) {
    /* 10.1.1 Post-card hover lift reduced on touch */
    /* Kill all scale hover effects on touch — prevents horizontal overflow */
    .post-card:hover {
        transform: translateY(-2px) !important;
    }
    /* end of 10.1.1 */

    /* 10.1.2 rtMedia uploader button hover scale killed on touch */
    .rtmedia-uploader-div button:hover,
    .rtmedia-uploader-div button.photo-limit-disabled:hover {
        transform: none !important;
    }
    /* end of 10.1.2 */

    /* 10.1.3 rtMedia thumbnail hover scale killed on touch */
    .rtmedia-item-thumbnail img:hover {
        transform: none !important;
    }
    /* end of 10.1.3 */

    /* 10.1.4 Blog cards full-bleed + smaller radius on mobile */
    /* Blog cards — full bleed on mobile */
    .post-card {
        border-radius: 10px !important; /* intentional: mobile-only smaller radius (base is 12px per STYLING_GUIDE) — Phase 2a S65 */
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    /* end of 10.1.4 */

    /* 10.1.5 Blog card hero image height + radius on mobile */
    .aimg-card-hover img {
        height: 160px !important;
        border-radius: 10px 10px 0 0 !important; /* intentional: mobile-only radius matches parent .post-card 10px (base 12px 12px 0 0) — Phase 2a S65 */
    }
    /* end of 10.1.5 */

    /* 10.1.6 Entry-content padding tightened on mobile */
    .entry-content {
        padding: 0.75rem 1rem !important;
    }
    /* end of 10.1.6 */

    /* 10.1.7 Pricing cards full-bleed single-column on mobile */
    /* Pricing cards — single column, no overflow */
    .pricing-card {
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
    }
    /* end of 10.1.7 */

    /* 10.1.8 Body horizontal-overflow guard */
    /* Prevent any element from exceeding viewport */
    body {
        overflow-x: hidden !important;
    }
    /* end of 10.1.8 */

    /* 10.1.9 Image fluid-size guard */
    /* Ensure images never exceed container */
    img {
        max-width: 100%;
        height: auto;
    }
    /* end of 10.1.9 */
}
/* end of 10.1 */

/* 10.2 Extra small viewport — 360px floor (≤400px) */
/* Extra small — 360px floor */
@media (max-width: 400px) {
    /* 10.2.1 REMOVED (T-S266-045, 02/11/26). S58 (14/04/26) put a 400px shrink here (0.75rem font, 0.25rem padding,
       min-width 0) for LOGOUT and DASHBOARD; it never reached LOGOUT or Login (functions.php 1.7 printed the full size
       after this sheet) and reached DASHBOARD alone from 01/07/26 (S124) until T-S266-022 trimmed it to min-width 0 on
       02/11/26 (Rob: "The logout and dashboard buttons are supposed to be the same size."). The remaining min-width 0
       repeated the 767px block, now the one in 1.1.1; nothing is declared for the header pills at 400px any more. */

    /* 10.2.2 Post-card heading typography at extra-small */
    .post-card h2, .post-card h3, .post-card h4 {
        font-size: 1.1rem !important;
    }
    /* end of 10.2.2 */
}
/* end of 10.2 */

/* 10.3 Removed T230 mobile hamburger dropdown flattening (historical note) */
/* REMOVED: T230 mobile hamburger menu dropdown flattening (sub-arrow hiding,
   sub-menu inline, sub-item centering, text-indent compensation).
   Venues/Organisers are now top-level menu items — no dropdown sub-menus exist.
   Previously verified dropdown centering revoked as unnecessary. */
/* end of 10 */


/* ============================================================================
   11. SECTION: Custom site header — Elementor header template 3784 replacement
   Fable 20/07/26, part of the Elementor removal (docs/FABLE_ELEMENTOR_REMOVAL_PLAN.md).
   Values transcribed from Elementor's generated CSS for template 3784 + the
   child overrides in §5.3/§5.4/§5.5/§6/§7 of this file (which target the
   Elementor DOM and stop matching once the custom header takes over).
   Renders only in preview (?uks_header_preview=1) or after cutover
   (option uks_custom_header_enabled). Email + social icons deliberately
   absent (Rob S81 / S90).
   ============================================================================ */

/* 11.0 Sticky wrapper — whole header pins to the top on scroll (Elementor sticky:top
   on containers 512ec1a5 + 5eb96116, verified: topbar stays at y=0, main bar at y=40).
   position:fixed + a JS-sized spacer, matching Elementor's own sticky mechanism —
   position:sticky is broken here by an overflow ancestor (#page-wrapper). */
.uks-header-sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99;
}
/* 11.0.1 iPhone status-bar strip (T-S266-022, 02/11/26). Rob, from Safari on his iPhone: "right at the top
   there's text above the header. So for some reason the page is scrolling behind the header." Safari lays
   the page out below the status bar (so this fixed wrapper's top: 0 is the bottom of the status bar) but
   paints the scrolled page under the status bar, so the strip above the LOGOUT and DASHBOARD pills was
   navy only at the top of the page (Safari samples the top edge) and showed the page once scrolled. The
   header now carries its own navy upward: this box sits above the wrapper, off every desktop and Android
   screen (negative y is never scrollable and adds no overflow), and on the iPhone fills the strip with the
   topbar colour (#031B83, as 11.1 below) at every scroll position. No viewport-fit change: the layout
   viewport, the spacer (1.4.1 in parts/uks-header.php) and every JS measure of .uks-header-sticky
   (getBoundingClientRect never includes a pseudo-element) stay exactly as they were. */
.uks-header-sticky::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -100px;
    height: 100px;
    background: #031B83;
    pointer-events: none;
}
/* end of 11.0.1 */
body.admin-bar .uks-header-sticky {
    top: 32px; /* clear the WP admin bar when it shows */
}
.uks-header-spacer {
    height: 134px; /* JS corrects to the live header height on load + resize */
}
/* Seeko zeroes the content top padding after its own / Elementor's header
   (theme-static: .uksp-location-header+.content-wrapper{padding-top:0});
   replicate for the custom header or every page's title sits 32px lower */
.uks-header-sticky ~ .content-wrapper {
    padding-top: 0;
}
/* end of 11.0 */

/* 11.1 Top bar — navy strip, auth pills right-aligned to the 95% edge (§5.5) */
.uks-topbar {
    /* S198 29/08/26 - Rob: the LOGOUT button's fill "isn't a uniform colour ... areas of
       slightly different colour". He is right, and it is not the button. `.uks-mainbar`
       below it carries `box-shadow: rgba(0,0,0,.39) 0 0 30px -8px` at z-index 99 - zero
       y-offset and a 30px blur, so it spreads UPWARD over the navy bar and everything on
       it. Sampled off a 8x capture, the button's fill ramps from a clean #FFFBE6 at its top
       to (238,234,215) at its bottom, darkest nearest the mainbar. Lifting the topbar one
       step above it puts the shadow underneath, which cleans the buttons AND the navy.
       The mainbar's shadow itself is left exactly as designed. */
    position: relative;
    z-index: 100;
    background: #031B83;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 5%;
    box-sizing: border-box;
}
.uks-topbar__auth {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    /* T-S266-024 (02/11/26): the two pills are 150px each below 768 (the 767px block of 1.1.1, formerly 1.2.4) with
       4px margins and this 10px gap, 326px in all, and the row took that width whatever the screen, so on a 320px
       screen it was centred 3px past each edge and cut (measured on 55 signed-in page loads at 320). Capped to its
       bar, so from 325px down the two pills shrink together (their min-width is already 0 in that block and they
       share one flex-basis, so each gives up the same amount: 147px each at 320). Above 326px the row is narrower
       than its bar and nothing changes. T-S266-045 (02/11/26) re-measured at 320 with and without this cap after the
       pills' rules were consolidated: without it the row is still 326px at x -3, so the cap stays. */
    max-width: 100%;
}
/* end of 11.1 */

/* 11.2 Main bar — white, gold rules top+bottom, soft shadow (template 3784) */
.uks-mainbar {
    background: #FFFFFF;
    border-top: 1px solid #CC9900;
    border-bottom: 1px solid #CC9900;
    box-shadow: 0 0 30px -8px rgba(0, 0, 0, 0.39);
    position: relative;
    z-index: 99;
}
.uks-mainbar__row {
    display: flex;
    align-items: center;
    justify-content: center; /* logo+nav group centred, per template container c49a54f */
    gap: 46px;               /* measured logo-to-nav gap at 1920 */
    min-height: 92px;
    /* S210 06/09/26: 6px rather than 10px top and bottom. Rob asked for an 80px logo, and the
       rows content box was 72px, so at 10px the bar itself would have grown to 102px. At 6px
       the content box is 80px and the bar stays exactly 92px, so nothing else in the header
       moves. The nav is 53px tall and centred, so it is unaffected. */
    padding: 6px 2rem;
    box-sizing: border-box;
}
.uks-mainbar__logo {
    display: inline-flex;
    line-height: 0;
}
.uks-mainbar__logo img {
    /* S210 06/09/26: sized by HEIGHT now, not width, so the bar height is what governs it and
       any future logo of a different shape still fits the same band. 80px on Rob's word.
       The 2px lift is OPTICAL, not geometric: measured, the logo is centred in the white band to
       within a hundredth of a pixel, by its edges and by its centre of mass. It still reads low
       because the top of the artwork is sparse (two small bubbles, clear space beside UK) while
       the bottom carries the solid SOCIALS and the pin. Rob asked for it up, 06/09/26, then back down 1: settled at 1px. */
    height: 80px;
    width: auto;
    /* S215 08/09/2026: the brand mark must never distort. Between 1024px and about 1199px the
       header row runs 149px short, the browser shrinks this flex item, max-width:100% caps the
       width and the fixed height holds, so the artwork was painting at a 2.070 ratio against its
       own 2.774: squashed to 74.6 percent of its correct width on every page at 1024, one of the
       six verified widths. object-fit keeps the proportions whatever the row does. The row being
       short in the first place is a layout decision that is Rob's, and is recorded separately. */
    object-fit: contain;
    object-position: left center;
    display: block;
    transform: translateY(-1px);
}
/* end of 11.2 */

/* 11.3 Desktop nav — Montserrat 1rem/500 uppercase, gold, gold-light hover/active */
.uks-mainbar__nav ul.uks-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
}
.uks-mainbar__nav ul.uks-nav li {
    margin: 0 18px 0 0; /* measured 18px item gaps, none before the first item */
}
.uks-mainbar__nav ul.uks-nav li:last-child {
    margin-right: 0;
}
.uks-mainbar__nav ul.uks-nav a {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9375rem; /* matches Elementor's widget base above 1440px (measured: "Events" 68px) */
    /* F-069 (S233, 21/09/2026). Rob: the header menu items are supposed to be bold. S231 moved
       them onto the cream-and-gold pills "just like the other menu buttons", but the weight stayed
       at the 500 of the old bare text links. BRAND_GUIDE 9.2, 9.3 and 9.4 put the whole button
       family on Montserrat 700, and .header-login-btn sitting directly above these in the same
       header is 600, so 500 was the odd one out. MEASURED before changing it, because the S220
       note below warns this row has no spare width: at 700 the nav grows by 6.3px at 1024 and
       7.6px at 1280, stays on one line at 1024, 1100, 1193, 1280 and 1440, the header stays 94px
       tall and no width gains a horizontal scrollbar. */
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    color: #CC9900;          /* e-global a0b62b6 */
    transition: color 0.3s;
    padding: 13px 0;
    display: inline-block;
    /* S220 14/09/2026, T-S218-051. A two-word item had nothing stopping it breaking, so ABOUT US and
       CONTACT US split onto two lines at every width from 1024 to 1180 and grew the header from 92
       to 95.59px (measured logged in and out, S218 hd1). A nav item is one thing and never wraps. */
    white-space: nowrap;
}
@media (max-width: 1440px) {
    /* Elementor's ≤1440 rule bumps items to the cc2ef79 typography (1rem) */
    .uks-mainbar__nav ul.uks-nav a { font-size: 1rem; }
}
/* S220 14/09/2026, T-S218-051. THE BAND WHERE THE ROW RUNS OUT OF WIDTH.
   Above 1193 the nav fits at 1rem with the 18px item gaps and the row's 46px gap and 2rem padding.
   Below 1024 the burger takes over. Between the two the budget is short, and with nowrap on the
   items an overflow would push the row instead of breaking the words, so the band gets the type at
   its own size and the gaps tightened. Nothing outside 1024 to 1193 is touched. */
/* F-040 (S234, 21/09/2026). THE BAND NOW RUNS TO 1330, AND THE LOGO IS SIZED BY A RULE.
   Rob: the logo renders at about half size at 1024 and at 1194. MEASURED on the live header
   before anything was changed, at fifteen widths: the logo box is always 80px tall and 222.22px
   wide at its natural ratio, but it is a shrinkable flex item, so when the row is short the
   browser squeezes the BOX and object-fit letterboxes the artwork inside it. The painted ink
   therefore went 36.76 at 1024, 64.12 at 1100, 68.61 at 1150, 79.41 at 1180, then 30.90 at
   1194, 61.86 at 1280 and 80 from 1331. Not graded, and not monotonic: 1194 was less than half
   of 1193.
   THE CLIFF AT 1194 IS THIS BAND ENDING. Above it the nav returns to 1rem and the row to its
   46px gap and 2rem padding, which together cost 148.74px while the viewport gains one pixel,
   so the logo lost 134.74px in a single step. The 16px nav needs 990.16px, and with the row's
   own 72 and 46 that leaves room for the full 222.22px logo only from 1330.38 upward, so the
   band ends at 1330 and not before. Measured at 1331: nav back at 18px, logo still 80, one
   line, no horizontal overflow.
   AND THE SIZE IS NOW DECLARED RATHER THAN LEFT TO THE SQUEEZE. clamp(36px, 25vw - 220px, 80px)
   sits just under the width the row can actually spare at every point in the band (the tightest
   margin is 1.11px at 1152, where the fluid root font-size steps 17 to 18px and the nav grows
   35.53px), so flex-shrink never engages and the height the rule asks for is the height that
   paints. Measured after, 1024 to 1920: 36, 45, 55, 60, 67, 68, 75, 78.25, 78.5, 80, 80, 80, 80,
   80, 80 - graded and monotonic, header still 94px, nav still one line, no overflow at any
   width. Below 1024 the burger takes over, the row has room and the logo keeps its full 80px. */
@media (min-width: 1024px) and (max-width: 1330px) {
    .uks-mainbar__nav ul.uks-nav a { font-size: 0.875rem; }
    .uks-mainbar__nav ul.uks-nav li { margin-right: 12px; }
    .uks-mainbar__row { gap: 24px; padding-left: 1rem; padding-right: 1rem; }
    .uks-mainbar__logo img { height: clamp(36px, calc(25vw - 220px), 80px); }
}
/* S231 18/09/26, Rob: "it's time to change the header items so they also lie on the light cream
   buttons with drop shadow that are depressed with no drop shadow and a darker cream when selected.
   Just like the other menu buttons." The rest state is the sidenav's own cream and gold edge with
   its raised shadow; pressing drops the shadow; the current page keeps the darker cream and sits
   flat. The item gaps come down to pay for the new padding, because this row already had no spare
   width between 1024 and 1193 (see the band rule above). */
.uks-mainbar__nav ul.uks-nav a {
    background: #FFFBE6;
    color: #031B83;
    border: 1px solid #CC9900;
    border-radius: 10px;
    padding: 7px 12px;
    box-shadow: var(--shadow-gold-hover);
    transition: background .15s ease, box-shadow .15s ease, transform .15s ease;
}
.uks-mainbar__nav ul.uks-nav li { margin-right: 8px; }
.uks-mainbar__nav ul.uks-nav a:hover {
    background: #FFF5CC;
    color: #031B83;
}
.uks-mainbar__nav ul.uks-nav a:active {
    background: #FFF5CC;
    box-shadow: none;
    transform: translateY(1px);
    transition: none;
}
.uks-mainbar__nav ul.uks-nav li.current-menu-item > a,
.uks-mainbar__nav ul.uks-nav li.current_page_item > a {
    /* S234 21/09/26: was #FFF0C2, a third cream outside the closed set. D-593 asks for a darker
       cream when selected and #FFF5CC IS that token, the same one :hover and :active already take. */
    background: #FFF5CC;
    color: #031B83;
    box-shadow: none;
}
/* end of 11.3 */

/* 11.4 Burger — hidden on desktop; gold 25px icon, gold-light hover (template values) */
.uks-mainbar__burger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    color: #CC9900;
    padding: 8px;
    margin: 0 15px 0 auto; /* §6.5 right-aligned on mobile */
    line-height: 0;
}
/* S222 14/09/2026, item 137. Rob: the hamburger sat in a grey box, and it had to be correct on
   every page. MEASURED on the live site: seeko-dynamic.css styles every bare <button>, and its
   hover rule (.btn:hover, ..., button:hover, ...) sets background-color #f0f0f0 at specificity
   0,1,1, which beats the 0,1,0 that .uks-mainbar__burger declares for itself. A tap on a touch
   device leaves :hover stuck, so the burger kept a 41x41 grey rounded box: measured
   rgb(240,240,240) after a real tap on the dashboard, the home page, /events/ and a single event
   page, at 360, 600 and 768, logged out and logged in as cold_prem19 (24 of 24 combinations).
   The rest state was already transparent, so only the states below were ever wrong. The gold
   hover colour is unchanged, and it stays the visible focus signal. */
.uks-mainbar__burger:hover,
.uks-mainbar__burger:focus,
.uks-mainbar__burger:focus-visible,
.uks-mainbar__burger:active {
    color: #FFD700;
    background: none;
    box-shadow: none;
    border-color: transparent;
}
.uks-mainbar__burger svg {
    width: 25px;
    height: 25px;
    fill: currentColor;
}
.uks-mainbar__burger .uks-burger-close { display: none; }
.uks-mainbar__burger[aria-expanded="true"] .uks-burger-open { display: none; }
.uks-mainbar__burger[aria-expanded="true"] .uks-burger-close { display: inline; }
/* end of 11.4 */

/* 11.5 Mobile dropdown — navy panel inset from both edges, centred gold items */
.uks-mobile-nav { display: none; }
@media (max-width: 1023px) {
    .uks-mainbar__nav { display: none; }
    .uks-mainbar__burger { display: inline-flex; }
    .uks-mainbar__row {
        justify-content: flex-start;
        gap: 0;
        min-height: 88px;
        padding: 10px 0 10px 24px;
    }
    .uks-topbar { /* §6.3 centred pills on small widths */
        justify-content: center;
        padding: 10px 0;
    }
    /* S222 14/09/2026, item 138. Colours and states are the canonical dropdown, copied from
       page-polish.css SS48 (.dropdown__menu / .dropdown__option): white panel, #CC9900 border,
       navy #031B83 option text, cream #FFFBE6 with a gold border on hover and on the current
       page. SS48 owns colours only, so the sizes below belong to this instance. MEASURED before:
       navy panel 252 x 716.8 at 360, bottom edge 869.8 in an 800 tall viewport, so 69.8px of it
       ran off the screen, 8 items of 89.6px each. After: 252 x 428, bottom 587, 213px clear of
       the fold, items 48px. Same at 600 and 768, logged out and logged in. */
    .uks-mobile-nav[data-open="1"] {
        display: block;
        position: absolute;
        top: calc(100% + 6px);
        left: 15%;  /* matches the Elementor dropdown inset (~55px at 360) */
        right: 15%;
        z-index: 98;
        background: #FFFFFF;
        border: 2px solid #CC9900;
        border-radius: 12px;
        padding: 6px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    }
    .uks-mobile-nav ul.uks-nav-mobile {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .uks-mobile-nav a {
        display: block;
        text-align: center;
        font-family: 'Montserrat', sans-serif;
        font-size: 0.9375rem;
        font-weight: 600;
        letter-spacing: 0.02em;
        text-transform: uppercase;
        text-decoration: none;
        color: #031B83;
        background: #FFFFFF;
        border: 1px solid rgba(3, 27, 131, 0.2);
        border-radius: 8px;
        padding: 11px 10px;
        margin: 0 0 4px;
        transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    }
    .uks-mobile-nav li:last-child a { margin-bottom: 0; }
    /* Cream + gold on hover and on the page you are on, per canonical SS48
       .dropdown__option:hover / .dropdown__option--selected. */
    /* S227 15/09/26, Rob: "as soon as you click another page it highlights as light cream
       which is correct but the page you are still on is still also light cream until the new
       page loads and that's wrong ... only one page should ever be highlighted at any one
       moment." Tapping an item gives it the cream through :hover and :focus while the page
       you are on still holds it through .current-menu-item, so two items read as current for
       as long as the next page takes to load. MEASURED at 360 on /events/: two cream items
       after the tap, one after. The current-page half is NARROWED rather than a second rule
       being stacked under it: it applies only while nothing in the menu is hovered or
       focused, so the instant the finger lands the old highlight goes. */
    .uks-mobile-nav a:hover,
    .uks-mobile-nav a:focus,
    .uks-mobile-nav:not(:has(a:hover)):not(:has(a:focus)) li.current-menu-item > a,
    .uks-mobile-nav:not(:has(a:hover)):not(:has(a:focus)) li.current_page_item > a {
        background: #FFFBE6;
        border-color: #CC9900;
        color: #031B83;
    }
}
/* end of 11.5 */
/* end of 11 */