@font-face {
    font-family: 'II VORKURS Light';
    src: url('assets/fonts/IIVorkursLight.woff2') format('woff2'); /* Relative path without leading slash */
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'II VORKURS Bold';
    src: url('assets/fonts/IIVorkursBold.woff2') format('woff2'); /* Relative path without leading slash */
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

:root {
    --bg-color: #0a0a0a; /* Darker background */
    --text-color: #FCFCF0; /* Updated to consistent off-white */
    --text-secondary-color: #aaa;
    --border-color: #333;
    --header-height-mobile: 60px;
    --header-height-desktop: 70px;
}

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

body {
    font-family: 'II VORKURS Light', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.6;
    padding-top: var(--header-height-mobile);
    position: relative; /* For noise pseudo-element */
    z-index: 0;
}

body::before { /* Noise texture for body */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        /* Use dark noise particles */
        linear-gradient(45deg, rgba(0,0,0,0.02) 25%, transparent 25%), 
        linear-gradient(-45deg, rgba(0,0,0,0.02) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(0,0,0,0.02) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(0,0,0,0.02) 75%);
    background-size: 3px 3px; 
    z-index: -1;
    opacity: 0.15; /* Further reduced intensity */
    pointer-events: none; /* Allow interaction with body */
}

@media (min-width: 768px) {
    body {
       padding-top: var(--header-height-desktop);
    }
}

h2 {
    margin: 0 auto 0.8em;
    font-size: 2rem;
    text-align: center;
    font-family: 'II VORKURS Light', sans-serif;
    font-weight: 300;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.5px;
}

/* Icon base styles for section titles */
h2::before {
    margin-right: 12px;
    display: inline-block;
    vertical-align: middle;
    font-size: 1rem; /* Base size reduced */
}

/* Specific icons for each section matching the menu */
#news > h2::before {
    content: '\25C0\25C0'; /* ◀◀ double left arrow */
    font-size: 1rem;
}

#tips > h2::before {
    content: '\25B6'; /* ▶ right arrow */
    font-size: 1rem;
}

#deals > h2::before {
    content: '\25CB'; /* ○ circle */
    font-size: 2.4rem; /* Increased by 50% as requested */
    line-height: 0.5;
    vertical-align: middle;
    position: relative;
    top: -0.1em;
}

#changelog > h2::before {
    content: '\25A0'; /* ■ square */
    font-size: 1.95rem; /* Increased by 50% as requested */
    line-height: 0.5;
    vertical-align: middle;
    position: relative;
    top: -0.1em;
}

#about > h2::before {
    content: '\2726'; /* ✦ star - using the same as the menu button */
}

/* Center container for the headings */
.page-content {
    text-align: center;
    padding-top: 0;
}

/* Reset text alignment for the content inside */
.page-content .wp-content {
    text-align: left;
    max-width: 800px;
    margin: 0 auto;
}

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

ul {
    list-style: none;
}

img,
svg, /* Added SVG */
video {
    max-width: 100%;
    height: auto;
    display: block;
}

button {
    background: none;
    border: none;
    color: var(--text-color);
    font: inherit;
    cursor: pointer;
    padding: 0.5em 1em;
    border: 1px solid var(--border-color);
    border-radius: 20px;
}

/* --- Layout --- */
#main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px; /* Padding moved back here */
    /* Vertical-align rule added separately below */
    height: var(--header-height-mobile);
    background-color: #0a0a0a; /* Explicit solid dark background */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    transition: transform 0.3s ease-in-out;
}

#main-header.header-hidden {
    transform: translateY(-100%);
}

.header-logo-link {
    display: flex;
    align-items: center;
    height: 100%;
    font-weight: bold;
}

.header-logo-icon { 
     height: 24px;
     width: auto;
     margin-right: 8px;
     vertical-align: middle;
     display: inline-block;
     fill: var(--text-color); /* Ensure SVG fill color */
}

.header-logo-text {
    font-size: 1.2rem;
    font-family: 'II VORKURS Light', sans-serif;
    font-weight: 300;
    color: var(--text-color);
}

/* Apply vertical-align to direct children of main-header for consistency */
#main-header > * {
    vertical-align: middle;
}

/* Apply vertical-align to direct children of main-header for consistency */
#main-header > * {
    vertical-align: middle;
}

.header-username { /* Username display */
    position: absolute;
    right: 100px; /* Position from right edge */
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-color); /* Use variable for consistency */
    font-size: 1rem; /* Increased size */
    max-width: calc(50% - 120px); /* Adjust max-width */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: none; /* Hide by default */
}

main {
    padding: 0px 20px 40px;
}

.content-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    display: none; /* Hide content by default */
}

/* Show content ONLY when in content mode */
body.state-content .content-wrapper {
    display: block; 
}

.page-content {
    display: none; /* Hidden by default */
    padding-bottom: 20px;
}

.page-content.active {
    display: block; /* Shown when active */
}


/* --- Overlay Menu --- */
#menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: var(--bg-color); /* Ensure dark background */
    opacity: 0;
    visibility: hidden;
    display: none; /* Changed from flex to none for better initial load */
    flex-direction: column;
    align-items: stretch; 
    justify-content: flex-start;
    padding: 0;
    z-index: 2000;
    overflow: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0s linear 0.3s;
}

