/* ==========================================================================
   Public theme refresh
   Loaded after elmarzougui.css. Overrides design tokens, typography and the
   shared surfaces (header, cards, footer) so every public page inherits one
   consistent system. Layout utilities from the base bundle stay untouched.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
    /* Surfaces */
    --canvas: #f4f5f7;
    --surface: #ffffff;
    --surface-2: #fafbfc;
    --surface-3: #f1f2f5;

    /* Text */
    --ink-1: #12141a;
    --ink-2: #565d6b;
    --ink-3: #838b99;

    /* Lines */
    --line: rgba(16, 19, 26, 0.07);
    --line-strong: rgba(16, 19, 26, 0.14);

    /* Accent (used sparingly: links, focus, status) */
    --accent: #4b57d8;
    --accent-hover: #3a46c4;
    --accent-soft: rgba(75, 87, 216, 0.1);

    /* Depth */
    --shadow-xs: 0 1px 2px rgba(16, 19, 26, 0.04);
    --shadow-sm: 0 1px 2px rgba(16, 19, 26, 0.04), 0 8px 24px -14px rgba(16, 19, 26, 0.16);
    --shadow-md: 0 2px 4px rgba(16, 19, 26, 0.04), 0 24px 48px -28px rgba(16, 19, 26, 0.22);

    /* Radii */
    --radius-card: 20px;
    --radius-control: 12px;

    /* Type */
    --font-display: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
    --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Header */
    --nav-bg: rgba(255, 255, 255, 0.82);

    /* Map legacy tokens onto the new palette so the compiled utilities
       (text-powerBlack, bg-milkWhite, border-flasWhite, ...) follow along. */
    --powerBlack: var(--ink-1);
    --darkGray: #23262d;
    --smokeGray: var(--ink-2);
    --regentGray: var(--ink-2);
    --pastelGrey: #dfe3ea;
    --slateGray: #464c58;
    --nobelGray: var(--ink-3);
    --milkWhite: var(--surface);
    --seashell: var(--canvas);
    --metalBlack: #15171c;
    --oilBlack: #0e1013;
    --flasWhite: var(--line);
    --flasBlack: #24272e;
}

.dark {
    --canvas: #0a0b0d;
    --surface: #101216;
    --surface-2: #14171c;
    --surface-3: #191d23;

    --ink-1: #edeff3;
    --ink-2: #a2a9b6;
    --ink-3: #767e8c;

    --line: rgba(255, 255, 255, 0.07);
    --line-strong: rgba(255, 255, 255, 0.14);

    --accent: #8c99ff;
    --accent-hover: #a5b0ff;
    --accent-soft: rgba(140, 153, 255, 0.14);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 24px -16px rgba(0, 0, 0, 0.7);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.5), 0 28px 56px -32px rgba(0, 0, 0, 0.8);

    --nav-bg: rgba(16, 18, 22, 0.78);

    /* Legacy tokens flip in dark mode, exactly like the base theme. */
    --powerBlack: var(--ink-1);
    /* darkGray doubles as a filled-button surface, so it stays dark. */
    --darkGray: #1f232a;
    --smokeGray: var(--ink-2);
    --regentGray: var(--ink-2);
    --pastelGrey: #cbd1db;
    --slateGray: #c8cdd6;
    --nobelGray: var(--ink-3);
    --milkWhite: var(--surface);
    --seashell: var(--canvas);
    --metalBlack: #14171c;
    --oilBlack: #0a0b0d;
    --flasWhite: var(--line);
    --flasBlack: #24272e;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

html {
    background-color: var(--canvas);
}

body.site-body {
    background-color: var(--canvas);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.7;
    color: var(--ink-2);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.site-body p {
    font-size: 0.975rem;
    line-height: 1.7 !important;
    color: var(--ink-2);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.022em;
    color: var(--ink-1);
}

h1 {
    line-height: 1.15;
}

h2,
h3 {
    line-height: 1.25;
}

::selection {
    background: var(--accent-soft);
    color: var(--ink-1);
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 6px;
}

/* --------------------------------------------------------------------------
   3. Header
   -------------------------------------------------------------------------- */

.nav {
    background: var(--nav-bg);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
}

.dark .nav {
    background: var(--nav-bg);
    border-color: var(--line);
}

.site-brand {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--ink-1);
    white-space: nowrap;
}

