/*
Theme Name: DeepL SEO Theme
Theme URI: https://example.com/deepl-seo-theme
Author: Trae AI
Author URI: https://example.com
Description: A minimalist, SEO-optimized theme inspired by DeepL, featuring custom navigation controls and high-performance HTML structure.
Version: 1.0
Text Domain: deepl-seo
*/

:root {
    --primary-bg: #FFFFFF;
    --secondary-bg: #F8F9FA;
    --deep-blue: #0F2B46; /* DeepL-like dark blue */
    --accent-blue: #4A90E2;
    --text-main: #333333;
    --text-light: #666666;
    --nav-bg: #0F2B46;
    --nav-text: #FFFFFF;
    --container-width: 1200px;
    --spacing-unit: 1rem;
}

* {
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: var(--secondary-bg);
    color: var(--text-main);
    line-height: 1.6;
    margin: 0;
    padding: 0;
    font-size: 16px;
}

/* Typography & SEO */
h1, h2, h3, h4, h5, h6 {
    color: var(--deep-blue);
    margin-bottom: 0.5em;
    font-weight: 600;
}

a {
    color: var(--accent-blue);
    text-decoration: none;
    transition: color 0.2s;
}

a:hover {
    text-decoration: underline;
}

/* Layout Utilities */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--spacing-unit);
}

/* Navigation - Default Styles (Will be overridden by JS/Inline CSS from settings) */
.site-header {
    width: 100%;
    position: relative;
    z-index: 1000;
}

.top-nav {
    display: flex;
    justify-content: space-between; /* Default alignment */
    align-items: center;
    padding: 10px 20px;
}

.top-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}

.top-nav li {
    margin: 0 15px;
}

.top-nav a {
    text-decoration: none;
}

/* Mobile Toggle */
.menu-toggle {
    display: none;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 10px;
}

.icon-bar {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--nav-text, #fff); /* Fallback to white if var not set */
    margin: 5px 0;
    transition: all 0.3s;
}

/* Ensure nav text color variable is used if set via inline styles, otherwise white */
.site-header .menu-toggle .icon-bar {
   /* If inline style sets text color, we want the burger to match? 
      Actually, let's just make it inherit or use a standard color. 
      But if background is white, white burger is invisible.
      Let's assume the user sets text color and we use that.
      Since we can't easily access the inline style variable here without it being defined in :root properly (which it isn't, it's inline on header maybe? No, it's inline style block).
      Wait, `wp_add_inline_style` adds CSS rules.
      So `.top-nav a { color: ... }`.
      The toggle button is NOT inside `.top-nav a`.
      I should probably add a rule for `.menu-toggle .icon-bar { background-color: ... }` in the PHP generation.
      For now, I'll default to white or black depending on context, or just use `currentColor` if I can set color on button.
   */
   background-color: #fff; /* Default */
}

/* Responsive */
@media (max-width: 768px) {
    .menu-toggle {
        display: block;
        position: absolute;
        right: 20px;
        top: 15px;
    }

    .top-nav {
        flex-direction: column;
        align-items: flex-start;
        padding-top: 60px; /* Space for toggle */
    }

    .nav-items {
        display: none;
        width: 100%;
    }

    .nav-items.open {
        display: block;
    }
    
    .top-nav ul {
        flex-direction: column;
        width: 100%;
    }
    
    .top-nav li {
        margin: 10px 0;
        text-align: center;
        width: 100%;
    }
}