/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */


/* from https://piccalil.li */
:root {
    --color-dark: #292a2d;
    --color-dark-glare: #55585e;
    --color-mid: #ABA9A2;
    --color-light: #eeeeea;
    --color-light-shade: #e4e4de;
    --color-light-glare: #ffffff;
    --color-primary: #c00000;
    --space-xs: clamp(0.4375rem, 0.41rem + 0.11vw, 0.5rem);
    --space-s: clamp(0.875rem, 0.83rem + 0.22vw, 1rem);
    --space-m: clamp(1.3125rem, 1.24rem + 0.33vw, 1.5rem);
    --space-l: clamp(2.1875rem, 2.07rem + 0.56vw, 2.5rem);
    --space-xl: clamp(3.0625rem, 2.90rem + 0.78vw, 3.5rem);
    --space-2xl: clamp(3.5rem, 3.32rem + 0.89vw, 4rem);
    --space-3xl: clamp(4.375rem, 4.15rem + 1.11vw, 5rem);
    --space-4xl: clamp(6.5625rem, 6.22rem + 1.67vw, 7.5rem);
    --space-5xl: clamp(8.75rem, 8.29rem + 2.22vw, 10rem);
    --size-step-000: clamp(0.740625rem, 0.73rem + 0.07vw, 0.78125rem);
    --size-step-00: clamp(0.833125rem, 0.79rem + 0.19vw, 0.9375rem);
    --size-step-0: clamp(0.9375rem, 0.87rem + 0.33vw, 1.125rem);
    --size-step-1: clamp(1.055rem, 0.95rem + 0.52vw, 1.35rem);
    --size-step-2: clamp(1.18625rem, 1.03rem + 0.77vw, 1.62rem);
    --size-step-3: clamp(1.335rem, 1.11rem + 1.08vw, 1.94375rem);
    --size-step-4: clamp(1.501875rem, 1.20rem + 1.48vw, 2.3325rem);
    --size-step-5: clamp(1.689375rem, 1.28rem + 1.97vw, 2.799375rem);
    --size-step-6: clamp(1.900625rem, 1.37rem + 2.59vw, 3.359375rem);
    --size-step-7: clamp(2.138125rem, 1.44rem + 3.37vw, 4.03125rem);
    --size-step-8: clamp(2.405625rem, 1.51rem + 4.32vw, 4.8375rem);
    --size-step-9: clamp(2.70625rem, 1.57rem + 5.51vw, 5.805rem);
    --size-step-10: clamp(3.044375rem, 1.61rem + 6.97vw, 6.965625rem);
    --leading-flat: 0.9;
    --leading-fine: 1.2;
    --leading-standard: 1.4;
    --leading-loose: 1.7;
    --font-base: Inter, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
    --font-regular: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-black: 900;
    --gutter: var(--space-l);
    --transition-base: 250ms ease;
    --transition-movement: 200ms linear;
    --transition-fade: 300ms ease;
    --transition-bounce: 500ms cubic-bezier(0.5, 0.05, 0.2, 1.5);
    --stroke: 1px dashed var(--color-mid);
    --stroke-solid: 1px solid var(--color-mid);
    --stroke-solid-thick: 2px solid var(--color-mid);
    --radius-s: 0.2rem;
    --radius-m: 0.75rem;
    --radius-l: 2.5rem;
    --radius-s-m: clamp(var(--radius), 2vw, var(--radius-m));
    --uppercase-kerning: 0.04ch;
    /* For test re-use */
    --error-outline: 0.25rem solid red;
}

/* Inline logo styling */
.inline-logo {
    display: inline-block;
    vertical-align: text-bottom;
    height: 1.5em;
    width: auto;
    margin: -0.1em 0;
}

/* Highlight text styling for emphasis */
.highlight-text {
    font-size: 1.1em;
    font-weight: var(--font-bold);
    vertical-align: baseline;
}

/* Hero title styling */
.hero-title {
    font-size: var(--size-step-5);
    font-weight: var(--font-semibold);
    line-height: var(--leading-tight);
}

/* Hero tagline styling */
.hero-tagline {
    font-size: var(--size-step-1);
    font-weight: var(--font-medium);
    line-height: var(--leading-standard);
    color: var(--color-dark-glare);
}

/* Navbar logo styling */
.logo {
    height: 3rem;
    width: auto;
    max-width: 3rem;
}

/* Navbar brand name styling */
.brand-name {
    font-size: var(--size-step-3);
    font-weight: var(--font-semibold);
    text-decoration: none;
    color: var(--color-dark);
}

.brand-name:hover {
    color: var(--color-primary);
}

/* Navbar link styling */
.nav-link {
    color: var(--color-dark-glare);
    text-decoration: none;
    font-size: var(--size-step-00);
    font-weight: var(--font-medium);
    margin-left: var(--space-m);
    transition: color var(--transition-base);
}

.nav-link:hover {
    color: var(--color-dark);
}

/* Reduce spacing between logo and brand name in navbar */
.brand-cluster {
    --gutter: 0 !important;
    align-items: flex-end;
}

/* Navbar layout */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

/* Small gap between buttons in navbar */
.button-group {
    --gutter: 0.5rem !important;
}

/* Restore button border radius */
.button-group .button {
    border-radius: var(--button-radius);
}