/* =======================================================
   alm_temp_styles.css - Temporary Holding Page for Aliniom
   Trimmed from the main site's alm_styles.css: same colour
   system, same light/dark theme mechanism, same theme-switch
   control, so this page looks and behaves like a stripped-down
   version of the real site rather than a one-off design.
   ======================================================= */

:root {
    --alm-primary: #112b60;        /* Deep Blue - Primary brand colour */
    --alm-primary-dark: #d4af37;   /* Gold accent */
    --alm-secondary-light: #71706e;
    --alm-secondary-dark: #b5b5b5;

    --alm-white: #ffffff;
    --alm-gray-100: #f8f9fa;
    --alm-gray-200: #e9ecef;
    --alm-gray-300: #dee2e6;

    --alm-bg-dark: #112b60;
    --alm-bg-dark-tertiary: #71706e;

    --alm-text-light: var(--alm-primary);
    --alm-text-light-secondary: var(--alm-secondary-light);
    --alm-text-dark: #5584d0;
    --alm-text-dark-secondary: var(--alm-secondary-dark);

    --alm-border-light: var(--alm-gray-300);
    --alm-border-dark: var(--alm-primary-dark);

    /* Theme switch colours */
    --alm-switch-bg-light: #e0e0e0;
    --alm-switch-bg-dark: #2d2d2d;
    --alm-switch-slider-light: #b5b5b5;
    --alm-switch-slider-dark: #3d3d3d;
    --alm-switch-icon-light: #ffa726;
    --alm-switch-icon-dark: #ffd54f;

    --alm-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);

    --alm-font-primary: 'Aptos', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --alm-font-xs: 0.75rem;
    --alm-font-sm: 0.875rem;

    --alm-spacing-sm: 0.5rem;
    --alm-spacing-md: 1rem;
    --alm-spacing-lg: 1.5rem;

    --alm-z-header: 1000;
    --alm-z-sticky: 1020;
}

/* Dark mode: same body.alm-dark toggle mechanism as the main site */
body.alm-dark {
    --alm-bg-primary: var(--alm-bg-dark);
    --alm-bg-tertiary: var(--alm-bg-dark-tertiary);
    --alm-text-primary: var(--alm-text-dark);
    --alm-text-secondary: var(--alm-text-dark-secondary);
    --alm-border: var(--alm-border-dark);
}

body:not(.alm-dark) {
    --alm-bg-primary: var(--alm-white);
    --alm-bg-tertiary: var(--alm-gray-100);
    --alm-text-primary: var(--alm-text-light);
    --alm-text-secondary: var(--alm-text-light-secondary);
    --alm-border: var(--alm-border-light);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
}

body {
    font-family: var(--alm-font-primary);
    color: var(--alm-text-primary);
    background-color: var(--alm-bg-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
    min-height: 100vh;
    /* 100vh on mobile browsers is the height with the address bar hidden,
       which is taller than what's actually visible on load — that gap is
       what was pushing the footer just below the fold on small devices.
       100dvh tracks the real visible viewport instead; browsers that don't
       support it just keep the 100vh above. */
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

/* =======================================================
   Menu band — same navy band as the main site header, no
   logo, no nav links, just the theme switch on the right.
   ======================================================= */
.alm-header-band {
    background-color: var(--alm-primary);
    box-shadow: var(--alm-shadow-md);
    position: sticky;
    top: 0;
    z-index: var(--alm-z-sticky);
}

.alm-header-band-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--alm-spacing-sm) var(--alm-spacing-lg);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-height: 40px;
}

/* =======================================================
   Theme Switch — identical markup/behaviour to the main
   site's toggle (see js/alm_temp_theme.js).
   ======================================================= */
.alm-theme-switch {
    width: 60px;
    height: 30px;
    background-color: var(--alm-switch-bg-light);
    border-radius: 30px;
    cursor: pointer;
    position: relative;
    box-shadow: var(--alm-shadow-md);
    transition: background-color 0.3s ease;
}

.alm-dark .alm-theme-switch {
    background-color: var(--alm-switch-bg-dark);
}

.alm-theme-switch-slider {
    width: 26px;
    height: 26px;
    background-color: var(--alm-switch-slider-light);
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
    transition: transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--alm-shadow-md);
}

.alm-dark .alm-theme-switch-slider {
    transform: translateX(30px);
    background-color: var(--alm-switch-slider-dark);
}

.alm-theme-switch-icon {
    position: absolute;
    font-size: 16px;
    line-height: 1;
    transition: opacity 0.3s ease;
}

.alm-theme-switch-light {
    opacity: 1;
    color: var(--alm-switch-icon-light);
}

.alm-theme-switch-dark {
    opacity: 0;
    color: var(--alm-switch-icon-dark);
}

.alm-dark .alm-theme-switch-light {
    opacity: 0;
}

.alm-dark .alm-theme-switch-dark {
    opacity: 1;
}

/* =======================================================
   Main content — just the logo, filling the space between
   the header band and the footer.
   ======================================================= */
.alm-temp-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--alm-spacing-lg);
}

.alm-temp-logo {
    width: 100%;
    max-width: 420px;
    height: auto;
    transition: opacity 0.2s ease;
}

@media (max-width: 480px) {
    .alm-temp-logo {
        max-width: 220px;
    }

    .alm-temp-main {
        padding: var(--alm-spacing-sm) var(--alm-spacing-md);
    }

    .alm-temp-footer {
        padding: var(--alm-spacing-sm) var(--alm-spacing-md);
    }
}

/* =======================================================
   Footer — registered office only.
   ======================================================= */
.alm-temp-footer {
    background-color: var(--alm-bg-tertiary);
    color: var(--alm-text-secondary);
    padding: var(--alm-spacing-md) var(--alm-spacing-lg);
    border-top: 1px solid var(--alm-border);
    text-align: center;
}

.alm-temp-footer p {
    font-size: var(--alm-font-xs);
    max-width: 700px;
    margin: 0 auto;
}