/****************************************************************************************/
/*   HEALTHTAC OVERRIDES                                                                */
/*   LOADS AFTER ../CSS/DEFAULT.CSS — SAME ID SPECIFICITY, SO SOURCE ORDER WINS.        */
/****************************************************************************************/

/*
    DARK STRIP BELOW THE CONTENT (LIGHT MODE ONLY)
    NIGHT_AND_DAY.JS PAINTS <HTML> THE DARK NAVY #022440 IN *BOTH* MODES AND ONLY
    TURNS <BODY> WHITE IN LIGHT MODE.  DEFAULT.CSS ALSO SETS BODY{POSITION:ABSOLUTE},
    SO THE BODY BOX WRAPS ITS CONTENT EXACTLY AND ANYTHING IT DOES NOT COVER SHOWS
    THE NAVY HTML BACKGROUND THROUGH.  IN DARK MODE BODY IS #022440 TOO, SO THE SEAM
    IS INVISIBLE — WHICH IS WHY THIS ONLY EVER SHOWED UP IN LIGHT MODE.

    STRETCH THE BODY TO COVER THE VIEWPORT AND LEAVE SLACK AT THE FOOT FOR THE
    POSITION:RELATIVE / TOP: NPX OFFSETS USED THROUGHOUT THE PAGE — TOP SHIFTS AN
    ELEMENT VISUALLY WITHOUT ADDING TO ITS PARENT'S HEIGHT, SO CONTENT CAN HANG
    PAST THE PAINTED BODY BOX.  THIS AVOIDS FIGHTING THE INLINE STYLES THE SCRIPT
    WRITES ON <HTML>, WHICH WOULD OTHERWISE NEED !IMPORTANT AND BREAK DARK MODE.
*/
body {
    min-height: 100vh;
    box-sizing: border-box;
    padding-bottom: 40px;
}

/*
    DAY/NIGHT TAP TARGET
    DEFAULT.CSS GIVES #DAYMODEIMAGE ITS OWN POSITION:FIXED, WHICH TAKES IT OUT OF
    #DAYMODE'S FLOW AND COLLAPSES THE CONTAINER TO ZERO SIZE.  THE CLICK HANDLER IS
    BOUND TO #DAYMODE, SO THE ONLY TAPPABLE AREA ENDS UP BEING THE 25PX IMAGE.
    GIVE THE CONTAINER A REAL 48X48 BOX AND PUT THE IMAGE BACK IN FLOW, CENTERED.
*/
#dayMode {
    position: fixed;
    top: 0px;
    right: 0px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    cursor: pointer;
}

/*
    CENTERED VIA THE FLEX PARENT — NOT TRANSFORM — BECAUSE NIGHT_AND_DAY.JS SETS
    TRANSFORM: ROTATE(...) ON THIS ELEMENT WHEN TOGGLING, WHICH WOULD WIPE OUT ANY
    TRANSLATE() USED FOR CENTERING AND MAKE THE ICON JUMP.
*/
#dayModeImage {
    position: static;
    top: auto;
    right: auto;
    width: 25px;
}

/*
    HAMBURGER TAP TARGET
    MENUBUTTON.CSS SETS #MENUBUTTONCHECK{DISPLAY:NONE}, SO THE ONLY CLICKABLE
    ELEMENT IS THE <LABEL> #MENUBUTTONCONTAINER — AND THAT IS ONLY 24X24, WHICH IS
    WHY TAPS NEAR THE EDGE OF THE ICON MISS.

    THE HIT AREA IS GROWN WITH A TRANSPARENT ::BEFORE RATHER THAN BY RESIZING THE
    LABEL ITSELF.  #MENUTOP / #MENUMIDDLE / #MENUBOTTOM ARE POSITION:FIXED WITH
    LEFT:AUTO, SO THEIR HORIZONTAL PLACEMENT COMES FROM THEIR STATIC POSITION
    INSIDE THE LABEL — MOVING OR RESIZING THE LABEL WOULD DRAG THE BARS WITH IT.
    AN ABSOLUTELY POSITIONED PSEUDO-ELEMENT IS OUT OF FLOW, SO THE BARS DO NOT
    MOVE, AND A CLICK ON IT STILL COUNTS AS A CLICK ON THE LABEL.
*/
#menuButtonContainer::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 48px;
    height: 48px;
    transform: translate(-50%, -50%);
}

/*
    FOOTER LINK BUTTONS
    DEFAULT.CSS SIZES THE PADDING IN VW — ON A 375PX PHONE THAT IS 2.2PX, SO THEY
    RENDER CRAMPED.  FIXED PX INSTEAD.  THE 10PX RADIUS IS DEFAULT.CSS'S OWN NOW.
    DISPLAY:INLINE-BLOCK IS REQUIRED — <A> IS INLINE BY DEFAULT, SO VERTICAL
    PADDING WOULD NOT EXPAND THE LINE BOX AND THE BUTTON WOULD BLEED INTO
    WHATEVER SITS ABOVE AND BELOW IT.
*/
.link_button,
.link_button_toggle {
    display: inline-block;
    padding: 11px 22px;
    line-height: 1.2;
}

/*
    APP STORE BADGE + GET SUPPORT ROW
    CENTERS THE BADGE AND THE BUTTON VERTICALLY ON THE SAME LINE.
    TARGETED BY THE BADGE IMAGE SO IT HOLDS EVEN IF THE INLINE STYLE IN INDEX.HTML IS LOST.
*/
div:has(> a > img[src$="apple-store-light.png"]) {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

div:has(> a > img[src$="apple-store-light.png"]) > a:has(> img) {
    display: flex;
}

/*
    GET SUPPORT BUTTON MATCHES THE BADGE HEIGHT.
    BADGE IS 707X216 SHOWN AT 125PX WIDE = 38PX TALL.  BORDER-BOX SO THE 1PX BORDER IS INCLUDED.
*/
div:has(> a > img[src$="apple-store-light.png"]) > .link_button {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    height: 38px;
    padding: 0px 22px;
}