/* 
 * Copyright (c) 2025. Zahra A. S.
 * All rights reserved. 
 * This design is the intellectual property of Zahra A. S. 
 * Unauthorized use, reproduction, or distribution of this design is prohibited. 
 * For permissions, contact 182934048+zhrsh@users.noreply.github.com
 */

:root {
    color-scheme: light dark;
    /* colors (LIGHT MODE) */
    --main-bg: #eae9ed;
    --acc-bg1: #faf9f3;
    --main-fg: #2d2d2d;
    --acc-fg1: #7c5ba7;
    --acc-fg1-alpha: rgba(124, 91, 167, 0.5); /* rgb matches the above */
    --acc-fg2: #4e2e79;
    /* prismjs syntax highlighting */
    --prism-comment: #777;
    --prism-boolean: #4c65b5;
    --prism-keyword: #3d00b7;
    --prism-string: var(--acc-fg1);
    --prism-atrule: #7385a5;
    --prism-regex: #c762e8;
    --prism-markup: #885cac;
    /* sizes */
    --general-padding: 30px;
    --sides-padding: 10vw;
    --header-height: 90px;
    --content-width: 100%;
    --text-padding: 20px;
    --border-radius: 0.3em;
    /* fonts */
    --garamond-swsh: 'EB-Garamond', cursive, -apple-system-ui-serif, ui-serif, 'Times New Roman', Times, serif;
    --garamond-reg: 'EB-Garamond', -apple-system-ui-serif, ui-serif, 'Times New Roman', Times, serif;
    --mono: ui-monospace, 'IBMPlexMono', 'SFMono-Regular', 'SF Mono', 'Menlo', 'Consolas', 'Liberation Mono', monospace;
    /* misc */
    --box-shadow: 0 0 10px 3px rgb(0, 0, 0, 0.07);
    --code-block-shadow: inset 0 0 10px 3px rgba(0, 0, 0, 0.07);
}

[data-theme="dark"] {
    color-scheme: dark;
    /* colors (DARK MODE) */
    --main-bg: #141414;
    --acc-bg1: #1c1c1c;
    --main-fg: #dfe1e2;
    --acc-fg1: #cfa250;
    --acc-fg1-alpha: rgba(207, 162, 80, 0.5); /* rgb matches the above */
    --acc-fg2: #bc7a00;
    /* prismjs syntax highlighting */
    --prism-comment: #777;
    --prism-boolean: #909e6a;
    --prism-keyword: #f9ed99;
    --prism-string: var(--acc-fg1);
    --prism-atrule: #7385a5;
    --prism-regex: #e8c062;
    --prism-markup: #ac885c;
    /* misc */
    --box-shadow: 0 0 10px 3px rgb(13, 13, 13, 0.5);
    --code-block-shadow: inset 0 0 10px 3px rgba(13, 13, 13, 0.7);
}



/* ===========================
 * FONTS
 * =========================== */

/* EB Garamond: normal */
@font-face { 
    font-family: 'EB-Garamond';
    src: url('../fonts/EBGaramond-Regular.woff2') format('woff2'), 
        url('../fonts/ebgaramond-variablefont_wght.woff') format('woff'); /*fallback woff format*/
    font-weight: 400; /* range of weights */
    font-style: normal;
}
@font-face {
    font-family: 'EB-Garamond';
    src: url('../fonts/EBGaramond-Medium.woff2') format('woff2');
    font-weight: 500; /* medium */
    font-style: normal;
}
@font-face {
    font-family: 'EB-Garamond';
    src: url('../fonts/EBGaramond-SemiBold.woff2') format('woff2');
    font-weight: 600; /* semiBold */
    font-style: normal;
}
/* EB Garamond: italic */
@font-face {
    font-family: 'EB-Garamond';
    src: url('../fonts/EBGaramond-Italic.woff2') format('woff2'), 
        url('../fonts/ebgaramond-italic-variablefont_wght.woff') format('woff'); /*fallback woff format*/
    font-weight: 400; /* regular italic */
    font-style: italic; 
}
@font-face {
    font-family: 'EB-Garamond';
    src: url('../fonts/EBGaramond-MediumItalic.woff2') format('woff2');
    font-weight: 500; /* medium Italic */
    font-style: italic;
}
@font-face {
    font-family: 'EB-Garamond';
    src: url('../fonts/EBGaramond-SemiBoldItalic.woff2') format('woff2');
    font-weight: 600; /* semibold Italic */
    font-style: italic;
}

