/*
Theme Name:   Poeticdustbin Theme
Theme URI:    https://example.com/poeticdustbin-theme
Author:       Poeticdustbin & Your Name
Author URI:   https://example.com
Description:  A professional, clean, and performant WordPress theme built with vanilla CSS. This theme serves as a robust foundation for any custom WordPress project.
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Tags:         accessibility-ready, block-styles, custom-logo, responsive-layout, featured-images, translation-ready
Text Domain:  poeticdustbin-theme
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
1.0 - CSS Variables
2.0 - Reset and Normalization
3.0 - Global Styles & Typography
4.0 - Layout & Container
5.0 - Accessibility
6.0 - Header & Site Branding
7.0 - Main Content & Posts
8.0 - Footer
9.0 - WordPress Core & Block Editor Styles
10.0 - Animations
--------------------------------------------------------------*/
/* 11.0 - Responsive Styles */

/* 1.0 - CSS Variables */
:root {
    --color-primary: #4A8AB8;       /* Deeper Sky Blue - Primary Brand / Links */
    --color-secondary-bg: #E0C08A;  /* Darker Desert Sand - Secondary Background */
    --color-accent: #C99A3A;        /* Richer Royal Gold - Call-to-Action (CTA) / Accents */
    --color-text: #3A3C6A;          /* Midnight Indigo - Primary Typography */
    --color-border: #E8DBC4;        /* Darker Light Sand - Subtle Backgrounds / Borders */
    --color-background: #F0F0F0;    /* Light Grey - Clean Space / Card Backgrounds */
    --color-header-bg: #3A3C6A;     /* Midnight Indigo for Header */
    --color-white: #FFFFFF;         /* White */

    --font-body: 'Manrope', sans-serif;
    --font-headings: 'Manrope', sans-serif;
    --content-width: 1100px;
    --container-padding: 1.5rem;


    --header-height: auto;
    --footer-height: auto;
    --front-page-header-offset: 100px; /* Space for header on hero */
    --front-page-footer-offset: 80px;  /* Space for footer on hero */
}

/* 2.0 - Reset and Normalization */
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote {
    margin: 0;
}

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

/* 3.0 - Global Styles & Typography */
body {
    font-family: var(--font-body);
    color: var(--color-text);
    background-color: var(--color-background);
    line-height: 1.7;
}

/* Add a subtle animated gradient to interior page backgrounds */
body:not(.front-page) {
    /* Creates a moving, multi-toned "cloudy" background effect */
    background: linear-gradient(125deg, var(--color-header-bg), #484b7c, #222441, #4a4e8a);
    background-size: 600% 600%;
    animation: cloudy-gradient 30s ease infinite;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-headings);
    font-weight: 700;
}

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

/* 4.0 - Layout & Container */
.site {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.site-content {
    /* This makes the main content area grow to fill available space, pushing the footer down. */
    flex-grow: 1;
}

.container {
    max-width: var(--content-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}

/* 5.0 - Accessibility */
.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;
    width: 1px;
    word-wrap: normal !important;
}

/* 6.0 - Header & Site Branding */
.site-header {
    background-color: var(--color-header-bg);
    border-bottom: 1px solid var(--color-header-bg);
    height: var(--header-height);
}
.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.menu-toggle {
    display: none; /* Hidden on desktop */
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    z-index: 10;
}
.hamburger-line {
    display: block;
    width: 24px;
    height: 2px;
    background-color: var(--color-white);
    margin: 5px 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}
.mobile-menu-open .hamburger-line:first-child {
    transform: translateY(7px) rotate(45deg);
}
.mobile-menu-open .hamburger-line:last-child {
    transform: translateY(-7px) rotate(-45deg);
}


.front-page .header-inner {
    width: 100%;
    padding-top: 1.5rem; /* Adjust vertical position from the top */
    padding-bottom: 0;
}
.site-title a {
    font-family: var(--font-headings);
    font-size: 1.8rem;
    font-weight: 400;
    text-decoration: none;
    letter-spacing: 1.5px;

    /* Gradient Animation on Hover */
    background: linear-gradient(90deg, var(--color-white), var(--color-accent), var(--color-white));
    background-size: 200% auto;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    transition: background-position 0.8s ease-in-out;
}
.site-description {
    font-size: 0.9rem;
    color: #666;
}
.main-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}
.main-navigation li {
    margin-left: 2.5rem;
}
.main-navigation a {
    text-decoration: none;
    font-weight: 400;
    color: var(--color-white);
    transition: color 0.2s ease-in-out;
    letter-spacing: 1px;
}
.main-navigation a:hover,
.main-navigation .current-menu-item > a {
    color: var(--color-accent);
}

.site-title a:hover {
    background-position: -100% center;
}

.front-page .site-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 5; /* Position header content above the gradient overlays */
    background: transparent !important;
    border: none !important;
    height: auto;
    display: block;
}

