/*
Theme Name: Lemondrilla
Version: 7.0 (Stable & Final)
Author: Adam Porkoláb
Author URI: https://adamporkolab.hu
Description: A grotesque, satirical writer's blog theme born from rejection and lemon-fueled rage.
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lemondrilla
Tags: grotesque, lemon, satire, writing, custom-theme, responsive
*/

@import url('https://fonts.googleapis.com/css2?family=Special+Elite&family=Staatliches&display=swap');

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

:root {
  --font-body: 'Special Elite', monospace;
  --font-heading: 'Staatliches', sans-serif;
  --color-background: #fdfaf0;
  --color-surface: #ffffff;
  --color-text: #1a1a1a;
  --color-dark: #111111;
  --color-acid-yellow: #faff00; 
  --color-lemon-rage: #f1c40f;
  --spacing-m: 1rem;
  --spacing-l: 2rem;
  --spacing-xl: 4rem;
  --menu-width: 150px; /* Menü szélességének változója */
}

/* --- === FŐ ELRENDEZÉS (CSS GRID) === --- */
body {
  font-family: var(--font-body);
  background-color: var(--color-background);
  color: var(--color-text);
  margin: 0;
  line-height: 1.8;
  font-size: 18px;
  overflow-wrap: break-word;
  
  /* Létrehozunk egy kéthasábos rácsot */
  display: grid;
  grid-template-columns: var(--menu-width) 1fr;
}

body.no-scroll { overflow: hidden; }

/* A menü, gombok, és a teljes képernyős overlay nem részei a gridnek */
.vertical-fixed-nav,
.rage-mode-toggle,
.mobile-menu-toggle,
.mobile-menu-overlay,
.rage-meter {
    grid-column: 1 / -1; /* Átfogják a teljes rácsot */
}

/* A header, main, és footer a MÁSODIK, széles hasábba kerülnek */
.site-header,
.site-main,
.site-footer {
    grid-column: 2 / -1;
}

body.rage-mode-active {
  --color-background: #111111;
  --color-surface: #1a1a1a;
  --color-text: #f0f0f0;
  --color-dark: #ffffff;
  --color-lemon-rage: var(--color-acid-yellow);
}

.lemondrilla-title {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: -1px;
  color: var(--color-dark);
  font-size: clamp(2.8rem, 7vw, 5.5rem);
  text-align: center;
  text-shadow: 2px 2px 0 var(--color-dark);
  transition: text-shadow 0.2s ease;
  line-height: 1.1;
}
.lemondrilla-title:hover { text-shadow: 3px 3px 0 var(--color-lemon-rage); }
.entry-title a { color: inherit; text-decoration: none; }

.page-header .page-title { font-size: clamp(2.2rem, 6vw, 4rem); }

.site-header { 
  padding: var(--spacing-l) 0; 
  display: flex;
  justify-content: center;
}

.site-branding {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.custom-logo {
  width: clamp(180px, 30vw, 350px); 
  max-width: 90%;
  height: auto;
  mix-blend-mode: multiply;
}
.site-tagline {
  font-family: var(--font-body);
  font-size: 1.25rem;
  color: var(--color-text);
  margin: 1rem auto 0 auto;
  padding: 0 1rem;
  max-width: 45ch;
  text-align: center;
}
.rage-mode-active .custom-logo {
    mix-blend-mode: screen;
    filter: invert(1);
}

.vertical-fixed-nav {
    position: fixed; left: 20px; top: 7.5vh;
    height: 85vh; width: 120px;
    z-index: 999; display: flex;
    flex-direction: column; justify-content: space-between;
    align-items: center; 
    padding: 1rem 0;
    border-left: 2px dotted var(--color-text);
}
.vertical-fixed-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: space-between; height: 100%; }
.vertical-fixed-nav a {
    font-family: var(--font-heading);
    color: var(--color-text); text-transform: uppercase;
    text-decoration: none; font-size: 1.5rem;
    writing-mode: vertical-rl; transform: rotate(180deg);
    padding: 1rem 0.5rem; transition: color 0.2s ease, transform 0.2s ease;
}
.vertical-fixed-nav a:hover { color: var(--color-dark); background:none; transform: rotate(180deg) scale(1.1); }

.mobile-menu-overlay {
    position: fixed; top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: rgba(10, 10, 10, 0.98);
    z-index: 1001; display: flex;
    align-items: flex-start; justify-content: center;
    padding: 15vh 1rem 2rem 1rem;
    overflow-y: auto; opacity: 0; visibility: hidden;
    transform: scale(1.1); transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}
