/*
Theme Name: Rich Wilde and the Tome of Madness
Theme URI: https://epi-x.gr/
Author: Eleni Stathaki
Author URI: https://epi-x.gr/
Description: A dark gaming theme inspired by Tome of Madness.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rich-wilde-and-the-tome-of-madness
Tags: custom-background, custom-logo, custom-menu, editor-style, featured-images, full-width-template, rtl-language-support, sticky-post, theme-options, translation-ready, block-styles, wide-blocks, accessibility-ready
*/

/* Table of Contents
--------------------------------------------------------------
1.0 - Reset
2.0 - Typography
3.0 - Elements
4.0 - Forms
5.0 - Navigation
    5.1 - Links
    5.2 - Menus
6.0 - Accessibility
7.0 - Alignments
8.0 - Clearings
9.0 - Widgets
10.0 - Content
    10.1 - Posts and Pages
    10.2 - Comments
11.0 - Layout
    11.1 - Site Header
    11.2 - Site Content
    11.3 - Site Footer
12.0 - Blocks
    12.1 - Common Blocks
    12.2 - Formatting
    12.3 - Layout Elements
    12.4 - Widgets Blocks
13.0 - Components
    13.1 - Buttons
    13.2 - FAQ Accordion
    13.3 - Tables (Pros/Cons, Table of Contents)
14.0 - Media Queries
    14.1 - Mobile Devices
    14.2 - Tablets
    14.3 - Desktops
15.0 - Print
-------------------------------------------------------------- */

/* 1.0 - Reset */
html {
    box-sizing: border-box;
}

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

body, h1, h2, h3, h4, h5, h6, p, ol, ul, figure, blockquote, dl, dd {
    margin: 0;
    padding: 0;
}

ol, ul {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
}

/* 2.0 - Typography */
body {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #EAEAEA; /* TEXT_COLOR_BODY */
    background-color: #0A1414; /* BACKGROUND_COLOR_BODY */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
    color: #FFFFFF; /* TEXT_COLOR_HEADINGS */
    margin-bottom: 0.5em;
    line-height: 1.2;
}

h1 { font-size: 3rem; } /* HEADING_H1_SIZE */
h2 { font-size: 2.2rem; } /* HEADING_H2_SIZE */
h3 { font-size: 1.8rem; } /* HEADING_H3_SIZE */
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

p {
	margin-bottom: 1rem; /* BASE_MARGIN */
}

/* Enhanced Vertical Spacing for Blocks */
.wp-block-group,
.wp-block-cover,
.wp-block-columns,
.wp-block-media-text,
.wp-block-table,
.wp-block-verse,
.wp-block-template-part,
.wp-block-heading {
    margin-top: 2rem; /* More top margin for sections/headings */
    margin-bottom: 1rem;
}

.wp-block-paragraph + .wp-block-paragraph {
    margin-top: 0.5rem; /* Less space between consecutive paragraphs if needed */
}