/* IBMPlexMono */
@font-face { 
    font-family: 'IBMPlexMono';
    src: url('../fonts/IBMPlexMono-Regular.woff2') format('woff2'),
        url('../fonts/IBMPlexMono-Regular.woff') format('woff');
    font-weight: 400; /* range of weights */
    font-style: normal;
}



/* ===========================
 * TYPE SELECTORS
 * =========================== */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    transition: color 0.5s ease, background-color 0.5s ease, box-shadow 0.5s ease, border 0.5s ease;
}

.no-transition * {
    transition: none !important;
}

.no-transition {
    transition: none !important;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-height) + 10px);
    height: 100%;
}

body {
    font-family: var(--garamond-reg);
    background-color: var(--main-bg);
    color: var(--main-fg);
    font-size: 20px;
}

h1 {
    font-size: 36px;
}

a {
    color: var(--acc-fg1);
    transition: color 0.5s ease, transform 0.5s ease;
    text-decoration: none;
}
a:hover {
    color: var(--acc-fg2);
}

li {
    margin-left: 1em;
    padding-left: 0.5em;
}

pre {
    background-color: var(--main-bg);
    border-radius: var(--border-radius);
    padding: 0.5em;
    margin-bottom: var(--text-padding);
    box-shadow: var(--code-block-shadow);
}

code {
    font-family: var(--mono);
    font-size: 16px;
    color: var(--main-fg);
    padding: 0.1em;
    background-color: var(--main-bg);
    border-radius: var(--border-radius);
}

blockquote {
    border-left: var(--acc-fg1) 0.2rem solid;
    color: color-mix(in srgb,var(--main-fg), rgba(128,128,128));
    margin-bottom: var(--general-padding);
    padding: 0.5rem;
    padding-left: 1rem;
    position: relative;
}

blockquote.quote-filled {
    background-color: var(--main-bg);
}

blockquote .quote-author::before {
    content: '–';
    position: absolute;
    margin-left: -1em;
}

blockquote .quote-author {
    color: var(--main-fg);
    font-weight: 700;
    text-align: end;
    padding-top: 0.5em;
    padding-right: 1em;
}

/* user highlight selection */
::selection {
    background-color: var(--acc-fg1-alpha);
    color: var(--main-fg);
}
/* for firefox */
::-moz-selection {
    background-color: var(--acc-fg1-alpha); 
    color: var(--main-fg);
}

/* fix safari delay */
/* still don't know how to fix the header-caption */
.main-body strong,
.main-body i,
.main-body b,
.header div p#header-caption {
    transition: none !important;
}



/* ===========================
 * GENERAL CLASSES 
 * =========================== */

.heading-border {
    border-bottom: var(--main-fg) 1.3px solid;
    padding-bottom: 3px !important;
    margin-bottom: var(--text-padding);
}

.readme-bullets {
    color: var(--acc-fg1) !important;
    margin-top: 1.5em;
    padding-left: 1.5em;
}
.readme-bullets::before {
    content: '☞';
    margin-left: -1.5em;
    font-size: 1em;
    position: absolute; 
}

.theme-color {
    color: var(--acc-fg1) !important;
}

/* EB Garamond font stylistic sets */
.swash {
    font-family: var(--garamond-swsh);
    font-style: italic;
    font-feature-settings: 'swsh' 1; /* EB Garamond swash */
    font-weight: 400;
}

.ornament {
    font-family: var(--garamond-swsh);
}
.ornament::before {
    content: '☙';
    padding-right: 0.3em;
}
.ornament::after {
    content: '❧';
    padding-left: 0.3em;
}

