/* Set colour variables based on Bootstrap's pallette */
/* Lighter: x-100; Light: x-200; Normal: x-500; Dark: x-700 */
:root {
    --light-pink: #efadce;
    --pink: #d63384;
    --dark-pink: #801f4f;

    --lighter-red: #f8d7da;
    --light-red: #f1aeb5;
    --red: #dc3545;
    --dark-red: #842029;

    --light-orange: #fecba1;
    --orange: #fd7e14;
    --dark-orange: #984c0c;

    --lighter-yellow: #fff3cd;
    --light-yellow: #ffe69c;
    --yellow: #ffc107;
    --dark-yellow: #997404;

    --lighter-green: #d1e7dd;
    --light-green: #a3cfbb;
    --green: #198754;
    --dark-green: #0f5132;
    
    --light-teal: #a6e9d5;
    --teal: #20c997;
    --dark-teal: #13795b;

    --light-cyan: #9eeaf9;
    --cyan: #0dcaf0;
    --dark-cyan: #087990;

    --lighter-blue: #cfe2ff;
    --light-blue: #9ec5fe;
    --blue: #0d6efd;
    --dark-blue: #084298;

    --light-indigo: #c29ffa;
    --indigo: #6610f2;
    --dark-indigo: #3d0a91;

    --lighter-purple:#e2d9f3;
    --light-purple: #c5b3e6;
    --purple: #6f42c1;
    --dark-purple: #432874;

    --dark: #212529;
    --light-grey: #e9ecef;
    --grey: #adb5bd;
    --dark-grey: #495057;
    --light: #f8f9fa;
}

/* Set site-wide font */

body { font-family: 'Manrope', sans-serif; }


/* Set image width for example hands, i.e. Mahjong hands. Some need to be smaller generally, or to fit on smaller screens. */

.example {
    position: relative;
    display: inline-block;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: thin;
}

.example img {
    width: 6%;
    margin: 0 0.1rem;
    margin-bottom: 0.5rem;
}

@media (max-width: 1200px) {
    .example img {
        width: 15% !important;
    }
}

.smaller img {
    width: 1.5em;
    margin: 0 0.25rem
}


/* Callouts for tips, notes, scoring opportunities, etc */

.callout {
    margin: 1.25rem 0;
}

.callout > p, .callout > div {
    margin-left: 0.5rem;
    margin-bottom: 0;
    padding: 0.5rem;
}

.callout > div > * {
    margin: 0.1rem
}

.tip {
    background-color: var(--lighter-green);
    border-left: 0.25rem solid var(--green);
}

.note {
    background-color: var(--lighter-blue);
    border-left: 0.25rem solid var(--blue);
}

.score {
    background-color: var(--lighter-red);
    border-left: 0.25rem solid var(--red);
}

.rank {
    background-color: var(--lighter-purple);
    border-left: 0.25rem solid var(--purple);
}

.c-example {
    background-color: var(--lighter-yellow);
    border-left: 0.25rem solid var(--yellow);
}


/* Content division is in a  "box" with extra padding on the bottom. Have subtitles, and any specifically bolded elements at font-weight 700. */

.box {
    padding: 1.5rem 2rem 0.5rem 2rem !important;
    margin-bottom: 0.25rem !important;
}

.box h2:not(:first-child) {
    margin-top: 3rem;
}

.box h4 {
    margin-top: 2rem;
}

.box h2, b {
    font-weight: 700;
}

p.indent {
    margin-left: 1.5rem;
}


/* Have a fade-out style to denote overflow on the x-axis. Used for Mahjong hands. */

.fadex {
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 1) 2%, rgba(0, 0, 0, 1) 97%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 1) 2%, rgba(0, 0, 0, 1) 97%, transparent 100%);
}


/* Denote a Mahjong hand is a meld. Text is vertical to save horizontal space */

.meld {
    writing-mode: vertical-lr;
    text-orientation: upright;
}


/* Add gaps between Mahjong sets within hands, normal and small */

