/* HITORI-YO MAIN PAGE CSS
 * CORE VARIABLES FOR COLOUR SETTING TO REFERENCE INSTEAD OF HEX FOR FUTURE COLOUR SCHEMES / UPDATES*/

:root {
    --HITORI-YO-CORE-BACKGROUND-COLOUR: #faf0e1; /* 250 240 225 */
    --HITORI-YO-LIGHT-BACKGROUND-COLOUR: #fffcf9; /* 255 252 249 */

    --HITORI-YO-EXTRAINFO-TEXT-GRAY-COLOUR: #645f5a; /* 100 95 90 */
    --HITORI-YO-CORE-BODY-TEXT-BLACK-COLOUR: #141312; /* 20 19 18 */

    --HITORI-YO-GENERIC-BLUE-LINK-COLOUR: #0055ff; /* 0 85 225 */
    --HITORI-YO-HOVER-ORANGE-COLOUR: #ff8000; /* 255 128 0 */

    --HITORI-YO-RULER-BORDER-LIGHTBROWN-COLOUR: #e6d7c8; /* 230 215 200 */

    --HITORI-YO-FOOTER-BROWN-COLOUR: #644b32; /* 100 75 50 */
    --HITORI-YO-FOOTER-LIGHTER-BROWN-COLOUR: #967d64; /* 150 125 100 */

}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--HITORI-YO-CORE-BACKGROUND-COLOUR);
    color: var(--HITORI-YO-CORE-BODY-TEXT-BLACK-COLOUR);
    font-family: Roboto, sans-serif; /* NEED ANOTHER ALT CHOICE, SOME USERS WON'T HAVE ROBOTO */
    font-size: 16px;
    line-height: 1.5;
}

a {
    color: var(--HITORI-YO-GENERIC-BLUE-LINK-COLOUR);
    text-decoration: none;
}

a:hover {
    color: var(--HITORI-YO-HOVER-ORANGE-COLOUR);
    text-decoration: underline;
}

.HITORI-YO-PAGENOTFOUND {

    padding-top: 16px;
    min-height: 640px;
    font-size: 32px;
    font-weight: 600;

}

/* CORE PAGE VIEW NOT SQUISHED / SQUISHED TINY AMOUNT BEFORE BREAKPOINTS */

.HITORI-YO-CORE-CONTAINER {
    width: min(960px, calc(100% - 64px));
    margin: 0 auto;
}

/* VERY TOP OF PAGE HEADER */

.HITORI-YO-TOPOFPAGE-HEADER {
    height: 64px;
    background: var(--HITORI-YO-CORE-BACKGROUND-COLOUR);
}

.HITORI-YO-HEADER-INNER {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.HITORI-YO-TOPMYNAME-CONTAINER {
    display: flex;
    align-items: center;
    gap: 15px;
    color: var(--HITORI-YO-CORE-BODY-TEXT-BLACK-COLOUR);
}

.HITORI-YO-TOPMYNAME-CONTAINER:hover {
    color: var(--HITORI-YO-HOVER-ORANGE-COLOUR);
    text-decoration: none;
}

.HITORI-YO-TOPMYNAME {
    font-family: Roboto, sans-serif; /* NEED ANOTHER ALT CHOICE, SOME USERS WON'T HAVE ROBOTO */
    font-size: 32px;
    letter-spacing: 2px;
}

/* THIS TOPBANNER CSS LOOKS TERRIBLE BUT IT FINALLY WORKS WITH ZERO ISSUES SO FUTURE ME PLEASE JUST LEAVE IT ALONE AND IGNORE HOW STRANGE IT LOOKS SPREAD OUT LIKE THIS (FOR NEW PAGES COPY-PASTE CURRENT INDEX PAGE HTML STRUCTURE OF DISPLAYING THIS 1:1 AND JUST MOVE ON IMMEDIATELY TO AVOID FUTURE HASSLE)*/

.HITORI-YO-TOPBANNER {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 8px 16px;
    background: var(--HITORI-YO-LIGHT-BACKGROUND-COLOUR);
    color: var(--HITORI-YO-CORE-BODY-TEXT-BLACK-COLOUR);
    border-radius: 0px; /* CURVED EDGES ON MAIN CARDS, NOT BANNER */
    box-shadow: 4px 4px 4px var(--HITORI-YO-RULER-BORDER-LIGHTBROWN-COLOUR);
}

.HITORI-YO-TOPBANNER small,
.HITORI-YO-TOPBANNER strong {
    display: block;
}

.HITORI-YO-TOPBANNER small {
    font-size: 12px;
}

.HITORI-YO-TOPBANNER strong {
    margin-top: 2px;
    color: var(--HITORI-YO-CORE-BODY-TEXT-BLACK-COLOUR);
    font-size: 12px;
}

/* STICKY NAVIGATION BAR */

.HITORI-YO-STICKYNAVBAR {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--HITORI-YO-LIGHT-BACKGROUND-COLOUR);
    border-bottom: 1px solid var(--HITORI-YO-RULER-BORDER-LIGHTBROWN-COLOUR);
    border-top: 1px solid var(--HITORI-YO-RULER-BORDER-LIGHTBROWN-COLOUR);
}

