/*
 Theme Name:   Twenty Sixteen Dev's Diary
 Description:  Twenty Sixteen Child Theme (SecOps/Coder Edition)
 Author:       Yogi
 Template:     twentysixteen
 Version:      1.0.2
*/

/* =======================================================
   0. VARIABLES (The "SecOps" Palette)
   ======================================================= */
:root {
    --bg-deep: #0d1117;       /* Very dark blue/black (Main Background) */
    --bg-panel: #161b22;      /* Slightly lighter (Content Area) */
    --text-main: #c9d1d9;     /* Soft Off-White (Readability) */
    --text-muted: #8b949e;    /* Grey for meta info */
    --accent: #58a6ff;        /* Cyber/Terminal Blue (Links/Focus) */
    --border-color: #30363d;  /* Subtle dark borders */
    --code-bg: #1f2428;       /* Specific background for code blocks */
}

/* =======================================================
   1. GLOBAL DARK MODE OVERRIDES
   ======================================================= */

body, html {
    background-color: var(--bg-deep) !important;
    color: var(--text-main);
}

/* The Main Container Border */
.site {
    background-color: var(--bg-panel);
    border-color: var(--bg-deep); 
}

.site-inner {
    background-color: var(--bg-panel);
    padding-top: 20px;
}

/* Text Colors */
body, button, input, select, textarea {
    color: var(--text-main);
}

/* Headers - Force White */
h1, h2, h3, h4, h5, h6,
.entry-title, 
.widget-title {
    color: #ffffff !important; 
}

