/* fotone transfer – FileSender skin.
   The look comes unchanged from fotone.net (/assets/… = copy of fotone-landing/assets, `./deploy.sh sync-design`).
   This file only adapts FileSender's own markup/CSS to it. Loaded after FileSender's CSS (GUI::stylesheets). */
@import url('/assets/fonts/schibsted/schibsted.css?v=1');
@import url('/assets/icons/phosphor/styles.min.css');
@import url('/assets/css/landing.css');
@import url('/assets/css/fotone.css');

/* FileSender colour variables onto the fotone.net tokens (landing.css :root) */
:root {
    --fs-bg-color: transparent;
    --fs-bg-color-secondary: #fff;
    --fs-border: var(--border);
    --fs-text-color: var(--foreground);
    --fs-accent: var(--primary-strong);
    --fs-primary: var(--primary-strong);
    --fs-blue: var(--primary-strong);
    --fs-hover: var(--primary-light);
    --fs-hightlight-bg: var(--primary-light);
    --fs-hightlight-bg-alternative: var(--primary-light);
    --fs-btn-hover: var(--slate-700);
    --fs-btn-active: var(--slate-500);
    --fs-success: var(--emerald-700);
    --fs-info: var(--primary-strong);
    --fs-danger: var(--rose-600);
}

/* ---- Header: FileSender styles every <header>/<nav> (new-ui/_header.css); give it back to fotone.net ---- */
header.site-header {
    position: sticky; top: 0.75rem; height: auto; width: auto;
    padding: 0 1.25rem; background: transparent; border: 0; z-index: 1030;
}
header.site-header nav { height: auto; }
header.site-header nav a { height: auto; display: inline-flex; }
header.site-header .brand img.brand-logo { max-height: none; }
header.site-header .header-actions { margin-left: auto; }  /* no main-nav for visitors, which pushes it right on fotone.net */
.ft-app-nav a { align-items: center; gap: 0.375rem; }
.ft-app-nav a i { font-size: 1.125em; }
main { padding-top: 2.5rem; }
/* Visitor landing: plain fotone.net hero on the panel pattern */
main:has(#page.logon_page) { padding-top: 0; }
#page.logon_page { padding: 0; text-align: center; }
#page.logon_page .hero h1 { font-size: clamp(2.5rem, 5.5vw, 4.25rem) !important; font-weight: 800 !important; letter-spacing: -0.03em; text-align: center !important; }
#page.logon_page .hero-ctas { margin-bottom: 0; }

/* FileSender forces every h1 to 2rem/300/centered (new-ui/_text.css, !important) */
#page:not(.logon_page) h1 { font-size: clamp(1.75rem, 3vw, 2.25rem) !important; font-weight: 800 !important; letter-spacing: -0.02em; }

/* ---- App pages: content on one white sheet against the panel pattern, like fotone.net cards ---- */
#page:not(.logon_page) > div:not(.container) { background: transparent; }
#page:not(.logon_page) > .container,
#page:not(.logon_page) > div:not(.container) > .container {
    background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow-card); padding: 2.5rem 2rem; margin-bottom: 3rem;
}
body { font-size: 1rem; }  /* landing.css uses 19px marketing body text; app UI stays at 16px */
.fs-button, .bootbox-accept, .btn-secondary { border-radius: 999px; background: var(--slate-900); font-family: inherit; }
.fs-button:hover, .bootbox-accept:hover, .btn-secondary:hover { background: var(--slate-700); }
.fs-button--info { background: var(--primary-strong); }
.fs-button--success { background: var(--emerald-700); }
.fs-button--danger { background: var(--rose-600); }
.fs-input-group input:focus, .fs-input-group textarea:focus, .fs-select select:focus, .fs-form input:focus, .fs-form textarea:focus {
    border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); outline: none;
}
.fs-transfer { background: transparent; padding-top: 0; padding-bottom: 0; }  /* was a second grey card inside the sheet */
.fs-transfer__droparea { border-radius: var(--radius); }

/* FileSender centres every footer container (new-ui/_footer.css) */
footer.site-footer .container { justify-content: space-between; }

/* fotone.net folds .main-nav into a burger dropdown below 1080px; the app keeps its icons in the bar instead */
@media (max-width: 1080px) {
    .site-header .main-nav.ft-app-nav {
        display: flex; position: static; flex-direction: row; align-items: center;
        margin-left: auto; padding: 0; gap: 0.125rem; background: none; box-shadow: none;
    }
    .ft-app-nav a span { display: none; }
    .ft-app-nav a { padding: 0.5rem 0.625rem; border-radius: 999px; }
    .ft-app-nav a.active { background: rgba(255, 255, 255, 0.1); }
    .ft-app-nav a i { font-size: 1.25rem; }
}
@media (max-width: 767px) {
    #page:not(.logon_page) > .container,
    #page:not(.logon_page) > div:not(.container) > .container { padding: 1.5rem 1rem; }
}
@media (max-width: 400px) {
    .site-header .brand img.brand-logo { height: 2.5rem; }
    .ft-app-nav a { padding: 0.5rem 0.4375rem; }
}