.HITORI-YO-STICKYNAVBAR-INNER {
    display: flex;
    align-items: center;
    min-height: 48px;
    gap: 15px;
}

.HITORI-YO-STICKYNAVBAR-INNER a {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    min-height: 48px;
    color: var(--HITORI-YO-CORE-BODY-TEXT-BLACK-COLOUR);
    font-size: 12px;
    font-weight: 600;
}

.HITORI-YO-STICKYNAVBAR-INNER a:hover {
    color: var(--HITORI-YO-HOVER-ORANGE-COLOUR);
    text-decoration: none;
}

/* MAIN CONTENT LAYOUT */

.HITORI-YO-MAINCONTENT-GRID {
    display: grid;
    grid-template-columns: minmax(240px, 720px) minmax(0px, 240px);
    gap: 32px; /* SAME AS PADDING AROUND MAIN, 16PX HALF LOOKS BAD */
    align-items: start;
    padding-top: 15px;
    padding-bottom: 15px;
    min-height: 640px; /* PUSHES FOOTER MOSTLY ENOUGH */
}

.HITORI-YO-SECTION {
    margin-bottom: 30px;
}

.HITORI-YO-SECTION-TITLETEXT {
    margin: 0 15px 8px;
    font-size: 16px;
    font-weight: 400;
}

.HITORI-YO-SECTION-DESCRIPTIONTEXT {
    margin: 0 10px 8px;
    font-size: 12px;
    line-height: 1.5;
}

/* ALL CARD CSS */

.HITORI-YO-CARD-CORE {
    display: flex;
    align-items: center;
    gap: 15px;
    min-width: 0;
    min-height: 64px;
    padding: 16px;
    background: var(--HITORI-YO-LIGHT-BACKGROUND-COLOUR);
    border-radius: 8px; /* CURVED EDGES ON MAIN CARDS, NOT BANNER */
    box-shadow: 4px 4px 4px var(--HITORI-YO-RULER-BORDER-LIGHTBROWN-COLOUR);
}

.HITORI-YO-CARD-COPY {
    flex: 1;
    min-width: 0;
}

.HITORI-YO-CARD-TITLETEXT {
    display: inline-block;
    margin-bottom: 4px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
}

.HITORI-YO-CARD-CORE p {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
}

.HITORI-YO-EXTRA-INFO {
    color: var(--HITORI-YO-EXTRAINFO-TEXT-GRAY-COLOUR);
    font-size: 12px;
    line-height: 1.5;
}

.HITORI-YO-LATEST-INSIDE-CARD {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 0 0 240px;
    width: 240px;
    min-width: 0;
    margin-left: auto;
    font-size: 12px;
}

.HITORI-YO-LATEST-INSIDE-CARD .HITORI-YO-EXTRA-INFO {
    margin-top: 0px;
}

