/*
Theme Name: Fairy Dark Experiment
Theme URI: https://www.candidthemes.com/themes/fairy/
Author: candidthemes
Author URI: http://www.candidthemes.com/
Description: Fairy Dark is a free WordPress blog theme. It is the child theme of Fairy. It is masonry layout WordPress blog theme with tons of theme options. It has amazing slider, breadcrumb from Yoast SEO, NavXT and Rank Math, post tags options and many more. It is the enhanced over Fairy theme. Fairy Dark also comes with added custom widgets for author, featured posts and social icons. It has top level menu, social icons, slider, promotional banner, sidebar option, Mailchimp subscription, and many more other features. In addition, it has copyright text, go to the top, footer widgets, blog page options, related posts, sticky sidebar, etc. This theme is lightweight and easy to use theme for travel blog, food blog, technology blog and fashion blog. You can also use this theme for news and magazine sites too. Furthermore, it comes with demo data to make the site like the demo, detailed documentation including video and text, free support via chat and forum. It is developed by the experts WordPress developers so that you will never look for alternatives after using this theme. Try this awesome and carefully crafted theme today. Demo: https://fairy.candidthemes.com/
Version: 0.1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fairy-dark-experiment
Requires PHP: 7.0
Tested up to: 6.9
Template: fairy-rebel-base
Tags: two-columns, right-sidebar, custom-background, custom-colors, custom-menu, featured-images, theme-options, threaded-comments, translation-ready, rtl-language-support, footer-widgets, custom-header, three-columns, one-column, left-sidebar, news, blog
*/

@import url("rebel-charcoal-overrides.css");

body {
    background: #181818;
}

body, button, input, select, optgroup, textarea, 
.site-footer *, .site-footer a, .site-footer p {
    color: #ccc;
}

a:focus,
input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="number"]:focus, input[type="tel"]:focus, input[type="range"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="week"]:focus, input[type="time"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="color"]:focus, textarea:focus {
	color: #ccc;
	outline-color: #D8C4A4;
}

.card_title a,
.site-description,
.btn-primary,
body .btn-primary, .btn.btn-primary,
.card-blog-post .card_body p,
.search-form .search-field,
.wp-block-search .wp-block-search__input {
	color: #ddd;
}

.main-navigation a,
.site-header.site-header-left-logo .site-header-top .site-header-top-menu li a, 
.site-header.site-header-v2 .site-header-topbar .site-header-top-menu li a,
.btn-secondary-border, .main-navigation a, .widget-area .widget a, 
.search-form .search-field:focus, .category-label-group a, .page-links .post-page-numbers,
.card-blog-post .entry-meta a, .post-navigation .nav-links > * a, .ct-dark-mode .wp-block-table.is-style-stripes table tr:nth-child(2n + 1),
.breadcrumb-trail .trial-items a, .breadcrumbs ul a,
.breadcrumb-trail .trial-items li + li:before, .breadcrumbs ul li + li:before {
	color: #ccc;
}

p a, .entry-content a
.site-title, .site-title a, h1.site-title a, p.site-title a, .site-title a:visited {
	color: #D8C4A4;
}

.search-form .search-field:focus,
.wp-block-search .wp-block-search__input:focus {
	color: #444;
}

/* Background Color */

.site-header, .site-footer-top .widget .widget-title:after, .card-blog-post, .widget-area .widget,
.site-footer-top {
	background-color: #212121;
}

.site-header.site-header-left-logo .site-header-top, .site-header.site-header-v2 .site-header-topbar,
.site-footer-bottom {
	background-color:#1c1c1c;
}

.btn-primary,
.search-form .search-submit,
input[type="submit"],
.wp-block-search .wp-block-search__button,
.pagination .page-numbers {
	background-color: #444;
}

#secondary .widget .widget-title:after {
	background-color: #cd3636;
}

textarea, input, select, optgroup, 
.comment-list .comment .comment-body {
	background-color: #1c1c1c;
	color: #ccc;
}

/* Border Color */

.wp-block-search .wp-block-search__button,
.search-form .search-field,
.wp-block-search .wp-block-search__input {
	border-color: #444;
}


.site-header-bottom, .site-header-top {
	border-color: #bbb;
}

/* Hover Color */

a:hover {
	color: #cd3636;
}

