/*
Theme Name: Legacy and Book of Dead theme
Theme URI: https://dirtymanh.gr/
Author: Ζαχαριάς Ιωαννίδης
Author URI: https://dirtymanh.gr/
Description: A dark gaming theme inspired by ancient legends and adventure.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: legacy-and-book-of-dead-theme
Requires at least: 5.0
Requires PHP: 7.0
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Variables
# Normalize
# Accessibility
# Alignments
# Clearings
# Typography
# Elements
# Forms
# Navigation
  ## Links
  ## Menus
# Content
  ## Posts and pages
  ## Comments
# Widgets
# Media
  ## Captions
  ## Galleries
# Site Header
# Site Footer
# Layout
# Buttons
# Table of Contents
# FAQ Accordion
# Pros/Cons Table
# Responsive
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Variables
--------------------------------------------------------------*/
:root {
	--primary-color: #20232A;
	--secondary-color: #3B3F47;
	--accent-color: #E60000;
	--background-color-body: #121212;
	--text-color-body: #EAEAEA;
	--text-color-headings: #FFFFFF;
	--link-color: #D1D1D1;
	--link-hover-color: #E60000;

	--font-family-body: 'Open Sans', sans-serif;
	--font-family-headings: 'Montserrat', sans-serif;
	--base-font-size: 16px;
	--heading-h1-size: 3rem;
	--heading-h2-size: 2.2rem;
	--heading-h3-size: 1.8rem;

	--max-content-width: 1200px;
	--base-padding: 1rem;
	--base-margin: 1rem;
	--section-spacing-vertical: 3rem;

	--header-background: #20232A;
	--header-text-color: #FFFFFF;
	--header-padding-vertical: 1rem;
	--header-padding-horizontal: 2rem;

	--footer-background: #1A1A1A;
	--footer-text-color: #A0A0A0;

	--button-primary-background-color: #E60000;
	--button-primary-text-color: #FFFFFF;
	--button-primary-border-radius: 5px;
	--button-primary-padding: 0.75rem 1.5rem;
	--button-primary-hover-bg-color: #B30000;
	--button-primary-hover-text-color: #FFFFFF;
	--button-primary-font-weight: bold;

	--button-secondary-background-color: #3B3F47;
	--button-secondary-text-color: #EAEAEA;
	--button-secondary-border-radius: 3px;
	--button-secondary-padding: 0.5rem 1rem;
	--button-secondary-hover-bg-color: #E60000;
	--button-secondary-hover-text-color: #FFFFFF;
	--button-secondary-font-weight: bold;

	--image-border-radius: 0px;
	--image-shadow: none;

	--toc-background: #2a2d34;
	--toc-border-color: #3B3F47;
	--faq-accordion-header-bg: var(--secondary-color); /* #3B3F47 */
	--faq-accordion-header-text: var(--text-color-body); /* #EAEAEA */
	--pros-cons-table-pros-header-bg: #28a745;
	--pros-cons-table-cons-header-bg: var(--accent-color); /* #E60000 */
    --faq-item-border-color: #3B3F47;
    --faq-question-background-color: #2a2d34;
    --faq-question-text-color: #EAEAEA;
    --faq-question-hover-background-color: #3B3F47;
    --faq-answer-background-color: #20232A;
    --faq-answer-text-color: #D1D1D1;
    --faq-active-indicator-color: var(--accent-color); /* Red for plus/minus */
}

/*--------------------------------------------------------------
# Normalize
--------------------------------------------------------------*/
body {
	font-family: var(--font-family-body);
	font-size: var(--base-font-size);
	line-height: 1.6;
	color: var(--text-color-body);
	background-color: var(--background-color-body);
	margin: 0;
	padding: 0;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/
/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: bold;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000; /* Above WP toolbar. */
}

/*--------------------------------------------------------------
# Alignments
--------------------------------------------------------------*/
.alignleft {
	display: inline;
	float: left;
	margin-right: var(--base-margin);
}

.alignright {
	display: inline;
	float: right;
	margin-left: var(--base-margin);
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

img.aligncenter {
    margin-bottom: var(--base-margin);
}

/* WordPress Core aligns */
.alignfull {
    margin: var(--section-spacing-vertical) 0;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.alignwide {
    margin: var(--section-spacing-vertical) calc(25% - 25vw);
    max-width: var(--max-content-width);
}

/*--------------------------------------------------------------
# Clearings
--------------------------------------------------------------*/
.clear::before,
.clear::after,
.entry-content::after,
.comment-content::after,
.site-header::after,
.site-footer::after {
	content: "";
	display: table;
	table-layout: fixed;
}

.clear::after,
.entry-content::after,
.comment-content::after,
.site-header::after,
.site-footer::after {
	clear: both;
}

/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-family-headings);
	color: var(--text-color-headings);
	margin-top: var(--base-margin);
	margin-bottom: calc(var(--base-margin) / 2);
	font-weight: 700;
}

