/*!
Theme Name: ETN Studios
Theme URI: http://underscores.me/
Author: Brave Whale
Author URI: https://bravewhale.com
Description: A UIKit-powered theme with left sidebar layout for use with Oxygen Builder
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: etn-studios
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, dark-theme, sidebar-layout

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

ETN Studios is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.
*/

/*--------------------------------------------------------------
# Font Imports
--------------------------------------------------------------*/

@import url('https://fonts.googleapis.com/css2?family=Quantico:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/*--------------------------------------------------------------
# UIKit Dark Theme Customizations
--------------------------------------------------------------*/

:root {
    --sidebar-width: 300px;
    --header-bg: #252525; /* Medium gray for sidebar */
    --content-bg: #1a1a1a; /* Darker gray for body/main content */
    --accent-color: #128379; /* New teal accent color */
    --text-light: #f0f0f0;
    --text-muted: #adb5bd;
    --card-bg: #1b1b1b; /* Medium gray for cards to match sidebar */
    --border-color: #2e2e2e;
    --font-heading: 'Quantico', sans-serif;
    --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
}

/* Base Typography */
body {
    font-family: var(--font-body);
    background-color: var(--content-bg) !important;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 400;
    letter-spacing: 0.02em;
}

/* Body background - darker gray */
body {
    background-color: var(--content-bg) !important;
}

/* Dark sidebar background override - medium gray */
.uk-background-secondary {
    background-color: var(--header-bg) !important;
}

/* Main layout structure */
#page.site {
    min-height: 100vh;
}

/* Desktop sidebar positioning */
@media (min-width: 960px) {
    .site-header {
        width: var(--sidebar-width) !important;
        position: fixed !important;
        top: 0;
        left: 0;
        z-index: 1000;
        height: 100vh;
        overflow-y: auto;
        border-right: 1px solid var(--border-color);
    }
    
    .content-wrapper {
        margin-left: var(--sidebar-width) !important;
        width: calc(100% - var(--sidebar-width)) !important;
        min-height: 100vh;
    }
}

/* Mobile adjustments */
@media (max-width: 959px) {
    .content-wrapper {
        margin-left: 0 !important;
        width: 100% !important;
    }
}

/*--------------------------------------------------------------
# Enhanced Navigation Styles
--------------------------------------------------------------*/
.site-header .uk-padding {
    padding: 40px 15px !important;
}

/* Sidebar navigation - applies to both primary and secondary */
.main-navigation .uk-nav,
.secondary-navigation .uk-nav {
    padding: 0;
    text-align: right;
}

.main-navigation .uk-nav > li,
.secondary-navigation .uk-nav > li {
    margin-bottom: 0;
    /* Removed border-bottom */
}

.main-navigation .uk-nav a,
.secondary-navigation .uk-nav a {
    color: var(--text-light);
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 0.95em;
    letter-spacing: 0.02em;
    transition: all 0.3s ease;
    text-decoration: none;
    display: block;
    text-align: right;
    transform: translateX(0);
}

.main-navigation .uk-nav a:hover,
.main-navigation .uk-nav a:focus,
.secondary-navigation .uk-nav a:hover,
.secondary-navigation .uk-nav a:focus {
    color: var(--accent-color) !important;
    text-decoration: none;
    transform: translateX(-10px);
}

/* Active menu items */
.main-navigation .uk-nav .current-menu-item > a,
.main-navigation .uk-nav .current-menu-ancestor > a,
.main-navigation .uk-nav .current_page_item > a,
.main-navigation .uk-nav .current_page_ancestor > a,
.secondary-navigation .uk-nav .current-menu-item > a,
.secondary-navigation .uk-nav .current-menu-ancestor > a,
.secondary-navigation .uk-nav .current_page_item > a,
.secondary-navigation .uk-nav .current_page_ancestor > a {
    color: var(--accent-color) !important;
    transform: translateX(-10px);
}

/* Submenu styles for both navigations */
.main-navigation .uk-nav-sub,
.secondary-navigation .uk-nav-sub {
    background: transparent;
    margin: 0;
    padding: 10px 0;
    border-radius: 0;
    text-align: right;
}

.main-navigation .uk-nav-sub a,
.secondary-navigation .uk-nav-sub a {
    padding: 8px 15px 8px 0;
    font-size: 1em;
    font-family: var(--font-heading);
    font-weight: 400;
    letter-spacing: 0.01em;
    color: var(--text-muted);
    text-align: right;
    transition: all 0.3s ease;
    transform: translateX(0);
}