.mobile-menu-overlay.is-open { opacity: 1; visibility: visible; transform: scale(1); }
.mobile-navigation ul { list-style: none; margin: 0 0 2rem 0; padding: 0; text-align: center; }
.mobile-navigation a {
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 8vw, 2.5rem);
    color: var(--color-background);
    line-height: 1.4; display: block;
    padding: 0.4rem 1rem; text-decoration: none;
}
.mobile-navigation a:hover { color: var(--color-acid-yellow); background: none; }
.mobile-rage-mode-container { text-align: center; color: var(--color-background); font-family: var(--font-heading); font-size: 1.5rem; }
.mobile-rage-mode-switch {
    display: inline-block; vertical-align: middle;
    width: 60px; height: 34px; background: #555;
    border-radius: 34px; border: none; cursor: pointer;
    position: relative; margin-left: 1rem;
    transition: background-color 0.2s ease;
}
.switch-handle {
    position: absolute; top: 4px; left: 4px;
    width: 26px; height: 26px;
    background: #fff; border-radius: 50%;
    transition: transform 0.2s ease;
}
.rage-mode-active .mobile-rage-mode-switch { background-color: var(--color-lemon-rage); }
.rage-mode-active .switch-handle { transform: translateX(26px); }

.rage-mode-toggle,
.mobile-menu-toggle {
  position: fixed; bottom: 20px; right: 20px;
  font-size: 3rem; background: none; border: none;
  cursor: pointer; z-index: 1002;
  transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.rage-mode-toggle:hover,
.mobile-menu-toggle:hover { transform: scale(1.2) rotate(360deg); }
.mobile-menu-toggle { display: none; }

.site-main {
  max-width: 800px;
  margin: var(--spacing-xl) auto;
  padding: 0 1.5rem;
}

.site-footer {
    background: var(--color-dark);
    color: var(--color-background);
    padding: var(--spacing-l);
    text-align: center;
    margin-top: var(--spacing-xl);
}

@media (max-width: 900px) {
    body {
        display: block; /* Visszaállítjuk az alap elrendezést, a grid megszűnik */
    }
    .vertical-fixed-nav,
    .rage-mode-toggle { display: none; }
    .mobile-menu-toggle { display: block; }

    .lemondrilla-title {
        font-size: clamp(2rem, 10vw, 2.8rem);
        line-height: 1.1; letter-spacing: -1.5px;
        text-shadow: 1px 1px 0 var(--color-dark);
    }
    .lemondrilla-title:hover { text-shadow: 2px 2px 0 var(--color-lemon-rage); }
    .page-header .page-title { font-size: clamp(1.8rem, 8vw, 2.2rem); }
}

@media (min-width: 1200px) {
  .site-main { max-width: 1100px; }
  .custom-logo { width: clamp(180px, 30vw, 450px); }
  .site-tagline { font-size: 1.4rem; }
}

.entry-article {
  background: var(--color-surface);
  padding: var(--spacing-l);
  border: 2px dotted var(--color-dark);
  margin-bottom: var(--spacing-xl);
  transition: box-shadow 0.2s ease;
}
.entry-article:hover { box-shadow: 10px 10px 0 var(--color-lemon-rage); }
.entry-thumbnail img {
    display: block; width: 100%; height: 100%;
    aspect-ratio: 16 / 9; object-fit: cover;
    transition: transform 0.3s ease;
}
.entry-thumbnail a:hover img { transform: scale(1.05); }
.single-post-thumbnail {
    margin-bottom: var(--spacing-l);
    border: 2px dotted var(--color-dark);
    padding: 0.5rem;
}
.single-post-thumbnail img { aspect-ratio: auto; }
.entry-content, .entry-summary { font-size: 1.1em; }
.entry-meta {
    font-family: var(--font-body); font-size: 0.9rem;
    color: #888; text-align: center;
    margin-bottom: var(--spacing-m); text-transform: uppercase;
}
.rage-mode-active .entry-meta { color: #999; }
.entry-content h2, .entry-content h3, .entry-content h4 {
    font-family: var(--font-heading);
    text-transform: uppercase; letter-spacing: -1px;
    text-shadow: 1px 1px 0 var(--color-dark);
    margin-top: var(--spacing-xl);
}
.entry-content h2 { font-size: 2.2rem; }
.entry-content h3 { font-size: 1.8rem; }
.entry-content a, .entry-summary a {
    color: var(--color-lemon-rage);
    text-decoration: underline; text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}
.entry-content a:hover, .entry-summary a:hover {
    color: var(--color-dark);
    background-color: var(--color-acid-yellow);
    text-decoration: underline;
}
.entry-content hr { border: none; border-top: 2px dotted var(--color-dark); margin: var(--spacing-xl) auto; }
.rage-meter {
    position: fixed; top: 0; left: 0;
    height: 6px; background: var(--color-lemon-rage);
    width: 0%; z-index: 2000;
    box-shadow: 0 0 10px var(--color-lemon-rage), 0 0 20px var(--color-lemon-rage);
}
.nav-links {
    font-family: var(--font-heading);
    text-transform: uppercase; font-size: 1.5rem;
    display: flex; justify-content: space-between;
    margin-top: var(--spacing-xl);
    border-top: 2px dotted var(--color-dark);
    padding-top: var(--spacing-l);
}
.nav-links a { color: var(--color-text); text-decoration: none; }
.nav-links a:hover {
    color: var(--color-dark);
    background: linear-gradient( to bottom, var(--color-acid-yellow) 0%, var(--color-acid-yellow) 100% );
    background-position: 0 70%; background-repeat: repeat-x;
    background-size: 4px 10px;
}
::selection { background-color: var(--color-acid-yellow); color: #000; }
::-webkit-scrollbar { width: 12px; background-color: var(--color-background); }
::-webkit-scrollbar-thumb {
  background-color: var(--color-lemon-rage);
  border: 2px solid var(--color-background);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--color-acid-yellow); }
.fade-in-element { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
.fade-in-element.is-visible { opacity: 1; transform: translateY(0); }
.wp-block-quote.is-style-lemon-zest {
  border-left: 5px solid var(--color-lemon-rage);
  padding: 1rem 1.5rem;
  background-color: var(--color-background);
  position: relative; margin: 2rem 0;
}
.wp-block-quote.is-style-lemon-zest::before {
  content: '🍋'; position: absolute;
  left: -20px; top: -15px;
  font-size: 2rem; line-height: 1;
  transform: rotate(-15deg);
}
.wp-block-quote.is-style-lemon-zest p { font-family: var(--font-body); font-size: 1.2rem; font-style: italic; }
.comments-area { margin-top: var(--spacing-xl); padding-top: var(--spacing-l); border-top: 2px dotted var(--color-dark); }
.comments-title, .comment-reply-title { font-family: var(--font-heading); text-transform: uppercase; font-size: 2rem; margin-bottom: var(--spacing-l); color: var(--color-dark); }
.comment-list { list-style: none; padding: 0; margin: 0; }
.comment-body { margin-bottom: var(--spacing-l); padding: var(--spacing-m); background-color: var(--color-surface); border-left: 3px solid var(--color-lemon-rage); position: relative; }
.comment-author .avatar { position: absolute; top: 1rem; left: -65px; border-radius: 50%; border: 2px solid var(--color-dark); }
.comment-meta { margin-bottom: var(--spacing-m); }
.comment-author .fn { font-family: var(--font-heading); font-style: normal; font-size: 1.2rem; color: var(--color-dark); }
.comment-metadata a { font-family: var(--font-body); font-size: 0.9rem; color: #777; text-decoration: none; }
.rage-mode-active .comment-metadata a { color: #aaa; }
.comment-content p { font-size: 1rem; line-height: 1.7; }
.reply .comment-reply-link { font-family: var(--font-heading); text-decoration: none; background: var(--color-dark); color: var(--color-lemon-rage); padding: 0.25rem 0.75rem; font-size: 0.9rem; display: inline-block; margin-top: var(--spacing-s); }
.rage-mode-active .reply .comment-reply-link { background: var(--color-dark); }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form textarea {
  width: 100%; padding: 0.75rem; border: 2px dotted var(--color-dark);
  background: var(--color-background); color: var(--color-text);
  font-family: var(--font-body); margin-bottom: 1rem;
}
.comment-form input[type="submit"] {
  font-family: var(--font-heading); background: var(--color-dark);
  color: var(--color-lemon-rage); border: none;
  padding: 0.75rem 1.5rem; cursor: pointer;
  font-size: 1rem; text-transform: uppercase;
}
.related-posts { margin-top: var(--spacing-xl); padding-top: var(--spacing-l); border-top: 2px dotted var(--color-dark); }
.related-posts-title { font-family: var(--font-heading); font-size: 2rem; text-transform: uppercase; color: var(--color-dark); }
.related-posts ul { list-style: none; padding: 0; }
.related-posts li a { font-family: var(--font-body); font-size: 1.2rem; text-decoration: none; color: var(--color-text); }
.related-posts li a:hover { text-decoration: underline; color: var(--color-lemon-rage); }
.alm-listing {
    list-style: none; padding: 0; margin: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: var(--spacing-l);
}
.alm-listing li { padding: 0; margin: 0; }
.alm-listing .entry-article { height: 100%; display: flex; flex-direction: column; }
.alm-listing .entry-header { margin-top: auto; }
.alm-listing .lemondrilla-title { font-size: clamp(2rem, 5vw, 2.5rem); text-shadow: 1px 1px 0 var(--color-dark); }
.alm-listing .lemondrilla-title a { text-decoration: none !important; color: var(--color-dark) !important; }
.rage-mode-active .alm-listing .lemondrilla-title a { color: var(--color-dark) !important; }
.alm-listing .lemondrilla-title a:hover { color: var(--color-lemon-rage) !important; }
.alm-btn-wrap .alm-load-more-btn {
    font-family: var(--font-heading) !important; background: var(--color-dark) !important;
    color: var(--color-lemon-rage) !important; border: none !important;
    padding: 0.75rem 1.5rem !important; cursor: pointer !important;
    font-size: 1.2rem !important; text-transform: uppercase !important;
}
.rage-mode-active .alm-btn-wrap .alm-load-more-btn { background: var(--color-dark) !important; }
body.rage-mode-active .mobile-navigation a,
body.rage-mode-active .mobile-rage-mode-container { color: var(--color-text); }
body.rage-mode-active .mobile-navigation a:hover { color: var(--color-acid-yellow); }