.HITORI-YO-CARD-GRID {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

/* RIGHT SIDEBAR SPLIT */

.HITORI-YO-RIGHTSIDEBAR {
    min-width: 0;
    padding-top: 4px; /* BAD HACKY FIX, THINK OF A BETTER WAY TO DO THIS WITHOUT BLANK DIV OR THIS PADDING, WANT TO MATCH FIRST LEFT MAIN HEADER CLEANLY */
}

.HITORI-YO-SIDEBAR-MAINSECTION {
    margin-bottom: 32px;
}

.HITORI-YO-SIDEBAR-TITLETEXT {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 400;
}

.HITORI-YO-STATS {
    padding-top: 0px;
}

.HITORI-YO-STATS div {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 4px;
    color: var(--HITORI-YO-EXTRAINFO-TEXT-GRAY-COLOUR);
    font-size: 12px;
}

.HITORI-YO-STATS strong {
    color: var(--HITORI-YO-CORE-BODY-TEXT-BLACK-COLOUR);
    font-weight: 400;
}

.HITORI-YO-RULER-LINE {
    height: 1px;
    margin-bottom: 8px;
    background: var(--HITORI-YO-RULER-BORDER-LIGHTBROWN-COLOUR);
}

.HITORI-YO-UPDATES {
    margin-bottom: 24px;
    font-size: 12px;
}

.HITORI-YO-UPDATE-TITLETEXT {
    display: block;
    margin-bottom: 0px;
    font-size: 16px;
    line-height: 1.5;
}

.HITORI-YO-UPDATES .HITORI-YO-EXTRA-INFO {
    font-size: 12px;
}

/* FOOTER AT BOTTOM OF PAGE */

.HITORI-YO-MAINFOOTER {
    min-height: 120px;
    padding: 16px 0 0;
    background: var(--HITORI-YO-FOOTER-BROWN-COLOUR);
    color: var(--HITORI-YO-LIGHT-BACKGROUND-COLOUR);
}

.HITORI-YO-FINALHORIZONTALBOXES {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1fr;
    align-items: center;
    gap: 24px;
    min-height: 80px;
    padding: 24px 24px;
    background: var(--HITORI-YO-FOOTER-LIGHTER-BROWN-COLOUR);
    border-radius: 16px;
    text-align: center;
}

.HITORI-YO-FINALBOX-MESSAGE {
    color: var(--HITORI-YO-LIGHT-BACKGROUND-COLOUR);
    font-size: 14px;
    line-height: 1.5;
}

.HITORI-YO-BOTOFPAGE {
    margin-top: 16px;
    padding: 12px 0;
    border-top: 1px solid var(--HITORI-YO-FOOTER-LIGHTER-BROWN-COLOUR);
    color: var(--HITORI-YO-LIGHT-BACKGROUND-COLOUR);
    font-size: 12px;
    text-align: center;
}



/* SQUISH VIEW CHANGES / SOME HORIZONTAL SQUISH ON DESKTOP, MAYBE TABLET */

@media (max-width: 800px) {
    .HITORI-YO-CORE-CONTAINER {
        width: calc(100% - 48px); /* DROP 16PX FROM 64 MAIN */
    }

    .HITORI-YO-MAINCONTENT-GRID {
        grid-template-columns: 1fr;
    }

    .HITORI-YO-RIGHTSIDEBAR {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 15px;
    }

    .HITORI-YO-SIDEBAR-MAINSECTION {
        margin-bottom: 24px;
    }

    .HITORI-YO-FINALHORIZONTALBOXES {
        grid-template-columns: 1fr 1fr 1fr; /* SET TO JUST 1fr TO STACK ATOP LIKE ON MOBILE VIEW IF WE CAN'T FIT IT (OR DOUBLE FOR 2 COLUMNS THEN LAST UNDERNEATH), THIS IS KEEPING 3 COLUMNS ON THIS VIEW FOR NOW SINCE IT FITS OKAY */
    }

    .HITORI-YO-FINALBOX-MESSAGE {
        grid-column: auto;
        grid-row: auto;
    }
}



/* SQUISH VIEW CHANGES 2 / MOBILE VIEW PROBABLY / MAX HORIZONTAL SQUISH ON DESKTOP */

@media (max-width: 600px) {
    .HITORI-YO-CORE-CONTAINER {
        width: calc(100% - 32px); /* DROP 32PX FROM 64 MAIN */
    }

    .HITORI-YO-TOPOFPAGE-HEADER {
        height: 48px; /* DROP 16PX FROM 64 MAIN, NOT DROPPING AT ALL ON 800PX SQUISH */
    }

    .HITORI-YO-HEADER-INNER {
        gap: 8px;
    }

    .HITORI-YO-TOPMYNAME-CONTAINER {
        gap: 8px;
    }

    .HITORI-YO-TOPMYNAME {
        font-size: 24px;
        letter-spacing: 1px;
    }

    .HITORI-YO-TOPBANNER {
        gap: 8px;
        padding: 8px;
    }

    .HITORI-YO-TOPBANNER small {
        display: none;
    }

    .HITORI-YO-TOPBANNER strong {
        font-size: 12px;
    }

    .HITORI-YO-STICKYNAVBAR-INNER {
        gap: 12px;
    }

    .HITORI-YO-MAINCONTENT-GRID {
        padding-top: 12px;
        padding-bottom: 24px;
    }

    .HITORI-YO-CARD-CORE {
        gap: 8px;
        padding: 8px;
    }

    .HITORI-YO-SQUISH-THIS-DOWN-TO-STACK-ON-MOBILE {
        flex-wrap: wrap;
    }

    .HITORI-YO-LATEST-INSIDE-CARD {
        flex: 1 1 100%;
        width: 100%;
        margin-left: 8px;
    }

    .HITORI-YO-CARD-GRID {
        grid-template-columns: 1fr;
    }

    .HITORI-YO-RIGHTSIDEBAR {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .HITORI-YO-SIDEBAR-MAINSECTION {
        margin-bottom: 16px;
    }

    .HITORI-YO-MAINFOOTER {
        padding-top: 16px;
    }

    .HITORI-YO-FINALHORIZONTALBOXES {
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 24px 12px;
    }

    .HITORI-YO-FINALBOX-MESSAGE {
        grid-column: auto;
        grid-row: auto;
    }

    .HITORI-YO-BOTOFPAGE {
        padding-top: 12px;
    }
}