.main-navigation .uk-nav-sub a:hover,
.secondary-navigation .uk-nav-sub a:hover {
    color: var(--accent-color);
    transform: translateX(-8px);
}

/* Active submenu items */
.main-navigation .uk-nav-sub .current-menu-item > a,
.main-navigation .uk-nav-sub .current_page_item > a,
.secondary-navigation .uk-nav-sub .current-menu-item > a,
.secondary-navigation .uk-nav-sub .current_page_item > a {
    color: var(--accent-color);
    transform: translateX(-8px);
}

/* Accordion functionality for parent menu items in both navigations */
.main-navigation .menu-item-has-children > a,
.secondary-navigation .menu-item-has-children > a {
    position: relative;
}

/* Hide UIKit chevron icons - using CSS triangles instead */
.main-navigation .menu-item-has-children > a [uk-icon],
.secondary-navigation .menu-item-has-children > a [uk-icon] {
    display: none;
}

/* Mobile navigation for both menus */
.mobile-navigation .uk-nav a,
.secondary-mobile-navigation .uk-nav a {
    color: var(--text-light);
    padding: 5px 0;
    font-family: var(--font-heading);
    font-weight: 400;
    letter-spacing: 0.02em;
    transition: all 0.3s ease;
    transform: translateX(0);
}

.mobile-navigation .uk-nav a:hover,
.secondary-mobile-navigation .uk-nav a:hover {
    color: var(--accent-color);
    transform: translateX(-8px);
}

/* Active mobile menu items */
.mobile-navigation .uk-nav .current-menu-item > a,
.mobile-navigation .uk-nav .current_page_item > a,
.secondary-mobile-navigation .uk-nav .current-menu-item > a,
.secondary-mobile-navigation .uk-nav .current_page_item > a {
    color: var(--accent-color);
    transform: translateX(-8px);
}

/*--------------------------------------------------------------
# Site Branding
--------------------------------------------------------------*/

.site-branding {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 20px;
    margin-bottom: 30px;
    text-align: right;
}

.site-title {
	line-height: 0.5;
	margin-bottom: 30px;
}

.site-title a {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.45em;
    letter-spacing: 0.05em;
    color: var(--accent-color) !important;
    text-transform: uppercase;
}

.site-description {
    font-family: var(--font-body);
    font-size: 0.75em;
    opacity: 0.8;
}

.mobile-site-title a {
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--accent-color) !important;
    text-transform: uppercase;
}

.uk-offcanvas-bar .mobile-navigation {
    margin-top: 100px !important;
}

.custom-logo {
    max-width: 40px;
    height: auto;
    border-radius: 4px;
    float: right;
    margin-left: 10px;
}

/*--------------------------------------------------------------
# Content Area Styling
--------------------------------------------------------------*/

.site-content {
    background: var(--content-bg);
    min-height: calc(100vh - 100px);
}

/* Enhanced post/page styling - updated to medium gray */
.post,
.page {
    background: transparent;
    color: var(--text-light);
    padding: 30px;
}

.entry-header {
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.entry-title {
    color: var(--text-light);
    font-family: var(--font-heading);
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 10px;
    letter-spacing: 0.02em;
}

.entry-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

.entry-title a:hover {
    color: var(--accent-color);
}

.entry-meta {
    color: var(--text-muted);
    font-size: 0.9em;
    font-family: var(--font-body);
}

.entry-meta a {
    color: inherit;
    text-decoration: none;
}

.entry-meta a:hover {
    color: var(--accent-color);
}

.home .entry-content,
.portfolio-template-default .entry-content { display: none; }

/* Content typography */
.entry-content,
.entry-summary {
    line-height: 1.6;
    color: var(--text-light);
    font-family: var(--font-body);
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
    color: var(--text-light);
    font-family: var(--font-heading);
    font-weight: 400;
    margin-top: 30px;
    margin-bottom: 15px;
    letter-spacing: 0.02em;
}

.entry-content p {
    margin-bottom: 20px;
    color: var(--text-light);
}

.entry-content a {
    color: var(--accent-color);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s ease;
}

.entry-content a:hover {
    border-bottom-color: var(--accent-color);
}

/*--------------------------------------------------------------
# Widgets
--------------------------------------------------------------*/

.widget {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    padding: 20px;
    margin-bottom: 25px;
    text-align: right;
}

.widget-title {
    color: var(--text-light);
    font-family: var(--font-heading);
    font-size: 1.1em;
    font-weight: 400;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    text-align: right;
    letter-spacing: 0.02em;
}

.widget ul {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: right;
}

.widget li {
    padding: 8px 0;
    /* Removed border-bottom */
}

.widget a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.3s ease;
}

