/*
================================================================
 RAMORADBA.COM - FULL REPLACEMENT ADDITIONAL CSS
 Forest & Sage - Stable / Safe Version
================================================================

 Replace ALL existing Additional CSS with this.

 Goals:
 - Keep logo before "Sriram Sanka"
 - Forest header and sidebars
 - Light readable content area on ALL pages
 - About page text remains visible
 - Archive counts remain visible
 - Preserve existing theme layout/widths
 - Avoid generic selectors that break WordPress pages
================================================================
*/


/* ============================================================
   1. BASE
   ============================================================ */

html,
body {
    margin: 0;
    padding: 0;
}

body {
    background-color: #1b3025 !important;
    color: #2b2f2d !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* ============================================================
   2. SITE HEADER
   ============================================================ */

#header,
#masthead,
.site-header {
    background:
        linear-gradient(
            135deg,
            #162a20 0%,
            #1f3328 72%,
            #294536 100%
        ) !important;
    color: #ffffff !important;

    border: 0 !important;
    min-height: 96px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    box-sizing: border-box !important;
}


/* ============================================================
   3. SITE TITLE
   ============================================================ */

#header h1,
#site-title,
.site-title {
    margin-top: 0 !important;
    margin-bottom: 2px !important;

    color: #ffffff !important;
    line-height: 1.08 !important;
    letter-spacing: 2px !important;
}


/* ============================================================
   4. LOGO BEFORE "SRIRAM SANKA"
   ============================================================ */

h1 > a[href="https://ramoradba.com/"],
h1 > a[href="https://ramoradba.com"],
#site-title a,
.site-title a {
    display: inline-flex !important;
    align-items: center !important;

    min-height: 54px !important;

    padding-left: 66px !important;

    background-image:
        url("https://ramoradba.com/wp-content/uploads/2018/02/ds-1.png") !important;

    background-repeat: no-repeat !important;
    background-position: left center !important;
    background-size: 54px 54px !important;

    color: #ffffff !important;
    text-decoration: none !important;

    box-sizing: border-box !important;
}


/* ============================================================
   5. TAGLINE
   ============================================================ */

#site-description,
.site-description,
#header .description {
    color: #d4e1d6 !important;
    margin-top: 2px !important;
    margin-bottom: 0 !important;
    line-height: 1.25 !important;
    letter-spacing: 0.15px !important;
}


/* Fallback because the live page exposes tagline as heading text */

#header h2 {
    color: #d4e1d6 !important;
    margin-top: 2px !important;
    margin-bottom: 0 !important;
    line-height: 1.25 !important;
}


/* ============================================================
   6. NAVIGATION
   ============================================================ */

#access,
#menu,
#nav,
.main-navigation,
.navigation {
    background-color: rgba(248, 250, 247, 0.98) !important;

    border-top: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-bottom: 1px solid #d9e2da !important;

    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
}


/* Navigation links */

#access a,
#menu a,
#nav a,
.main-navigation a,
.navigation a {
    color: #35543d !important;

    text-decoration: none !important;
    font-weight: 600 !important;
    letter-spacing: 0.15px !important;
    padding-top: 9px !important;
    padding-bottom: 9px !important;
    transition:
        color 0.2s ease,
        background-color 0.2s ease !important;
}


/* Hover */

#access a:hover,
#menu a:hover,
#nav a:hover,
.main-navigation a:hover,
.navigation a:hover {
    background-color: #e4eee5 !important;
    color: #25442d !important;
}


/* Current menu */

#access .current_page_item > a,
#access .current-menu-item > a,
#menu .current_page_item > a,
#menu .current-menu-item > a,
#nav .current_page_item > a,
#nav .current-menu-item > a,
.main-navigation .current_page_item > a,
.main-navigation .current-menu-item > a {
    background-color: #dce9de !important;
    color: #243e2c !important;
    box-shadow: inset 0 -3px 0 #557a5e !important;
}


/* ============================================================
   7. LEFT / RIGHT SIDEBARS
   ============================================================ */

#sidebar,
#sidebar-left,
#sidebar2,
#sidebar-right {
    background-color: #1f3328 !important;
    color: #d4e1d6 !important;
}


/* Sidebar headings */

#sidebar h1,
#sidebar h2,
#sidebar h3,
#sidebar-left h1,
#sidebar-left h2,
#sidebar-left h3,
#sidebar2 h1,
#sidebar2 h2,
#sidebar2 h3,
#sidebar-right h1,
#sidebar-right h2,
#sidebar-right h3 {
    color: #e7efe8 !important;
}