.wp-block-image {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.wp-block-buttons {
    margin-top: 1.5rem !important; /* Ensure space above button groups */
    margin-bottom: 2rem !important; /* More space after button groups */
}

.wp-block-separator {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.wp-block-list {
	margin-top: 1rem;
	margin-bottom: 1rem;
	padding-left: 0; /* Reset padding, will be handled by ul/ol */
}

/* More specific selector for general content lists */
.entry-content ul,
.comment-content ul,
.widget ul,
.wp-block-list ul { /* Ensure bullets for unordered lists within wp-block-list */
	   list-style-type: disc !important;
	   padding-left: 40px !important; /* More explicit padding for indentation */
	   margin-left: 0; /* Ensure no double indentation */
}
.entry-content ol,
.comment-content ol,
.widget ol,
.wp-block-list ol { /* Ensure numbers for ordered lists */
	   list-style-type: decimal !important;
	   padding-left: 40px !important;
	   margin-left: 0;
}

.wp-block-list li,
.entry-content ul > li,
.entry-content ol > li {
	margin-bottom: 0.5rem;
	   /* Fallback for bullets if list-style-type is overridden by something very specific */
	   /* position: relative; */
	   /* padding-left: 20px; If using ::before for bullets */
}
/*
.entry-content ul > li::before {
	   content: "\\2022";
	   color: #EAEAEA;
	   font-weight: bold;
	   display: inline-block;
	   width: 1em;
	   margin-left: -1.3em;
	   position: absolute;
	   left: 20px;
}
*/

a {
    color: #D1D1D1; /* LINK_COLOR */
    transition: color 0.3s ease-in-out;
}

a:hover,
a:focus {
    color: #39FF14; /* LINK_HOVER_COLOR (Neon Green) */
}

/* 3.0 - Elements */
hr {
    border: 0;
    border-top: 1px solid #2A3F3D; /* SECONDARY_COLOR */
    margin: 2rem 0; /* SECTION_SPACING_VERTICAL / 1.5 */
}

/* 5.0 - Navigation */
/* 5.2 - Menus */
.primary-navigation ul,
.footer-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.primary-navigation li,
.footer-navigation li {
    margin-right: 1.5rem; /* Adjust as needed */
}

.primary-navigation li:last-child,
.footer-navigation li:last-child {
    margin-right: 0;
}

.primary-navigation a,
.footer-navigation a {
    display: block;
    padding: 0.5rem 0;
    color: #FFFFFF; /* HEADER_TEXT_COLOR or FOOTER_TEXT_COLOR */
}
.primary-navigation a:hover, .primary-navigation a:focus,
.footer-navigation a:hover, .footer-navigation a:focus {
    color: #39FF14; /* LINK_HOVER_COLOR */
}

/* Current menu item */
.current-menu-item > a {
    font-weight: bold;
    color: #39FF14; /* ACCENT_COLOR */
}


/* 11.0 - Layout */
.container {
    max-width: 1200px; /* MAX_CONTENT_WIDTH */
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem; /* BASE_PADDING */
    padding-right: 1rem; /* BASE_PADDING */
}

/* 11.1 - Site Header */
.site-header {
    background-color: #1A2B2A; /* HEADER_BACKGROUND (New PRIMARY_COLOR) */
    color: #FFFFFF; /* HEADER_TEXT_COLOR */
    padding: 1rem 2rem; /* HEADER_PADDING_VERTICAL HEADER_PADDING_HORIZONTAL */
}

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

.site-branding {
	display: flex;
	align-items: center;
	gap: 0.75rem; /* Space between logo and title */
}

.site-logo-small {
	max-height: 20px; /* Reduced by half */
	width: auto;
	margin-right: 0; /* Remove default margin if any from WP */
}

.site-title {
    margin-bottom: 0; /* Remove default heading margin */
}

.site-title a {
	color: #FFFFFF; /* HEADER_TEXT_COLOR */
	font-size: 1.5rem; /* Adjust as needed, slightly smaller if logo is present */
	font-weight: bold;
	text-decoration: none;
}

.site-description.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
}


.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px; /* MAX_CONTENT_WIDTH */
    margin: 0 auto;
}

/* Layout: logo-left-nav-right */
.logo-left-nav-right .site-branding {
    margin-right: auto;
}
.logo-left-nav-right .primary-navigation {
    margin-left: 2rem;
}


/* 11.2 - Site Content */
.site-content {
    padding-top: 3rem; /* SECTION_SPACING_VERTICAL */
    padding-bottom: 3rem; /* SECTION_SPACING_VERTICAL */
}

main > section,
main > article {
    margin-bottom: 3rem; /* SECTION_SPACING_VERTICAL */
}

main > section:last-child,
main > article:last-child {
    margin-bottom: 0;
}

/* 11.3 - Site Footer */
.site-footer {
    background-color: #0A0F0F; /* FOOTER_BACKGROUND */
    color: #A0A0A0; /* FOOTER_TEXT_COLOR */
    padding: 2rem 1rem; /* Adjust as needed, BASE_PADDING for horizontal */
    text-align: center;
}
.site-footer .container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer-copyright {
    margin-bottom: 1rem;
}

.footer-navigation ul {
    justify-content: center;
}
.footer-navigation a {
    color: #A0A0A0; /* FOOTER_TEXT_COLOR */
}
.footer-navigation a:hover, .footer-navigation a:focus {
    color: #39FF14; /* LINK_HOVER_COLOR */
}

/* 12.0 - Blocks */
/* 12.1 - Common Blocks */
/* WordPress Core Block Styles */
.wp-block-image img {
	border-radius: 8px; /* IMAGE_BORDER_RADIUS */
	box-shadow: 0 4px 15px rgba(0, 255, 0, 0.1); /* IMAGE_SHADOW */
}
.wp-block-image.page-body-logo img { /* Specific style for the logo in body */
    /* max-width: 450px; */ /* Removed max-width to allow WP 'large' size */
    width: auto; /* Let WP control width based on 'large' size, up to content area width */
    height: auto;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2rem; /* More space above body logo */
    margin-bottom: 2rem; /* More space after body logo */
}


/* 13.0 - Components */
/* 13.1 - Buttons */
.wp-block-button__link {
	display: inline-block !important;
	text-align: center !important;
	text-decoration: none !important;
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease !important;
	cursor: pointer !important;
	position: relative !important;
    /* Removed individual margins, handled by .wp-block-buttons container */
}