h1 { font-size: var(--heading-h1-size); }
h2 { font-size: var(--heading-h2-size); }
h3 { font-size: var(--heading-h3-size); }
h4 { font-size: calc(var(--heading-h3-size) * 0.85); }
h5 { font-size: calc(var(--heading-h3-size) * 0.7); }
h6 { font-size: calc(var(--heading-h3-size) * 0.6); }

p {
	margin-bottom: var(--base-margin);
}

a {
	color: var(--link-color);
	text-decoration: none;
	transition: color 0.3s ease;
}

a:hover,
a:focus {
	color: var(--link-hover-color);
	text-decoration: underline;
}

strong, b { font-weight: bold; }
em, i { font-style: italic; }

/*--------------------------------------------------------------
# Elements
--------------------------------------------------------------*/
hr {
	background-color: var(--secondary-color);
	border: 0;
	height: 1px;
	margin-bottom: var(--base-margin);
}

ul, ol {
	margin: 0 0 var(--base-margin) var(--base-margin);
	padding-left: 1.5em;
}

ul { list-style: disc; }
ol { list-style: decimal; }

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt { font-weight: bold; }
dd { margin: 0 1.5em 1.5em; }

img {
	height: auto; /* Make sure images are scaled correctly. */
	max-width: 100%; /* Adhere to container width. */
	border-radius: var(--image-border-radius);
	box-shadow: var(--image-shadow);
}

figure { margin: 0 0 var(--base-margin); }

/*--------------------------------------------------------------
# Forms
--------------------------------------------------------------*/
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
textarea {
	color: var(--text-color-body);
	background-color: var(--secondary-color);
	border: 1px solid var(--primary-color);
	border-radius: 3px;
	padding: 0.5em 0.75em;
	width: 100%;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus {
	border-color: var(--accent-color);
	outline: none;
}

textarea {
	width: 100%;
}

/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/
/* ## Links */
a {
	color: var(--link-color);
}

a:visited {
	color: var(--link-color); /* Or a slightly different shade if desired */
}

a:hover,
a:focus,
a:active {
	color: var(--link-hover-color);
}

/* ## Menus */
.main-navigation {
	display: block;
	width: 100%;
}

.main-navigation ul {
	display: flex;
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.main-navigation ul ul { /* Sub-menu */
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	float: left;
	position: absolute;
	top: 100%;
	left: -999em;
	z-index: 99999;
	background-color: var(--header-background);
    flex-direction: column;
}

.main-navigation ul ul ul {
	left: -999em;
	top: 0;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
	left: auto;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
	left: 100%;
}

.main-navigation li {
	position: relative;
}

.main-navigation a {
	display: block;
	padding: var(--base-padding) calc(var(--base-padding) / 1.5);
	text-decoration: none;
	color: var(--header-text-color);
}
.main-navigation li:hover > a,
.main-navigation li.focus > a {
    background-color: var(--secondary-color);
    color: var(--link-hover-color);
}

.main-navigation .current_page_item > a,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_ancestor > a {
	font-weight: bold;
    color: var(--accent-color);
}

/* Small menu */
.menu-toggle { display: none; }


/*--------------------------------------------------------------
# Content
--------------------------------------------------------------*/
.sticky { display: block; }
.hentry { margin: 0 0 var(--base-margin); }
.updated:not(.published) { display: none; }

/* ## Posts and pages */
.page-content,
.entry-content,
.entry-summary {
	margin: var(--base-margin) 0;
}
.page-links {
	clear: both;
	margin: 0 0 var(--base-margin);
}

/* ## Comments */
.comment-content a {
	word-wrap: break-word;
}
.bypostauthor { display: block; }

/*--------------------------------------------------------------
# Widgets
--------------------------------------------------------------*/
.widget {
	margin: 0 0 var(--base-margin);
}
.widget select { max-width: 100%;}

/*--------------------------------------------------------------
# Media
--------------------------------------------------------------*/
/* ## Captions */
.wp-caption {
	margin-bottom: var(--base-margin);
	max-width: 100%;
}
.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
    font-size: 0.9em;
    color: var(--text-color-body);
    text-align: center;
}

/* ## Galleries */
.gallery { margin-bottom: var(--base-margin); }
.gallery-item {
	display: inline-block;
	text-align: center;
	vertical-align: top;
	width: 100%;
}
.gallery-columns-2 .gallery-item { max-width: 50%; }
.gallery-columns-3 .gallery-item { max-width: 33.33%; }
/* ... and so on for more columns */

.gallery-caption {
	display: block;
    font-size: 0.9em;
    color: var(--text-color-body);
}

/*--------------------------------------------------------------
# Site Header
--------------------------------------------------------------*/
.site-header {
	background-color: var(--header-background);
	padding: var(--header-padding-vertical) var(--header-padding-horizontal);
	display: flex;
	justify-content: space-between;
	align-items: center;
    flex-wrap: wrap;
}

.site-header.sticky-header.stuck {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}


.site-branding {
	margin-right: var(--base-margin);
}
.site-title {
	font-size: 1.8rem;
	margin: 0;
}
.site-title a {
	color: var(--header-text-color);
	text-decoration: none;
}
.site-description {
	font-size: 0.9rem;
	color: var(--header-text-color);
	margin: 0;
	opacity: 0.8;
}
.custom-logo {
    max-height: 60px; /* Adjust as needed */
    width: auto;
}

/*--------------------------------------------------------------
# Site Footer
--------------------------------------------------------------*/
.site-footer {
	background-color: var(--footer-background);
	color: var(--footer-text-color);
	padding: var(--section-spacing-vertical) var(--header-padding-horizontal);
	text-align: center;
	font-size: 0.9rem;
}
.site-footer a {
	color: var(--link-color);
}
.site-footer a:hover {
	color: var(--link-hover-color);
}
.site-info .sep {
    margin: 0 0.5em;
}
.footer-navigation ul {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: var(--base-margin) 0 0;
}
.footer-navigation li {
    margin: 0 calc(var(--base-margin) / 2);
}
.footer-navigation a {
    color: var(--footer-text-color);
}


/*--------------------------------------------------------------
# Layout
--------------------------------------------------------------*/
.site {
	max-width: 100%;
	overflow-x: hidden; /* Prevent horizontal scroll from full-width blocks */
}

#content {
	padding: var(--section-spacing-vertical) var(--header-padding-horizontal);
}