.dark .site-brand {
    color: var(--ink-1);
}

.site-brand span {
    color: var(--accent);
}

/* Sticky state keeps the same surface, just a little tighter. */
header.is-sticky .nav {
    box-shadow: var(--shadow-md);
}

.main-menu a {
    color: var(--ink-2);
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 0.5rem 1.25rem;
    font-size: 0.9375rem;
    font-weight: 500;
    transition: color 0.16s ease, background-color 0.16s ease, border-color 0.16s ease;
}

.dark .main-menu a {
    color: var(--ink-2);
}

.main-menu a:hover {
    color: var(--ink-1);
    background-color: var(--surface-3);
}

.main-menu a.active {
    color: var(--ink-1);
    border-color: var(--line-strong);
    background-color: var(--surface);
}

.dark .main-menu a:hover {
    background-color: rgba(255, 255, 255, 0.06);
}

.dark .main-menu a.active {
    border-color: var(--line-strong);
    background-color: rgba(255, 255, 255, 0.04);
}

.button-groups > * {
    background-color: var(--surface);
    background-image: none;
    border: 1px solid var(--line);
    transition: border-color 0.16s ease, background-color 0.16s ease, color 0.16s ease;
}

.button-groups > a,
.dark .button-groups > a {
    background-color: var(--ink-1);
    border-color: var(--ink-1);
    color: var(--canvas);
    font-weight: 500;
    transition: opacity 0.16s ease;
}

.button-groups > a:hover {
    opacity: 0.88;
}

.btn_theme_switch {
    color: var(--ink-2);
}

.btn_theme_switch:hover {
    color: var(--ink-1);
}

.btn_theme_switch svg path {
    stroke: currentColor;
}

/* --------------------------------------------------------------------------
   4. Main content + cards
   -------------------------------------------------------------------------- */

.main-content {
    padding-top: 9rem;
    padding-bottom: 0;
}

@media (min-width: 1024px) {
    .main-content {
        padding-top: 10rem;
    }
}

main .widget {
    background-color: var(--surface);
    background-image: none;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

@media (min-width: 640px) {
    main .widget {
        padding: 1.75rem;
    }
}

@media (min-width: 1280px) {
    main .widget {
        padding: 2rem;
    }
}

main .widget:hover {
    transform: translateY(-2px);
    border-color: var(--line-strong);
    box-shadow: var(--shadow-md);
}

/* Soften the decorative marquee band inside the proposal card. */
main .widget .marquee_wrapper {
    overflow: hidden;
    background-color: var(--surface-3);
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    font-size: 0.875rem;
    line-height: 1.5;
}

main .widget .icon svg {
    color: var(--ink-1);
}

/* Card internals ---------------------------------------------------------- */

.eyebrow {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
    opacity: 1;
}

.card-link {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ink-1);
}

.card-link > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    color: inherit;
    transition: color 0.16s ease;
}

.card-link > a svg {
    flex-shrink: 0;
    color: var(--ink-3);
    transition: transform 0.18s ease, color 0.18s ease;
}

.card-link > a:hover {
    color: var(--accent);
}

.card-link > a:hover svg {
    color: var(--accent);
    transform: translateX(3px);
}

.name {
    font-size: clamp(1.45rem, 1.1rem + 1.2vw, 1.85rem);
    line-height: 1.15;
    letter-spacing: -0.03em;
}

/* Buttons ----------------------------------------------------------------- */

.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border-radius: var(--radius-control);
    background-color: var(--ink-1);
    color: var(--canvas);
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.4;
    transition: opacity 0.16s ease, transform 0.16s ease;
}

.btn-primary:hover {
    opacity: 0.88;
}

.btn-primary:active {
    transform: translateY(1px);
}

/* Empty states ------------------------------------------------------------ */

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 3rem 1.5rem;
    text-align: center;
    background-color: var(--surface);
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-card);
}

.empty-state__title {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--ink-1);
}

.empty-state__text {
    max-width: 42ch;
    font-size: 0.9375rem;
    color: var(--ink-3);
}

