/* =========================================================
   UTU Portal – shared CSS
   Reusable components: container, buttons, cards, panels, layout
   Brand: #004A43, #E9E3CF + accents used sparingly
   Fonts: Playfair Display (headings), Noto Sans (body)
   ========================================================= */

/* ----- CSS Reset-ish (safe + minimal) ----- */
*,
*::before,
*::after { box-sizing: border-box; }

html:focus-within { scroll-behavior: smooth; }

/* Make the page fill the viewport height and keep footer at the bottom */
html, body {
    height: 100%;
}

body {
    min-height: 100svh;          /* modern viewport units (mobile-safe) */
    display: flex;
    flex-direction: column;
    margin: 0;
    color: #0b0f0e;
    font-family: "Noto Sans", Arial, sans-serif;
    line-height: 1.5;
    background: #ffffff;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
    outline: 3px solid #ADCB00; /* accent, accessible focus */
    outline-offset: 3px;
}

/* ----- Tokens (colors, radii, shadows, spacing) ----- */
:root{
    --utu-green: #004A43;
    --utu-sand: #E9E3CF;
    --utu-black: #000000;
    --utu-white: #ffffff;

    --accent-pink: #ECCCE3;
    --accent-lime: #ADCB00;
    --accent-violet: #8B5DCB;
    --accent-red: #F8485E;

    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-lg: 22px;

    --shadow-sm: 0 2px 10px rgba(0,0,0,.08);
    --shadow-md: 0 14px 40px rgba(0,0,0,.12);

    --container: 1120px;
    --gutter: 20px;
}

/* ----- Helpers / utilities (reusable) ----- */
.container{
    width: min(var(--container), calc(100% - (2 * var(--gutter))));
    margin-inline: auto;
}

.section{ padding: clamp(24px, 4vw, 56px) 0; }

.eyebrow{
    margin: 0 0 10px 0;
    font-size: 0.95rem;
    color: rgba(255,255,255,.82);
    letter-spacing: .02em;
}

.skip-link{
    position: absolute;
    left: 12px;
    top: 12px;
    padding: 10px 12px;
    background: var(--utu-white);
    border: 2px solid var(--utu-green);
    border-radius: 10px;
    transform: translateY(-200%);
    z-index: 9999;
}
.skip-link:focus{ transform: translateY(0); }

/* ----- Typography ----- */
h1,h2,h3{
    font-family: "Playfair Display", serif;
    letter-spacing: 0.01em;
    margin: 0;
}
p { margin: 0; }

/* ----- Buttons (reusable) ----- */
.btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 11px 14px;
    border-radius: 999px;
    font-weight: 700;
    border: 1px solid transparent;
    text-decoration: none;
    line-height: 1.1;
    transition: transform .08s ease, background .15s ease, border-color .15s ease;
    user-select: none;
}
.btn:active{ transform: translateY(1px); }