/* Primary Button Style (is-style-fill or default) - Fiery Red */
body .wp-block-button:not(.is-style-outline) .wp-block-button__link,
body .wp-block-button .wp-block-button__link:not(.is-style-outline) {
	background-color: #D63B3B !important;
	color: #FFFFFF !important;
	border-radius: 8px !important; /* Slightly more rounded */
	padding: 0.85rem 1.75rem !important; /* Slightly larger padding */
	font-weight: bold !important;
	border: 1px solid #B52A2A !important;
	box-shadow: 0 2px 5px rgba(0,0,0,0.2), /* Base shadow for depth */
                0 0 12px rgba(255, 100, 0, 0.6), /* Orange glow */
                0 0 25px rgba(255, 165, 0, 0.4), /* Wider orange glow */
                inset 0 -2px 3px rgba(0,0,0,0.15); /* Inner bottom shadow for 3D effect */
    text-shadow: 0 1px 2px rgba(0,0,0,0.4) !important;
    line-height: 1.3; /* Ensure text is centered well */
}

body .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
body .wp-block-button:not(.is-style-outline) .wp-block-button__link:focus,
body .wp-block-button .wp-block-button__link:not(.is-style-outline):hover,
body .wp-block-button .wp-block-button__link:not(.is-style-outline):focus {
	background-color: #E74C3C !important;
	color: #FFFFFF !important;
	border-color: #D63B3B !important;
	box-shadow: 0 4px 8px rgba(0,0,0,0.3), /* Enhanced depth shadow on hover */
                0 0 18px rgba(255, 100, 0, 0.8), /* Brighter orange glow */
                0 0 35px rgba(255, 165, 0, 0.6), /* Wider, brighter orange glow */
                inset 0 0 8px rgba(255, 215, 0, 0.4), /* Brighter inner gold glow */
                inset 0 -1px 2px rgba(0,0,0,0.1);
    transform: translateY(-1px); /* Slight lift effect */
}

/* Secondary Button Style (is-style-outline) */
body .wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent !important;
	color: #D63B3B !important;
	border: 2px solid #D63B3B !important;
	border-radius: 8px !important;
	padding: 0.75rem 1.5rem !important; /* Adjusted padding */
	font-weight: bold !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

body .wp-block-button.is-style-outline .wp-block-button__link:hover,
body .wp-block-button.is-style-outline .wp-block-button__link:focus {
	background-color: #D63B3B !important;
	color: #FFFFFF !important;
	border-color: #B52A2A !important;
    box-shadow: 0 0 10px rgba(214, 59, 59, 0.6) !important; /* Glow matching button color */
    transform: translateY(-1px);
}


/* 13.2 - FAQ Accordion */
.faq-accordion {
    margin-bottom: 2rem;
}

.faq-item {
    border: 1px solid #2A3F3D; /* FAQ_ITEM_BORDER_COLOR (New SECONDARY_COLOR) */
    margin-bottom: 0.5rem;
    border-radius: 4px; /* Optional */
    overflow: hidden; /* For border-radius on children */
}

.faq-question {
    background-color: #1A2B2A; /* FAQ_QUESTION_BACKGROUND_COLOR (New PRIMARY_COLOR) */
    color: #EAEAEA; /* FAQ_QUESTION_TEXT_COLOR */
    padding: 1rem; /* BASE_PADDING */
    cursor: pointer;
    margin: 0 !important; /* Override heading margins */
    transition: background-color 0.3s ease;
    position: relative; /* For indicator */
}
.faq-question:hover {
    background-color: #2A3F3D; /* FAQ_QUESTION_HOVER_BACKGROUND_COLOR (New SECONDARY_COLOR) */
}

.faq-question::after { /* Basic +/- indicator */
    content: '+';
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5em;
    color: #FFFFFF; /* Or #39FF14 for Neon Green indicator */
}

.faq-item.active .faq-question::after {
    content: '−';
}

.faq-answer {
    background-color: #1A2B2A; /* FAQ_ANSWER_BACKGROUND_COLOR (New PRIMARY_COLOR) */
    color: #D1D1D1; /* FAQ_ANSWER_TEXT_COLOR */
    padding: 1rem; /* BASE_PADDING */
    display: none; /* Hidden by default, shown by JS */
    border-top: 1px solid #2A3F3D; /* Separator */
    margin: 0 !important; /* Override paragraph margins */
}

.faq-item.active .faq-answer {
    display: block;
}

