/*
Theme Name: Minimalissimo
Author: FBR
Description: A minimalist WordPress theme.
Version: 1.0
Text Domain: minimalissimo
*/

/* --- ============================================= --- */
/* --- 1. Foundational Styles (Variables & Fonts)    --- */
/* --- ============================================= --- */

:root {
    /* Section 1: General & Body */
    --site-background-color: #FFFFFF;
    --body-text-color: #333333;
    --body-link-color: #a10388;
    --body-link-hover-color: #2dafd3;
    --body-link-active-color: #e355c0;

    /* Section 2: Branding */
    --branding-title-color: #000000;
    --branding-description-color: #333333;

    /* Section 3: Desktop Navigation */
    --main-nav-link-color: #000;
    --main-nav-link-hover-color: #2dafd3;
    --main-nav-active-color: #e355c0;
    --submenu-bg-color: #FFFFFF;
    --submenu-top-border-color: #e355c0;
    --submenu-link-color: #31163d;
    --submenu-link-hover-bg: #fff2fe;
    --submenu-item-border-color: #EEEEEE;

    /* Section 4: Mobile & Hamburger Menu */
    --hamburger-bg-color: #ff78de;
    --hamburger-border-color: #e355c0;
    --hamburger-bars-color: #FFFFFF;
    --mobile-menu-bg-color: #FCF9F5;
    --mobile-menu-link-color: #31163d;
    --mobile-menu-link-hover-bg: #FFFFFF;
    --mobile-menu-active-color: #e355c0;
    --mobile-submenu-bg-color: #F0F0F0;

    /* Section 5: Breadcrumbs */
    --breadcrumb-text-color: #666666;
    --breadcrumb-link-color: #333333;
    --breadcrumb-link-hover-color: #0073aa;
    --breadcrumb-separator-color: #999999;
    --breadcrumb-border-color: #E6E6E6;

    /* NEW! Section 6: Choice Boxes (Language/Theme) */
    --choice-box-active-bg: #e355c0;
    --choice-box-active-text: #FFFFFF;
    --choice-box-active-border: #e355c0;
    --choice-box-inactive-bg: #f9f9f9;
    --choice-box-inactive-text: #666666;
    --choice-box-inactive-border: #DDDDDD;
    --choice-box-hover-bg: #fff2fe;
    --choice-box-hover-text: #000000;

    /* Common for borders that change in dark mode */
    --border-line-image: url(assets/line.png);
}