/* Control overlay visibility via body class - ONLY when menu is open */
/* Restore splash state visibility */
body.state-splash #menu-overlay,
body.state-menu-open #menu-overlay {
    opacity: 1;
    visibility: visible;
    display: flex; /* Ensure flex display when visible */
    transition: opacity 0.3s ease-in-out, visibility 0s linear 0s;
}

/* Ensure overlay is hidden by default */
body:not(.state-splash):not(.state-menu-open) #menu-overlay {
    opacity: 0;
    visibility: hidden;
    display: none;
}

/* Show Close button ONLY when menu is open */
/* body.state-splash #close-menu, */ /* Removed splash state */
body.state-menu-open #close-menu {
    display: inline-block;
}

#overlay-header {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: var(--header-height-mobile);
    padding: 0 20px;
    background-color: #0a0a0a; /* Explicit solid dark background */
    flex-shrink: 0;
    z-index: 2001; /* Ensure header is layered correctly */
    box-shadow: none; /* Removed shadow */
}

#overlay-header > * { /* Target direct children: logo link and close button */
    vertical-align: middle; /* Explicitly align vertically */
}

/* REMOVED Gradient fade pseudo-element for overlay header */
/*
#overlay-header::after { 
    content: '';
    position: absolute;
    top: 100%; 
    left: 0;
    right: 0; 
    height: 30px; 
    background: linear-gradient(to bottom, #111 0%, #282828 50%, #404040 100%); 
    pointer-events: none; 
    z-index: 2000; 
}
*/

#menu-overlay .overlay-logo-link {
    display: flex;
    align-items: center;
    height: 100%;
    font-size: 1.2rem;
    font-weight: bold;
}

#menu-overlay .overlay-logo-link .header-logo-text {
    font-family: 'II VORKURS Light', sans-serif;
    font-weight: 300;
    color: var(--text-color);
}

#close-menu {
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 0.5em 1em;
    transition: color 0.3s ease, border-color 0.3s ease;
    display: none; /* Hide by default */
    min-width: 100px; /* Match width with menu-trigger */
    text-align: center; /* Center text */
    align-self: center; /* Ensure vertical centering */
    margin-left: auto; /* Push to the right edge */
    margin-right: 15px; /* Reduced by 5px total to move right */
}

/* Removed #close-menu::before as we now use inline icon */

#close-menu:hover {
    color: #fff;
    border-color: #555;
}

/* Spin the star icon on hover */
#close-menu:hover .icon,
#menu-trigger:hover .icon {
    display: inline-block;
    animation: spin 1s linear infinite;
}

/* Icon styling for menu buttons */
.icon {
    display: inline-block;
    font-size: 1.1em;
    vertical-align: middle;
    margin-right: 5px;
}

/* --- Main Header Menu Button Styles (Match Close Button) --- */
#menu-trigger {
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 0.5em 1em;
    transition: color 0.3s ease, border-color 0.3s ease;
    /* Default state: HIDDEN */
    display: none;
    min-width: 100px; /* Ensure consistent width */
    text-align: center; /* Center text */
    align-self: center; /* Ensure vertical centering */
}

/* Show Menu button ONLY in content state */
body.state-content #menu-trigger {
    display: inline-block; /* Or flex, depending on parent */
}

/* Hide Menu button on splash screen OR when menu is open (REDUNDANT but safe) */
/*
body.state-splash #menu-trigger,
body.state-menu-open #menu-trigger {
    display: none;
}
*/

/* Removed #menu-trigger::before as we now use inline icon */

#menu-trigger:hover {
    color: #fff;
    border-color: #555;
}

/* --- Overlay Menu Button Navigation Styles --- */

/* Container within the overlay */
.overlay-nav-container { /* The main overlay area */
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Align items to top */
    flex-grow: 1;
    padding: 20px;
    /* background: radial-gradient(ellipse at center, #484848 0%, #404040 70%, #383838 100%); */ /* REMOVED */
    /* Ensure padding accounts for header */
    padding-top: calc(var(--header-height-mobile) + 20px);
    position: relative; /* For z-index context */
    z-index: 0; /* Ensure content is above potential body pseudo-element */
}

/* REMOVED Noise/texture overlay for container */
/* .overlay-nav-container::before { ... } */

@media (min-width: 768px) {
    .overlay-nav-container {
        padding-top: calc(var(--header-height-desktop) + 20px);
    }
}

.overlay-button-nav { /* The lighter grey modal panel */
    /* Subtle gradient darkening towards bottom */
    background: linear-gradient(to bottom right, #555 0%, #3A3A3A 100%); /* Diagonal gradient */
    padding: 30px 40px;
    border-radius: 8px;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.5); /* Stronger inset shadow */
    margin-bottom: 20px; /* Add margin to raise the panel up */
    position: relative; /* For separator lines */
    width: auto;
    max-width: calc(100% - 40px);
}

/* Hide Separator lines */
.overlay-button-nav::before { display: none; }

.overlay-button-nav::after { display: none; }