/* Links (Generic) */
a {
    color: var(--accent);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover, a:focus {
    color: #ffffff;
    text-decoration: underline;
}

/* Meta Text (Dates, Authors) */
.entry-footer, .entry-meta, .taxonomy-description {
    color: var(--text-muted) !important;
}

/* Lines and Borders */
hr, .widget, .entry-content th, .entry-content td {
    border-color: var(--border-color) !important;
}

/* =======================================================
   2. HEADER & BRANDING FIXES (The "Invisible" Fix)
   ======================================================= */

/* Force Site Title to White (Overrides Parent Theme Black) */
.site-branding .site-title,
.site-branding .site-title a {
    color: #ffffff !important;
}

/* Site Description (Tagline) */
.site-branding .site-description {
    color: var(--text-muted) !important;
}

/* Main Menu Links */
.main-navigation a {
    color: #ffffff !important; /* White text for menu items */
    font-weight: bold;
}

.main-navigation a:hover,
.main-navigation .current-menu-item > a {
    color: var(--accent) !important; /* Cyber Blue on hover/active */
}

/* Menu Toggle Button (Mobile) */
.menu-toggle {
    background-color: var(--bg-deep) !important;
    color: #ffffff !important;
    border: 1px solid var(--border-color) !important;
}

/* =======================================================
   3. CODER SPECIFIC STYLING (Code Blocks)
   ======================================================= */

pre, code, kbd, tt, var, samp {
    font-family: "Fira Code", "Consolas", "Monaco", "Courier New", monospace;
    background-color: var(--code-bg);
    color: #ff7b72; /* Syntax Highlight Red/Pink */
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 0.9em;
}

pre {
    padding: 15px;
    border: 1px solid var(--border-color);
    overflow-x: auto;
}

/* =======================================================
   4. TYPOGRAPHY & LAYOUT (Preserved from original)
   ======================================================= */

/* Remove borders between widgets */
.widget {
    border-top: 1px solid var(--border-color);
    padding-top: 20px; 
}

/* Spacing */
p { margin-bottom: 1.75em; }
.entry-content h1, .entry-content h2, .entry-content h3,
.entry-content h4, .entry-content h5, .entry-content h6 {
    margin-top: 2.5em; margin-bottom: 1.75em; 
}
.post-thumbnail { margin-bottom: 1.75em; }
.entry-content img, .entry-content figure { margin-bottom: 2.5em; }
.alignleft { margin-right: 1.75em; margin-bottom: 1.75em; }
.alignright { margin-left: 1.75em; margin-bottom: 1.75em; }
.aligncenter { margin-bottom: 1.75em; }

/* Uppercase Headers */
h1, h2, h3, h4, h5, h6,
.entry-title, .page-title, .widget-title {
    text-transform: uppercase;
    letter-spacing: 0.04em; 
}

/* Fonts */
body, button, input, select, textarea,
h1, h2, h3, h4, h5, h6,
.main-navigation, .site-title, .entry-title,
.widget-title, .post-navigation, .pagination,
.entry-footer, .comments-title, .author-title {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

/* =======================================================
   5. HEADER SEARCH (Cyber Look)
   ======================================================= */

.header-search-wrapper {
    width: 100%;
    max-width: 600px; 
    margin: 0 auto; 
    padding: 10px 0 20px 0; 
    background-color: transparent; 
}

.header-search-wrapper .search-form {
    width: 100%; 
    display: flex;
    align-items: stretch;
}

.header-search-wrapper .search-form label {
    flex-grow: 1; 
    margin-bottom: 0; 
}

.header-search-wrapper .search-field {
    background-color: var(--bg-deep); 
    border: 1px solid var(--border-color);
    color: var(--accent);
    width: 100%; 
    margin-right: 0;
    padding: 0 10px; 
    height: 30px !important; 
    line-height: 30px; 
    font-size: 13px; 
    font-family: "Consolas", monospace; 
    border-radius: 2px 0 0 2px;
    transition: all 0.2s ease;
}

.header-search-wrapper .search-field:focus {
    background-color: var(--bg-deep);
    border-color: var(--accent);
    box-shadow: 0 0 5px rgba(88, 166, 255, 0.3); 
    outline: none; 
}

.header-search-wrapper .search-submit {
    background-color: var(--border-color) !important;
    color: #ffffff !important;           
    border: none !important;
    padding: 0 15px !important;
    height: 30px !important; 
    border-radius: 0 2px 2px 0 !important;
    cursor: pointer;
    flex-shrink: 0; 
    width: auto !important;
    font-family: Arial, sans-serif !important; 
    font-weight: bold !important;
    font-size: 11px !important; 
    text-transform: uppercase !important;
    transition: background-color 0.2s;
}

.header-search-wrapper .search-submit:hover {
    background-color: var(--accent) !important; 
    color: var(--bg-deep) !important; 
}

.header-search-wrapper .search-submit::before {
    content: "SEARCH" !important; 
    transform: none !important;
    display: inline-block !important;
    font-family: inherit !important; 
    width: auto !important;
    height: auto !important;
    line-height: 1 !important;
    position: static;
}

/* =======================================================
   3. CONTENT TOP MENU
   ======================================================= */

/* Wrapper for the new menu to give it space from the page title */
.content-top-navigation-wrapper {
    margin-bottom: 2.5em;
    border-bottom: 1px solid #d1d1d1;
    padding-bottom: 1.5em;
}

/* Main menu bar styling */
.content-top-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex; /* Aligns items in a row */
    justify-content: center; /* Center the menu items */
    flex-wrap: wrap; /* Allows items to wrap on smaller screens */
    gap: 10px; /* Space between menu items */
}

/* Top-level menu items */
.content-top-menu > li {
    position: relative; /* Needed for absolute positioning of dropdowns */
    margin: 0;
    padding: 0;
}

/* All menu links */
.content-top-menu a {
    display: block;
    padding: 8px 12px;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    color: #f6faf7;
    border-radius: 2px;
    transition: background-color 0.2s, color 0.2s;
}

/* Hover effect for links */
.content-top-menu a:hover,
.content-top-menu .current-menu-item > a {
    background-color: #161b22;
    color: #bababa;
}

/* --- Dropdown Panel Styling --- */

/* Hide dropdowns by default */
.content-top-menu .sub-menu {
    display: none;
    position: absolute;
    top: 100%; /* Position right below the parent item */
    left: 0;
    z-index: 1000;
    background-color: #ffffff; /* Solid white background for the "panel" */
    border: 1px solid #d1d1d1;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
    padding: 10px 0;
    margin: 5px 0 0 0;
    min-width: 200px; /* Give the panel a decent width */
    list-style: none;
    border-radius: 3px;
}

/* Show dropdown on hover of the parent list item */
.content-top-menu li:hover > .sub-menu {
    display: block;
}

/* Dropdown menu item links */
.content-top-menu .sub-menu a {
    padding: 10px 20px;
    font-weight: normal;
    white-space: nowrap; /* Prevent links from wrapping */
    color: #1a1a1a;
}

.content-top-menu .sub-menu a:hover {
    background-color: #007acc;
    color: #ffffff;
}