.card_title a:hover,
.main-navigation #primary-menu > li > a:hover,
.site-header.site-header-left-logo .site-header-top .site-header-top-menu li a:hover, .site-header.site-header-left-logo .site-header-top .site-header-top-menu li a:focus, .site-header.site-header-v2 .site-header-topbar .site-header-top-menu li a:hover, .site-header.site-header-v2 .site-header-topbar .site-header-top-menu li a:focus, .top-header-toggle-btn,
.site-footer a:hover {
	color: #D8C4A4;
}

.single .card-blog-post .card_body{
    width: 100%;
    flex-basis: 100%;
}

/* Scoped semi-light blue inline code highlights (only targets standard text elements) */
p code,
li code,
h1 code,
h2 code,
h3 code,
h4 code,
h5 code,
h6 code,
td code,
.entry-content > code {
    background-color: rgba(56, 189, 248, 0.08) !important;
    color: #38bdf8 !important;
    border: 1px solid rgba(56, 189, 248, 0.2) !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace !important;
    font-size: 85% !important;
    word-break: break-word !important;
    display: inline-block !important;
}

/* Reset / Prevent overrides inside standard pre blocks, block code, and syntax highlight blocks */
pre code,
.entry-content pre code,
.wp-block-code code,
.syntaxhighlighter code {
    background-color: transparent !important;
    color: inherit !important;
    border: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    font-family: inherit !important;
    font-size: inherit !important;
    word-break: normal !important;
    display: inline !important;
}

/* VS Code Dark Background with Monokai Syntax Highlighting */
.wp-block-codemirror-blocks-code-block,
.code-block {
    background-color: #1e1e1e !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
    overflow: hidden !important;
}

.cm-s-monokai.CodeMirror {
    background-color: #1e1e1e !important;
}

.cm-s-monokai .CodeMirror-gutters {
    background-color: #181818 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.04) !important;
}

@media screen and (max-width: 991px) {
	body.admin-bar #masthead #primary-menu.off_canva_nav {
		padding-top: 46px;
	}
}

/* Custom Sticky Transparent Header Updates */
.site-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
    padding: 0 !important;
    background-color: rgba(24, 24, 24, 0.85) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: none !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease !important;
}

.site-header.header-hidden {
    transform: translateY(-100%) !important;
}

.admin-bar .site-header {
    top: 32px !important;
}

@media screen and (max-width: 782px) {
    .admin-bar .site-header {
        top: 46px !important;
    }
}

.site-header-top {
    padding-top: 8px !important;
    padding-bottom: 0 !important;
    border: none !important;
    background-color: transparent !important;
}

.site-header-bottom {
    padding: 0 !important;
    border: none !important;
    background-color: transparent !important;
}

/* Remove all header border lines */
.site-header-top,
.site-header-bottom,
.site-header-topbar,
.site-header-menu-top {
    border: none !important;
}

.site-branding {
    padding: 0 !important;
}

.site-branding .custom-logo-link + .site-title {
    margin-top: 0 !important;
}

.site-description {
    margin-bottom: 0 !important;
    font-size: 14px !important;
}

/* Desktop: single-row header with logo left, nav right */
@media screen and (min-width: 992px) {
    #site-nav-wrap {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        max-width: 1200px !important;
        margin: 0 auto !important;
        padding: 8px 15px !important;
    }

    section.site-header-top {
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        text-align: left !important;
        flex: 0 1 auto !important;
    }

    .site-branding {
        text-align: left !important;
        margin: 0 !important;
    }

    .site-branding .custom-logo-link + .site-title {
        margin-top: 0 !important;
    }

    .site-header-v2 .custom-logo-link img,
    .custom-logo-link img {
        max-height: 38px !important;
        width: auto !important;
        margin-left: -5px !important;
        margin-right: auto !important;
    }

    section.site-header-top .container,
    section.site-header-top .row,
    section.site-header-top .col-1-1 {
        padding: 0 !important;
        margin: 0 !important;
        max-width: none !important;
        width: auto !important;
    }

    section.site-header-bottom {
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        flex: 1 1 auto !important;
        display: flex !important;
        justify-content: flex-end !important;
    }

    section.site-header-bottom .container {
        padding: 0 !important;
        margin: 0 !important;
        max-width: none !important;
        width: auto !important;
    }

    .site-header-bottom #primary-menu {
        display: flex !important;
        justify-content: flex-end !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .site-header-menu-top {
        border-bottom: none !important;
    }
}