@font-face {
    font-family: "Bree Serif";
    src: url('fonts/subset-BreeSerif-Regular.woff2') format('woff2'),
         url('fonts/subset-BreeSerif-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Cascadia Mono";
    src: url('fonts/subset-CascadiaMono-Regular.woff2') format('woff2'),
         url('fonts/subset-CascadiaMono-Regular.woff') format('woff');
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Open Sans";
    src: url('fonts/subset-OpenSans-Regular.woff2') format('woff2'),
         url('fonts/subset-OpenSans-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Open Sans Semi Condensed";
    src: url('fonts/subset-OpenSansSemiCondensed-Bold.woff2') format('woff2'),
         url('fonts/subset-OpenSansSemiCondensed-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Playwrite HU";
    src: url('fonts/subset-PlaywriteHU-Regular.woff2') format('woff2'),
         url('fonts/subset-PlaywriteHU-Regular.woff') format('woff');
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "WDXL Lubrifont TC";
    src: url('fonts/subset-WDXLLubrifontTC-Regular.woff2') format('woff2'),
         url('fonts/subset-WDXLLubrifontTC-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Concert One";
    src: url('fonts/subset-ConcertOne-Regular.woff2') format('woff2'),
         url('fonts/subset-ConcertOne-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Balsamiq Sans';
    src: url('fonts/subset-BalsamiqSans-Regular.woff2') format('woff2'),
    url('fonts/subset-BalsamiqSans-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Lexend';
    src: url('fonts/subset-Lexend-Regular.woff2') format('woff2'),
    url('fonts/subset-Lexend-Regular.woff') format('woff');
    font-style: normal;
    font-display: swap;
}

/* --- ============================================= --- */
/* --- 2. General Body & Typography                  --- */
/* --- ============================================= --- */
html {
    font-size: 100%;
    box-sizing: border-box; /* Universal box-sizing */
	padding: 0 20px;
}

html, body {
    height: 100%;
}

body {
    font-family: "Open Sans", Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    line-height: 1.6;
    background-image: url(assets/bg.jpg);
    background-color: var(--site-background-color);
    background-attachment: fixed;
    color: var(--body-text-color);
    font-size: 1rem;
    margin: 0; 
    padding: 0;
}

body .wrapper {
    min-height: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
}

header.main, footer#end-of-document {
    width: 100%;
    flex-grow: 0;
    flex-shrink: 0;
}
main#primary {
    flex-grow: 1;
}

a, a:visited {
    color: var(--body-link-color);
    text-decoration:none;
}

a:hover {
    color: var(--body-link-hover-color);
    text-decoration: none;
}
a:active {
    color: var(--body-link-active-color);
}

#primary p {
    line-height:1.85rem;
}

.post .entry-header {
    padding: 0;
    margin:0;
}
.post .entry-header h2 a {
    color: var(--body-text-color);
    text-decoration:none;
    border-bottom: 1px dotted var(--main-nav-active-color);
}
.post .entry-header h2 a:hover {
    border-bottom: 2px solid var(--main-nav-link-hover-color);
    opacity: 80%;
}

.post footer .post-category a, .post footer .post-tags a {
    background: black;
    color: #fff;
    text-decoration: none;
    padding: 3px;
    font-size: 0.75rem;
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    line-height: 1.2;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    font-family: "Bree Serif", Georgia, serif;
}

h1 {
    font-weight: 900;
}

h2,h3,h4,h5,h6 {
    font-weight: 400;
    padding: 1.5rem 0 0.5rem 0;
}

h2 { font-size: 1.8em; color: #555; margin-top: 1em; }
h3 { font-size: 1.5em; color: #666; }
h4 { font-size: 1.3em; color: #777; }
h5 { font-size: 1.1em; color: #888; }
h6 { font-size: 1em; color: #999; }

/* --- ============================================= --- */
/* --- 3. Main Layout & Branding                     --- */
/* --- ============================================= --- */

header.main {
    max-width: 960px;
    margin: 0 auto;
}

.site-branding {
    padding: 1rem 0;
    margin: 0;
}

a.txt-home:hover { opacity: 70%; } 

.site-title {
    font-size: 2.25rem;
    font-family: "Playwrite HU", "Comic Sans MS", cursive;
    font-weight: bold;
    margin: 0;
    line-height: 1.5;
}

.site-title a {
    text-decoration: none;
    color: var(--branding-title-color);
}

.site-description {
    font-family: "WDXL Lubrifont TC", Georgia, serif;
    font-weight: 400;
    text-transform: uppercase;
    opacity: 0.8;
    padding: 0;
    margin: 0;
    line-height: 1.2rem;
    font-size: 1.15rem;
    color: var(--branding-description-color);
}



.site-main {
    padding-top: 3em;
}

.site-main .container { 
	max-width: 780px;
	margin: auto;
}


.entry-header, .page-header {
    margin-bottom: 3em;
}

.entry-title, .page-title {
    font-family: "Bree Serif", Georgia, serif;
    font-weight: 400;
    font-style: normal;
    font-size: 2.5em;
    margin-top: 0;
    margin-bottom: 0;
}

h2.entry-title:not(.front-page-content-title) {
    font-size: 1.8em;
    color: #444;
}

.cv-item-publisher a { color: var(--body-text-color); }

/* --- ============================================= --- */
/* --- 4. Navigation (Desktop Base & Mobile Menus)   --- */
/* --- ============================================= --- */
.menu-item a {
    font-family: "Lexend", "Courier New", monospace;
    font-optical-sizing: auto;
    font-size: 1.15rem;
    font-style: normal;
}

.main-navigation {
    display: block;
}

.mobile-menu-wrap {
    display: none;
}

.mobile-menu-checkbox {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}


.footer-navigation ul { list-style-type: none; padding: 0; margin: 0; }
.footer-navigation ul li a { font-size: 0.75rem; color: var(--body-text-color); opacity: 50%;}

/* --- DESKTOP NAVIGATION (min-width: 768px) --- */
@media (min-width: 768px) {
    .main-navigation {
        border-bottom: 2px solid transparent;
        border-image: var(--border-line-image) 30 stretch;
    }

.main-navigation ul {
    display: flex;
	flex-wrap: wrap;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

    .main-navigation li {
        position: relative;
        padding: 0 15px;
    }
    .main-navigation li:first-child {

    }
    .main-navigation li a {
        text-decoration: none;
        color: var(--main-nav-link-color);
        padding: 8px 0;
        display: block;
        white-space: nowrap;
		font-size: 0.9rem;
		letter-spacing: 0.1rem;
    }

    .main-navigation a:hover,
    .main-navigation a:focus {
        color: var(--main-nav-link-hover-color);
    }

    .main-navigation li.menu-item-has-children > a::after {
        content: '\25BC';
        font-size: 0.7em;
        margin-left: 5px;
        vertical-align: middle;
        transition: transform 0.2s ease-in-out;
        color: #888;
    }

    .main-navigation li.menu-item-has-children:hover > a::after,
    .main-navigation li.menu-item-has-children:focus-within > a::after {
        transform: rotate(180deg);
        color: var(--main-nav-link-hover-color);
    }

    .main-navigation .sub-menu {
        display: block !important;
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px);
        transition: opacity 0.3s ease-out, transform 0.3s ease-out, visibility 0s linear 0.3s;
        position: absolute;
        top: 100%;
        left: 0;
        background-color: var(--submenu-bg-color);
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        margin: 0;
        padding: 0;
        min-width: 200px;
        z-index: 999;
        border-top: 2px solid var(--submenu-top-border-color);
    }

    .main-navigation li:hover > .sub-menu,
    .main-navigation li:focus-within > .sub-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        transition: opacity 0.3s ease-in, transform 0.3s ease-in, visibility 0s linear 0s;
    }

    .main-navigation .sub-menu li {
        padding: 0;
        border-bottom: 1px solid var(--submenu-item-border-color);
        display: block;
    }

    .main-navigation .sub-menu li:last-child {
        border-bottom: none;
    }

    .main-navigation .sub-menu a {
        max-width: 280px;
        padding: 10px 20px;
        color: var(--submenu-link-color);
        font-weight: normal;
        white-space: normal !important;
    }

    .main-navigation .sub-menu a:hover,
    .main-navigation .sub-menu a:focus {
        background-color: var(--submenu-link-hover-bg);
        color: black;
    }

    .main-navigation .current-menu-item > a,
    .main-navigation .current-menu-ancestor > a {
        color: var(--main-nav-active-color);
    }
}

/* --- MOBILE STYLES (max-width: 767.98px) --- */
@media (max-width: 767.98px) {
    body {
        font-size: 1.15rem;
        padding-top: 60px;
    }

    .site-main {
        margin-top: 1rem;
    }

	footer#end-of-document { text-align: center; }

    .footer-wrapper {
        flex-direction: column;
    }

    header.main {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 20px;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1001;
        background-color: var(--site-background-color);
        box-shadow: 0 2px 15px rgba(0,0,0,0.3);
        box-sizing: border-box;
        min-height: 60px;
    }

    body > *:not(header) {
        position: relative;
        z-index: 1;
    }

    header.main .container {
        margin: auto;
        padding: 0;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

    header.main .container .site-branding {
        text-align: center;
        flex-grow: 1;
        padding: 0;
    }

    .site-branding .site-title {
        margin: 0;
        font-size: 1.5em;
    }
    header.main .site-description {
        padding: 0;
        margin: 0;
    }

    .main-navigation {
        display: none;
    }

    .mobile-menu-wrap {
        display: block;
    }

    .hamburger-menu-toggle {
        display: block;
        background: var(--hamburger-bg-color);
        border: 1px solid var(--hamburger-border-color);
        padding: 10px;
        cursor: pointer;
        position: relative;
        z-index: 1003;
    }

    .hamburger-menu-toggle .bar {
        display: block;
        width: 25px;
        height: 3px;
        background-color: var(--hamburger-bars-color);
        margin: 5px 0;
        transition: all 0.3s ease-in-out;
    }

    .mobile-menu-checkbox:checked + .hamburger-menu-toggle .bar:nth-child(2),
    html.js-enabled .hamburger-menu-toggle.is-active .bar:nth-child(2) {
        opacity: 0;
    }
    .mobile-menu-checkbox:checked + .hamburger-menu-toggle .bar:nth-child(1),
    html.js-enabled .hamburger-menu-toggle.is-active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    .mobile-menu-checkbox:checked + .hamburger-menu-toggle .bar:nth-child(3),
    html.js-enabled .hamburger-menu-toggle.is-active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    .language-switcher-container {
        width: 90%;
        box-sizing: border-box;
        padding: 10px;
        background: var(--choice-box-inactive-bg, #f9f9f9);
        border: 1px solid var(--choice-box-inactive-border, #ddd);
    }

    .mobile-navigation {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-image: url(assets/bg2.jpg);
        background-color: var(--mobile-menu-bg-color);
        box-shadow: 0 0 10px rgba(0,0,0,0.2);
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        padding-top: 100px;
        padding-bottom: 80px;
        box-sizing: border-box;
        z-index: 1000;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease-out, visibility 0s linear 0.3s;
    }

    .mobile-menu-checkbox:checked ~ .mobile-navigation,
    html.js-enabled .mobile-navigation.is-open {
        opacity: 1;
        visibility: visible;
        transition: opacity 0.3s ease-in, visibility 0s linear 0s;
    }

    .mobile-menu-items {
        list-style-type: disc;
        margin: 0;
        padding: 0;
        border-top: 3px solid transparent;
        border-image: var(--border-line-image) 30 stretch;
    }

    .mobile-menu-items li {
        border-bottom: 2px dotted rgba(0,0,0,0.2);
        position: relative;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
    }

    html.js-enabled .mobile-menu-items li {
        grid-template-columns: 1fr auto;
    }

    .mobile-menu-items li > a {
        grid-column: 1 / -1;
        grid-row: 1 / 2;
        display: block;
        padding: 30px 20px;
        text-decoration: none;
        color: var(--mobile-menu-link-color);
    }

    html.js-enabled .mobile-menu-items li > a {
        grid-column: 1 / 2;
    }

    .mobile-menu-items a:hover,
    .mobile-menu-items a:focus {
        color: var(--body-link-hover-color);
        background-color: var(--mobile-menu-link-hover-bg);
        text-decoration: underline;
    }

    .mobile-menu-items .current-menu-item > a {
        color: var(--mobile-menu-active-color) !important;
    }

    .mobile-menu-items .sub-menu {
        grid-column: 1 / -1;
        grid-row: 2 / 3;
        box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.4);
        list-style: none;
        margin: 0;
        padding: 0;
        background-image: url(assets/bg.jpg);
        background-color: var(--mobile-submenu-bg-color);
        position: static;
        max-height: none;
        overflow: visible;
        transition: none;
    }

    html.js-enabled .mobile-menu-items .sub-menu {
        display: none;
    }

    .mobile-menu-items .sub-menu > li {
        padding: 0;
        margin: 0;
        border-bottom: 0;
    }

    .mobile-menu-items .sub-menu li > a {
        font-size: 90%;
        padding: 20px 30px !important;
    }

    html.js-enabled .mobile-menu-checkbox {
        display: none;
    }

    html.js-enabled .mobile-menu-items li.menu-item-has-children > .sub-menu-toggle {
        display: flex;
        grid-column: 2 / 3;
        grid-row: 1 / 2;
        justify-content: center;
        align-items: center;
        width: 60px;
        background-color: transparent;
        border-left: none;
        cursor: pointer;
        z-index: 2;
        padding-right: 20px;
    }

    html.js-enabled .sub-menu-toggle:hover {
        background-color: var(--mobile-menu-link-hover-bg) !important;
    }

    html.js-enabled .mobile-menu-items li.menu-item-has-children .sub-menu-toggle:after {
        content: '\002B';
        font-size: 28px;
        font-weight: bold;
        color: var(--mobile-menu-link-color);
        transition: transform 0.3s ease-in-out;
    }

    html.js-enabled .mobile-menu-items li.menu-item-has-children .sub-menu-toggle:hover:after {
        color: var(--body-link-hover-color);
    }

    html.js-enabled .mobile-menu-items li.sub-menu-open .sub-menu-toggle:after {
        content: '\2212';
    }

    html.js-enabled body.no-scroll {
        overflow: hidden;
    }

    .minimalissimo-breadcrumbs {
        font-size: 0.95rem;
    }

    .language-selector-desktop {
        display: none;
    }

    .language-selector-mobile {
        margin: 0;
        font-weight: bold;
        position: absolute;
        top: 0;
        width: 100%;
    }

    .language-selector-mobile .choice-box {
        display: flex;
        justify-content: center;
    }

    .language-selector-mobile .choice-box li {
        margin: 0 3px;
    }

    .language-selector-mobile .choice-box a {
        font-size: 0.8em;
        padding: 15px 15px;
    }
}

/* --- ============================================= --- */
/* --- 5. Language Selector (Layout only)            --- */
/* --- ============================================= --- */

.language-switcher-dropdown-container {
    max-width: 80%;
    padding: 10px 100px;
}

.language-selector-mobile .language-switcher-dropdown-form {
    margin: 0;
    width: 100%;
    border: 3px solid lime;
}

.language-switcher-dropdown {
    width: 100%;
    box-sizing: border-box;
    padding: 7px 10px;
    border-radius: 5px;
    color: var(--choice-box-inactive-text, #666);
    font-size: 1em;
}
.language-switcher-dropdown option[selected],
.language-switcher-dropdown:focus option[selected] {
    background: #000;
    color: var(--choice-box-active-text, #fff);
}

.language-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    line-height: 1rem;
}

@media (min-width: 768px) {
    .language-selector-mobile {
        display: none;
    }
    .language-selector-desktop {
        position: absolute;
        top: 0;
        right: 1em;
        display: flex;
        align-items: center;
    }
    .language-selector-desktop .language-switcher-dropdown-form {
        padding-right: 15px;
        padding-top: 20px;
    }
}

/* --- ============================================= --- */
/* --- 6. Breadcrumbs                                --- */
/* --- ============================================= --- */

.minimalissimo-breadcrumbs {
    font-family: "Cascadia Mono", sans-serif;
    margin: 1em auto;
    max-width: 100%;
    padding: 0;
    font-size: 0.9em;
    color: var(--breadcrumb-text-color);
    opacity: 0.4;
    box-sizing: border-box;
    border-bottom: 1px dashed var(--breadcrumb-border-color);
}

.minimalissimo-breadcrumbs .breadcrumbs-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
	border-top: 1px dotted var(--breadcrumb-text-color);
	border-bottom: 1px dotted var(--breadcrumb-text-color);

}

.minimalissimo-breadcrumbs .breadcrumb-item {
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.minimalissimo-breadcrumbs .breadcrumb-separator {
    margin: 0 0.5em;
    color: var(--breadcrumb-separator-color);
}

.minimalissimo-breadcrumbs .breadcrumb-item a {
    text-decoration: none;
    font-weight: 500;
    opacity: 1;
    transition: opacity 0.2s ease-in-out;
    color: var(--breadcrumb-link-color);
}

.minimalissimo-breadcrumbs .breadcrumb-item a:hover,
.minimalissimo-breadcrumbs .breadcrumb-item a:focus {
    text-decoration: underline;
    opacity: 1;
    color: var(--breadcrumb-link-hover-color);
}

/* --- ============================================= --- */
/* --- 7. Theme Switcher (Layout only)               --- */
/* --- ============================================= --- */
html[data-theme="dark"] {
    & body { background-image: none; }
    & .mobile-navigation, .mobile-menu-items .sub-menu {background-image: none; }
    & .social-media-list img.social-icon { filter: invert(100%) }
    /* Use the new variable for border image */
    --border-line-image: url(assets/line-white.png);

    --site-background-color: #1e1e1e;
    --body-text-color: #e0e0e0;
    --body-link-color: #e355c0;
    --body-link-hover-color: #4dd0e1;
    --body-link-active-color: #ffffff;
    --branding-title-color: #ffffff;
    --branding-description-color: #bdbdbd;
    --main-nav-link-color: #e0e0e0;
    --main-nav-link-hover-color: #ffffff;
    --main-nav-active-color: #e355c0;
    --submenu-bg-color: #2c2c2c;
    --submenu-top-border-color: #e355c0;
    --submenu-link-color: #e0e0e0;
    --submenu-link-hover-bg: #3a3a3a;
    --submenu-item-border-color: #424242;
    --hamburger-bg-color: #e355c0;
    --hamburger-border-color: #e355c0;
    --hamburger-bars-color: #1e1e1e;
    --mobile-menu-bg-color: #2c2c2c;
    --mobile-menu-link-color: #e0e0e0;
    --mobile-menu-link-hover-bg: #3a3a3a;
    --mobile-menu-active-color: #ffffff;
    --mobile-submenu-bg-color: #3a3a3a;
    --breadcrumb-text-color: #fff;
    --breadcrumb-link-color: #fff;
    --breadcrumb-link-hover-color: #ffccff;
    --breadcrumb-separator-color: #555;
    --breadcrumb-border-color: #424242;

    --choice-box-active-bg: #e355c0;
    --choice-box-active-text: #1e1e1e;
    --choice-box-active-border: #e355c0;
    --choice-box-inactive-bg: #2c2c2c;
    --choice-box-inactive-text: #e0e0e0;
    --choice-box-inactive-border: #424242;
    --choice-box-hover-bg: #3a3a3a;
    --choice-box-hover-text: #ffffff;
}

.desktop-theme-switcher {
    position: fixed;
    bottom: 0;
    left: 15px;
    z-index: 1000;
}

.theme-button {
    border-radius: 25% 25% 0 0;
}
.lang-item a {
    border-radius: 0 0 25% 25%;
}

@media (max-width: 767.98px) {
    .desktop-theme-switcher {
        display: none;
    }
    .footer-second {
        padding-top: 1rem;
    }
	.footer-second .social-media-list img.social-icon {
        width: 34px;
        height: 34px;
	}
	
    .mobile-socials .social-media-list {
        display:block;
        padding: 80px 1rem 10px;
        text-align: center;
    }
    .mobile-socials .social-media-list img.social-icon {
        width: 34px;
        height: 34px;
    }
	
	
	
    .theme-button {
        border-radius: 25%;
    }
    .mobile-theme-switcher {
        position: sticky;
        bottom: 2px;
        left: 0;
        width: 100%;
        padding: 15px 15px 0 15px;
        text-align: center;
        box-sizing: border-box;
    }
}
@media (min-width: 768px) {
    .mobile-theme-switcher {
        display: none;
    }
}

/* --- ============================================= --- */
/* --- 8. Choice Boxes (Shared Styles)               --- */
/* --- ============================================= --- */

.choice-box {
    list-style: none;
    margin: 0;
    padding: 0;
    line-height: 1;
}

.choice-box li {
    display: inline-block;
    margin: 0 2px;
    padding: 0;
    border: none;
    background: none;
}

/* Inactive State */
.choice-box a,
.choice-box button {
    font-family: "Cascadia Mono", "Courier New", monospace;
    font-size: 0.85rem;
    text-decoration: none;
    padding: 10px;
    display: inline-block;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    background-color: var(--choice-box-inactive-bg);
    color: var(--choice-box-inactive-text);
    border: 1px solid var(--choice-box-inactive-border);
}

/* Inactive Hover State */
.choice-box a:hover,
.choice-box button:hover {
    background-color: var(--choice-box-hover-bg);
    color: var(--choice-box-hover-text);
    border-color: var(--choice-box-active-border);
}

/* Updated Active State to support sub-pages */
.choice-box .current-lang a, 
.choice-box li.current-lang a, /* Targets link inside the active LI */
.choice-box .current-menu-item a, 
.choice-box button.active {
    background-color: var(--choice-box-active-bg) !important;
    color: var(--choice-box-active-text) !important;
    border-color: var(--choice-box-active-border) !important;
    font-weight: bold;
}

/* Ensure hover doesn't override the active button state */
.choice-box li.current-lang a:hover,
.choice-box .current-lang a:hover {
    cursor: default;
    pointer-events: none;
    background-color: var(--choice-box-active-bg) !important;
    color: var(--choice-box-active-text) !important;
}

/* Active Language Button Styling */
.choice-box li.current-lang a,
.choice-box .current-lang a {
    background-color: var(--choice-box-active-bg) !important;
    color: var(--choice-box-active-text) !important;
    border-color: var(--choice-box-active-border) !important;
    font-weight: bold;
}

/* Optional: Make the active button look non-clickable */
.choice-box li.current-lang a {
    pointer-events: none;
    cursor: default;
}


/* --- ============================================= --- */
/* --- 9. Footer                                     --- */
/* --- ============================================= --- */

footer#end-of-document {
    font-family: "WDXL Lubrifont TC";
	font-weight: bold;
    border-top: 3px solid transparent;
    border-image: var(--border-line-image) 30 stretch;
    background-position: top 1px;

    max-width: 960px;
    margin: 100px auto 0 auto;
    padding-bottom: 24px;
}

.footer-wrapper {
    padding: 10px 5px;
    display: flex;
	align-items: center;
}

.footer-wrapper div {
	flex-grow: 1;
}

article.post-list {
    margin: 3rem 0 0 0;
    border-bottom: 2px dotted rgba(0,0,0,0.2);
}

/* Styling for Post Pagination */
.pagination {
    margin-top: 30px;
    margin-bottom: 30px;
}

.pagination .nav-links-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.pagination .nav-prev-container,
.pagination .nav-next-container {
    flex-basis: 150px;
    text-align: center;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pagination .page-numbers-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
    flex-wrap: wrap;
    gap: 8px;
}

.pagination .page-numbers.prev,
.pagination .page-numbers.next {
    min-width: 120px;
    border: 1px solid transparent;
    background-color: var(--choice-box-active-bg);
    padding: 4px 8px;
    border-radius: 5px;
    text-decoration: none;
    font-family: Georgia;
    color: var(--choice-box-active-text);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.pagination .page-numbers.prev:hover,
.pagination .page-numbers.next:hover {
    border: 1px solid var(--choice-box-active-bg);
    background-color: var(--choice-box-hover-bg);
    color: var(--choice-box-hover-text);
}

.pagination .page-numbers.placeholder {
    visibility: hidden;
    pointer-events: none;
}

.pagination .page-numbers {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 35px;
    height: 35px;
    border-radius: 50%;
    text-decoration: none;
    color: var(--body-text-color);
    transition: background-color 0.3s ease, color 0.3s ease;
    border: 1px solid transparent;
}

.pagination .page-numbers.current {
    background-color: #e355c0;
    color: #fff;
    font-weight: bold;
}

.pagination .page-numbers:not(.current):hover {
    border: 1px solid var(--choice-box-active-bg);
    background-color: var(--choice-box-hover-bg);
    color: var(--choice-box-hover-text);
}

.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Adjustments for smaller screens */
@media (max-width: 600px) {
    .pagination .nav-links-wrapper {
        flex-direction: column;
        gap: 10px;
    }
    .pagination .nav-prev-container,
    .pagination .nav-next-container {
        width: 100%;
        flex-basis: auto;
    }
    .pagination .page-numbers-container {
        width: 100%;
        justify-content: center;
    }
}

/* Basic styling for social icons */
.social-media-list img.social-icon {
    width: 16px;
    height: 16px;
    vertical-align: middle;
}

.social-media-list li {
    display: inline-block;
    margin: 0 5px;
}
.social-media-links-container {
    text-align: right;
}
.social-media-list a {
    border-radius: 50px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.footer-year { opacity: 90%; font-weight: normal; }

.footer-additional {
    font-size: 0.80rem;
    font-family: 'Lexend';
    max-width: 100%;
    text-align: center;
    padding: 5px 0;
}
.footer-additional a {
    color: var(--body-text-color);
    text-decoration: none;
    opacity: 70%;
}
.footer-additional a:hover {
    text-decoration: underline;
}