.overlay-button-nav ul { /* The dark bar holding buttons - acting as inner panel */
    list-style: none;
    padding: 25px 25px 15px 25px; /* Reduced bottom padding to match visual space from labels to edge */
    margin: 25px 0; /* Space between lines and buttons */
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 4px; /* Even closer buttons */
    flex-wrap: wrap;
    /* position: relative; */ /* No longer needed */
    background: linear-gradient(to bottom right, #2a2a2a 0%, #1a1a1a 100%); /* Darker gradient background */
    border-radius: 12px; /* Original radius */
    box-shadow: inset 0 6px 10px rgba(0,0,0,0.5); /* Inset shadow */
}

.overlay-button-nav li {
    /* z-index: 1; */ /* No longer needed */
    /* Ensure label below is centered within this width */
    text-align: center; 
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    width: 130px; /* Wider column for larger button */
}

.overlay-button-nav a.overlay-link {
    display: block;
    text-decoration: none;
    cursor: pointer;
    margin-bottom: 20px; /* Reduced space after button to balance with top padding */
    transition: background-color 0.2s ease;
    /* Reset inherited text styles */
    font-size: inherit;
    font-family: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
    background-color: transparent !important; /* Override any highlight */
}

/* Virtual button style */
.virtual-button {
    width: 115px; /* ~15% Bigger button */
    height: 115px;
    /* background-color: #FCFCF0; */ /* Changed to Off-white */
    background: linear-gradient(to bottom, #FFFFFF 0%, #EFEFE5 100%); /* Subtle gradient */
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    border: 1px solid rgba(0,0,0,0.4); /* Dark border for separation */
    /* Adjusted shadows for new base color */
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),
                 0 1px 1px rgba(255,255,255,0.9), /* Brighter highlight */
                 0 2px 3px rgba(0,0,0,0.2);
    /* Adjusted transition: slowed down box-shadow */
    transition: background 0.5s ease, box-shadow 0.9s ease, border-color 0.5s ease, transform 0.15s ease-out; 
    margin-bottom: 15px; /* Restore original space AFTER button */
}

/* Button hover state - Lift effect REMOVED */
.overlay-button-nav a.overlay-link:hover .virtual-button {
    /* background-color: #EAEAE0; */ /* Darker off-white hover */
    background: linear-gradient(to bottom, #F5F5F5 0%, #DADAD0 100%); /* Darker gradient hover */
    border-color: rgba(0,0,0,0.6); /* Darker border on hover */
    /* transform: translateY(-2px); */ /* Subtle lift REMOVED */
    /* Keep base shadow on hover, no extra outer shadow */
    /* Restore hover shadow */
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),
                 0 1px 1px rgba(255,255,255,0.9), 
                 0 4px 6px rgba(0,0,0,0.3); /* Slightly larger outer shadow on hover */
}

/* Button active state - Press effect */
.overlay-button-nav a.overlay-link:active .virtual-button {
    transform: scale(0.98); /* Slight shrink */
    box-shadow: inset 0 3px 5px rgba(0,0,0,0.25), /* Deeper inset shadow */
                 0 1px 1px rgba(255,255,255,0.9), 
                 0 1px 2px rgba(0,0,0,0.2); /* Reduced outer shadow */
    transition-duration: 0.05s; /* Faster press transition */
}

/* Embossed Circle Effect */
.virtual-button::before {
    content: '';
    display: block;
    width: 65%;
    height: 65%;
    /* background-color: #EAEAE0; */ /* Darker off-white inner circle */
    background: linear-gradient(to bottom, #F5F5F5 0%, #DADAD0 100%); /* Inner circle gradient */
    border-radius: 50%;
    /* Adjusted shadows for new base color */
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.2),
                0 1px 1px rgba(255,255,255,0.7); /* Adjusted inner highlight */
}

/* Red Dot for Hover State (Hidden by default) */
.virtual-button::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 24px; /* Slightly bigger dot size */
    height: 24px; /* Slightly bigger dot size */
    background-color: #444; /* Changed base to Dark Grey */
    border-radius: 50%;
    box-shadow: 0 0 4px rgba(68, 68, 68, 0.7); /* Dark grey glow */
    z-index: 3;
    opacity: 0; 
    transition: opacity 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; /* Added background transition */
}

/* Show Red Dot ONLY on link hover */
.overlay-button-nav a.overlay-link:hover .virtual-button::after {
    opacity: 1; /* Show dot */
}

