/*
 Theme Name:   Twenty Sixteen Custom
 Description:  Twenty Sixteen Child Theme (Standard Colors)
 Author:       Yogi
 Template:     twentysixteen
 Version:      1.0.0
*/

/* =======================================================
   1. TYPOGRAPHY & GENERAL FIXES (Kept from your file)
   ======================================================= */

/* Remove borders between widgets */
.widget {
    border-top: none;
    padding-top: 0; 
}

/* --- Typography Spacing --- */

/* Paragraphs */
p {
    margin-bottom: 1.75em; 
}

/* Headings inside posts/pages */
.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; 
}

/* --- Image & Media Spacing --- */

/* Featured Image at the top of posts */
.post-thumbnail {
    margin-bottom: 1.75em; 
}

/* Standard images and figures within content */
.entry-content img, 
.entry-content figure {
    margin-bottom: 2.5em;
}

/* Aligned Images (Floating) */
.alignleft {
    margin-right: 1.75em; 
    margin-bottom: 1.75em;
}

.alignright {
    margin-left: 1.75em; 
    margin-bottom: 1.75em;
}

.aligncenter {
    margin-bottom: 1.75em;
}

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

/* Change main fonts to Arial, preserving Emojis */
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, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/* =======================================================
   2. HEADER SEARCH POSITIONING & STYLING
   ======================================================= */

/* Centered Wrapper (Max Width 600px) */
.header-search-wrapper {
    width: 100%;
    max-width: 600px; 
    margin: 0 auto; /* Centers the block */  
    padding: 10px 0 20px 0; 
    background-color: transparent; 
}

.header-search-wrapper .search-form {
    width: 100%; 
    display: flex;
    align-items: stretch; /* Ensures height matches */
}

/* Fix: Target the LABEL to expand and fill space */
.header-search-wrapper .search-form label {
    flex-grow: 1; 
    margin-bottom: 0; 
}

/* Slim Input Field - 30px Height */
.header-search-wrapper .search-field {
    /* Standard Twenty Sixteen Colors */
    background-color: #f7f7f7; /* Light Gray */
    border: 1px solid #d1d1d1; /* Standard Border */
    color: #1a1a1a;            /* Black Text */
    
    width: 100%; 
    margin-right: 0;
    padding: 0 10px; 
    height: 30px !important; 
    line-height: 30px; 
    font-size: 13px; 
    border-radius: 2px 0 0 2px;
}

/* Focus State for Input */
.header-search-wrapper .search-field:focus {
    background-color: #ffffff; /* White on focus */
    border-color: #007acc;     /* WP Blue on focus */
    outline: none; 
}

/* Slim Button - 30px Height */
.header-search-wrapper .search-submit {
    /* Standard Twenty Sixteen Button Colors (Black Background) */
    background-color: #1a1a1a !important; 
    color: #ffffff !important;           
    
    border: none !important;
    padding: 0 15px !important;
    height: 30px !important; 
    border-radius: 0 2px 2px 0 !important;
    cursor: pointer;
    
    /* Button Layout */
    flex-shrink: 0; 
    width: auto !important;
    
    font-family: Arial, sans-serif !important; 
    font-weight: bold !important;
    font-size: 11px !important; 
    text-transform: uppercase !important;
    text-indent: 0 !important;
    transition: background-color 0.2s;
}

/* Hover Effect for Button */
.header-search-wrapper .search-submit:hover {
    background-color: #007acc !important; /* WP Blue on Hover */
}

/* Replaces the Icon with "SEARCH" Text */
.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: #1a1a1a;
    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: #f2f2f2;
    color: #007acc;
}

/* --- 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;
}
/*
 Theme Name:   Twenty Sixteen Custom
 Description:  Twenty Sixteen Child Theme (Standard Colors)
 Author:       Yogi
 Template:     twentysixteen
 Version:      1.0.0
*/

/* =======================================================
   1. TYPOGRAPHY & GENERAL FIXES (Kept from your file)
   ======================================================= */

/* Remove borders between widgets */
.widget {
    border-top: none;
    padding-top: 0; 
}

/* --- Typography Spacing --- */

/* Paragraphs */
p {
    margin-bottom: 1.75em; 
}

/* Headings inside posts/pages */
.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; 
}

/* --- Image & Media Spacing --- */

/* Featured Image at the top of posts */
.post-thumbnail {
    margin-bottom: 1.75em; 
}

/* Standard images and figures within content */
.entry-content img, 
.entry-content figure {
    margin-bottom: 2.5em;
}

/* Aligned Images (Floating) */
.alignleft {
    margin-right: 1.75em; 
    margin-bottom: 1.75em;
}

.alignright {
    margin-left: 1.75em; 
    margin-bottom: 1.75em;
}

.aligncenter {
    margin-bottom: 1.75em;
}

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

/* Change main fonts to Arial, preserving Emojis */
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, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/* =======================================================
   2. HEADER SEARCH POSITIONING & STYLING
   ======================================================= */

/* Centered Wrapper (Max Width 600px) */
.header-search-wrapper {
    width: 100%;
    max-width: 600px; 
    margin: 0 auto; /* Centers the block */  
    padding: 10px 0 20px 0; 
    background-color: transparent; 
}

.header-search-wrapper .search-form {
    width: 100%; 
    display: flex;
    align-items: stretch; /* Ensures height matches */
}

/* Fix: Target the LABEL to expand and fill space */
.header-search-wrapper .search-form label {
    flex-grow: 1; 
    margin-bottom: 0; 
}

/* Slim Input Field - 30px Height */
.header-search-wrapper .search-field {
    /* Standard Twenty Sixteen Colors */
    background-color: #f7f7f7; /* Light Gray */
    border: 1px solid #d1d1d1; /* Standard Border */
    color: #1a1a1a;            /* Black Text */
    
    width: 100%; 
    margin-right: 0;
    padding: 0 10px; 
    height: 30px !important; 
    line-height: 30px; 
    font-size: 13px; 
    border-radius: 2px 0 0 2px;
}

/* Focus State for Input */
.header-search-wrapper .search-field:focus {
    background-color: #ffffff; /* White on focus */
    border-color: #007acc;     /* WP Blue on focus */
    outline: none; 
}

/* Slim Button - 30px Height */
.header-search-wrapper .search-submit {
    /* Standard Twenty Sixteen Button Colors (Black Background) */
    background-color: #1a1a1a !important; 
    color: #ffffff !important;           
    
    border: none !important;
    padding: 0 15px !important;
    height: 30px !important; 
    border-radius: 0 2px 2px 0 !important;
    cursor: pointer;
    
    /* Button Layout */
    flex-shrink: 0; 
    width: auto !important;
    
    font-family: Arial, sans-serif !important; 
    font-weight: bold !important;
    font-size: 11px !important; 
    text-transform: uppercase !important;
    text-indent: 0 !important;
    transition: background-color 0.2s;
}

/* Hover Effect for Button */
.header-search-wrapper .search-submit:hover {
    background-color: #007acc !important; /* WP Blue on Hover */
}

/* Replaces the Icon with "SEARCH" Text */
.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: #1a1a1a;
    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: #f2f2f2;
    color: #007acc;
}

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