/* ================================================================
   SITEMAP PAGE
   css/sitemap.css

   Loaded by sitemap.php via $pageCss, after header.css and before
   global-typography.css.

   BUILT ON THE LEGAL STATUS PAGE, ON PURPOSE

   sitemap.php is the same shape of page as legalstatus.php - a navy
   two-part banner, then a section of white cards - so this file is
   legalstatus.css with the .ls- prefix renamed to .sm- and the
   sitemap's own additions. The values below are copied from
   legalstatus.css line for line rather than re-chosen:

       container   width 92%, max-width 1380px, margin 0 auto
                   then 94% at <=1199px, 90% at <=767px,
                   92% at <=480px
       section     padding 48px 0, 40px 0 at <=767px
       card        #FFFFFF, 1px #E4EAF8, radius 18px,
                   0 8px 20px rgba(16,42,90,.06), padding 30px 32px
       card h3     21px / 800 / #0B1F4D
       body copy   15px / 1.65 / #5B6B85
       link list   15px / #3A4A63 with a 6px #0D6EFD bullet
       links       #0D6EFD
       read more   15px / 600 / #0D6EFD, chevron rotates when open
       banner      #083C7C, h1 clamp(42px, 4.5vw, 68px),
                   accent word #A9C7FF, 50x3 white rule

   WIDTH IS THE THING BEING MATCHED

   "the same width as the legal status page" is the .sm-container
   rule and nothing else. Because it is a separate file from
   legalstatus.css and both are scoped to their own prefix, the two
   pages cannot drift apart by accident: if the container ladder is
   ever changed it has to be changed in both, deliberately.

   THE COLUMN COUNT IS THE ONE DELIBERATE DIFFERENCE

   legalstatus.php uses .ls-grid for two cards per row and .ls-grid-3
   for three. This page uses three, because a sitemap is a list of
   links rather than prose: three columns keeps ten or twelve cards
   to four rows instead of six. Everything else about the grid is the
   same - 24px gap, minmax(0, 1fr) tracks, align-items start, the
   same two-columns-at-991px and one-column-at-767px ladder that
   .ls-grid-3 uses.

   NOTHING IN THIS FILE EDITS ANY OTHER PAGE

   Every selector is prefixed .sm-, which appears in no other
   stylesheet in the project. .sm-card-clamp, .sm-card-more,
   .sm-card-open and .sm-more are added by the script in sitemap.php
   and are declared nowhere else.

   SPECIFICITY NOTE

   global-typography.css loads after this file and pins h1, h3 and p
   with !important, so the banner h1, the card headings and every
   paragraph carry their own !important here.

   THE READ MORE IS PHONE ONLY

   legalstatus.php clamps its cards at every width, because a policy
   paragraph is long prose and holding the cards level matters there.
   On a sitemap the cards are link lists, and clipping them on a
   desktop that has room to show them would hide real navigation for
   no reason. So the clamp, the fade and the .sm-more button are all
   inside @media (max-width: 767px), and the script only measures and
   builds a button when that query matches.
   ================================================================ */


/* ================================================================
   1.  BANNER
   ================================================================ */

.sm-banner {
    width: 100%;
    min-height: 300px;
    display: flex;
    align-items: stretch;
    position: relative;
    overflow: hidden;
    background: #083C7C;
    font-family: Arial, Helvetica, sans-serif;
}

.sm-banner-content {
    width: 52%;
    padding: 80px 6% 80px 8%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 5;
}

/* the Home / PAGE breadcrumb pill */
.sm-banner-badge {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    margin-bottom: 25px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.20);
    color: #FFFFFF;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .4px;
    white-space: nowrap;
}
.sm-banner-badge i {
    font-size: 15px;
    line-height: 1;
}

.sm-banner-content h1 {
    margin: 0 !important;
    max-width: 600px;
    color: #FFFFFF;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: clamp(42px, 4.5vw, 68px) !important;
    line-height: 1.08 !important;
    font-weight: 700;
    letter-spacing: -1.5px;
}
.sm-banner-content h1 span {
    color: #A9C7FF;
}

.sm-banner-line {
    width: 50px;
    height: 3px;
    margin: 25px 0 20px;
    background: #FFFFFF;
    border-radius: 5px;
}

.sm-banner-content p {
    max-width: 520px;
    margin: 0 !important;
    color: rgba(255, 255, 255, .90);
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 16px !important;
    line-height: 1.75 !important;
    text-align: left !important;
}

/* photo half */
.sm-banner-image {
    width: 48%;
    min-height: 500px;
    position: relative;
    overflow: hidden;
}
.sm-banner-photo {
    position: absolute;
    inset: 0;
    overflow: hidden;
}
.sm-banner-photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    transition: transform .7s ease;
}
.sm-banner:hover .sm-banner-photo img {
    transform: scale(1.04);
}


/* ================================================================
   2.  SECTION + CONTAINER
   The container is the width the request was about.
   ================================================================ */