/* Front Page Hero */
.front-page-hero {
    position: relative; /* This is crucial for positioning the gradient overlays */
    background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url('img/main-image.jpg');
    background-size: 105% auto; /* Slightly zoom in to allow for movement */
    background-position: center center;
    background-repeat: no-repeat;
    height: 100vh;
    animation: animate-clouds 80s linear infinite alternate;
    /* The hero is now a positioning container for its content */
}
.front-page-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 40vh; /* Generous height for a long, soft fade */
    background: linear-gradient(to bottom, rgba(58, 60, 106, 0.85) 0%, transparent 100%);
    z-index: 1;
}
.front-page-hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40vh; /* Generous height for a long, soft fade */
    background: linear-gradient(to top, rgba(58, 60, 106, 0.85) 0%, transparent 100%);
    z-index: 1;
}
.hero-content {
    position: absolute;
    top: var(--front-page-header-offset);
    bottom: var(--front-page-footer-offset);
    left: 0;
    right: 0;
    z-index: 2; /* Ensure tagline is above the gradient overlays */
    padding-left: 5vw;
    display: flex;
    align-items: center; /* Vertically center the glass container in the new calculated space */
    text-align: left;
}
.glass-container {
    background: rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px); /* For Safari */
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 4rem 2.5rem;
    max-width: 550px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
    animation: float 8s ease-in-out infinite;
}
.glass-container:hover,
.glass-container:focus-within {
    animation-play-state: paused;
}
.hero-title {
    font-size: 3.5rem;
    line-height: 1.2;
    color: var(--color-white);
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
    margin-bottom: 1rem;
}
.hero-blurb {
    color: var(--color-white);
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
    font-size: 1.1rem;
}
/* 7.0 - Main Content & Posts */
.site-main {
    padding: 0 0 !important; /* This is overridden for interior pages below */
}

.posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.grid-item {
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.grid-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.post-thumbnail img {
    width: 100%;
    height: auto;
    display: block;
}

.grid-item .entry-header {
    padding: 1rem 1.5rem;
}

.grid-item .entry-title {
    font-size: 1.2rem;
    margin-bottom: 0;
}

.entry-title {
    margin-bottom: 0.5em;
}
.entry-content {
    margin-top: 1em;
}

/* Styles for Single Pages */
.page-wrapper {
    /* Glass morphism styles */
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px); /* For Safari */
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);

    /* Layout, Spacing, and Readability */
    padding: 2rem 3rem 3rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
    border-radius: 16px; /* Softer radius for the glass effect */
    color: var(--color-white); /* Make text readable against the dark, blurry background */
}

.page-wrapper .entry-header {
    margin-bottom: 2rem;
    text-align: center;
}

.page-wrapper .entry-title {
    font-size: 2.8rem;
    line-height: 1.3;
}

/* Add some vertical rhythm to page content */
.page-wrapper .entry-content > *:not(:last-child) {
    margin-bottom: 1.5em;
}

/* Ensure links inside the glass container are readable and on-brand */
.page-wrapper .entry-content a {
    color: var(--color-accent);
    text-decoration: underline;
}

.page-wrapper .entry-content a:hover {
    color: var(--color-white);
}

body:not(.front-page) .site-main {
    padding: 2rem 0;
}

/* 8.0 - Footer */
.site-footer {
    padding: 2rem 0;
    background-color: var(--color-header-bg);
    border-top: 1px solid var(--color-header-bg);
    font-size: 0.9em;
    text-align: center;
    color: var(--color-white);
    height: var(--footer-height);
}
.site-footer a {
    color: var(--color-accent);
    text-decoration: underline;
}
.site-footer a:hover {
    color: var(--color-white);
}

/* 10.0 - Animations */
@keyframes float {
	0% {
		transform: translateY(0px);
	}
	50% {
		transform: translateY(-15px);
	}
	100% {
		transform: translateY(0px);
	}
}

@keyframes cloudy-gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

@keyframes animate-clouds {
	0% {
		background-position: 0% center;
	}
	100% {
		background-position: 100% center;
	}
}

/* 11.0 - Responsive Styles */
@media screen and (max-width: 820px) {
    /* --- General Layout --- */
    .container {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    /* --- Header & Mobile Navigation --- */
    .menu-toggle {
        display: block;
    }

    .main-navigation {
        display: none; /* Hide desktop nav */
    }

    .mobile-menu-open .main-navigation {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--color-header-bg);
        z-index: 5;
        justify-content: center;
        align-items: center;
    }

    .mobile-menu-open .main-navigation ul {
        flex-direction: column;
        text-align: center;
    }

    .mobile-menu-open .main-navigation li {
        margin: 1rem 0;
    }

    .mobile-menu-open .main-navigation a {
        font-size: 1.5rem;
    }

    /* --- Front Page on Mobile --- */

    /* Revert front page to a scrollable layout */
    .front-page {
        overflow-y: auto;
    }

    /* Restore solid header and footer */
    .front-page .site-header,
    .front-page .site-footer {
        position: static;
        background: var(--color-header-bg) !important;
        border: none;
        height: auto;
    }

    .front-page .site-footer {
        border-top: 1px solid var(--color-header-bg);
    }

    /* Adjust hero section */
    .front-page-hero {
        height: auto;
        min-height: 600px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center; /* Center content */
        animation: none; /* Disable cloud animation on mobile */
        background-size: cover; /* Ensure image covers the area on mobile */
    }

    /* Remove gradient overlays */
    .front-page-hero::before,
    .front-page-hero::after {
        display: none;
    }

    /* Adjust hero content positioning and size */
    .hero-content {
        position: static;
        top: auto;
        bottom: auto;
        padding: 0 var(--container-padding);
        width: 100%;
        max-width: 450px;
        display: block;
    }

    .glass-container {
        padding: 2rem 1.5rem;
        max-width: 100%;
        animation: none; /* Disable floating animation on mobile */
    }

    .hero-title {
        font-size: 2.5rem;
    }

    .hero-blurb {
        font-size: 1rem;
    }

    .entry-title {
        font-size: 2rem;
    }
}