.widget a:hover {
    color: var(--accent-color);
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/

.site-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    background: var(--card-bg);
    color: var(--text-muted);
    border-top: 1px solid var(--border-color);
    padding: 12px 20px;
    text-align: center;
    font-size: 0.8em;
    z-index: 999;
}

.site-footer .site-info {
    margin: 0;
}

.site-footer .sep {
    margin: 0 8px;
    opacity: 0.5;
}

.site-footer a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.3s ease;
}

.site-footer a:hover {
    color: var(--accent-color);
}

/* Add bottom padding to page content to prevent footer overlap */
#page.site {
    padding-bottom: 50px;
}

/*--------------------------------------------------------------
# Responsive Design
--------------------------------------------------------------*/

@media (max-width: 959px) {
    .post,
    .page {
        padding: 20px;
        margin-bottom: 20px;
    }
    
    .entry-header {
        margin-bottom: 20px;
    }
    
    .entry-title {
        font-size: 1.5em;
    }
    
    /* Mobile footer adjustments */
    .site-footer {
        padding: 10px 15px;
        font-size: 0.75em;
    }
    
    #page.site {
        padding-bottom: 45px;
    }
}

/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/

.skip-link {
    position: absolute;
    left: -9999px;
    top: -9999px;
    z-index: 999999;
    background: var(--header-bg);
    color: var(--text-light);
    padding: 8px 16px;
    text-decoration: none;
}

.skip-link:focus {
    left: 6px;
    top: 7px;
    display: block;
}

/*--------------------------------------------------------------
# UIKit Component Overrides
--------------------------------------------------------------*/

/* Enhance UK buttons for the theme */
.uk-button-primary {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
}

.uk-button-primary:hover {
    background-color: #014a42;
    border-color: #014a42;
}

/* Custom accordion styling for navigation */
.uk-nav.uk-nav-default > li.menu-item-has-children {
    position: relative;
}

.uk-nav.uk-nav-default > li.menu-item-has-children > a {
    cursor: pointer;
}

/* Hide submenus by default */
.uk-nav.uk-nav-default .uk-nav-sub {
    display: none;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* Show submenu when parent is active/open */
.uk-nav.uk-nav-default li.menu-item-has-children.uk-open .uk-nav-sub {
    display: block;
    animation: uk-slide-bottom 0.3s ease-out;
}

/* Enhanced form styling */
.uk-input,
.uk-select,
.uk-textarea {
    background: var(--card-bg);
    color: var(--text-light);
    border-radius: 4px;
    border: 1px solid var(--border-color);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.uk-input:focus,
.uk-select:focus,
.uk-textarea:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(1, 85, 78, 0.1);
}

.uk-input::placeholder,
.uk-textarea::placeholder {
    color: var(--text-muted);
}

/* Search form styling */
.search-form {
    position: relative;
}

.search-form .search-field {
    padding-right: 40px;
}

.search-form .search-submit {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--accent-color);
    cursor: pointer;
}

/*--------------------------------------------------------------
# Comments
--------------------------------------------------------------*/

.comments-area {
    background: var(--card-bg);
    color: var(--text-light);
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    padding: 30px;
    margin-top: 30px;
    border: 1px solid var(--border-color);
}

.comments-title {
    color: var(--text-light);
    font-family: var(--font-heading);
    font-weight: 400;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    letter-spacing: 0.02em;
}