.sm-section {
    width: 100%;
    padding: 48px 0;
    background:
        radial-gradient(circle at 0% 100%, rgba(8, 103, 213, 0.07), transparent 26%),
        radial-gradient(circle at 100% 0%, rgba(8, 103, 213, 0.05), transparent 26%),
        #F5F8FC;
    font-family: Arial, Helvetica, sans-serif;
}

.sm-container {
    width: 92%;
    max-width: 1380px;
    margin: 0 auto;
    padding: 0;
}


/* ================================================================
   3.  CARDS
   ================================================================ */

.sm-card {
    /* a flex column so the card can be a grid row and hold a fixed
       floor without its content floating in the middle of it */
    display: flex;
    flex-direction: column;

    position: relative;
    background: #FFFFFF;
    border: 1px solid #E4EAF8;
    border-radius: 18px;
    box-shadow: 0 8px 20px rgba(16, 42, 90, .06);
    padding: 30px 32px;
    margin-bottom: 24px;
    transition: box-shadow .2s ease, border-color .2s ease;
}
.sm-card:hover {
    border-color: #C9D8F6;
    box-shadow: 0 12px 28px rgba(16, 42, 90, .10);
}

.sm-card h3 {
    margin: 0 0 14px !important;
    color: #0B1F4D !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 21px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.4px !important;
}

/* a card that only lists links does not need the bottom margin, the
   grid gap is the spacing */
.sm-grid > .sm-card {
    margin-bottom: 0;
}

.sm-card p {
    margin: 0 0 14px !important;
    color: #5B6B85;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 15px !important;
    font-weight: 400;
    line-height: 1.65 !important;
    text-align: left !important;
}
.sm-card p:last-child {
    margin-bottom: 0 !important;
}

.sm-card ul {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
}
.sm-card ul:last-child {
    margin-bottom: 0;
}

.sm-card ul li {
    position: relative;
    margin: 0 0 9px;
    padding-left: 20px;
    color: #3A4A63;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 15px !important;
    font-weight: 400;
    line-height: 1.6 !important;
    text-align: left;
}
.sm-card ul li:last-child {
    margin-bottom: 0;
}
.sm-card ul li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 9px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #0D6EFD;
}

.sm-card a {
    color: #0D6EFD;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: inherit !important;
    font-weight: 600;
    text-decoration: none;
    word-break: break-word;
}
.sm-card a:hover {
    text-decoration: underline;
}


/* ================================================================
   4.  GRID
   Three columns on a desktop, matching the .ls-grid-3 ladder.
   align-items is start, not stretch, so opening one card on a phone
   does not drag its row partners taller with it.
   ================================================================ */

.sm-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

/* THE UNIFORM CARD HEIGHT LIVES HERE, NOT ON THE ROW

   grid-auto-rows was tried first and does not work for this. It sets
   a floor that a row may grow past, so a card whose content is
   taller than the floor made its whole row grow: measured, the
   Governance card pushed its row to 391px while the other two rows
   stayed at 340px, and no Read more ever appeared because nothing
   was ever actually clipped.

   The height therefore sits on the card itself, with overflow hidden.
   An explicit height beats align-items:stretch, so every one of the
   ten cards is exactly --sm-card-h regardless of how much it holds,
   and a card whose content does not fit is genuinely clipped - which
   is what gives the script something to detect and a Read more
   something to reveal.

   The height is a custom property because it is not one number: the
   cards get taller as the column narrows and the labels wrap.
   Measured natural heights, shortest to longest card:

       1440px   191 .. 389px
       1199px   215 .. 417px
        768px   215 .. 417px
        480px   163 .. 365px
        320px   194 .. 388px

   So --sm-card-h is set per tier below: 340px for three columns,
   360px for two, 330px for one. Each sits just under the longest card
   at that tier, which is what makes exactly the longest card -
   Governance & Recognition, nine links - need a Read more.

   When a card is opened it drops back to height:auto so the grid row
   grows to fit the content rather than clipping it. The other two
   cards in that row stretch with it, so a row never goes ragged. */
.sm-grid > .sm-card {
    height: var(--sm-card-h, 340px);
    overflow: hidden;
}

.sm-grid > .sm-card.sm-card-open {
    height: auto;
    overflow: visible;
}

/* the tenth card is on its own row, so it spans the full width rather
   than sitting in a third of the page with nothing beside it */
.sm-card-wide {
    grid-column: 1 / -1;
}


/* ================================================================
   5.  INTRO CARD
   ================================================================ */

.sm-card-intro {
    text-align: center;
    padding: 36px 40px;
    margin-bottom: 24px;
}
.sm-card-intro h2 {
    margin: 0 0 4px !important;
    color: #0B1F4D !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 26px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.6px !important;
}
.sm-card-intro .sm-rule {
    width: 100%;
    max-width: 620px;
    height: 1px;
    margin: 16px auto 24px;
    background: #E4EAF8;
}
.sm-card-intro p {
    max-width: 900px;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}