.small-capitals {
    font-family: var(--garamond-swsh);
    font-feature-settings: 'smcp' 1; /* EB Garamond small capitals */
    font-variant-alternates: 'smcp';/* EB Garamond small capitals */
}

.finger-bullets {
    list-style-type: none;
    padding: 0px;
}
.finger-bullets li {
    position: relative;
    padding-left: 1.5em;
}
.finger-bullets li::before {
    content: '☞';
    position: absolute; 
    padding-top: 0.15em;
    font-size: 0.8em;
    left: 0;
}

/* special (for readme) */
.ornament.heading-border {
    margin-top: calc(var(--general-padding) * 1.5);
}

/* no weight override */
.nowght {
    font-weight: 400 !important;
}



/* ===========================
 * HEADER
 * =========================== */

/* container: header (general) */
.header {
    position: fixed;
    display: flex;
    z-index: 1000;
    top: 0;
    left: 0;
    right: 0;
    justify-content: center; /* center horizontally */
    align-items: center; /* center vertically */
    gap: calc(var(--general-padding) * 2);
    background-color: var(--acc-bg1);
    height: var(--header-height);
    width: 100vw;
    box-shadow: var(--box-shadow);
    color: var(--main-fg);
}
/* contents */
.header h1 {
    transition: transform 0.5s ease;
}
.header h1:hover {
    transform: scale(1.05);
}
.header p {
    font-size: 14px;
    padding-left: 0.2em;
    margin-top: -0.3em;
}
.header .header-subtray {
    display: flex;
    gap: clamp(1px, 2.5vw, 50px);
}
.header a {
    color: var(--main-fg);
}
.header a:hover {
    color: var(--acc-fg1);
    transform: scale(1.05);
}

.header button {
    margin-top: 0.5em;
    cursor: pointer;
    color: var(--main-fg);
    transition: transform 0.5s ease;
    background: none;     
    border: none;         
    padding: 0;           
    font: inherit;        
    text-align: inherit;  
    outline: none;        
    display: inline;      
}

.header button:hover {
    color: var(--acc-fg1);
    transform: scale(1.1);
}

/* keyboard accessibility */
.header button:focus-visible {
    outline: 2px solid red;
    outline-offset: 2px;
}

/* hiden menu icon (for mobile) */
#menu-icon {
    display: none;
}



/* ===========================
 * BODY
 * =========================== */

/* optional hidden semantic HTML element for page author */
.none {
    display: none;
}

/* container: main-body */
.main-body {
    height: 100%;
    padding-top: calc(var(--header-height) + var(--general-padding));
    padding-right: var(--sides-padding);
    padding-left: var(--sides-padding);
    padding-bottom: var(--general-padding);
    display: flex;
    gap: var(--general-padding);
}
/* contents */
.main-body h1,
.main-body h2,
.main-body h3,
.main-body h4,
.main-body h5,
.main-body p,
.main-body li,
.main-body ol,
.main-body ul,
.main-body figure {
    padding-bottom: var(--text-padding);
    color: var(--main-fg);
}
/* for images */
.main-body img {
    border-radius: var(--border-radius);
    margin-bottom: var(--text-padding);
    box-shadow: var(--box-shadow);
    height: auto;
    width: 100%;
}
/* optional image container for caption */
.main-body figure {
    font-size: 1rem;
    font-style: italic;
    text-align: center;
}
.main-body figure figcaption {
    color: color-mix(in srgb, var(--main-fg), rgb(128, 128, 128));
    padding-top: 0.3rem;
}
.main-body figure img {
    margin-bottom: 0px;
}

/* container: content && side-content */
.content,
.side-content {
    padding: var(--general-padding);
    background-color: var(--acc-bg1);
    box-shadow: var(--box-shadow);
}
/* contents */
.content h1 {
    text-align: center;
    font-weight: 600;
}
.content li {
    padding-bottom: 8px;
}
.content a {
    text-decoration: underline;
}
.content {
    width: 100%;
}