.container, /* Generic container if needed */
.site-main {
	max-width: var(--max-content-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--base-padding);
	padding-right: var(--base-padding);
}

.front-page-main .wp-block-heading.has-text-align-center {
    margin-bottom: var(--base-margin);
}

/*--------------------------------------------------------------
# Buttons
--------------------------------------------------------------*/
.wp-block-button__link {
	text-decoration: none;
	display: inline-block;
	transition: background-color 0.3s ease, color 0.3s ease;
    text-align: center;
}

/* Primary Button Style (is-style-fill is default for WP Button block) */
.wp-block-button.is-style-fill .wp-block-button__link,
.wp-block-button .wp-block-button__link.cta-button-primary { /* Custom class for more control */
	background-color: var(--button-primary-background-color);
	color: var(--button-primary-text-color);
	border-radius: var(--button-primary-border-radius);
	padding: var(--button-primary-padding);
	font-weight: var(--button-primary-font-weight);
}
.wp-block-button.is-style-fill .wp-block-button__link:hover,
.wp-block-button.is-style-fill .wp-block-button__link:focus,
.wp-block-button .wp-block-button__link.cta-button-primary:hover,
.wp-block-button .wp-block-button__link.cta-button-primary:focus {
	background-color: var(--button-primary-hover-bg-color);
	color: var(--button-primary-hover-text-color);
}