.btn--primary{
    background: var(--utu-green);
    color: var(--utu-white);
    border-color: rgba(255,255,255,.12);
}
.btn--primary:hover{ background: #003e38; }

.btn--secondary{
    background: var(--utu-sand);
    color: #14201f;
    border-color: rgba(0,0,0,.08);
}
.btn--secondary:hover{ background: #e4dcc4; }

.btn--ghost{
    background: transparent;
    color: var(--utu-white);
    border-color: rgba(255,255,255,.28);
}
.btn--ghost:hover{ border-color: rgba(255,255,255,.55); }

/* ----- Header / topbar (reusable) ----- */
.site-header{
    background:
            radial-gradient(1200px 600px at 15% 15%, rgba(236,204,227,.18), transparent 55%),
            radial-gradient(1000px 520px at 85% 20%, rgba(173,203,0,.14), transparent 52%),
            linear-gradient(180deg, #003f39 0%, var(--utu-green) 60%, #003f39 100%);
    color: var(--utu-white);
}

.topbar{
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: blur(10px);
    background: rgba(0, 74, 67, .72);
    border-bottom: 1px solid rgba(255,255,255,.10);
}

.topbar__inner{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 0;
}

.brand{
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    min-width: 0;
}
.brand__logo{
    width: 150px;
    height: auto;
}
.brand__divider{
    width: 1px;
    height: 26px;
    background: rgba(255,255,255,.22);
}
.brand__name{
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: .95;
}

.top-actions{
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ----- Hero (reusable pattern for subpages too) ----- */
.hero{ padding: clamp(18px, 4vw, 40px) 0 clamp(26px, 5vw, 54px); }

.hero__inner{
    display: grid;
    grid-template-columns: 1.45fr .85fr;
    gap: clamp(18px, 3vw, 36px);
    align-items: start;
}

.hero__title{
    font-size: clamp(2rem, 3.4vw, 3.15rem);
    line-height: 1.05;
    margin: 0 0 10px 0;
}
.hero__lead{
    margin: 0 0 18px 0;
    font-size: 1.05rem;
    color: rgba(255,255,255,.86);
    max-width: 62ch;
}

.hero__cta{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 16px 0;
}

.hero__meta{
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 8px;
    color: rgba(255,255,255,.80);
    font-size: .95rem;
}
.hero__meta li{
    padding-left: 16px;
    position: relative;
}
.hero__meta li::before{
    content: "•";
    position: absolute;
    left: 0;
    color: var(--accent-lime);
}

.hero-card{
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: var(--radius-lg);
    padding: 18px;
    box-shadow: var(--shadow-sm);
}
.hero-card__kicker{
    display: inline-block;
    font-weight: 800;
    font-size: .85rem;
    color: #10201d;
    background: var(--accent-pink); /* small accent surface */
    padding: 4px 10px;
    border-radius: 999px;
    margin-bottom: 12px;
}
.hero-card__title{
    font-family: "Playfair Display", serif;
    font-size: 1.35rem;
    margin: 0 0 8px 0;
}
.hero-card__text{
    color: rgba(255,255,255,.85);
}

/* ----- Main layout ----- */
.site-main{
    flex: 1 0 auto;
    padding-bottom: 0;  /* ensure you're not adding padding you don't want */
    overflow: auto;     /* breaks margin-collapsing in many cases */
    background:
            linear-gradient(180deg, var(--utu-white) 0%, #fbfbf9 100%);
}

.section__header{
    margin-bottom: 18px;
}
.section__title{
    color: #0b0f0e;
    font-size: clamp(1.5rem, 2.2vw, 2rem);
}
.section__lead{
    margin-top: 8px;
    color: rgba(0,0,0,.72);
    max-width: 80ch;
}

/* Two big panels */
.two-col{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(14px, 2.2vw, 22px);
}

/* Panels (reusable on other pages for content blocks) */
.panel{
    background: #ffffff;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(0,0,0,.08);
    box-shadow: var(--shadow-sm);
    overflow: clip;
}
.panel__header{
    padding: 18px 18px 12px;
    background:
            linear-gradient(180deg, rgba(233,227,207,.6), rgba(255,255,255,0));
}
.panel__title{
    font-size: 1.55rem;
    color: #0b0f0e;
}
.panel__subtitle{
    margin-top: 6px;
    color: rgba(0,0,0,.68);
}

/* Cards (reusable) */
.card-grid{
    display: grid;
    gap: 10px;
    padding: 0 12px 14px;
}

.card{
    display: grid;
    grid-template-columns: 44px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 12px 12px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(0,0,0,.08);
    background: #fff;
    text-decoration: none;
    transition: transform .08s ease, box-shadow .15s ease, border-color .15s ease;
}
.card:hover{
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(0,0,0,.10);
    border-color: rgba(0,74,67,.22);
}
.card__icon{
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: rgba(233,227,207,.8); /* sand tint */
    border: 1px solid rgba(0,0,0,.06);
    overflow: hidden;
}
.card__icon img{ width: 26px; height: 26px; object-fit: contain; }

.card__title{
    font-weight: 800;
    color: #0b0f0e;
}
.card__text{
    margin-top: 4px;
    font-size: .95rem;
    color: rgba(0,0,0,.72);
}
.card__chev{
    font-weight: 900;
    color: rgba(0,74,67,.75);
}

/* ----- Footer (reusable) ----- */
.site-footer{
    flex: 0 0 auto;
    background: #071513;
    color: rgba(255,255,255,.86);
    border-top: 1px solid rgba(255,255,255,.10);
}
.footer__inner{
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 18px;
    align-items: center;
    padding: 22px 0;
}
.footer__logo{ width: 170px; }

.footer__right{
    display: grid;
    gap: 8px;
    justify-items: start;
}
.footer__nav{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: baseline;
}
.footer__label{ opacity: .85; }
.footer__sep{ opacity: .65; }

.footer__fineprint{
    font-size: .95rem;
    opacity: .92;
}
.site-footer a{ color: rgba(255,255,255,.92); }
.site-footer a:hover{ color: #ffffff; }

/* Inline SVG icons inside cards */
.card__icon .icon{
    width: 26px;
    height: 26px;
    color: rgba(0, 74, 67, .92); /* UTU green tint */
}

.btn--icon .btn__icon{
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
}
.btn--icon .btn__icon svg{
    width: 18px;
    height: 18px;
    color: currentColor;
}
.btn--icon .btn__text{
    max-width: 18ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.auth-hint{
    display: inline-block;
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,.10);
    background: rgba(233,227,207,.22);
    color: rgba(0,0,0,.78);
    font-size: .92rem;
    max-width: 52ch;
}

/* ----- Responsive ----- */
@media (max-width: 940px){
    .hero__inner{ grid-template-columns: 1fr; }
    .hero__aside{ order: 2; }
    .two-col{ grid-template-columns: 1fr; }
    .brand__divider{ display: none; }
    .brand__name{ display: none; } /* säästää tilaa mobiilissa */
}

@media (max-width: 520px){
    .topbar__inner{ padding: 12px 0; }
    .brand__logo{ width: 140px; }
    .btn{ padding: 10px 12px; }
    .footer__inner{ grid-template-columns: 1fr; }
    .footer__right{ justify-items: start; }
}