.side-content {
    width: calc(var(--content-width) / 3);
}

/* for ToC */
.side-content .sticky {
    position: sticky;
    top: calc(var(--header-height) + var(--general-padding)); /* offset below the header */
    height: calc(100vh - var(--header-height));
    overflow: auto;
}

.sticky ol,
.sticky li {
    padding-left: 0px !important;
}

.sticky ol {
    list-style-type: none;
    font-size: 1.1rem;
}
.sticky li {
    padding-bottom: 0.5rem;
}
/* indented */
.sticky ol li ol {
    padding: 0px;
    padding-top: 0.5rem;
    list-style-type: none;
}
.sticky ol li ol a {
    color: color-mix(in srgb, var(--acc-fg1), var(--main-bg) 28%);
}
.sticky ol li ol a:hover {
    color: color-mix(in srgb, var(--acc-fg2), var(--main-bg) 20%);
}



/* ===========================
 * FOOTER
 * =========================== */
.footer {
    padding: var(--general-padding);
    padding-top: 0px;
}

.footer p {
    text-align: center;
}



/* ===========================
 * MOBILE MENU
 * =========================== */

#mobile-menu {
    z-index: 999;
    display: none; /* disallow menu to be visible in desktop/tablet viewport */
    flex-direction: column;
    justify-content: center; /* center horizontally */
    align-items: center; /* center vertically */
    position: fixed;
    background-color: var(--acc-bg1);
    top: var(--header-height);
    left: 0;
    width: 100vw;
    transition: color 0.5s ease, background-color 0.5s ease;
    text-align: center;
    padding: var(--general-padding);
}
#mobile-menu .caption {
    font-size: 0.8em;
    padding-bottom: 2em;
}
#mobile-menu a {
    padding-bottom: 0.5em;
}

/* control mobile menu visibility */
#mobile-menu.hidden {
    opacity: 0;
    height: 0px;
    overflow: hidden;
    transition: opacity 0.5s ease, height 0.5s ease; /* transition for opacity and height */
}
#mobile-menu.visible {
    opacity: 1;
    height: calc(100vh - var(--header-height));
    overflow: auto;
    transition: opacity 0.5s ease, height 0.5s ease, background-color 0.5s ease;;
}



/* ===========================
 * RESPONSIVE MEDIA QUERIES
 * =========================== */

/* smaller desktops, ipads */
@media (max-width: 1024px) {
    :root {
        --general-padding: clamp(10px, 3vw, 30px);
        --sides-padding: var(--general-padding);
    }
}

/* phones, smaller ipads, etc. */
/* declutter header, set menu icon to visible */
@media (max-width: 770px) {
    :root {
        --header-height: 60px;
        --general-padding: 5vw;
    }

    .content {
        padding-top: calc(var(--general-padding) + var(--header-height));
    }


    /* mobile-friendly header */
    .header {
        display: flex;
        justify-content: space-between;
        padding-left: var(--general-padding);
        padding-right: var(--general-padding);
    }

    .header h1 {
        font-size: 1.8rem;
    }

    /* hide header title caption + links */
    #header-caption {
        display: none;
    }
    #header-links {
        display: none;
    }

    /* show hammenu icon for mobile menu */
    #menu-icon,
    #toggle-dark-light {
        display: block;
    }
    
    /* allow mobile-menu to be visible */
    #mobile-menu {
        display: flex;
    }

    .main-body {
        padding-top: 0px;
        padding-right: 0px;
        padding-left: 0px;
        padding-bottom: 0px;
        gap: 0px;
    }

    .side-content {
        display: none;
    }

    .footer {
        padding-top:  var(--general-padding);
    }
}

/* smallest devices */
@media (max-width: 370px) {
    html {
        font-size: clamp(8px, 5vw, 14px);
    }

    #toggle-dark-light,
    #menu-icon {
        transform: scale(0.8);
    }

    .header .header-subtray {
        gap: 0px;
        padding: 0;
        margin: 0;
    }
}