/* ================================================================
   6.  JUSTIFICATION
   Carried over from legalstatus.css, which measured both methods on
   the live page at four phone widths:

       width   flush left     justify inter-word   justify inter-character
       305     65px spread    36px / 26px gap      34px /  6px gap
       345     99px spread    43px / 19px gap      41px /  6px gap
       399     92px spread    37px / 28px gap      35px /  6px gap
       465     56px spread     0px / 24px gap       0px /  5px gap

   inter-character, not inter-word: inter-word leaves gaps of up to
   28px in a column this narrow, inter-character holds them at 6px.

   .sm-card p carries text-align: left !important at the rule above,
   so this has to out-specify it. It is placed after that rule.
   hyphens was rejected - measured twice as non-functional in the
   browser this was checked in, so it is not declared.
   ================================================================ */

.sm-grid > .sm-card p {
    text-align: justify !important;
    text-justify: inter-character !important;
}


/* ================================================================
   7.  READ MORE

   .sm-card-clamp, .sm-card-more, .sm-card-open and .sm-more are
   added by the script in sitemap.php and are declared nowhere else
   in the project.

   NOT PHONE ONLY ANY MORE

   These rules used to sit inside @media (max-width: 767.98px),
   because clipping a link list on a desktop that has room to show it
   hides real navigation. That is no longer the case: the request is
   for every card to be the same size, and a card that is only
   uniform below 768px is not the same size. So the clamp, the fade
   and the control are unconditional, and the script measures at every
   width.

   The card's height comes from the grid's grid-auto-rows floor, not
   from a height here. .sm-card-clamp only has to stop the content
   escaping that box; the row does the capping.

   The fade is opaque from 52% down, which puts solid white behind the
   whole of the 16px-to-46px control band rather than over its top
   edge.
   ================================================================ */

.sm-card-clamp {
    overflow: hidden;
}

.sm-card-more::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 104px;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, .55) 22%,
        rgba(255, 255, 255, .88) 38%,
        #FFFFFF 52%
    );
    pointer-events: none;
}

/* opened: let the row grow to fit, rather than clipping the card */
.sm-card-clamp.sm-card-open {
    overflow: visible;
    padding-bottom: 52px;
}

.sm-card-open.sm-card-more::after {
    display: none;
}

.sm-more {
    position: absolute;
    left: 32px;
    bottom: 15px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 0;
    border: 0;
    background: transparent;
    color: #0D6EFD;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    cursor: pointer;
}

.sm-more i {
    font-size: 12px;
    line-height: 1;
    transition: transform .18s ease;
}

.sm-card-open .sm-more i {
    transform: rotate(180deg);
}

.sm-more:hover {
    text-decoration: underline;
}

.sm-more:focus-visible {
    outline: 2px solid #0D6EFD;
    outline-offset: 2px;
    border-radius: 4px;
}


/* ================================================================
   8.  RESPONSIVE
   The container ladder is the legal status one, unchanged.
   ================================================================ */

@media (max-width: 1199px) {
    .sm-container {
        width: 94%;
    }
}

@media (max-width: 991px) {
    .sm-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* two columns are wider than three, so the labels wrap less and
       the tallest card is taller: 417px measured against 389px at
       1440px. The floor rises to keep the dead space the same. */
    .sm-section {
        --sm-card-h: 360px;
    }

    .sm-banner-image {
        width: 44%;
    }
}

@media (max-width: 767px) {
    .sm-section {
        padding: 40px 0;

        /* one full-width column: the cards are widest here, so labels
           wrap least and the tallest is 365px. The floor comes down to
           330px, which still clips only that longest card. */
        --sm-card-h: 330px;
    }

    .sm-container {
        width: 90%;
    }

    .sm-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    /* the banner stacks, photo first - the same order contact.php and
       legalstatus.php use on a phone */
    .sm-banner {
        flex-direction: column-reverse;
        min-height: 0;
    }

    .sm-banner-content {
        width: 100%;
        padding: 44px 7% 48px;
        text-align: center;
        align-items: center;
    }

    .sm-banner-image {
        width: 100%;
        min-height: 250px;
    }

    .sm-banner-content h1 {
        font-size: 38px !important;
    }

    .sm-banner-content p {
        text-align: center !important;
    }

    .sm-card {
        padding: 24px 22px;
        border-radius: 16px;
        margin-bottom: 20px;
    }

    .sm-card h3 {
        font-size: 19px !important;
    }

    .sm-card p,
    .sm-card ul li {
        font-size: 14.5px !important;
    }

    .sm-card-intro {
        padding: 28px 22px;
    }

    .sm-card-intro h2 {
        font-size: 22px !important;
    }

    /* the control sits at the card's own padding edge, so it tracks
       the padding instead of being pinned to a fixed 32px */
    .sm-more {
        left: 22px;
        bottom: 13px;
    }
}

@media (max-width: 480px) {
    .sm-container {
        width: 92%;
    }

    .sm-card {
        padding: 20px 18px;
    }

    .sm-card h3 {
        font-size: 18px !important;
    }

    .sm-card p,
    .sm-card ul li {
        font-size: 14px !important;
    }

    .sm-card-intro h2 {
        font-size: 20px !important;
    }

    .sm-banner-content h1 {
        font-size: 32px !important;
    }

    .sm-more {
        left: 18px;
        bottom: 11px;
    }
}