.gap {
    padding: 0 0.5rem;
}

.gap-sm {
    padding: 0 0.25rem
}


/* Set some table rows to have no border; "connects" two rows together. Used for example Mahjong hands. */

.noborder td, .noborder th {
    border: none;
}


/* Background and content colours as better-named classes. */

.bg-light-pink { background-color: var(--light-pink) !important; }
.bg-pink { background-color: var(--pink) !important; }
.bg-dark-pink { background-color: var(--dark-pink) !important; }

.bg-light-red { background-color: var(--light-red) !important; }
.bg-red { background-color: var(--red) !important; }
.bg-dark-red { background-color: var(--dark-red) !important; }

.bg-light-orange { background-color: var(--light-orange) !important; }
.bg-orange { background-color: var(--orange) !important; }
.bg-dark-orange { background-color: var(--dark-orange) !important; }

.bg-light-yellow { background-color: var(--light-yellow) !important; }
.bg-yellow { background-color: var(--yellow) !important; }
.bg-dark-yellow { background-color: var(--dark-yellow) !important; }

.bg-light-green { background-color: var(--light-green) !important; }
.bg-green { background-color: var(--green) !important; }
.bg-dark-green { background-color: var(--dark-green) !important; }

.bg-light-teal { background-color: var(--light-teal) !important; }
.bg-teal { background-color: var(--teal) !important; }
.bg-dark-teal { background-color: var(--dark-teal) !important; }

.bg-light-cyan { background-color: var(--light-cyan) !important; }
.bg-cyan { background-color: var(--cyan) !important; }
.bg-dark-cyan { background-color: var(--dark-cyan) !important; }

.bg-light-blue { background-color: var(--light-blue) !important; }
.bg-blue { background-color: var(--blue) !important; }
.bg-dark-blue { background-color: var(--dark-blue) !important; }

.bg-light-indigo { background-color: var(--light-indigo) !important; }
.bg-indigo { background-color: var(--indigo) !important; }
.bg-dark-indigo { background-color: var(--dark-indigo) !important; }

.bg-light-purple { background-color: var(--light-purple) !important; }
.bg-purple { background-color: var(--purple) !important; }
.bg-dark-purple { background-color: var(--dark-purple) !important; }

.bg-light-grey { background-color: var(--light-grey) !important; }
.bg-grey { background-color: var(--grey) !important; }
.bg-dark-grey { background-color: var(--dark-grey) !important; }

.bg-dark { background-color: var(--dark) !important; }

.bg-light { background-color: var(--light) !important; }

/* Return button styling, normal and hover */

.retbut {
    position: absolute;
    color: var(--dark-grey) !important;
}

.retbut:hover {
    color: var(--dark) !important;
}


/* Horizontal rules for categorising games on the main menu, requires special styling because of the text. */

.hr {
    color: var(--dark-grey);
    padding-left: 3em;
    font-weight: bold;
}

p.hr {
    position: relative;
    z-index: 1;
}

p.hr:before {
    border-top: 1px solid var(--dark);
    opacity: 0.25;
    content: "";
    margin: 0 auto;
    position: absolute;
    top: 50%; left: 0; right: 0; bottom: 0;
    width: 95%;
    z-index: -1;
}

p.hr span {
    background: var(--light); 
    padding: 0 15px; 
}


/* Don't underline links, unless on hover. Colour the links on the main menu normally (everything else is the default blue) */

a {
    text-decoration: none;
}

.a-reg-colour {
    color: var(--dark) !important;
}

a:hover #hover {
    text-decoration: underline;
}


/* Apply nice boxy shadow */

.shaadow {
    box-shadow: -10px 10px #00000040;
}


/* Make some text red, used for hearts and diamonds unicode characters, nice to have. */

.r {
    color: var(--red)
}


/* Disable the ligature Manrope applies to certain combinations of letters, like '<3' or '...ffi...' */
.nolig {
    font-variant-ligatures: none;
}

.w-75 {
    width: 75% !important;
}