.comment-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.comment {
    padding: 20px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.comment:last-child {
    border-bottom: none;
}

.comment-author {
    font-weight: 600;
    margin-bottom: 5px;
    color: var(--text-light);
}

.comment-metadata {
    font-size: 0.9em;
    color: var(--text-muted);
    margin-bottom: 15px;
}

.comment-content {
    line-height: 1.6;
    color: var(--text-light);
}

.reply {
    margin-top: 15px;
}

.reply a {
    background: var(--accent-color);
    color: white;
    padding: 5px 12px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 0.9em;
    transition: background-color 0.3s ease;
}

.reply a:hover {
    background: #014a42;
}

/*--------------------------------------------------------------
# Pagination
--------------------------------------------------------------*/

.posts-navigation,
.post-navigation {
    background: var(--card-bg);
    color: var(--text-light);
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    padding: 20px;
    margin: 30px 0;
    border: 1px solid var(--border-color);
}

.nav-links {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-previous,
.nav-next {
    flex: 1;
}

.nav-next {
    text-align: right;
}

.nav-links a {
    background: var(--accent-color);
    color: white;
    padding: 10px 20px;
    border-radius: 4px;
    text-decoration: none;
    transition: background-color 0.3s ease;
    display: inline-block;
}

.nav-links a:hover {
    background: #014a42;
}

.nav-subtitle {
    display: block;
    font-size: 0.8em;
    opacity: 0.8;
    margin-bottom: 5px;
}

.nav-title {
    font-weight: 600;
}

/*--------------------------------------------------------------
# Sidebar Styling
--------------------------------------------------------------*/

.widget-area {
    background: var(--card-bg);
    color: var(--text-light);
    border-radius: 8px;
    padding: 20px;
    border: 1px solid var(--border-color);
}

.sidebar-content .widget {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

#secondary { display: none; }

/*--------------------------------------------------------------
# Media Queries for Enhanced Responsiveness
--------------------------------------------------------------*/

@media (max-width: 640px) {
    .uk-container {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    .site-title {
        font-size: 1.2em !important;
    }
    
    .nav-links {
        flex-direction: column;
        gap: 15px;
    }
    
    .nav-next {
        text-align: left;
    }
    
    .post,
    .page,
    .comments-area {
        padding: 15px;
    }
}

@media (min-width: 1200px) {
    .uk-container-large {
        max-width: 1400px;
    }
    
    .entry-content {
        font-size: 1.1em;
        line-height: 1.7;
    }
}

/*--------------------------------------------------------------
# Print Styles
--------------------------------------------------------------*/

@media print {
    .site-header,
    .site-footer,
    .comments-area,
    .posts-navigation,
    .post-navigation {
        display: none;
    }
    
    .content-wrapper {
        margin-left: 0 !important;
        width: 100% !important;
    }
    
    .post,
    .page {
        box-shadow: none;
        border: 1px solid #ddd;
        background: white !important;
        color: black !important;
    }
}

/*--------------------------------------------------------------
# Dark Mode Support (Enhanced)
--------------------------------------------------------------*/

@media (prefers-color-scheme: dark) {
    /* The theme is already dark, but we can enhance it further */
    body {
        background: var(--content-bg);
    }
    
    .post,
    .page,
    .comments-area {
        background: transparent;
        color: var(--text-light);
    }
    
    .entry-title,
    .entry-content h1,
    .entry-content h2,
    .entry-content h3,
    .entry-content h4,
    .entry-content h5,
    .entry-content h6,
    .comments-title {
        color: var(--text-light);
    }
    
    .entry-content,
    .entry-summary {
        color: var(--text-light);
    }
    
    .site-footer {
        background: var(--card-bg);
        border-color: var(--border-color);
    }
}

/*--------------------------------------------------------------
# Additional Dark Theme Enhancements
--------------------------------------------------------------*/

/* Ensure all UIKit cards follow the theme */
.uk-card-default {
    background: var(--card-bg) !important;
    color: var(--text-light) !important;
    border: 1px solid var(--border-color) !important;
}

/* Update alert styling for dark theme */
.uk-alert-primary {
    background: rgba(1, 85, 78, 0.1) !important;
    color: var(--text-light) !important;
    border: 1px solid var(--accent-color) !important;
}

.uk-alert-warning {
    background: rgba(255, 193, 7, 0.1) !important;
    color: var(--text-light) !important;
    border: 1px solid #ffc107 !important;
}

/* Text colors for dark theme */
.uk-text-meta {
    color: var(--text-muted) !important;
}

.uk-text-light {
    color: var(--text-light) !important;
}

/* Link styling for dark theme */
.uk-link-reset:hover {
    color: var(--accent-color) !important;
}

.uk-button-text {
    color: var(--accent-color) !important;
}

.uk-button-text:hover {
    color: #014a42 !important;
}