/* Mobile popup menu - completely independent of parent theme */
@media screen and (max-width: 991px) {
    /* Hide the parent theme's mobile menu */
    .site-header .main-navigation #primary-menu {
        display: none !important;
    }

    /* Mobile header layout: logo left, hamburger right */
    #masthead {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 10px 15px !important;
    }

    .site-branding {
        text-align: left !important;
    }

    .site-branding .custom-logo-link img {
        max-height: 28px !important;
        width: auto !important;
        margin-left: -3px !important;
    }

    .site-description {
        font-size: 11px !important;
        margin-top: 2px !important;
        margin-bottom: 0 !important;
    }

    /* Hide parent theme's hamburger, we'll use our own */
    .menu-toggle {
        display: none !important;
    }

    /* Custom hamburger button */
    .rebel-hamburger {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 40px;
        height: 40px;
        background: none;
        border: 2px solid rgba(255, 255, 255, 0.3);
        border-radius: 8px;
        cursor: pointer;
        padding: 8px;
        gap: 5px;
        z-index: 10001;
    }

    .rebel-hamburger span {
        display: block;
        width: 20px;
        height: 2px;
        background-color: #fff;
        border-radius: 2px;
        transition: all 0.3s ease;
    }

    .rebel-hamburger:hover {
        border-color: rgba(255, 255, 255, 0.6);
    }

    /* Custom full-screen mobile menu overlay */
    .rebel-mobile-menu-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.95);
        z-index: 99999;
        justify-content: center;
        align-items: center;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .rebel-mobile-menu-overlay.active {
        display: flex;
        opacity: 1;
    }

    .rebel-mobile-menu-overlay .menu-list {
        list-style: none;
        padding: 0;
        margin: 0;
        text-align: center;
    }

    .rebel-mobile-menu-overlay .menu-list li {
        margin: 20px 0;
    }

    .rebel-mobile-menu-overlay .menu-list li a {
        color: #ccc;
        text-decoration: none;
        font-size: 24px;
        font-weight: 500;
        padding: 10px 30px;
        transition: color 0.2s ease;
    }

    .rebel-mobile-menu-overlay .menu-list li a:hover {
        color: #fff;
    }

    .rebel-mobile-menu-overlay .close-btn {
        position: absolute;
        top: 20px;
        right: 25px;
        font-size: 35px;
        color: #fff;
        cursor: pointer;
        background: none;
        border: none;
        z-index: 100000;
    }
}

/* Rounded corners for widgets and their internal images */
.widget,
.card-blog-post,
.widget-area .widget,
.card-blog-post .card_image {
    border-radius: 8px !important;
    overflow: hidden !important;
}

.widget img,
.card-blog-post img,
.post-thumbnail img,
.card-blog-post .card_image img {
    border-radius: 8px !important;
}

/* Unified top gap for all pages */
#content {
    padding-top: 15px !important;
}

.sec-spacing,
.blog-list-section.sec-spacing,
.archive-list-section.sec-spacing,
.single-section.sec-spacing {
    padding-top: 0.5em !important;
}

@media screen and (min-width: 992px) {
    .sec-spacing.single-section,
    .sec-spacing.archive-list-section {
        padding-top: 0.5em !important;
    }
}

/* Adjust layout: Reduce sidebar width by 50px and widen primary content area */
@media screen and (min-width: 992px) {
    /* Make primary column wider (increase by ~50px / 4.16% on a 1200px container) only if not full/centered width */
    .row:not(.row-full-width):not(.row-center-width) #primary.col-md-2-3, 
    .row:not(.row-full-width):not(.row-center-width) #primary.col-lg-2-3 {
        flex: 0 0 70.83333% !important;
        max-width: 70.83333% !important;
    }
    
    /* Make secondary (sidebar) column narrower (decrease by ~50px / 4.16% on a 1200px container) only if not full/centered width */
    .row:not(.row-full-width):not(.row-center-width) #secondary.col-md-1-3, 
    .row:not(.row-full-width):not(.row-center-width) #secondary.col-lg-1-3 {
        flex: 0 0 29.16667% !important;
        max-width: 29.16667% !important;
    }
}