/* --- Specific Hover Dot Colors --- */
.overlay-button-nav li:nth-child(1) a.overlay-link:hover .virtual-button::after { /* News */
    /* background-color: #FDA530; */
    background: 
        /* Inner darkening */
        radial-gradient(ellipse at center, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 100%),
        /* Base color gradient */
        radial-gradient(ellipse at center, #FED070 0%, #FDA530 70%); 
    box-shadow: 0 0 4px rgba(253, 165, 48, 0.7), /* Orange glow */
                0 2px 4px rgba(0,0,0,0.4); /* Outer shadow */
}
.overlay-button-nav li:nth-child(2) a.overlay-link:hover .virtual-button::after { /* Inspirations */
    /* background-color: #2F47FF; */
    background: 
        radial-gradient(ellipse at center, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 100%),
        radial-gradient(ellipse at center, #6077FF 0%, #2F47FF 70%); 
    box-shadow: 0 0 4px rgba(47, 71, 255, 0.7), /* Blue glow */
                0 2px 4px rgba(0,0,0,0.4); /* Outer shadow */
}
.overlay-button-nav li:nth-child(3) a.overlay-link:hover .virtual-button::after { /* Deals */
    /* background-color: #AA4532; */ /* SWAPPED: Now Brownish/Red */
    background:
        radial-gradient(ellipse at center, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 100%),
        radial-gradient(ellipse at center, #E6E6FA 0%, #A020F0 70%); /* Test: Purple Deals color */
    box-shadow: 0 0 4px rgba(160, 32, 240, 0.7), /* Test: Purple Deals glow */
                0 2px 4px rgba(0,0,0,0.4); /* Outer shadow */
}
.overlay-button-nav li:nth-child(4) a.overlay-link:hover .virtual-button::after { /* Changelog */
    /* background-color: #28603B; */ /* SWAPPED: Now Green */
    background: 
        radial-gradient(ellipse at center, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 100%),
        radial-gradient(ellipse at center, #48906B 0%, #28603B 70%); 
    box-shadow: 0 0 4px rgba(40, 96, 59, 0.7), /* SWAPPED: Green glow */
                0 2px 4px rgba(0,0,0,0.4); /* Outer shadow */
}

/* --- Inspirations Section Specifics --- */
#tips {
    position: relative; /* For filter positioning */
    padding-bottom: 20px; /* Add padding to bottom of section */
}
#inspirations-filter-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 20px;
    width: 100%;
    text-align: center;
}
.filter-button {
    padding: 0.6em 1.2em;
    border: 1px solid var(--border-color);
    background-color: transparent;
    color: var(--text-secondary-color);
    font-family: inherit;
    font-size: 0.9rem;
    cursor: pointer;
    border-radius: 20px;
    transition: background-color 0.3s ease, color 0.3s ease;
    margin-bottom: 5px;
    margin-left: 5px;
    display: inline-block;
}
.filter-button:hover {
    background-color: var(--border-color);
    color: var(--text-color);
}
.filter-button.active {
    background-color: var(--text-color);
    color: var(--bg-color);
    border-color: var(--text-color);
}

/* --- WordPress Content Styling --- */
.wp-content {
    margin-top: 1.5em;
    box-sizing: border-box;
    font-family: 'II VORKURS Light', sans-serif;
    font-weight: 300;
    color: var(--text-color);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.7;
}
/* Basic WP element styles */
.wp-content p,
.wp-content .wp-block-paragraph {
    margin-bottom: 1.3em;
}
.wp-content h1,
.wp-content h2,
.wp-content h3,
.wp-content h4,
.wp-content h5,
.wp-content h6,
.wp-content .wp-block-heading {
    margin-top: 1.6em;
    margin-bottom: 0.6em;
    line-height: 1.3;
}
.wp-content a {
    text-decoration: underline;
    text-decoration-color: var(--text-secondary-color);
    transition: text-decoration-color 0.3s ease;
}
.wp-content a:hover,
.wp-content a:focus {
    text-decoration-color: var(--text-color);
}
.wp-content img,
.wp-content .wp-block-image img,
.wp-content video,
.wp-content .wp-block-video video {
    max-width: 100%;
    height: auto;
    margin: 1.2em auto;
    border-radius: 4px;
    display: block;
}

/* --- Single Post View Styling --- */
#single-post-content {
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 60px;
}
.single-post-title {
    font-size: 2.8rem;
    font-family: 'II VORKURS Bold', sans-serif;
    font-weight: bold;
    margin-top: 1em;
    margin-bottom: 0.8em;
    line-height: 1.2;
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.single-post-featured-image {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 1.5em auto;
    border-radius: 4px;
}
#single-post-content .wp-content > p:first-of-type,
#single-post-content .wp-content > .wp-block-paragraph:first-of-type {
    margin-top: 0;
}

/* --- Tip Gallery Styling --- */
.tip-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 10px;
}

.tip-item {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    background-color: rgba(30, 30, 30, 0.5);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tip-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.tip-media-container {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 aspect ratio */
    overflow: hidden;
}

.tip-media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.tip-item:hover .tip-media {
    transform: scale(1.05);
}

/* Placeholder styling for missing images */
.tip-media.placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(40, 40, 40, 0.7);
    color: rgba(255, 255, 255, 0.7);
    font-family: 'II VORKURS Light', sans-serif;
    font-size: 0.9rem;
    text-align: center;
}

.tip-caption-container {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 15px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 50%, rgba(0, 0, 0, 0) 100%);
    color: var(--text-color);
    display: flex;
    flex-direction: column;
    gap: 5px;
    z-index: 2; /* Ensure caption is above the image */
}

.tip-title {
    font-family: 'II VORKURS Bold', sans-serif;
    font-weight: bold;
    font-size: 1rem;
    line-height: 1.3;
    margin: 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); /* Add text shadow for better readability */
}

.tip-category {
    font-family: 'II VORKURS Light', sans-serif;
    font-size: 0.85rem;
    color: rgba(252, 252, 240, 0.8); /* Match FCFCF0 with transparency */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); /* Subtle text shadow */
}

/* --- Responsive Overrides --- */
@media (min-width: 768px) {
    body {
       padding-top: var(--header-height-desktop);
    }
    #main-header, #overlay-header {
       height: var(--header-height-desktop);
       padding: 0 40px;
    }
    main {
        padding: 65px 40px 60px;
    }
    .overlay-nav-container {
        padding-top: calc(var(--header-height-desktop) + 40px);
    }
    #single-post-content {
        padding-left: 40px;
        padding-right: 40px;
        padding-top: var(--header-height-desktop);
    }
    .single-post-title {
        font-size: 3.5rem;
    }
    .tip-gallery {
        grid-template-columns: repeat(3, 1fr);
        gap: 25px;
    }
}

