/* ============================================================
   portalstart.css - porschesthlm
   Loaded after /m/public/portalstart.css, so re-declaring the
   tokens in :root covers most of the rebrand - only the few
   places where the near black contrast colour would land on a
   dark background need a selector of their own (section 3).

   Taken from dealer.porsche.com/se/stockholm/sv-SE, which runs
   the Porsche Design System and exposes its own tokens:
       --p-color-primary          #010205
       --p-color-canvas           #ffffff
       --p-color-surface          #f1f1f4
       --p-color-contrast-high    #1a1a1e b3  (~#5f5f62 on white)
       --p-color-focus            #1a44ea
       --p-font-porsche-next      "Porsche Next"
   Buttons are 12px radius, 16px/28px padding, regular weight;
   the white dialog surface is 24px. The palette is monochrome -
   the only colour on the whole site is the focus blue.
   ============================================================ */

/* --- 1. Custom font -------------------------------------------------------
   dealer.porsche.com serves Porsche Next from cdn.ui.porsche.com, but we
   already host the same face ourselves. NOTE: the old portal stylesheet
   framework/porschesthlm/css/css.css points at /framework/porsche/fonts/,
   which does not exist - the files are under /framework/porschesthlm/fonts/,
   verified 200 in production. Only Regular and Bold are available, so the
   weights below are the only two that resolve to a real file; 500 and 600
   used by the base stylesheet fall through to Bold. */

@font-face {
    font-family: "Porsche Next";
    src: url("/framework/porschesthlm/fonts/PorscheNextWLa-Regular.woff2") format("woff2"),
         url("/framework/porschesthlm/fonts/PorscheNextWLa-Regular.woff") format("woff"),
         url("/framework/porschesthlm/fonts/PorscheNextWLa-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Porsche Next";
    src: url("/framework/porschesthlm/fonts/PorscheNextWLa-Bold.woff2") format("woff2"),
         url("/framework/porschesthlm/fonts/PorscheNextWLa-Bold.woff") format("woff"),
         url("/framework/porschesthlm/fonts/PorscheNextWLa-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* --- 2. Tokens ------------------------------------------------------------ */

:root {
    /* Porsche is monochrome, so the base and the contrast colour are the same
       near black - section 3 covers the spots where that lands on dark */
    --ps-primary-color: #010205;
    --ps-primary-hover: #242428;
    --ps-primary-contrast: #ffffff;

    --ps-secondary-color: #010205;
    --ps-secondary-hover: #242428;
    --ps-secondary-contrast: #ffffff;

    --ps-accent-color: #f1f1f4;
    --ps-text-main: #010205;
    --ps-text-light: #5f5f62;

    --ps-font-body: 'Porsche Next', 'Arial Narrow', Arial, 'Inter', sans-serif;
    --ps-font-heading: var(--ps-font-body);

    /* 24px is the white dialog surface, 12px the button radius */
    --ps-radius-card: 24px;
    --ps-radius-button: 12px;
}

/* --- 3. Where the near black contrast colour needs a light stand-in -------- */

/* Porsche black overlay on the hero image instead of the default slate */
.ps-hero {
    background-image: linear-gradient(rgba(1, 2, 5, 0.62), rgba(1, 2, 5, 0.62)), var(--ps-bg-image);
}

/* The rule under the hero heading sits on that overlay */
.ps-hero-text-content h1::after {
    background: #ffffff;
}

/* Inverted button on the black cookie bar, the way Porsche does it */
.ps-cookie-button {
    background: #fafbff;
    color: var(--ps-primary-color);
}

    .ps-cookie-button:hover {
        background: #ffffff;
    }

/* Porsche's own focus colour - the only colour on the whole site */
.ps-page a:focus-visible,
.ps-page button:focus-visible {
    outline: 3px solid #1a44ea;
    outline-offset: 2px;
}

/* Hover would otherwise be the same near black as the resting state */
.ps-faq-toggle:hover,
.ps-faq-question:hover {
    color: var(--ps-text-light);
}

/* --- 4. Porsche Design System details ------------------------------------- */

/* Their dialog is a plain white rounded panel - a 5px accent edge only leaves
   dark wedges in the 24px corners */
.ps-hero-card {
    border-top: 0;
}

/* Frosted grey tile that inverts to black on hover, like their icon buttons.
   The base stylesheet already swaps in the contrast colour on hover. */
.ps-feature-icon {
    background: rgba(100, 101, 115, 0.235);
    color: var(--ps-primary-color);
    box-shadow: none;
}

/* Headings and buttons are regular weight, not bold */
.ps-hero-text-content h1,
.ps-hero-card h2 {
    font-weight: 400;
}

.ps-btn-primary,
.ps-btn-outline {
    font-weight: 400;
}

/* Their buttons are noticeably taller than the default */
.ps-btn-primary {
    padding: 16px 28px;
}

.ps-btn-outline {
    padding: 14px 28px;
    border-width: 1px;
}

/* --- 5. Neutral greys instead of the default blue-greys -------------------- */

.ps-site-header,
.ps-news-banner {
    border-bottom-color: #e3e3e6;
}

.ps-features {
    background: #f1f1f4;
}

.ps-feature-card {
    border-color: #e9e9ec;
}

.ps-faq {
    border-top-color: #e3e3e6;
}

.ps-faq-panel,
.ps-faq-item {
    border-color: #e3e3e6;
}

.ps-footer {
    color: #9c9ca0;
}