/* Sidebar links */

#sidebar a,
#sidebar-left a,
#sidebar2 a,
#sidebar-right a {
    color: #b7d1b9 !important;
    text-decoration: none !important;
}


/* Sidebar hover */

#sidebar a:hover,
#sidebar-left a:hover,
#sidebar2 a:hover,
#sidebar-right a:hover {
    color: #ffffff !important;
    text-decoration: underline !important;
}


/* ============================================================
   8. ARCHIVES - KEEP COUNTS VISIBLE
   ============================================================ */

#sidebar li,
#sidebar-left li,
.widget_archive,
.widget_archive li,
.widget_archive ul {
    color: #d4e1d6 !important;
}


#sidebar li a,
#sidebar-left li a,
.widget_archive a {
    color: #b7d1b9 !important;
}


.widget_archive span,
.widget_archive .count {
    color: #d4e1d6 !important;
}


/* ============================================================
   9. MAIN CONTENT AREA
   CRITICAL: KEEP ALL PAGE CONTENT LIGHT
   ============================================================ */

#content {
    background-color: #fbfbf7 !important;
    color: #2b2f2d !important;

    border: 1px solid #d9e0da !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.07) !important;
    box-sizing: border-box !important;
}


/*
 Normal posts/pages inside #content
*/

#content .post,
#content .page,
#content .entry,
#content .entry-content,
#content .post-content {
    background-color: transparent !important;
    color: #2b2f2d !important;
}


/* ============================================================
   10. STATIC PAGES INCLUDING /ABOUT/
   ============================================================ */

body.page #content {
    background-color: #fbfbf7 !important;
    color: #2b2f2d !important;

    border: 1px solid #d9e0da !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.07) !important;
    box-sizing: border-box !important;
}


/*
 Force text back to normal readable colors.
*/

body.page #content p,
body.page #content li,
body.page #content dd,
body.page #content dt {
    color: #2b2f2d !important;
    background-color: transparent !important;
}


/*
 Prevent the green text-background strips visible in your
 broken About screenshot.
*/

body.page #content span,
body.page #content strong,
body.page #content em,
body.page #content div {
    background-color: transparent !important;
}


/* ============================================================
   11. ABOUT PAGE SPECIFIC SAFETY
   ============================================================ */

/*
 WordPress commonly adds page-id-* classes to BODY,
 but we don't need to know the exact ID.
*/

body.page #content h1,
body.page #content h2,
body.page #content h3,
body.page #content h4,
body.page #content h5,
body.page #content h6 {
    color: #355e40 !important;
    background-color: transparent !important;
    line-height: 1.3 !important;
}


/*
 Keep About-page links readable.
*/

body.page #content a {
    color: #557a5e !important;
}


body.page #content a:hover {
    color: #304e37 !important;
}


/* ============================================================
   12. PAGE / ARTICLE TITLES
   ============================================================ */

#content .entry-title,
#content .post-title,
#content .page-title {
    color: #355e40 !important;
    background-color: transparent !important;
}


#content .entry-title a,
#content .post-title a,
#content .page-title a {
    color: #355e40 !important;
    text-decoration: none !important;
}


#content .entry-title a:hover,
#content .post-title a:hover,
#content .page-title a:hover {
    color: #25442d !important;
}


/* ============================================================
   13. ARTICLE HEADINGS
   ============================================================ */

#content .post h1,
#content .post h2,
#content .post h3,
#content .post h4,
#content .entry-content h1,
#content .entry-content h2,
#content .entry-content h3,
#content .entry-content h4 {
    color: #355e40 !important;
    background-color: transparent !important;
}


/* ============================================================
   14. CONTENT LINKS
   ============================================================ */

#content a {
    color: #557a5e;
}


#content a:hover {
    color: #304e37;
}


/* ============================================================
   15. POST META
   ============================================================ */

#content .entry-meta,
#content .post-meta,
#content .postmetadata {
    color: #6f7e73 !important;
}


#content .entry-meta a,
#content .post-meta a,
#content .postmetadata a {
    color: #557a5e !important;
}


/* ============================================================
   16. CODE / SQL / PRE
   ============================================================ */

#content pre {
    background-color: #f3f6f1 !important;
    color: #252c27 !important;

    border: 1px solid #cfd8cf;
    border-left: 4px solid #78967d;

    padding: 12px;

    overflow-x: auto;
    box-sizing: border-box;

    font-family:
        Consolas,
        Monaco,
        "Courier New",
        monospace;

    line-height: 1.45;
}


