/*
    page-container-base-structure and page-container-header provide parallel
    structure for the page content - header and main content
 */

.page-container-base-structure {
    background-color: white;
    padding: 1rem 1rem 1rem 1.5rem;
}

/* ── PAGE BANNER (subpages) ── */

.page-container-header {
    padding: 1rem 1rem 1rem 1.5rem;
    background: var(--usms-blue);
}

.page-container-header-content {
    width: 100%;
    margin: 0 auto;
    font-size: var(--title-large);
    color: var(--white);
}

/* Create a width limited row that is centered in
   the viewport.  This serves as the base for the
   subsequent unique content.
 */
.page-container-row-l1 {
    max-width: 75rem;
    margin: 0 auto;
}

/* Provides a second-level row content container. This is optional
   and can serve to make the actual content more consistent.
   Apply custom content styles at this level.
 */
.page-container-row-l2 {
    padding: 1rem;
}

/* Within the content level 1 or 2 container, apply flex container with either
   row (default - stack horizontally) or column (stack vertically) direction.
 */
.l3-page-container-flex-col { /* stack horizontally */
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border: 1px solid var(--gray-faint);
    border-radius: 50%;
}
/* Provides border, content padding, and bottom row margin */
.l3-page-container-flex-row { /* stack vertically */
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    border: 1px solid var(--gray-light);
    border-radius: 8px;
    padding: 0.5rem 0 0 0.5rem;
    margin-bottom: var(--mg-1);
}

/* Define content unique styles keeping reuse as a goal */
.l3-page-container-content {

}
.l3-page-container-content-title {
    font-size: var(--title-normal);
    font-weight: bold;
    color: var(--title-content-color);
}
.l3-page-container-content-description {
    font-size: var(--text-normal);
    padding-left: var(--pd-1);
    line-height: 1.4;
}
.l3-page-container-content-description-details {
    font-size: var(--text-1);
    padding-top: var(--pd-0-2);
    padding-left: var(--pd-1);
    line-height: 1.3;
}
.l3-page-container-content-image {
    max-width: 150px;
    height: auto;
    padding-left: var(--pd-1);
}

img {
    max-width: 350px;
}

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE — small screen / mobile
   ══════════════════════════════════════════════════════════════════ */
@media (hover: hover) and (pointer: fine) {
    #small_menu_icon-id:hover { /* your hover styles */ }
}

@media (max-width: 768px) {

    /* Page banner */
    .page-container-header {
        padding: 0.75rem 1rem;
    }

    /* Content rows: stack image below text instead of side-by-side */
    .l3-page-container-flex-row {
        flex-direction: column;
    }

    .page-container-header-content {
        font-size: var(--title-2);
    }

    img {
        max-width: 300px;
    }
}