/* Specific optimization for 950x525 viewport size (default MNDALA size) */
@media (max-width: 950px) and (max-height: 525px) {
    main {
        padding: 50px 20px 30px;
    }
    h2 {
        margin-bottom: 0.5em;
        font-size: 1.5rem;
    }
    #inspirations-filter-container {
        margin-bottom: 10px;
    }
    .filter-button {
        padding: 0.4em 1em;
        font-size: 0.8rem;
        margin-bottom: 3px;
        margin-left: 3px;
    }
    .tip-gallery {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
        margin-top: 5px;
    }
    .tip-caption-container {
        padding: 8px 10px;
    }
    .tip-title {
        font-size: 0.85rem;
        line-height: 1.2;
    }
    .tip-category {
        font-size: 0.7rem;
    }
    /* Adjust header padding for compact view */
    #main-header, #overlay-header {
        padding: 0 15px;
    }
    /* Make filter buttons more compact */
    #inspirations-filter-container > div {
        gap: 5px;
    }
}

/* Additional optimization for very small heights */
@media (max-height: 450px) {
    main {
        padding: 45px 15px 20px;
    }
    h2 {
        font-size: 1.3rem;
        margin-bottom: 0.4em;
    }
    .tip-gallery {
        gap: 10px;
    }
    .tip-item {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }
}

@media (min-width: 1024px) {
    h2 {
        font-size: 2rem;
    }
    .tip-gallery {
        grid-template-columns: repeat(4, 1fr);
        gap: 30px;
    }
    .tip-caption-container {
        padding: 15px;
    }
}

.overlay-button-nav .icon {
    font-size: 0.6rem !important; /* Decreased base size further */
    color: var(--text-color); /* Use variable for consistency */
    margin-right: 4px; /* Adjust space */
    line-height: 1;
    /* vertical-align: middle; */ /* Use Flexbox on parent instead */
    display: inline-block; /* Ensure transform applies correctly */
}

.overlay-button-nav .label {
    display: flex; /* Use Flexbox for alignment */
    align-items: center; /* Vertically center icon and text */
    justify-content: center; /* Keep content centered horizontally */
}

.overlay-button-nav .label span {
    font-family: 'II VORKURS Light', sans-serif;
    font-weight: 300;
    font-size: 0.9rem;
    color: var(--text-color); /* Use variable for consistency */
    text-transform: lowercase;
    /* vertical-align: middle; */ /* Use Flexbox on parent instead */
}

/* Bold/darker indicator for selected label (e.g., for inspirations) */
.overlay-button-nav li:nth-child(2) .label span {
    color: var(--text-color); /* Use variable for consistency */
    font-weight: 700;
}

/* Reduce size of Inspirations icon (REMOVED - using base size now) */
/*
.overlay-button-nav li:nth-child(2) .icon {
    font-size: 0.9em; 
}
*/

/* Increase size of Deals and Changelog icons */
.overlay-button-nav li:nth-child(3) .icon, /* Deals */
.overlay-button-nav li:nth-child(4) .icon  /* Changelog */
{
    font-size: 1.3rem !important; /* Increased size further */
}

/* Spin icon on hover (REMOVED - was incorrect target) */
/*
.overlay-button-nav a.overlay-link:hover .icon {
    animation: spin 1s linear infinite;
}
*/

/* --- Keyframes for Animations --- */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Keyframes for organic spin/pulse (Revised for more variability) */
@keyframes spin-pulse {
    0%   { transform: rotate(0deg) scale(1); }
    25%  { transform: rotate(90deg) scale(0.98); } /* Slight shrink */
    50%  { transform: rotate(180deg) scale(1.02); } /* Slight grow */
    75%  { transform: rotate(270deg) scale(0.97); } /* Slight shrink */
    100% { transform: rotate(360deg) scale(1); }
}

/* --- REMOVED UNUSED KEYFRAMES AND RULES --- */

/* Animate the entire SVG logo with pulse effect on link hover */
.overlay-logo-link:hover .header-logo-icon {
    animation: spin-pulse 2.5s ease-in-out infinite;
}

/* --- REMOVED UNUSED HOVER RULES --- */

/* Keyframes for outline logo squares (Updated Rotations) (REMOVED) */
/*
@keyframes spin-outline-1 {
    from { transform: rotate(0deg); } 
    to { transform: rotate(360deg); } 
}
@keyframes spin-outline-2 {
    from { transform: rotate(20deg); } 
    to { transform: rotate(380deg); } 
}
@keyframes spin-outline-3 {
    from { transform: rotate(40deg); }
    to { transform: rotate(400deg); } 
}
@keyframes spin-outline-4 {
    from { transform: rotate(60deg); }
    to { transform: rotate(420deg); } 
}
*/

/* Animate inner logo squares on link hover (REMOVED) */
/*
.overlay-logo-link:hover .spin-logo-square { 
    animation: spin 2s linear infinite; 
    transform-origin: center center;
}
*/

/* Animate inner logo squares with different speeds (REMOVED) */
/*
.overlay-logo-link:hover .spin-logo-square-1 {
    animation: spin-1 2s linear infinite;
    transform-origin: center center;
}

.overlay-logo-link:hover .spin-logo-square-2 {
    animation: spin-2 3s linear infinite;
    transform-origin: center center;
}

.overlay-logo-link:hover .spin-logo-square-3 {
    animation: spin-3 4s linear infinite;
    transform-origin: center center;
}
*/

/* User Display Styling - Super Simplified */
#user-display {
    font-family: 'II VORKURS Light', sans-serif;
    font-size: 1.2rem;
    color: var(--text-color);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 100px;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 200;
    padding: 15px;
    background-color: var(--bg-color); /* Use site background */
    border-radius: 4px;
    max-width: 500px;
    margin: 0 auto;
}

