/* "Archeologische Vereniging Philips van Horne" wraps to two lines below
   600px (the rule below) purely as a side effect of running out of room —
   it's wanted at every width, not just narrow ones, so constrain it here
   too. Doesn't touch font-size, just forces the same wrap point the mobile
   rule already produces. */
header.wp-block-template-part .wp-block-site-title {
    max-width: 260px;
}

/* The theme's own global content padding (theme.json:
   --wp--style--root--padding-left/right, currently min(6.5rem, 8vw)) is set
   on body and cascades to every block on every page — header included,
   which is why it can still eat enough width on a tablet to wrap the
   logo/title + nav row awkwardly. 8vw is ~61-82px across the iPad
   portrait/landscape range; shrink it there specifically rather than
   touching the full desktop value this also governs. */
@media (min-width: 601px) and (max-width: 1080px) {
    body {
        --wp--style--root--padding-left: 1.5rem;
        --wp--style--root--padding-right: 1.5rem;
    }
}

/* Compact mobile header/footer: shrink the logo + title so the logo/title
   group (NOT the outer header row, which also holds the nav/hamburger and
   needs to keep the theme's own responsive wrap behavior) takes up less
   space. Covers portrait phones (narrow width) AND landscape phones (short
   height, but often wider than 600px) — both need the same treatment. */
@media (max-width: 600px), (max-height: 500px) and (orientation: landscape) {
    header.wp-block-template-part .wp-block-group.is-layout-flex:has(> .wp-block-site-logo) {
        align-items: center;
        gap: .4rem;
    }

    header.wp-block-template-part .wp-block-site-logo img {
        width: 32px;
        height: 32px;
    }

    header.wp-block-template-part .wp-block-site-title {
        font-size: .75rem !important;
        line-height: 1.15;
        max-width: 11rem;
    }

    footer.wp-block-template-part .wp-block-site-logo img {
        width: 16px;
        height: 16px;
    }

    footer.wp-block-template-part .wp-block-site-title {
        font-size: .7rem !important;
        line-height: 1.15;
    }

    footer.wp-block-template-part .wp-block-site-tagline {
        font-size: .6rem !important;
        line-height: 1.1;
        margin: 0;
    }

    /* Core's navigation block only auto-collapses to a hamburger below 600px
       WIDTH (wp-includes/blocks/navigation/style.min.css). Landscape phones
       are usually wider than that, so without this override the full menu
       (including the login badge) stays permanently expanded there instead
       of collapsing behind the toggle button like it does in portrait. */
    .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display: flex !important;
    }

    .wp-block-navigation__responsive-container:not(.is-menu-open) {
        display: none !important;
    }
}

/* Word/LibreOffice HTML export positions some images two different ways:
   the legacy align="left"/"right" <img> attribute (a plain float, escapes
   its paragraph without a clearfix), and images that had a fixed
   "position on page" text-wrap in Word, exported as a <span
   class="sd-abs-pos" style="position:absolute; top:...; left:..."> —
   which anchors them to the page's top-left regardless of where they sit
   in the document. Neutralize both, and cap image width for phones. */
.avpvh-informatiefje {
    overflow: auto;
}

.avpvh-informatiefje img {
    float: none !important;
    max-width: 100%;
    height: auto;
}

.avpvh-informatiefje .sd-abs-pos {
    position: static !important;
    display: block;
}

.avpvh-informatiefje-toc {
    columns: 2;
    column-gap: 2rem;
    margin: 0 0 1.5rem;
    padding-left: 1.2rem;
}

@media (max-width: 600px) {
    .avpvh-informatiefje-toc {
        columns: 1;
    }
}

.avpvh-members-only {
    padding: 2rem;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    text-align: center;
    max-width: 400px;
    margin: 2rem auto;
}

.avpvh-members-only p {
    margin-bottom: 1.25rem;
    color: #555;
}

.avpvh-login-btn {
    display: inline-block;
    margin: .4rem;
    padding: .6rem 1.2rem;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    font-size: .95rem;
    background: #4285f4;
    color: #fff;
}

.avpvh-login-microsoft {
    background: #0078d4;
}

.avpvh-login-btn:hover {
    opacity: .88;
    color: #fff;
}

/* Login pagina */
.avpvh-login-page {
    max-width: 420px;
    margin: 2rem auto;
    padding: 2rem;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
}

.avpvh-login-error {
    margin-bottom: 1rem;
    padding: .75rem 1rem;
    background: #fff3cd;
    border-left: 4px solid #e6a817;
    color: #7a5000;
    border-radius: 3px;
    line-height: 1.5;
}

.avpvh-login-intro {
    margin-bottom: 1.5rem;
    color: #444;
    line-height: 1.6;
}

.avpvh-login-options {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.avpvh-login-options a {
    display: block;
    padding: .65rem 1rem;
    border-radius: 4px;
    text-align: center;
    text-decoration: none;
    font-weight: 600;
    font-size: .95rem;
    color: #fff;
}

.avpvh-login-options a.avpvh-login-google    { background: #4285f4; }
.avpvh-login-options a.avpvh-login-microsoft { background: #0078d4; }
.avpvh-login-options a.avpvh-login-password  { background: #555; }
.avpvh-login-options a:hover { opacity: .88; color: #fff; }

.avpvh-identity-unverified {
    color: #b32d2e;
    font-size: .82rem;
    font-weight: 600;
}

.avpvh-login-hint {
    font-size: .82rem;
    color: #666;
    margin: -.25rem 0 0;
}

/* The account entry reuses core's own has-child/submenu-toggle markup and
   CSS (same as "Welkom!", "De vereniging", ...) so positioning, the mobile
   overlay layout, and the "Alleen voor Leden"-style behaviour all come for
   free. Only the icon button itself and the non-link name label need a
   touch of their own styling — a <button> doesn't inherit the same
   font/line-height as the <a> other items use for their text label. */
.avpvh-auth-status__content {
    display: inline-flex;
    align-items: center;
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.avpvh-auth-status__menu-label .wp-block-navigation-item__content {
    font-size: .8rem;
    color: #777;
    white-space: nowrap;
}