#content code {
    background-color: #eef3ec;
    color: #324538;

    padding: 2px 5px;

    border-radius: 3px;

    font-family:
        Consolas,
        Monaco,
        "Courier New",
        monospace;
}


#content pre code {
    background-color: transparent !important;
    padding: 0;
}


/* ============================================================
   17. BLOCKQUOTES
   ============================================================ */

#content blockquote {
    background-color: #f1f5ef !important;
    color: #4b5b4f !important;

    border-left: 4px solid #78967d;

    padding: 10px 18px;
}


/* ============================================================
   18. TABLES
   ============================================================ */

#content table {
    border-collapse: collapse;
}


#content th,
#content td {
    border: 1px solid #d7ded7;
    padding: 7px 10px;
}


#content th {
    background-color: #405a46;
    color: #ffffff;
}


/* ============================================================
   19. IMAGES
   ============================================================ */

#content img,
#sidebar img,
#sidebar-left img,
#sidebar2 img,
#sidebar-right img {
    max-width: 100%;
    height: auto;
}


/* ============================================================
   20. FORMS
   ============================================================ */

input[type="text"],
input[type="search"],
input[type="email"],
input[type="url"],
textarea,
select {
    background-color: #ffffff;
    color: #2b2f2d;

    border: 1px solid #b9c5ba;

    box-sizing: border-box;
}


/* ============================================================
   21. BUTTONS
   ============================================================ */

button,
input[type="submit"],
input[type="button"] {
    background-color: #557a5e;
    color: #ffffff;

    border: 0;
    cursor: pointer;
}


button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
    background-color: #3f6248;
}


/* ============================================================
   22. FOOTER
   ============================================================ */

#footer,
.site-footer {
    background-color: #16261e !important;
    color: #c7d4c9 !important;
}


#footer a,
.site-footer a {
    color: #b7d1b9 !important;
}


#footer a:hover,
.site-footer a:hover {
    color: #ffffff !important;
}


/* ============================================================
   23. TEXT SELECTION
   ============================================================ */

::selection {
    background-color: #8fae91;
    color: #172119;
}



/* ============================================================
   23A. PROFESSIONAL LAYOUT POLISH
   ============================================================ */

/*
 Keep the existing theme structure, but reduce the "empty banner"
 feeling and add cleaner separation between header/navigation/content.
*/

#header,
#masthead,
.site-header {
    position: relative !important;
}

/* Keep branding visually centered within the compact header. */
#header h1,
#header h2,
#site-title,
.site-title,
#site-description,
.site-description {
    position: relative !important;
    z-index: 1 !important;
}

/* Give sidebar images/cards a more deliberate presentation. */
#sidebar img,
#sidebar-left img,
#sidebar2 img,
#sidebar-right img {
    border-radius: 4px;
}

/* Reduce harsh transitions between the dark sidebars and content. */
#sidebar,
#sidebar-left,
#sidebar2,
#sidebar-right {
    box-sizing: border-box !important;
}

/* Slightly increase content text readability on wide screens. */
#content p,
#content li {
    line-height: 1.6;
}

/* Modernize page/post title spacing without changing theme widths. */
#content .entry-title,
#content .post-title,
#content .page-title {
    margin-top: 0 !important;
    padding-bottom: 6px !important;
    border-bottom: 1px solid #d7ded7 !important;
}

/* Cleaner table appearance. */
#content table {
    width: 100%;
}

#content th {
    font-weight: 600;
}

/* Softer focus style for keyboard users. */
#content a:focus-visible,
#access a:focus-visible,
#menu a:focus-visible,
#nav a:focus-visible,
.main-navigation a:focus-visible,
.navigation a:focus-visible {
    outline: 3px solid rgba(143, 174, 145, 0.55);
    outline-offset: 2px;
}

/* ============================================================
   24. TABLET
   ============================================================ */

@media screen and (max-width: 768px) {

    #header,
    #masthead,
    .site-header {
        min-height: 84px !important;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    h1 > a[href="https://ramoradba.com/"],
    h1 > a[href="https://ramoradba.com"],
    #site-title a,
    .site-title a {
        min-height: 46px !important;
        padding-left: 56px !important;
        background-size: 46px 46px !important;
    }

    #content pre {
        max-width: 100%;
        overflow-x: auto;
    }
}


/* ============================================================
   25. SMALL MOBILE
   ============================================================ */