/* Only show welcome message on the splash screen */
body.state-splash #user-display {
    display: block !important;
}

/* Hide welcome message on content pages and when menu is open */
body.state-content #user-display,
body.state-menu-open #user-display {
    display: none !important;
}

/* Show close button ONLY when overlay is open as a MENU */
body.state-menu-open #close-menu {
    display: inline-block; /* Or flex, depending on parent */
}

/* Hide Menu button on splash screen OR when menu is open */
body.state-splash #menu-trigger,
body.state-menu-open #menu-trigger {
    display: none;
}

/* --- Debug Display --- */
#debug-user-info {
    /* Hide debug info by default in production */
    display: none;
    
    /* Debug styles when visible */
    position: fixed;
    bottom: 10px;
    left: 10px;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 3px;
    z-index: 9999; /* Ensure it's on top */
    font-family: monospace;
}

/* Splash screen specific styling */
body.state-splash {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow: hidden;
}

body.state-splash #main-header {
    position: absolute;
    top: 20px;
    justify-content: space-between;
}

body.state-splash .header-logo-link {
    transform: scale(1);
    transition: transform 0.5s ease;
}

body.state-splash main,
body.state-splash #single-post-content {
    display: none !important;
}

/* Hide welcome messages when not in splash mode or when menu is open */
body:not(.state-splash) #user-display,
body:not(.state-splash) #backup-welcome,
body.state-menu-open #user-display,
body.state-menu-open #backup-welcome {
  display: none !important;
  visibility: hidden !important;
}

/* Only show welcome messages on the splash screen */
body.state-splash #user-display,
body.state-splash #backup-welcome {
  display: block;
  visibility: visible;
}

/* --- Changelog Accordion Styles --- */
/* --- Changelog List View Styles --- */
.changelog-list-view .changelog-container {
    background-color: #1c1c1e; /* Slightly lighter dark background like screenshot */
    box-shadow: 0 4px 12px rgba(0,0,0,0.3); /* Subtle shadow */
    padding: 0; /* Remove padding, handle internally */
    display: flex; /* Use flexbox for layout */
    flex-direction: column; /* Stack controls and list */
    max-height: calc(525px - var(--header-height-mobile) - 40px); /* Adjusted height */
    border-radius: 8px; /* Rounded corners */
    overflow: hidden; /* Hide main overflow, let inner scroll */
}

.changelog-list-view .changelog-version-header {
    padding: 15px 20px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--border-color); /* Separator line */
}

.changelog-list-view .changelog-version-header h3 {
    font-size: 1.6rem;
    text-align: left;
}

/* New Controls Container */
.changelog-controls {
    display: flex;
    align-items: center; /* Vertically align items */
    padding: 10px 20px; /* Adjust padding */
    border-bottom: 1px solid #3a3a3c; /* Slightly lighter border */
    background-color: #1c1c1e; /* Match container background */
    flex-shrink: 0; /* Prevent controls from shrinking */
    gap: 15px;
}

#changelog-search {
    flex-grow: 1;
    padding: 8px 12px;
    background-color: transparent; /* Remove background */
    border: none; /* Remove border */
    border-radius: 0; /* Remove radius */
    border-right: 1px solid #3a3a3c; /* Separator line like screenshot */
    padding-right: 15px; /* Space before separator */
    color: var(--text-color);
    font-family: inherit;


#changelog-search::placeholder {
    color: var(--text-secondary-color);
}

#changelog-filter {
    padding: 8px 0px 8px 8px; /* Adjust padding */
    background-color: transparent; /* Remove background */
    border: none; /* Remove border */
    border-radius: 0; /* Remove radius */
    color: var(--text-color);
    font-family: inherit;
    font-size: 0.9rem;
    cursor: pointer;
    /* Add custom dropdown arrow styling if needed */
    appearance: none; /* Remove default arrow */
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23aaaaaa%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.6-3.6%205.4-7.9%205.4-12.8%200-5-1.8-9.2-5.4-12.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 8px 8px;
    padding-right: 25px; /* Space for custom arrow */
}

.changelog-item-title-container {
    display: flex;
    align-items: center;
    gap: 8px; /* Space between title and tag */
    margin-bottom: 4px;
}

.changelog-item-title-text {
    font-family: inherit; /* Use default Light font */
    font-size: 1.1rem;
    color: var(--text-color);
    /* No margin needed as container handles spacing */
}

.changelog-item-tag {
    display: inline-block;
    padding: 2px 6px;
    font-size: 0.7rem;
    font-family: inherit; /* Use default Light font */
    font-weight: bold; /* Keep tag text bold */
    border-radius: 3px;
    text-transform: uppercase;
    line-height: 1.2;
    flex-shrink: 0; /* Prevent tag from shrinking */
}

.tag-new {
    background-color: rgba(40, 167, 69, 0.2); /* Greenish background */
    color: #28a745; /* Green text */
    border: 1px solid rgba(40, 167, 69, 0.4);
}