/* Secondary Button Style (is-style-outline) */
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button .wp-block-button__link.cta-button-secondary { /* Custom class for more control */
	background-color: transparent;
	color: var(--button-secondary-text-color);
	border: 2px solid var(--button-secondary-background-color); /* Use background as border color */
	border-radius: var(--button-secondary-border-radius);
	padding: var(--button-secondary-padding);
	font-weight: var(--button-secondary-font-weight);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus,
.wp-block-button .wp-block-button__link.cta-button-secondary:hover,
.wp-block-button .wp-block-button__link.cta-button-secondary:focus {
	background-color: var(--button-secondary-hover-bg-color);
	color: var(--button-secondary-hover-text-color);
	border-color: var(--button-secondary-hover-bg-color);
}

.wp-block-buttons {
    margin-bottom: var(--base-margin);
    display: flex;
    gap: var(--base-margin);
    flex-wrap: wrap;
    justify-content: center; /* Center buttons by default */
}


/*--------------------------------------------------------------
# Table of Contents
--------------------------------------------------------------*/
.table-of-contents {
    background-color: var(--toc-background);
    border: 1px solid var(--toc-border-color);
    padding: var(--base-padding);
    margin-bottom: var(--section-spacing-vertical);
    border-radius: 5px;
}
.table-of-contents ul, .table-of-contents ol {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
}
.table-of-contents li a {
    text-decoration: none;
    color: var(--link-color);
    display: block;
    padding: 0.3em 0;
}
.table-of-contents li a:hover {
    color: var(--link-hover-color);
}

/*--------------------------------------------------------------
# FAQ Accordion
--------------------------------------------------------------*/
.faq-accordion {
    margin-bottom: var(--section-spacing-vertical);
}
.faq-item {
    border: 1px solid var(--faq-item-border-color);
    margin-bottom: calc(var(--base-margin) / 2);
    border-radius: 3px;
    overflow: hidden; /* To contain background colors */
}
.faq-question { /* This is a h4.wp-block-heading */
    background-color: var(--faq-question-background-color);
    color: var(--faq-question-text-color);
    padding: var(--base-padding);
    margin: 0;
    cursor: pointer;
    position: relative;
    font-size: 1.2rem; /* Adjust as needed */
}
.faq-question:hover {
    background-color: var(--faq-question-hover-background-color);
}
.faq-question::after { /* Plus/minus indicator */
    content: '+';
    position: absolute;
    right: var(--base-padding);
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5em;
    color: var(--faq-active-indicator-color);
    transition: transform 0.2s ease-in-out;
}
.faq-item.active .faq-question::after {
    content: '–'; /* Minus sign */
}
.faq-answer { /* This is a p */
    background-color: var(--faq-answer-background-color);
    color: var(--faq-answer-text-color);
    padding: var(--base-padding);
    margin: 0;
    display: none; /* Hidden by default, JS will toggle */
    border-top: 1px solid var(--faq-item-border-color);
}
.faq-item.active .faq-answer {
    display: block;
}

/*--------------------------------------------------------------
# Pros/Cons Table
--------------------------------------------------------------*/
.wp-block-table.pros-cons-table table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--section-spacing-vertical);
}
.wp-block-table.pros-cons-table th,
.wp-block-table.pros-cons-table td {
    border: 1px solid var(--secondary-color);
    padding: calc(var(--base-padding) / 2);
    text-align: left;
}
.wp-block-table.pros-cons-table thead th {
    color: var(--text-color-headings);
    font-weight: bold;
}
.wp-block-table.pros-cons-table .pros-header {
    background-color: var(--pros-cons-table-pros-header-bg);
}
.wp-block-table.pros-cons-table .cons-header {
    background-color: var(--pros-cons-table-cons-header-bg);
}
.wp-block-table.pros-cons-table tbody td ul {
    margin: 0;
    padding-left: 1.2em;
}

/*--------------------------------------------------------------
# Responsive
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
	:root {
		--heading-h1-size: 2.5rem;
		--heading-h2-size: 1.8rem;
		--heading-h3-size: 1.5rem;
	}

    .site-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .site-branding {
        margin-bottom: var(--base-margin);
    }

	.menu-toggle {
		display: block;
        background: var(--secondary-color);
        color: var(--header-text-color);
        border: none;
        padding: 0.5em 1em;
        border-radius: 3px;
        cursor: pointer;
        margin-bottom: var(--base-margin);
	}
	.main-navigation ul {
		display: none; /* Hidden by default on mobile */
        flex-direction: column;
        width: 100%;
	}
    .main-navigation ul.toggled-on { /* Class added by JS */
        display: flex;
    }
	.main-navigation ul ul { /* Sub-menus on mobile */
		position: static;
        box-shadow: none;
        background-color: transparent;
	}
    .main-navigation a {
        padding: 0.8em var(--base-padding);
        border-bottom: 1px solid var(--secondary-color);
    }
    .main-navigation ul li:last-child a {
        border-bottom: none;
    }
}

@media screen and (max-width: 480px) {
    :root {
		--heading-h1-size: 2rem;
		--heading-h2-size: 1.6rem;
		--heading-h3-size: 1.3rem;
        --base-padding: 0.8rem;
	}
    #content {
        padding: var(--section-spacing-vertical) var(--base-padding);
    }
    .wp-block-button__link { /* Make buttons full width on small screens */
        width: 100%;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    .wp-block-buttons .wp-block-button {
        width: 100%;
    }
}