@media screen and (max-width: 480px) {

    #header,
    #masthead,
    .site-header {
        min-height: 76px !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }

    h1 > a[href="https://ramoradba.com/"],
    h1 > a[href="https://ramoradba.com"],
    #site-title a,
    .site-title a {
        min-height: 40px !important;
        padding-left: 48px !important;
        background-size: 40px 40px !important;
    }
}


/*
================================================================
 END RAMORADBA.COM ADDITIONAL CSS
================================================================
*/


/* ============================================================
   26. LIVE-SITE HEADER OVERRIDE
   Added after reviewing https://ramoradba.com/about/
   Purpose: remove the large unused space above the branding.
   ============================================================ */

/*
 The live theme is reserving vertical space inside one or more
 branding wrappers. Reset those wrappers, not the whole page.
*/
#header,
#masthead,
.site-header,
#header #headerimg,
#header .header-inner,
#header .site-branding,
#masthead .site-branding,
.site-header .site-branding,
#branding,
.header-branding {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    box-sizing: border-box !important;
}

/*
 Header shell: compact, but still gives the logo/title room to breathe.
*/
#header,
#masthead,
.site-header {
    padding-top: 14px !important;
    padding-bottom: 12px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/*
 Most older WordPress themes put the empty vertical space on
 #headerimg / branding / hgroup rather than on #header itself.
*/
#header #headerimg,
#header .site-branding,
#header hgroup,
#masthead .site-branding,
#masthead hgroup,
.site-header .site-branding,
.site-header hgroup,
#branding,
.header-branding {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/*
 Keep the title and tagline together as a single branding block.
*/
#header h1,
#header h2,
#site-title,
.site-title,
#site-description,
.site-description,
#header .description {
    margin-left: 0 !important;
}

#header h1,
#site-title,
.site-title {
    margin-top: 0 !important;
    margin-bottom: 2px !important;
}

#header h2,
#site-description,
.site-description,
#header .description {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/*
 Make the logo/title row compact on the actual live page.
*/
h1 > a[href="https://ramoradba.com/"],
h1 > a[href="https://ramoradba.com"],
#site-title a,
.site-title a {
    min-height: 52px !important;
    padding-left: 64px !important;
    background-size: 52px 52px !important;
    background-position: left center !important;
}

/*
 Navigation should sit immediately below the branding instead of
 inheriting spacing from the old banner.
*/
#access,
#menu,
#nav,
.main-navigation,
.navigation {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/*
 A little more polish on the live About page without changing its
 existing content structure.
*/
body.page #content {
    border-radius: 2px !important;
}

body.page #content p {
    line-height: 1.62 !important;
}

@media screen and (max-width: 768px) {
    #header,
    #masthead,
    .site-header {
        padding-top: 10px !important;
        padding-bottom: 9px !important;
    }

    h1 > a[href="https://ramoradba.com/"],
    h1 > a[href="https://ramoradba.com"],
    #site-title a,
    .site-title a {
        min-height: 46px !important;
        padding-left: 56px !important;
        background-size: 46px 46px !important;
    }
}

@media screen and (max-width: 480px) {
    #header,
    #masthead,
    .site-header {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }

    h1 > a[href="https://ramoradba.com/"],
    h1 > a[href="https://ramoradba.com"],
    #site-title a,
    .site-title a {
        min-height: 40px !important;
        padding-left: 48px !important;
        background-size: 40px 40px !important;
    }
}


body { border: 20px solid red !important; }


#header,
#masthead,
.site-header,
#branding,
.site-branding,
#header-wrap,
.header-wrap,
header#header,
header.site-header {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    min-height: 0 !important;
    height: auto !important;
    background-size: cover !important;
}

/* In case the theme sets a header image / custom-header with fixed height */
.custom-header,
.site-header-image,
#wp-custom-header {
    min-height: 0 !important;
    height: auto !important;
}


#header,
#masthead,
.site-header,
#branding,
.site-branding,
#header-wrap,
.header-wrap,
header#header,
header.site-header {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    min-height: 0 !important;
    height: auto !important;
    background-size: cover !important;
}

.custom-header,
.site-header-image,
#wp-custom-header {
    min-height: 0 !important;
    height: auto !important;
}


#header,
#masthead,
.site-header {
    background-image:
        linear-gradient(
            rgba(15, 35, 27, 0.72),
            rgba(15, 35, 27, 0.72)
        ),
        url("https://ramoradba.com/wp-content/uploads/2018/06/title2.png") !important;

    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;

    min-height: 180px !important;
}