/* 13.3 - Tables (Pros/Cons, Table of Contents) */
/* Table of Contents */
.table-of-contents {
    background-color: #1F3A38; /* TABLE_OF_CONTENTS_BACKGROUND */
    border: 1px solid #2A3F3D; /* TABLE_OF_CONTENTS_BORDER_COLOR (New SECONDARY_COLOR) */
    padding: 1.5rem; /* BASE_PADDING * 1.5 */
    margin-bottom: 2rem; /* SECTION_SPACING_VERTICAL / 1.5 */
    border-radius: 8px; /* IMAGE_BORDER_RADIUS */
}
.table-of-contents-title {
    font-size: 1.5rem; /* Adjust as needed */
    margin-bottom: 1rem;
    color: #FFFFFF; /* TEXT_COLOR_HEADINGS */
}
.table-of-contents ul {
	list-style: disc !important; /* Ensure disc is shown */
	margin-left: 1.5rem; /* Keep indentation */
    padding-left: 20px; /* Standard WP list indentation */
}
.table-of-contents ul ul {
    margin-top: 0.5rem;
    list-style: circle;
}
.table-of-contents li {
    margin-bottom: 0.5rem;
}
.table-of-contents a {
    color: #EAEAEA; /* TEXT_COLOR_BODY */
}
.table-of-contents a:hover {
    color: #39FF14; /* ACCENT_COLOR */
}

/* Pros/Cons Table */
.wp-block-table.pros-cons-table {
    width: 100%;
    margin-bottom: 2rem;
    border-collapse: collapse;
}
.wp-block-table.pros-cons-table th,
.wp-block-table.pros-cons-table td {
    border: 1px solid #2A3F3D; /* SECONDARY_COLOR */
    padding: 0.75rem; /* BASE_PADDING * 0.75 */
    text-align: left;
}
.wp-block-table.pros-cons-table thead th {
    color: #FFFFFF; /* TEXT_COLOR_HEADINGS */
    font-weight: bold;
}
.wp-block-table.pros-cons-table .pros-header {
    background-color: #39FF14; /* PROS_CONS_TABLE_PROS_HEADER_BG (Neon Green) */
}
.wp-block-table.pros-cons-table .cons-header {
    background-color: #8A2BE2; /* PROS_CONS_TABLE_CONS_HEADER_BG (Mystical Accent) */
}
.wp-block-table.pros-cons-table tbody td ul {
	margin-left: 1.2rem; /* Keep indentation */
	list-style: disc !important; /* Ensure disc is shown */
    padding-left: 20px; /* Standard WP list indentation */
}
.wp-block-table.pros-cons-table tbody td ul li {
    margin-bottom: 0.25rem;
}


/* 14.0 - Media Queries */
/* 14.1 - Mobile Devices (e.g., up to 767px) */
@media (max-width: 767px) {
    h1 { font-size: 2.5rem; }
    h2 { font-size: 2rem; }
    h3 { font-size: 1.6rem; }

    .header-inner {
        flex-direction: column;
        align-items: flex-start;
    }
    .primary-navigation {
    	margin-top: 1rem;
    	width: 100%;
    }
       .primary-navigation .menu-toggle { /* Ensure toggle is hidden if it reappears */
           display: none !important;
       }
    .primary-navigation ul {
    	flex-direction: column;
           display: block; /* Ensure menu is visible if toggle was controlling it */
    }
    .primary-navigation li {
    	margin-right: 0;
    	margin-bottom: 0.5rem;
    }
    .primary-navigation a {
    	padding: 0.5rem;
    	border-bottom: 1px solid #2A3F3D; /* SECONDARY_COLOR */
    }
    .primary-navigation li:last-child a {
    	border-bottom: none;
    }

    .site-header {
    	padding: 1rem; /* HEADER_PADDING_VERTICAL */
    }
   }

   /* Hide menu toggle on all screen sizes as per request */
   .menu-toggle {
       display: none !important;
   }
   /* Ensure primary menu is visible if toggle is hidden */
   .primary-navigation ul {
       display: flex !important; /* Use flex for desktop layout */
   }


   /* 14.2 - Tablets (e.g., 768px to 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .container {
        max-width: 90%;
    }
}

/* 14.3 - Desktops (e.g., 1024px and up) */
@media (min-width: 1024px) {
    /* Styles for larger desktops if needed */
}

/* 15.0 - Print */
@media print {
    body {
        background-color: #fff;
        color: #000;
    }
    .site-header, .site-footer, .primary-navigation, .comments-area, .post-navigation {
        display: none !important;
    }
    a {
        color: #000 !important;
        text-decoration: underline !important;
    }
    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "" !important;
    }
    article a[href^="http"]:after {
        content: " (" attr(href) ")";
        font-size: 90%;
    }
}