/* Defining the AAF colour pallete */
:root {
    --gold-cream-100: #f4f0e7;
    --gold-warm-100: #F3E8C7;
    --gold-warm-200: #D6B974;
    --gold-warm-400: #B28D35;
    --gold-warm-600: #8B6A25;
    --gold-warm-800: #5C4715;
    --gold-soft-100: #F8F2E1;
    --gold-soft-200: #E8DDB8;
    --gold-soft-400: #D1BB8B;
    --gold-soft-600: #B49B68;
    --gold-soft-800: #8E7448;
    --green-ever-100: #D4E6E4;
    --green-ever-200: #5A8A85;
    --green-ever-400: #12433E;
    --green-ever-600: #0E322F;
    --green-ever-800: #0A231F;
    --green-ever-opaque: rgba(18, 67, 62, 0.8);
    --green-sage-100: #E3E8E3;
    --green-sage-200: #AEB9AF;
    --green-sage-400: #475749;
    --green-sage-600: #334034;
    --green-sage-800: #1F281F;
    --grey-seamist-100: #EFF3F2;
    --grey-seamist-200: #B4C4C2;
    --grey-seamist-400: #859D9A;
    --grey-seamist-600: #60726F;
    --grey-seamist-800: #3D4A48;
    --beige-sandstone-100: #F9F7ED;
    --beige-sandstone-200: #ECE5C7;
    --beige-sandstone-400: #E0D5A8;
    --beige-sandstone-600: #BFB58B;
    --beige-sandstone-800: #8E835F;
    --grey-mist-100: #FFFFFF;
    --grey-mist-200: #F5F9F9;
    --grey-mist-400: #E9F0EF;
    --grey-mist-600: #C4CDCC;
    --grey-mist-800: #9EA9A8;
    --blue-royal-100: #D5D7DE;
    --blue-royal-200: #8D92A9;
    --blue-royal-400: #242A41;
    --blue-royal-600: #1A1E2F;
    --blue-royal-800: #0F121C;
    --charcoal-100: #E8ECEB; /* very light, subtle background */
    --charcoal-200: #C8D0CE; /* soft muted accent */
    --charcoal-400: #7E8B88; /* medium, for UI elements, borders */
    --charcoal-600: #49514E; /* dark, for buttons, icons, headings */
    --charcoal-800: #2A2F2D;
    --neutral-text-100: #FFFFFF;
    --neutral-text-200: #FDFDFD;
    --neutral-text-400: #F6F6F6;
    --neutral-text-600: #D8D8D8;
    --neutral-text-800: #B4B4B4;
    --font-2xs: 0.5rem;
    --font-xs: 0.6rem;
    --font-sm: 0.7rem;
    --font-md-sm: 0.8rem;
    --font-base: 0.9rem;
    --font-md: 1.0rem;
    --font-lg: 1.1rem;
    --font-xl: 1.2rem;
    --font-2xl: 1.3rem;
    --font-3xl: 1.4rem;
    --font-4xl: 1.5rem;
    --font-5xl: 1.6rem;
    --font-6xl: 1.7rem;
    --font-7xl: 1.8rem;
    --font-8xl: 2.0rem;
    --font-9xl: 2.2rem;
    --font-10xl: 2.4rem;
    --font-11xl: 2.6rem;
    --font-12xl: 2.8rem;
    --font-13xl: 3.0rem;
    --font-14xl: 3.2rem;
    --font-15xl: 3.4rem;
    --font-16xl: 3.6rem;
    --font-17xl: 3.8rem;
    --font-18xl: 4.0rem;
    --font-19xl: 4.2rem;
    --font-20xl: 6rem;
    --font-heading: 'Merriweather', serif;
    --font-body: 'IBM Plex Sans', sans-serif;
    --color-primary: var(--Gold-500);
    --color-primary-hover: var(--Gold-300);
    --color-primary-text: var(--Neutral-50);
    --color-secondary: transparent;
    --color-secondary-hover: var(--Green-700);
    --color-secondary-text: var(--Green-500);
    --color-secondary-border: var(--Green-700);
    --color-tertiary: var(--Neutral-100);
    --color-tertiary-hover: var(--Green-500);
    --color-tertiary-text: var(--Blue-900);
    --color-danger: var(--Red-500);
    --color-danger-hover: var(--Red-600);
    --color-danger-text: var(--Neutral-50);
    --btn-font: 'Outfit', sans-serif;
}

