/* molinaro.ch — global styles */

/* ── Design tokens ───────────────────────────────────────────────────────── */
:root {
    /* Brand colours */
    --brand:          #d0e0e3;          /* light blue-grey — main brand tone  */
    --brand-dark:     #8ab4bc;          /* medium accent                      */
    --brand-deep:     #2c4a52;          /* dark teal — headings / active links */

    /* Neutral palette */
    --bg:             #f6f9fa;          /* page background                    */
    --surface:        #ffffff;          /* card / content surface             */
    --text:           #1e2c30;          /* body text                          */
    --muted:          #6b8a91;          /* secondary / caption text           */
    --border:         #cdd9db;          /* subtle dividers                    */

    /* Spacing scale */
    --space-xs:       0.25rem;
    --space-sm:       0.5rem;
    --space-md:       1rem;
    --space-lg:       1.5rem;
    --space-xl:       2.5rem;
    --space-2xl:      4rem;

    /* Layout */
    --content-width:  1100px;
    --header-height:  64px;

    /* Shape & shadow */
    --radius:         6px;
    --radius-lg:      12px;
    --shadow:         0 1px 4px rgba(44, 74, 82, 0.10);
    --shadow-md:      0 4px 16px rgba(44, 74, 82, 0.13);
}

/* ── Base resets ─────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text);
    background-color: var(--bg);
    -webkit-font-smoothing: antialiased;
}

img,
svg {
    display: block;
    max-width: 100%;
}

/* ── Headings ────────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: var(--space-md);
    font-weight: 600;
    line-height: 1.25;
    color: var(--brand-deep);
    letter-spacing: -0.02em;
}

h1 { font-size: 2.25rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.375rem; }
h4 { font-size: 1.125rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.875rem; }

p {
    margin-top: 0;
    margin-bottom: var(--space-md);
}

/* ── Links ───────────────────────────────────────────────────────────────── */
a {
    color: var(--brand-deep);
    text-decoration: none;
    transition: color 0.15s ease;
}

a:hover {
    color: var(--brand-dark);
    text-decoration: underline;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 0.55rem 1.25rem;
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--surface);
    background-color: var(--brand-deep);
    border: 1px solid var(--brand-deep);
    border-radius: var(--radius);
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.btn:hover {
    background-color: #3a606b;
    border-color: #3a606b;
    color: var(--surface);
    text-decoration: none;
    box-shadow: var(--shadow);
}

.btn:focus-visible {
    outline: 2px solid var(--brand-dark);
    outline-offset: 2px;
}

.btn-secondary {
    color: var(--brand-deep);
    background-color: var(--brand);
    border-color: var(--brand-dark);
}

.btn-secondary:hover {
    background-color: var(--brand-dark);
    border-color: var(--brand-dark);
    color: var(--surface);
}

/* ── Utility: lead paragraph ─────────────────────────────────────────────── */
.lead {
    font-size: 1.15rem;
    color: var(--muted);
    line-height: 1.7;
    margin-bottom: var(--space-lg);
}

/* ── Utility: gallery grid ───────────────────────────────────────────────── */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-lg);
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ── Utility: section spacing ────────────────────────────────────────────── */
.section {
    padding: var(--space-2xl) 0;
}

/* ── Utility: visually hidden (accessibility) ────────────────────────────── */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Validation / form helpers ───────────────────────────────────────────── */
.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
.invalid.modified { outline: 1px solid #dc3545; }
.validation-message { color: #dc3545; font-size: 0.85rem; }

/* ── Blazor error UI ─────────────────────────────────────────────────────── */
#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--space-md) var(--space-lg);
    background: #fff3cd;
    border-top: 1px solid #ffc107;
    color: #664d03;
    font-size: 0.875rem;
    z-index: 1000;
}

#blazor-error-ui .dismiss { float: right; cursor: pointer; font-weight: 600; }