/* ============================================================
   Page shell — account + login surfaces
   ------------------------------------------------------------
   The classic theme template renders these pages without any
   content container: the article sits edge-to-edge and the page
   heading keeps raw browser styling. This layer owns ONLY the
   shell around the portal roots — width, rhythm and the page
   heading. Scope: body.pvmp-shell, set by
   PVMP_My_Pages::add_shell_body_class() on exactly the account
   page and the BankID login page. It may never restyle pages
   that do not carry the body class.
   ============================================================ */

/* The account page sits on the bone ground the portal design was drawn on
   (prototype: bone under white cards); the theme itself paints no body
   background on the classic page template, so the shell owns it. The login
   page carries the same class and already renders its own bone surfaces. */
body.pvmp-shell {
    background: var(--bone-100);
}

body.pvmp-shell #main {
    box-sizing: border-box;
    width: 100%;
    max-width: 72rem;
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 5vw, 2.5rem);
    padding-block: clamp(2rem, 5vw, 3.5rem);
}

/* Login page: the espresso hero band (bankid.css .pvmp-login-hero) is
   designed to flow edge-to-edge directly under the sticky header, not
   sit inside the shared account-shell container. Drop #main's shared
   width cap and rhythm padding for this scope only — the login
   components size and center themselves instead (.pvmp-login-stage
   carries its own min(960px, calc(100% - 2rem)) max-width in
   bankid.css). Ali, 2026-08-30 (iPhone screenshot of
   /logga-in/): the previous 46rem cap plus the inherited padding-block
   boxed the band into a framed "ruta" — bone margins on every side and a
   gap above it — instead of the intended full-bleed flow. Never use a
   100vw/negative-margin trick here: with a visible scrollbar that is
   wider than the viewport and causes horizontal scroll.
   ---------------------------------------------------------- */
body.pvmp-shell--login #main {
    max-width: none;
    padding-inline: 0;
    padding-block: 0;
}

/* The classic theme's own block-content-width rule (style.css:
   .entry-content > * gets max-width: var(--container-content), which
   resolves to theme.json's 74rem contentSize, plus margin-inline: auto)
   clamps and centers the direct child of .entry-content on every page —
   a second, theme-level version of the same framed-box effect, one layer
   further out than #main. It has no visible effect while #main's own cap
   is narrower (46rem < 74rem), but as soon as #main goes full width above
   it becomes the new, wider cap and the band stops being edge-to-edge on
   large screens. Target the shortcode root by class (not by DOM depth)
   so this holds regardless of whether wpautop/shortcode_unautop leaves an
   extra wrapper between .entry-content and .pvmp-login-page.
   ---------------------------------------------------------- */
body.pvmp-shell--login .pvmp-login-page {
    max-width: none;
    margin-inline: 0;
}

/* The WordPress page heading (below) duplicates the login card's own
   "Logga in" heading directly beneath it — Ali's screenshot shows
   "Logga in" rendered twice. The hero band already carries this page's
   h1 (.pvmp-login-hero__title, "Ditt utrymme hos Provitalia.",
   templates/login.php), so the theme's entry-title is not this page's
   only h1: hiding it does not leave the page without one. It is hidden
   outright — not kept as a visually-hidden heading — so screen reader
   users are not left with two h1 landmarks announcing two different
   headings for what is visually one heading. */
body.pvmp-shell--login .entry-header {
    display: none;
}

body.pvmp-shell .entry-header {
    margin-bottom: 1.75rem;
}

body.pvmp-shell h1.entry-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 3.2vw, 2.5rem);
    font-weight: 300;
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: var(--text-heading);
}