/* --------------------------------------------------------------------------
   5. Footer
   -------------------------------------------------------------------------- */

.site-footer {
    margin-top: clamp(4rem, 8vw, 7rem);
    padding-top: clamp(2.5rem, 5vw, 4rem);
    padding-bottom: 2.5rem;
    border-top: 1px solid var(--line);
}

.site-footer h5 {
    letter-spacing: -0.03em;
    color: var(--ink-1);
}

.site-footer a[href^='mailto'] {
    background-color: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0.9rem 2.25rem;
    color: var(--ink-1);
    font-size: 1rem;
    box-shadow: var(--shadow-xs);
    transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.site-footer a[href^='mailto']:hover {
    border-color: var(--line-strong);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

.site-footer p:last-child {
    color: var(--ink-3);
    font-size: 0.875rem;
}

/* --------------------------------------------------------------------------
   6. Secondary surfaces
   -------------------------------------------------------------------------- */

#scroll-top {
    background-color: var(--surface);
    color: var(--ink-1);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
}

#scroll-top:hover {
    border-color: var(--line-strong);
    color: var(--accent);
}

.mobile_menu {
    background-color: var(--surface);
    border-right: 1px solid var(--line);
}

.mobile_menu a {
    color: var(--ink-2);
    border-radius: var(--radius-control);
}

.mobile_menu a:hover {
    background-color: var(--surface-3);
    color: var(--ink-1);
}

.mobile_menu a.active {
    background-color: var(--ink-1);
    color: var(--canvas);
}

/* Forms inherit the calmer surface treatment. */
body.site-body input:not([type='checkbox']):not([type='radio']):not([type='file']),
body.site-body textarea,
body.site-body select {
    background-color: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-control);
    color: var(--ink-1);
    padding: 0.875rem 1rem;
    font-size: 0.9375rem;
    line-height: 1.5;
}

body.site-body input:focus,
body.site-body textarea:focus,
body.site-body select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
    outline: none;
}

body.site-body ::placeholder {
    color: var(--ink-3);
}

/* Form actions ------------------------------------------------------------ */

body.site-body button[type='submit'],
body.site-body button[type='submit']:hover {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.75rem;
    border: 1px solid var(--ink-1);
    border-radius: 999px;
    background-color: var(--ink-1);
    background-image: none;
    color: var(--canvas);
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.4;
    transition: opacity 0.16s ease, transform 0.16s ease;
}

.dark body.site-body button[type='submit'],
.dark body.site-body button[type='submit']:hover {
    color: var(--canvas);
}

body.site-body button[type='submit']:hover {
    opacity: 0.88;
}

body.site-body button[type='submit']:active {
    transform: translateY(1px);
}

/* Pagination -------------------------------------------------------------- */

/* The compiled bundle predates some responsive helpers, so the mobile and
   desktop pagination variants can both render. Pick one deterministically. */
body.site-body nav[aria-label='Pagination Navigation'] > div:first-child {
    display: none;
}

@media (max-width: 639px) {
    body.site-body nav[aria-label='Pagination Navigation'] > div:first-child {
        display: flex;
    }

    body.site-body nav[aria-label='Pagination Navigation'] > div:last-child {
        display: none;
    }
}

body.site-body nav[aria-label='Pagination Navigation'] * {
    box-shadow: none;
}

body.site-body nav[aria-label='Pagination Navigation'] a,
body.site-body nav[aria-label='Pagination Navigation'] > div > span,
body.site-body nav[aria-label='Pagination Navigation'] span.relative > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background-color: var(--surface);
    color: var(--ink-2);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.4;
    box-shadow: none;
}

body.site-body nav[aria-label='Pagination Navigation'] a:hover {
    border-color: var(--line-strong);
    color: var(--ink-1);
}

body.site-body nav[aria-label='Pagination Navigation'] span[aria-current='page'] > span,
body.site-body nav[aria-label='Pagination Navigation'] span[aria-current='page'] {
    border-color: var(--ink-1);
    background-color: var(--ink-1);
    color: var(--canvas);
}

body.site-body nav[aria-label='Pagination Navigation'] svg {
    width: 1rem;
    height: 1rem;
}

/* --------------------------------------------------------------------------
   7. Motion preferences
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}