/*!
Theme Name: keo
Theme URI: https://danu.at/fakenewsbusters
Author: lschug
Author URI: https://danu.at
Description: Ein barrierefreies Theme für FakeNews-Busters – Projekt Digitale Teilhabe.
Version: 1.0.1
Tested up to: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: keo
Tags: accessibility-ready, custom-menu, custom-logo, featured-images, translation-ready
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
    - CSS Variables & High Contrast
    - Normalize & Reset
    - Box sizing
# Base
    - Typography
    - Elements
    - Links
    - Forms
# Layouts
    - Header & Navigation
    - Content Areas (Hero, Tiles)
# Components
    - Navigation (Desktop/Mobile)
    - Posts and pages
    - Erwin Helper (Custom)
    - Footer
# Plugins
# Utilities
    - Accessibility (Screen Reader & Skip Links)
    - Alignments (WP Core)
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* CSS Variables
--------------------------------------------- */

:root {
    --background-color:   #ffffff;
    --text-color:         #333333;
    --primary-color:      #080808;
    --secondary-color:    #f4f4f9;
    --focus-color:        #ffd700;
    --shadow-color:       rgba(34, 33, 33, 0.15);
    --white:              #ffffff;
    --active-nav-color:   #9d4edd;
    --cta-color:          #9d4edd;
    --login-button-color: #ffc107;
    --transition-fast:    0.2s ease;
    --transition-normal:  0.3s ease;
}

.high-contrast {
    --background-color:  #ffffff;
    --text-color:        #1a1a1a;
    --primary-color:     #00aaaa;
    --secondary-color:   #eeeeee;
    --focus-color:       #5b42f3;
    --shadow-color:      #000000;
    --active-nav-color:  #00aaaa;
    --cta-color:         #00aaaa;
}


/* Normalize & Reset (Combined)
--------------------------------------------- */

html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    font-size: 16px;
}
body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--background-color);
    color: var(--text-color);
    transition: background-color var(--transition-normal), color var(--transition-normal);
}

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


/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */

body, button, input, select, textarea {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-color);
    clear: both;
}

p {
    line-height: 1.7;
    margin-bottom: 1.5em;
}


/* Links
--------------------------------------------- */
a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color var(--transition-fast);
}

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

a:focus, button:focus {
    outline: 4px solid var(--focus-color);
    outline-offset: 3px;
}


/* Elements
--------------------------------------------- */

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

ul, ol {
    margin: 0 0 1.5em;
    padding: 0;
}


/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/

#masthead {
    background-color: var(--background-color);
    border-bottom: 1px solid #e0e0e0;
    position: sticky;
    top: 0;
    z-index: 100;
    transition: background-color var(--transition-normal);
}


body.admin-bar #masthead { top: 32px; }

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 2rem;
    gap: 1rem;
}


/* Hero & Main Content */

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

.hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 60vh;
    margin: 2rem 5rem;
    border-radius: 16px;
    overflow: hidden;
    background-color: #1a1a1a;
}

.entry-content, .entry-summary { 
    padding: 2rem 5rem; 
    max-width: 860px; 
    margin: 0 auto;
}


/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Navigation
--------------------------------------------- */
#primary-menu {
    display: flex;
    list-style: none;
    gap: 0.5rem;
}

#primary-menu li a {
    padding: 0.45rem 1.1rem;
    background-color: var(--secondary-color);
    border-radius: 999px;
    font-size: 0.9rem;
}


/* Tiles */
.tiles-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
}

.tile {
    background-color: var(--secondary-color);
    padding: 2.5rem 2rem;
    border-radius: 16px;
    text-align: center;
}


/* Erwin Helper */
.erwin-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
}


/* Footer */
#colophon {
    margin-top: auto;
    background-color: var(--secondary-color);
    padding: 1.5rem 2rem;
    text-align: center;
}


/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* 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 !important;
    width: 1px;
}

.skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    background: var(--primary-color);
    color: var(--white);
    padding: 0.5rem 1rem;
    z-index: 9999;
}

.skip-link:focus { top: 0; }


/* Alignments
--------------------------------------------- */
.alignleft { float: left; margin: 0.5em 1.5em 0.5em 0; }
.alignright { float: right; margin: 0.5em 0 0.5em 1.5em; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; clear: both; }


/*--------------------------------------------------------------
# Responsive
--------------------------------------------------------------*/
/* ============================================================
   11. RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
	
	.entry-header, .page-header {
        padding: 1rem 1.5rem 0 1.5rem;
    }
    .hero {
		margin: 1rem; min-height: 50vh;
	}
    .entry-content {
		padding: 2rem 1.5rem;
	}

    .header-inner { 
        flex-direction: row;
        flex-wrap: wrap; 
        padding: 0.8rem 1.2rem; 
    }

    #site-navigation {
        display: none; 
        width: 100%;
        order: 3;
        background-color: var(--secondary-color);
        margin-top: 1rem;
        border-radius: 8px;
		padding: 1rem;
    }

    #site-navigation.is-open {
        display: block; 
    }

    #primary-menu {
        flex-direction: column;
        align-items: stretch;
        padding: 1rem;
        gap: 0.5rem;
    }

    #primary-menu li a {
        display: block;
        width: 100%;
        text-align: center;
        padding: 0.75rem;
		background: var(--white);
    }


    .header-left {
		flex: 1;
	}
    .header-hamburger {
		display: block;
	}
	
	@media (min-width: 769px) {
    .header-hamburger {
        display: none;
    }
}