/* ============================================================
   DAR — Public Welcome screen + splash
   Isolated styles (loaded only by templates/welcome/index.html.twig).
   Mobile-first, app-like. Self-hosted fonts (DSGVO-friendly, no CDN).
   ============================================================ */

/* ---------------- Self-hosted fonts (DSGVO-friendly, no CDN) ----------------
   These standalone public pages (welcome, anmeldung) do NOT load dar-theme.css,
   so the @font-face declarations must live here or the fonts never load and
   Arabic falls back to Arial. Keep in sync with dar-theme.css. */
@font-face {
    font-family: "Manrope";
    src: url("../fonts/Manrope.ttf") format("truetype-variations"),
         url("../fonts/Manrope.ttf") format("truetype");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Noto Sans Arabic";
    src: url("../fonts/NotoSansArabic.ttf") format("truetype-variations"),
         url("../fonts/NotoSansArabic.ttf") format("truetype");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

/* ---------------- Base document sizing ---------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body {
    margin: 0;
    min-height: 100%;
}

.welcome-body {
    /* Brand colors sampled from the DAR logo (emerald green, gold, vivid red). */
    --dar-green: #009e5c;
    --dar-green-dark: #0a7a47;
    --dar-green-soft: #e4f4ec;
    --dar-yellow: #fbc400;
    --dar-yellow-dark: #c68a00;
    --dar-yellow-soft: #fef4d6;
    --dar-red: #e1121c;
    --dar-red-soft: rgba(225, 18, 28, .12);
    --dar-bg: #faf6ee;
    --dar-surface: #ffffff;
    --dar-text: #2c2f31;
    --dar-muted: #8a8f93;
    --dar-hairline: rgba(20, 70, 45, .08);
    --dar-shadow: 0 8px 24px rgba(20, 70, 45, .06);
    --dar-shadow-hover: 0 14px 32px rgba(20, 70, 45, .12);
    --dar-radius-card: 20px;
    --dar-radius-panel: 22px;
    --dar-radius-icon: 16px;
    --dar-font-latin: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --dar-font-arabic: "Noto Sans Arabic", "Tajawal", Arial, sans-serif;

    margin: 0;
    background: var(--dar-bg, #faf6ee);
    color: var(--dar-text);
    font-family: var(--dar-font-latin, "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
    line-height: 1.5;
    letter-spacing: -0.01em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
[dir="rtl"] .welcome-body {
    font-family: var(--dar-font-arabic, "Noto Sans Arabic", "Tajawal", Arial, sans-serif);
    letter-spacing: 0;
}

/* ---------------- Splash (pure CSS reveal, ~1s) ---------------- */
.dar-splash {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--dar-bg);
    animation: darSplashOut .5s ease forwards;
    animation-delay: .95s;
}
.dar-splash__logo {
    width: min(190px, 46vw);
    height: auto;
    animation: darLogoIn .75s cubic-bezier(.2, .7, .3, 1) both;
}
@keyframes darLogoIn {
    from { opacity: 0; transform: scale(.9); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes darSplashOut {
    to { opacity: 0; visibility: hidden; }
}
html.splash-skip .dar-splash { display: none; }

/* ---------------- Layout ---------------- */
.welcome {
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    min-height: 100vh;      /* fallback for older mobile browsers */
    min-height: 100svh;     /* stable base: excludes dynamic browser UI */
    min-height: 100dvh;     /* dynamic: tracks the currently visible viewport */
    display: flex;
    justify-content: center;
    padding-inline: clamp(1rem, 5vw, 1.5rem);
    padding-top: calc(clamp(12px, 2.5vh, 26px) + env(safe-area-inset-top));
    padding-bottom: calc(clamp(12px, 2.5vh, 22px) + env(safe-area-inset-bottom));
}
.welcome__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 500px;
    display: flex;
    flex-direction: column;
    gap: clamp(.7rem, 1.9vh, 1.15rem);
}

/* ---------------- Language switch ---------------- */
.welcome__lang {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .35rem;
    font-size: .95rem;
    margin-bottom: -.35rem;
}
[dir="rtl"] .welcome__lang {
    justify-content: flex-start;
}
.welcome__lang-link {
    color: var(--dar-muted);
    text-decoration: none;
    font-weight: 500;
    padding: .4rem .55rem;
    border-radius: 10px;
    transition: color .15s ease, background-color .15s ease;
}
.welcome__lang-link.is-active { color: var(--dar-green); font-weight: 700; }
.welcome__lang-link:hover { color: var(--dar-green-dark); }
.welcome__lang-link:focus-visible { outline: 2px solid var(--dar-green); outline-offset: 2px; }
.welcome__lang-sep { color: #d5d9d5; font-weight: 300; }

/* ---------------- Header ---------------- */
.welcome__header {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.welcome__logo {
    /* ~16% smaller than before so the logo no longer dominates the hero. */
    width: clamp(132px, 38vw, 176px);
    height: auto;
    /* Tighter gap between the logo and the title. */
    margin-bottom: clamp(.25rem, 1vh, .5rem);
}
.welcome__title {
    color: var(--dar-green-dark);
    font-weight: 700;
    /* Slightly reduced so the three action cards become the primary focus. */
    font-size: clamp(1.45rem, 5.6vw, 1.85rem);
    line-height: 1.15;
    margin: 0;
}
.welcome__subtitle {
    color: var(--dar-muted);
    font-size: clamp(.98rem, 3.5vw, 1.08rem);
    font-weight: 400;
    line-height: 1.45;
    margin: .35rem 0 0;
    max-width: 32ch;
}

/* ---------------- Primary action cards ---------------- */
.welcome__actions {
    display: flex;
    flex-direction: column;
    gap: clamp(.6rem, 1.7vh, .95rem);
    /* After shrinking the logo/title, breathe balanced space above and below
       the cards so the upper area isn't empty and everything isn't clustered
       at the top. Responsive (vh-based) so it adapts to screen height. */
    margin-block: clamp(.5rem, 2.6vh, 1.6rem);
}
.action-card {
    display: flex;
    align-items: center;
    background: var(--dar-surface);
    border-radius: var(--dar-radius-card);
    overflow: hidden;
    text-decoration: none;
    color: var(--dar-text);
    border: 1px solid var(--dar-hairline);
    box-shadow: var(--dar-shadow);
    padding: clamp(.75rem, 3vw, 1rem) clamp(.85rem, 3.5vw, 1.15rem);
    transition: transform .18s ease, box-shadow .18s ease;
    min-height: clamp(72px, 10.5vh, 92px);
}
.action-card:hover,
.action-card:focus-visible {
    transform: translateY(-3px);
    box-shadow: var(--dar-shadow-hover);
}
.action-card:focus-visible {
    outline: 3px solid var(--dar-green);
    outline-offset: 3px;
}
/* Icon Badges (Option B) — matching /eltern badge styling */
.action-card__icon {
    position: relative;
    flex: 0 0 auto;
    width: clamp(48px, 14vw, 56px);
    height: clamp(48px, 14vw, 56px);
    border-radius: var(--dar-radius-icon);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(1.4rem, 5.5vw, 1.75rem);
}
.action-card__icon i { position: relative; z-index: 1; }
.action-card__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .15rem;
    padding: 0 clamp(.75rem, 3vw, 1rem);
}
.action-card__title {
    font-weight: 700;
    font-size: clamp(1.08rem, 4.4vw, 1.25rem);
    line-height: 1.2;
    color: var(--dar-green-dark);
}
.action-card__subtitle {
    color: var(--dar-muted);
    font-size: clamp(.88rem, 3.3vw, .96rem);
    font-weight: 500;
}
.action-card__chevron {
    flex: 0 0 auto;
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 1.05rem;
    transition: transform .18s ease;
}
[dir="rtl"] .action-card__chevron i { transform: scaleX(-1); }
.action-card:hover .action-card__chevron { transform: translateX(2px); }
[dir="rtl"] .action-card:hover .action-card__chevron { transform: translateX(-2px); }

.action-card--primary .action-card__icon {
    background: var(--dar-green-soft, #e9f4ee);
    color: var(--dar-green, #1a8a57);
}
.action-card--primary .action-card__chevron { color: var(--dar-green); background: var(--dar-green-soft); }

.action-card--accent .action-card__icon {
    background: var(--dar-yellow-soft, #fdf4d9);
    color: var(--dar-yellow-dark, #cf9400);
}
.action-card--accent .action-card__chevron { color: var(--dar-yellow-dark); background: var(--dar-yellow-soft); }

.action-card--volunteer .action-card__icon {
    background: var(--dar-red-soft, rgba(214, 69, 69, .12));
    color: var(--dar-red, #d64545);
}
.action-card--volunteer .action-card__chevron { color: var(--dar-red); background: var(--dar-red-soft); }

/* ---------------- Secondary mini actions ---------------- */
.welcome__mini {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(1.25rem, 7vw, 2.5rem);
    /* Raise the Help button: less space above, balanced space below before
       the social section so it sits evenly between the two. */
    margin-top: clamp(.1rem, .6vh, .35rem);
    margin-bottom: clamp(.6rem, 2vh, 1.1rem);
}
.mini-action {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: var(--dar-green);
    text-decoration: none;
    font-weight: 600;
    font-size: .92rem;
    padding: .45rem .75rem;
    border-radius: 999px;
    background: var(--dar-green-soft);
    transition: color .15s ease, background-color .15s ease, transform .15s ease;
}
.mini-action i { font-size: 1rem; }
.mini-action:hover {
    color: var(--dar-green-dark);
    background: #dbede3;
    transform: translateY(-1px);
}
.mini-action:focus-visible { outline: 2px solid var(--dar-green); outline-offset: 2px; }

/* ---------------- Social + quick links (clean, boxless icons) ---------------- */
.social-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(.4rem, 2vw, .7rem);
}
/* Quiet, secondary links: clean boxless icons so the three primary action
   cards keep all the visual weight. */
.social-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: .3rem .25rem;
    background: transparent;
    border: 0;
    border-radius: 12px;
    text-decoration: none;
    transition: transform .15s ease, color .15s ease;
}
.social-btn:hover,
.social-btn:focus-visible {
    transform: translateY(-1px);
}
.social-btn:focus-visible {
    outline: 2px solid var(--dar-hairline);
    outline-offset: 3px;
}
.social-btn__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(1.25rem, 4.8vw, 1.55rem);
    line-height: 1;
    background: transparent;
    color: var(--dar-muted);
}
.social-btn:hover .social-btn__icon,
.social-btn:focus-visible .social-btn__icon {
    color: var(--dar-green-dark);
}
.social-btn__label {
    font-weight: 500;
    font-size: clamp(.66rem, 2.5vw, .76rem);
    color: #9aa39d;
    text-align: center;
}
/* Intentionally monochrome — no third-party brand colors on the homepage. */
.social-btn--facebook .social-btn__icon,
.social-btn--instagram .social-btn__icon,
.social-btn--youtube .social-btn__icon,
.social-btn--calendar .social-btn__icon { color: var(--dar-muted); }

/* ---------------- Footer (Impressum / website) ---------------- */
.welcome__footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font-size: .85rem;
    color: var(--dar-muted);
    margin-top: clamp(.15rem, 1vh, .4rem);
}
.welcome__footer a {
    color: var(--dar-muted);
    text-decoration: none;
    font-weight: 500;
}
.welcome__footer a:hover { color: var(--dar-green-dark); text-decoration: underline; }
.welcome__footer a:focus-visible { outline: 2px solid var(--dar-green); outline-offset: 2px; }
.welcome__footer-sep { color: #d5d9d5; }

/* ---------------- Decorative shapes ---------------- */
.welcome__deco {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
.welcome__deco::before {
    /* soft warm radial glow, top */
    content: "";
    position: absolute;
    top: -18%;
    left: 50%;
    transform: translateX(-50%);
    width: 140%;
    height: 46%;
    background: radial-gradient(ellipse at center, rgba(251, 196, 0, .10), transparent 68%);
}
.deco { position: absolute; }
.deco--hex-tl { top: -26px; inset-inline-start: -30px; width: 108px; color: var(--dar-red); opacity: .07; }
.deco--hex-tr { top: 46px; inset-inline-end: -22px; width: 84px; color: var(--dar-yellow); opacity: .12; }
.deco--hex-br { bottom: 96px; inset-inline-end: -28px; width: 120px; color: var(--dar-green); opacity: .07; }
.deco--jasmine-bl { bottom: 22px; inset-inline-start: -16px; width: 112px; color: var(--dar-yellow-soft); opacity: .8; }
.deco--jasmine-bl .jasmine-center { fill: var(--dar-yellow); }

/* ---------------- Responsive: tablet / desktop ---------------- */
@media (min-width: 768px) {
    .welcome { align-items: flex-start; padding-top: clamp(2rem, 6vh, 4rem); }
    .welcome__inner {
        max-width: 540px;
        background: var(--dar-surface);
        border-radius: 34px;
        box-shadow: 0 24px 60px rgba(20, 70, 45, .12);
        padding: clamp(1.75rem, 4vw, 2.75rem);
        gap: clamp(1.25rem, 3vh, 2rem);
    }
    .welcome__social .social-btn { background: var(--dar-bg); box-shadow: none; }
}

/* ---------------- Height-responsive compact modes ---------------- */
/* Save vertical space by trimming EMPTY space (gaps, paddings, margins) and,
   on the shortest phones, the DAR logo — never the touch targets or body text.
   Keyed on viewport HEIGHT so tall phones keep the full, roomy design. */

/* Slightly short (e.g. 812–850px tall: iPhone 13 mini area, many Androids) */
@media (max-height: 850px) {
    .welcome {
        padding-top: calc(clamp(10px, 1.8vh, 18px) + env(safe-area-inset-top));
        padding-bottom: calc(clamp(10px, 1.8vh, 16px) + env(safe-area-inset-bottom));
    }
    .welcome__inner { gap: clamp(.6rem, 1.4vh, .95rem); }
    .welcome__logo { width: clamp(150px, 40vw, 190px); margin-bottom: clamp(.3rem, 1vh, .55rem); }
    .welcome__actions { gap: clamp(.5rem, 1.2vh, .8rem); }
    .action-card { min-height: clamp(66px, 9vh, 84px); }
    .social-btn { min-height: clamp(58px, 8vh, 70px); padding: clamp(.5rem, 2vw, .7rem) .4rem; }
}

/* Genuinely short (e.g. 667–750px tall) — compact mode */
@media (max-height: 750px) {
    .welcome__inner { gap: clamp(.5rem, 1.1vh, .8rem); }
    .welcome__logo { width: clamp(130px, 33vw, 160px); margin-bottom: clamp(.2rem, .7vh, .4rem); }
    .welcome__title { font-size: clamp(1.45rem, 5.6vw, 1.85rem); }
    .welcome__subtitle { margin-top: .2rem; }
    .welcome__actions { gap: clamp(.45rem, 1vh, .7rem); }
    .action-card { min-height: clamp(60px, 8vh, 74px); }
    .social-btn { min-height: clamp(52px, 7vh, 64px); }
    .social-btn__icon { width: clamp(34px, 10vw, 40px); height: clamp(34px, 10vw, 40px); }
}

/* Very short viewports: the optional Discover section may be dropped here in a
   future iteration if genuinely tiny screens still scroll. No hide breakpoint
   is active for now, so Discover stays visible on all phones and desktop. */

/* ---------------- Width-responsive: phones (fit-to-viewport) ----------------
   Mobile-only trimming of EMPTY vertical space so the whole landing page fits
   within the viewport with little/no scroll. Only gaps/margins are reduced —
   no fonts, colors, card design, or touch-target heights change. Placed after
   the max-height blocks so it wins for phones matching both. */
@media (max-width: 576px) {
    /* General spacing between every stacked section (lang → header → actions
       → Help → social → footer). */
    .welcome__inner { gap: clamp(.45rem, 1.3vh, .8rem); }

    /* Biggest offender: the space above and below the three action cards, i.e.
       header→first card and last card→Help. The bottom margin (last card→Help)
       is trimmed a further ~30% without touching the header→first-card gap. */
    .welcome__actions {
        margin-top: clamp(.3rem, 1.2vh, .7rem);
        margin-bottom: clamp(.21rem, .84vh, .49rem);
    }

    /* Tighten the space directly around the Help button (above: last card,
       below: social buttons) — a further ~30% smaller. */
    .welcome__mini {
        margin-top: clamp(.035rem, .21vh, .14rem);
        margin-bottom: clamp(.105rem, .42vh, .21rem);
    }

    /* Pull the footer (Impressum / website) up close under the social buttons
       so the bottom gap matches the small Help→volunteer gap. */
    .welcome__footer { margin-top: clamp(0rem, .2vh, .1rem); }
}

/* ---------------- Reduced motion ---------------- */
@media (prefers-reduced-motion: reduce) {
    .dar-splash { animation: darSplashOut .01s linear forwards; animation-delay: .3s; }
    .dar-splash__logo { animation: none; }
    .action-card,
    .action-card__chevron { transition: none; }
    .action-card:hover,
    .action-card:focus-visible { transform: none; }
    .action-card:hover .action-card__chevron { transform: none; }
}

/* ---------------- Dark Theme Support ---------------- */
[data-theme="dark"] .welcome-body,
[data-theme="dark"].welcome-body {
    --dar-bg: #0f1712;
    --dar-surface: #19231d;
    --dar-surface-muted: #151d18;
    --dar-surface-hover: #223028;
    --dar-text: #eaf2ed;
    --dar-text-muted: #94a79d;
    --dar-muted: #73847b;
    --dar-border: #2c3c32;
    --dar-hairline: rgba(255, 255, 255, 0.08);
    --dar-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
    --dar-shadow-hover: 0 16px 40px rgba(0, 0, 0, 0.60);
    --dar-green-soft: #143526;
    --dar-yellow-soft: #382c0a;
    --dar-red-soft: #381414;
    background: var(--dar-bg);
    color: var(--dar-text);
}

[data-theme="dark"] .welcome-header,
[data-theme="dark"] .welcome__header {
    color: var(--dar-text);
}

[data-theme="dark"] .welcome__title,
[data-theme="dark"] .welcome-header .welcome__title {
    color: var(--dar-green-accent, #38a374);
}

[data-theme="dark"] .welcome__subtitle,
[data-theme="dark"] .welcome-header .welcome__subtitle {
    color: var(--dar-text-muted);
}

[data-theme="dark"] .action-card,
[data-theme="dark"] .welcome-card {
    background: var(--dar-surface);
    border-color: var(--dar-border, #2c3c32);
    color: var(--dar-text);
}

[data-theme="dark"] .action-card__title {
    color: var(--dar-text);
}

[data-theme="dark"] .action-card__subtitle {
    color: var(--dar-text-muted);
}

[data-theme="dark"] .mini-action {
    background: var(--dar-green-soft);
    color: var(--dar-green-accent);
}

[data-theme="dark"] .mini-action:hover {
    background: #1c4b36;
    color: #6ee7b7;
}

[data-theme="dark"] .social-btn__icon {
    color: var(--dar-text-muted);
}

[data-theme="dark"] .social-btn:hover .social-btn__icon,
[data-theme="dark"] .social-btn:focus-visible .social-btn__icon {
    color: var(--dar-green-accent);
}

[data-theme="dark"] .welcome__footer a {
    color: var(--dar-text-muted);
}

[data-theme="dark"] .welcome__footer a:hover {
    color: var(--dar-green-accent);
}

@media (min-width: 768px) {
    [data-theme="dark"] .welcome__inner {
        background: var(--dar-surface);
        border: 1px solid var(--dar-border);
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
    }
    [data-theme="dark"] .welcome__social .social-btn {
        background: var(--dar-surface-muted);
    }
}