.tag-fix {


.changelog-category-header {
    /* display: flex; */ /* No longer needed */
    /* align-items: center; */ /* No longer needed */
    /* gap: 10px; */ /* No longer needed */
}

.changelog-category-header h4 {
    margin: 0; /* Remove default margin */
}

/* Removed .changelog-category-icon rule */

/* Removed rule targeting svg path directly, color is inherited now */
/* Remove the rule targeting just svg */

/* Removed .changelog-category-icon:hover rule */

/* Removed SVG sizing rule and duplicate icon rule */

/* Hover color is handled by the parent .changelog-category-icon:hover rule setting color */
/* and the path inheriting via stroke: currentColor */


/* Removed category-specific icon styles */

.changelog-category-icon:hover svg {
     fill: var(--text-color); /* Brighten icon on hover */
}
    background-color: rgba(253, 126, 20, 0.2); /* Orangish background */
    color: #fd7e14; /* Orange text */
    border: 1px solid rgba(253, 126, 20, 0.4);
}

.tag-improvement {
    background-color: rgba(23, 162, 184, 0.2); /* Bluish background */
    color: #17a2b8; /* Blue text */
    border: 1px solid rgba(23, 162, 184, 0.4);
}
    font-size: 0.9rem;
}

#changelog-search::placeholder {
    color: #b0b0b0; /* Slightly brighter secondary text */
}

#changelog-filter {
    padding: 8px 12px;
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-color); /* Keep title bright */
    font-family: inherit;
    font-size: 0.9rem;
    cursor: pointer;
}

/* New Items Container */
.changelog-items-container {
    flex-grow: 1; /* Allow list to take remaining space */
    overflow-y: auto; /* Enable scrolling for the list only */
    padding: 10px 0; /* Add padding around the list */
}

/* Custom Scrollbar for Changelog List */
.changelog-items-container::-webkit-scrollbar {
    width: 6px;
}

.changelog-items-container::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}

.changelog-items-container::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.2);
}

.changelog-items-container::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.3);
}


.changelog-category-section {
    margin-bottom: 15px; /* Reduced margin */
}

.changelog-category-header {
    font-family: 'II VORKURS Bold', sans-serif;
    position: sticky; /* Make headers sticky */
    top: 0; /* Stick to the top of the scrollable container */
    background-color: var(--bg-color); /* Match background */
    z-index: 10; /* Ensure header is above items */
    font-size: 1.3rem;
    color: var(--text-color);
    padding: 12px 20px; /* Increased padding */
    margin: 0; /* Remove bottom margin */
    border-bottom: 1px solid var(--border-color);
}

.changelog-item {
    padding: 15px 20px; /* Increased padding */
    border-bottom: 1px solid var(--border-color); /* Separator like screenshot */
    transition: background-color 0.2s ease;
}

.changelog-item:last-child {
    border-bottom: none;
}

.changelog-item:hover {
    background-color: rgba(252, 252, 240, 0.05); /* Subtle hover */
}

.changelog-item-title {
    font-family: 'II VORKURS Bold', sans-serif;
    font-size: 1.1rem;
    color: var(--text-color);
    margin-bottom: 4px;
}

.changelog-item-description {
    font-family: 'II VORKURS Light', sans-serif;
    font-size: 0.95rem;
    color: #b0b0b0; /* Slightly brighter secondary text */
    line-height: 1.5;
    margin-bottom: 8px;
}

.changelog-item-details {
    list-style: disc;
    padding-left: 20px; /* Reduced indent */
    margin: 0;
    font-family: 'II VORKURS Light', sans-serif;
    font-size: 0.9rem;
    color: #999999; /* Slightly dimmer tertiary text */
}

.changelog-item-details li {
    margin-bottom: 5px;
    line-height: 1.4;
}

/* Remove old specific section/list styles */
/* Keep hiding old elements */
.changelog-section,
.changelog-section-title,
.changelog-section-description,
.changelog-list,
.changelog-thank-you {
    display: none;
}

/* Responsive adjustments for list view */
@media (max-width: 950px) and (max-height: 525px) {
    .changelog-list-view .changelog-container {
        /* padding: 5px 0; */ /* Padding handled by inner container */
        max-height: calc(525px - var(--header-height-mobile) - 60px);
    }
    .changelog-list-view .changelog-version-header h3 {
        font-size: 1.4rem;
    }
    .changelog-controls {
        padding: 10px 15px; /* Adjust control padding */
        gap: 10px;
    }
    #changelog-search, #changelog-filter {
        padding: 6px 10px;
        font-size: 0.85rem;
    }
    .changelog-items-container {
         padding: 5px 0;
    }
    .changelog-category-header {
        font-size: 1.1rem;
        padding: 8px 15px;
    }
    .changelog-item {
        padding: 12px 15px; /* Adjust item padding */
    }
    .changelog-item-title {
        font-size: 1rem;
    }
    .changelog-item-description {
        font-size: 0.9rem;
    }
    .changelog-item-details {
        font-size: 0.85rem;
        padding-left: 15px; /* Adjust details indent */
    }
}

.changelog-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: rgba(20, 20, 20, 0.5);
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.changelog-version-header {
    margin-bottom: 30px;
    text-align: center;
}

.changelog-version-header h3 {
    font-family: 'II VORKURS Bold', sans-serif;
    font-size: 1.8rem;
    margin: 0;
    color: var(--text-color);
}

/* REMOVED Accordion Styles */

/* REMOVED Accordion Content Styles */

.changelog-section {
    margin: 20px 0;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(80, 80, 80, 0.3);
}

.changelog-section:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.changelog-section-title {
    font-family: 'II VORKURS Bold', sans-serif;
    font-size: 1.1rem;
    color: var(--text-color);
    margin: 0 0 8px 0;
}