@media (max-width: 800px) {
    :root {
        --font-2xs: 0.4rem;
        --font-xs: 0.5rem;
        --font-sm: 0.6rem;
        --font-md-sm: 0.7rem;
        --font-base: 0.8rem;
        --font-md: 0.9rem;
        --font-lg: 1.0rem;
        --font-xl: 1.1rem;
        --font-2xl: 1.2rem;
        --font-3xl: 1.3rem;
        --font-4xl: 1.4rem;
        --font-5xl: 1.5rem;
        --font-6xl: 1.6rem;
        --font-7xl: 1.7rem;
        --font-8xl: 1.9rem;
        --font-9xl: 2.1rem;
        --font-10xl: 2.3rem;
        --font-11xl: 2.5rem;
        --font-12xl: 2.7rem;
        --font-13xl: 2.9rem;
        --font-14xl: 3.1rem;
        --font-15xl: 3.3rem;
        --font-16xl: 3.5rem;
        --font-17xl: 3.7rem;
        --font-18xl: 3.9rem;
        --font-19xl: 4.1rem;
        --font-20xl: 5.9rem;
    }
}

html, body {
    font-family: 'IBM Plex Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Spreads multi-line headings evenly instead of leaving a lone word on the last line
   (e.g. "Acorn Agri & / Food"), and avoids single-word orphans at the end of paragraphs */
h1, h2, h3,
[class$="-heading"], [class$="-header"], [class$="-header-secondary"] {
    text-wrap: balance;
}

p {
    text-wrap: pretty;
}

/* One consistent, on-brand keyboard focus ring across the site */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--gold-warm-400);
    outline-offset: 3px;
}

html {
    scroll-behavior: smooth;
}

/* Page transitions (started by js/page-transitions.js) - the old page fades out and the new one fades and rises in.
   The nav bar has its own transition name (MainLayout.razor.css), so it stays put while the page changes beneath it. */
::view-transition-old(root) {
    animation: page-fade-out 0.2s ease-in both;
}

::view-transition-new(root) {
    animation: page-fade-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.05s both;
}

@keyframes page-fade-out {
    to {
        opacity: 0;
    }
}

@keyframes page-fade-in {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
}

/* Blazor's FocusOnNavigate (Routes.razor) moves keyboard focus to the page's h1 after navigation for
   screen-reader/keyboard accessibility - keep that focus, just suppress the resulting visual ring */
h1:focus {
    outline: none;
}

.e-btn-primary, .e-btn-primary:focus {
    height: auto;
    background-color: var(--gold-soft-400);
    border: 1px solid var(--gold-soft-600);
    color: var(--blue-royal-400);
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: var(--font-md);
    letter-spacing: 1px;
    transition: background-color 0.1s;
    margin: 0px;
    text-decoration: none;
}

    .e-btn-primary:hover {
        background-color: var(--gold-soft-200);
        cursor: pointer;
    }

    .e-btn-primary:active {
        background-color: var(--gold-soft-200);
        transform: scale(0.99);
        box-shadow: inset 0 1px 2px var(--blue-royal-400);
    }

.e-btn-secondary, .e-btn-secondary:focus {
    height: 30px;
    background-color: var(--grey-seamist-400);
    border: 1px solid var(--grey-seamist-800);
    color: var(--blue-royal-400);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 18px;
    transition: background-color 0.1s;
    margin: 10px;
    text-decoration: none;
}

    .e-btn-secondary:hover {
        background-color: var(--grey-seamist-200);
        cursor: pointer;
    }

    .e-btn-secondary:active {
        background-color: var(--grey-seamist-200);
        transform: scale(0.99);
        box-shadow: inset 0 1px 2px var(--blue-royal-400);
    }

/* Scrollbar styling*/
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-thumb {
    background: var(--beige-sandstone-600);
    border-radius: 10px;
    border: 2px solid white;
}

    ::-webkit-scrollbar-thumb:hover {
        background-color: var(--beige-sandstone-800);
        box-shadow: 0 0 5px #17665D;
    }

::-webkit-scrollbar-track {
    background-color: var(--grey-mist-600);
}

::selection {
    background: var(--beige-sandstone-600);
    color: white;
}