/*
 Theme Name:   Twenty Sixteen Custom
 Description:  Twenty Sixteen Child Theme (True Forest Green Edition)
 Author:       Yogi
 Template:     twentysixteen
 Version:      1.0.4
*/

/* =======================================================
   0. VARIABLES (The "True Forest" Palette)
   ======================================================= */
:root {
    /* Main Background: Distinct Deep Green (Not Black) */
    --bg-deep: #1b2e25;       
    
    /* Content Area: Lighter Moss Green */
    --bg-panel: #264032;      
    
    /* Text: Cream/Parchment (High contrast against green) */
    --text-main: #f2f0e6;     
    
    /* Meta Text: Sage Green */
    --text-muted: #a3b8ad;    
    
    /* Accents: Warm Lamp Gold */
    --accent: #eec584;        
    --accent-hover: #ffdfa8;  
    
    /* Borders: Darker Leaf Green */
    --border-color: #385945;  
}

/* =======================================================
   1. GLOBAL FOREST STYLING
   ======================================================= */

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

/* The Main Container Frame */
.site {
    background-color: var(--bg-panel);
    border-color: var(--bg-deep); 
    /* Add a subtle shadow to separate page from background */
    box-shadow: 0 0 20px rgba(0,0,0,0.3);
}

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

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

/* Headers - Warm Cream */
h1, h2, h3, h4, h5, h6,
.entry-title, 
.widget-title {
    color: #ffffff !important; 
    font-family: "Georgia", serif; 
    text-shadow: 1px 1px 0px #13211b; /* Subtle shadow for depth */
}

/* Links (Gold/Brass) */
a {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px dotted var(--accent);
    transition: all 0.2s ease;
}

a:hover, a:focus {
    color: var(--accent-hover);
    border-bottom: 1px solid var(--accent-hover);
    text-shadow: 0 0 8px rgba(238, 197, 132, 0.6); /* Glow effect */
}

/* Meta Text */
.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. EMOJI DECORATION (Using Hex Codes for Reliability)
   ======================================================= */

/* NOTE: We explicitly set the font-family for these pseudo-elements 
   to ensure the Emojis actually render on Windows/Mac/Linux 
*/

/* 🌿 Plant Icon before Widget Titles */
.widget-title::before {
    content: "\1F33F"; /* Herb Emoji */
    margin-right: 8px;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}

/* ✨ Sparkles before Post Titles */
.entry-title::before {
    content: "\2728"; /* Sparkles Emoji */
    margin-right: 8px;
    font-size: 0.8em;
    vertical-align: middle;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}

/* 🧶 Yarn before Site Title */
.site-title a::before {
    content: "\1F9F6"; /* Yarn Emoji */
    margin-right: 10px;
    font-size: 0.9em;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}

/* 🕯️ Candle/Lamp before Blockquotes */
blockquote::before {
    content: "\1F56F"; /* Candle Emoji */
    display: block;
    font-size: 1.5em;
    margin-bottom: 10px;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}

/* Blockquote Styling */
blockquote {
    border-left: 4px solid var(--accent);
    background-color: rgba(0, 0, 0, 0.2); /* Darker patch */
    font-style: italic;
    margin: 1.5em 0;
    padding: 1.5em;
    color: var(--text-main);
    border-radius: 0 8px 8px 0;
}

/* =======================================================
   3. HEADER & BRANDING
   ======================================================= */

.site-branding .site-title,
.site-branding .site-title a {
    color: #ffffff !important;
    font-family: "Georgia", serif; 
    letter-spacing: 0.05em;
}

.site-branding .site-description {
    color: var(--text-muted) !important;
    font-style: italic;
    opacity: 0.9;
}

/* Main Menu Links */
.main-navigation a {
    color: #ffffff !important; 
    font-family: Arial, sans-serif;
    font-weight: bold;
    border-bottom: none; 
}

.main-navigation a:hover {
    color: var(--accent) !important; 
}

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

/* =======================================================
   4. LAYOUT ADJUSTMENTS
   ======================================================= */

.widget {
    border-top: 1px solid var(--border-color);
    padding-top: 20px; 
}

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; 
}

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

/* =======================================================
   5. SEARCH BAR FIX (Prevents Shrinking)
   ======================================================= */

/* 1. Reset the wrapper */
body .header-search-wrapper {
    width: 100%;
    max-width: 600px; 
    margin: 0 auto; 
    padding: 10px 0 20px 0; 
    display: block; /* Ensure it's a block */
}

/* 2. The Flex Container */
body .header-search-wrapper .search-form {
    display: flex !important; /* Force flexbox */
    flex-wrap: nowrap !important; /* Never wrap to next line */
    align-items: stretch;
    width: 100%;
}

/* 3. The Input Label (Takes up all available space) */
body .header-search-wrapper .search-form label {
    flex-grow: 1 !important; 
    flex-shrink: 1 !important;
    min-width: 0; /* Prevents flexbox overflow bugs */
    margin-bottom: 0;
}

/* 4. The Input Field itself */
body .header-search-wrapper .search-field {
    background-color: var(--bg-deep) !important; 
    border: 1px solid var(--border-color) !important;
    color: var(--text-main) !important;
    border-radius: 4px 0 0 4px;
    width: 100% !important; /* Fill the label area */
    height: 40px !important; /* Slightly taller for easy clicking */
}

/* 5. The Search Button (The "SEA" Fix) */
body .header-search-wrapper .search-submit {
    /* Layout Logic */
    flex-grow: 0 !important;   /* Do NOT grow */
    flex-shrink: 0 !important; /* Do NOT shrink */
    width: auto !important;    /* Size to content */
    min-width: 100px;          /* FORCE a minimum width so "SEARCH" fits */
    
    /* Decoration */
    background-color: var(--border-color) !important; 
    color: #ffffff !important;           
    border: none !important;
    border-radius: 0 4px 4