.changelog-section-description {
    font-family: 'II VORKURS Light', sans-serif;
    font-size: 1rem;
    color: var(--text-color);
    margin: 0 0 10px 0;
    line-height: 1.5;
}

.changelog-list {
    padding: 0 0 0 25px;
    margin: 10px 0 0 0;
    list-style-type: disc;
}

.changelog-list li {
    margin-bottom: 8px;
    line-height: 1.5;
    color: var(--text-secondary-color);
}

.changelog-thank-you {
    margin-top: 30px;
    padding: 15px;
    text-align: center;
    background-color: rgba(40, 40, 40, 0.5);
    border-radius: 6px;
}

.changelog-thank-you p {
    margin: 0;
    font-family: 'II VORKURS Light', sans-serif;
    font-style: italic;
    color: var(--text-color);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .changelog-container {
        padding: 15px;
    }
    
    .changelog-version-header h3 {
        font-size: 1.5rem;
    }
    
    .changelog-accordion-header h4 {
        font-size: 1.1rem;
    }
    
    .changelog-section-title {
        font-size: 1rem;
    }
    
    .changelog-section-description {
        font-size: 0.95rem;
    }
    
    .changelog-list {
        padding: 0 0 0 20px;
    }
    
    .changelog-list li {
        font-size: 0.9rem;
    }
}


/* --- Coming Soon Placeholder --- */
.coming-soon-placeholder {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 60px 20px;
    text-align: center;
    font-family: 'II VORKURS Light', sans-serif;
    font-size: 2.8rem; /* Further increased size */
    color: #D96034; /* Container color */
    text-transform: uppercase; /* Added uppercase */
    white-space: pre; /* Keep spaces during typing */
    min-height: 200px; /* Ensure it takes some space */
}

/* Specific style for the Coming Soon text */
#coming-soon-text {
    color: #FCFCF0; /* Off-white color as requested */
    font-weight: 300;
    letter-spacing: 1px;
}

/* Styles for the new SVG icon */
.coming-soon-svg-icon {
    width: 50px; /* Adjust size as needed */
    height: 50px;
    margin-right: 15px;
    vertical-align: middle;
    overflow: visible; /* Allow animations to potentially go outside bounds slightly */
}

.coming-soon-svg-icon .star {
    fill: #FCFCF0;
    transform-origin: center center;
    opacity: 0; /* Start hidden */
}

/* Animation Keyframes for SVG Stars */
/* Animation Keyframes for SVG Stars (Twinkle Effect) */
@keyframes star-twinkle {
    0%   { transform: scale(0) rotate(0deg); opacity: 0; }
    15%  { transform: scale(1.1) rotate(10deg); opacity: 0.7; } /* Fade in, grow, slight rotate */
    30%  { transform: scale(0.9) rotate(-5deg); opacity: 1; }  /* Shrink slightly, rotate back */
    45%  { transform: scale(1.05) rotate(5deg); opacity: 0.6; } /* Pulse grow, fade slightly */
    60%  { transform: scale(1) rotate(0deg); opacity: 1; }    /* Back to normal */
    75%  { transform: scale(0.8) rotate(15deg); opacity: 0.7; } /* Shrink, rotate */
    90%  { transform: scale(1.1) rotate(-10deg); opacity: 1; } /* Final pulse */
    100% { transform: scale(0) rotate(0deg); opacity: 0; }    /* Fade out */
}

/* Apply animation with delays */
.coming-soon-svg-icon .star-1 {
    animation: star-twinkle 4.5s ease-in-out infinite, spin 8s linear infinite; /* Faster spin */
    animation-delay: 0s;
}
/* Removed rules for star-2 and star-3 */

/* Styles for smaller stars */
.coming-soon-svg-icon .star-small {
    fill: #FCFCF0;
    transform-origin: center center;
    opacity: 0; /* Start hidden */
    transform: scale(0.6); /* Make them smaller */
}

/* Apply animation with different delays/durations for small stars (Starfield) */
.coming-soon-svg-icon .star-small-1 {
    animation: star-twinkle 5.2s ease-in-out infinite, spin 18s linear infinite; /* Slower spin */
    animation-delay: 0.9s;
}
.coming-soon-svg-icon .star-small-2 {
    animation: star-twinkle 4.9s ease-in-out infinite, spin 11s linear infinite reverse; /* Faster counter-clockwise spin */
    animation-delay: 1.5s;
}
.coming-soon-svg-icon .star-small-3 {
    animation: star-twinkle 5.5s ease-in-out infinite, spin 22s linear infinite; /* Much slower spin */
    animation-delay: 2.1s;
}
/* Removed rule for star-small-4 */

/* Keyframes and styles for letter fade-in */
@keyframes fade-in-letter {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

.typed-letter {
    display: inline-block; /* Needed for transform */
    opacity: 0; /* Start hidden */
    animation: fade-in-letter 0.3s ease-out forwards;
}
.coming-soon-svg-icon .star-small-3 {
    animation: star-sequence 4.2s ease-in-out infinite;
    animation-delay: 2.1s;
}
.coming-soon-svg-icon .star-small-4 {
    animation: star-sequence 3.9s ease-in-out infinite;
    animation-delay: 0.5s;
}

/* Keyframes and styles for letter fade-in */
@keyframes fade-in-letter {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

.typed-letter {
    display: inline-block; /* Needed for transform */
    opacity: 0; /* Start hidden */
    animation: fade-in-letter 0.3s ease-out forwards;
}