/**
 * Custom Layout Modifications
 * - Hero Banner: Image left, Content right
 * - Featured Slider: Image right, Content left
 * - Modern Slider Cards: Image right, Content left
 */

/* ========================================================================
   Hero Banner - Swap Layout (Image Left, Content Right)
   ======================================================================== */

.gracefultimes-hero-banner {
    flex-direction: row-reverse;
}

/* Adjust widths for better balance when reversed */
@media screen and (min-width: 768px) {
    .gracefultimes-hb-col:first-child {
        width: 49%;
    }
    .gracefultimes-hb-col:last-child {
        width: 59%;
    }
}

/* Align content properly after reversal */
.gracefultimes-hb-col:first-child {
    text-align: left;
}

/* ========================================================================
   Featured Slider - Position Content Left, Image Right
   ======================================================================== */

/* Position the background image to the right side */
.slider-item-bg {
    background-position: right center !important;
}

/* Align content to the left side */
.slider-item .cv-inner {
    text-align: left;
}

.slider-item .slider-info {
    margin-left: 0;
    margin-right: auto;
    padding-left: 60px;
    padding-right: 40px;
}

/* Add gradient overlay from left to make content more readable */
.slider-item .image-overlay {
    background: linear-gradient(to right, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0) 100%);
}

/* For multi-column sliders with actual img tags */
[data-slider-columns]:not([data-slider-columns="1"]) .slider-item {
    display: flex;
    flex-direction: row-reverse;
}

[data-slider-columns]:not([data-slider-columns="1"]) .slider-item img {
    order: 2;
    flex: 0 0 50%;
}

[data-slider-columns]:not([data-slider-columns="1"]) .slider-item .cv-container {
    order: 1;
    flex: 0 0 50%;
}

/* ========================================================================
   Modern Slider Cards - Swap Layout (Image Right, Content Left)
   ======================================================================== */

/* Change card layout to horizontal with image on right */
.gracefultimestimes-slider-card {
    flex-direction: row-reverse !important;
    align-items: stretch;
}

.gracefultimestimes-card-image-container {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    height: auto !important;
    min-height: 280px;
    margin-bottom: 0 !important;
    margin-left: 15px;
}

.gracefultimestimes-card-content {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    padding: 20px 15px !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.gracefultimestimes-card-image {
    height: 100% !important;
}

/* ========================================================================
   Times Slider - Free card-overlay layout (no swap needed)
   Free theme centers a white card over a full-bleed image, so the
   old image-right/content-left override is retired.
   ======================================================================== */

/* Mobile responsiveness - stack vertically on small screens */
@media screen and (max-width: 768px) {
    .gracefultimestimes-slider-card {
        flex-direction: column !important;
    }
    
    .gracefultimestimes-card-image-container {
        flex: 1 1 auto !important;
        max-width: 100% !important;
        height: 220px !important;
        margin-left: 0;
        margin-bottom: 15px !important;
    }
    
    .gracefultimestimes-card-content {
        flex: 1 1 auto !important;
        max-width: 100% !important;
        padding: 0 15px 20px 15px !important;
    }
}



/* Mobile responsiveness - keep stacked on small screens */
@media screen and (max-width: 480px) {
    .gracefultimes-hero-banner {
        flex-direction: column;
    }
    
    .gracefultimestimes-slider-card {
        flex-direction: column;
    }
    
    .slider-item .slider-info {
        padding-left: 20px;
        padding-right: 20px;
    }
}


/* ========================================================================
   Dark Mode Toggle Button
   ======================================================================== */

.main-nav-dark-mode {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    cursor: pointer;
    margin-left: 6px;
    vertical-align: middle;
    position: relative;
    top: 1px;
    transition: opacity 0.2s ease;
}

.main-nav-dark-mode:hover {
    opacity: 0.7;
}

.main-nav-dark-mode .fa {
    font-size: 16px;
    line-height: 1;
}

/* Show moon by default (click to enter dark mode), hide sun */
.main-nav-dark-mode .dark-mode-icon-light {
    display: none;
}

/* ========================================================================
   Dark Mode — Global Overrides (applied when body.dark-mode is set)
   ======================================================================== */

/* Base */
body.dark-mode {
    background-color: #1a1a1a !important;
    color: #d0d0d0 !important;
}

/* Page wrapper */
body.dark-mode #page-wrap,
body.dark-mode #page-content,
body.dark-mode .main-content {
    background-color: #1a1a1a;
}

/* Main navigation */
body.dark-mode #main-nav {
    background-color: #111111 !important;
}

body.dark-mode #main-nav a,
body.dark-mode #main-nav li a,
body.dark-mode #main-nav .main-nav-icons .fa {
    color: #cccccc !important;
}

body.dark-mode #main-nav li a:hover,
body.dark-mode #main-nav .main-nav-icons .fa:hover {
    color: #ffffff !important;
}

body.dark-mode #main-nav .sub-menu {
    background-color: #222222 !important;
    border-color: #333333 !important;
}

body.dark-mode #main-nav .sub-menu a {
    color: #bbbbbb !important;
}

body.dark-mode #main-nav .sub-menu a:hover {
    background-color: #333333 !important;
    color: #ffffff !important;
}

/* Top bar */
body.dark-mode #top-bar {
    background-color: #0d0d0d !important;
}

/* Page header / site header */
body.dark-mode #page-header,
body.dark-mode .site-header {
    background-color: #1a1a1a !important;
}

/* Post / content areas */
body.dark-mode .blog-grid article,
body.dark-mode .blog-grid .post-item,
body.dark-mode .main-container article,
body.dark-mode .post-content,
body.dark-mode .entry-content {
    background-color: #242424 !important;
    border-color: #333333 !important;
}

/* Post titles and headings */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
    color: #e8e8e8 !important;
}

body.dark-mode h1 a,
body.dark-mode h2 a,
body.dark-mode h3 a,
body.dark-mode h4 a {
    color: #e0e0e0 !important;
}

body.dark-mode h1 a:hover,
body.dark-mode h2 a:hover,
body.dark-mode h3 a:hover,
body.dark-mode h4 a:hover {
    color: #ffffff !important;
}

/* General links inside content */
body.dark-mode .entry-content a,
body.dark-mode .post-content a {
    color: #aaaacc !important;
}

body.dark-mode .entry-content a:hover,
body.dark-mode .post-content a:hover {
    color: #ccccff !important;
}

/* Post meta */
body.dark-mode .post-meta,
body.dark-mode .post-meta a,
body.dark-mode .post-categories a,
body.dark-mode .post-date,
body.dark-mode .entry-meta {
    color: #888888 !important;
}

/* Sidebars */
body.dark-mode .sidebar-right,
body.dark-mode .sidebar-left,
body.dark-mode .gracefultimes-widget {
    background-color: #1e1e1e !important;
    color: #cccccc !important;
}

body.dark-mode .gracefultimes-widget .widget-title {
    background-color: #2a2a2a !important;
}

body.dark-mode .gracefultimes-widget .widget-title h2 {
    color: #e0e0e0 !important;
}

body.dark-mode .gracefultimes-widget a {
    color: #bbbbbb !important;
}

body.dark-mode .gracefultimes-widget a:hover {
    color: #ffffff !important;
}

/* Search form */
body.dark-mode #searchform input[type="search"],
body.dark-mode #searchform input {
    background-color: #2a2a2a !important;
    color: #e0e0e0 !important;
    border-color: #444444 !important;
}

/* Buttons */
body.dark-mode .btn,
body.dark-mode .button,
body.dark-mode input[type="submit"],
body.dark-mode .read-more a,
body.dark-mode .more-link {
    background-color: #444444 !important;
    color: #ffffff !important;
    border-color: #555555 !important;
}

body.dark-mode .btn:hover,
body.dark-mode .button:hover,
body.dark-mode input[type="submit"]:hover,
body.dark-mode .read-more a:hover,
body.dark-mode .more-link:hover {
    background-color: #555555 !important;
}

/* Footer */
body.dark-mode #page-footer,
body.dark-mode .page-footer {
    background-color: #111111 !important;
    border-color: #2a2a2a !important;
}

body.dark-mode #page-footer,
body.dark-mode #page-footer p,
body.dark-mode #page-footer .gracefultimes-widget {
    color: #888888 !important;
    background-color: #111111 !important;
}

body.dark-mode #page-footer h2,
body.dark-mode #page-footer .widget-title h2 {
    color: #cccccc !important;
}

body.dark-mode #page-footer a {
    color: #999999 !important;
}

body.dark-mode #page-footer a:hover {
    color: #ffffff !important;
}

/* Comments */
body.dark-mode .entry-comments,
body.dark-mode #comments {
    background-color: #242424 !important;
    color: #cccccc !important;
}

body.dark-mode .comment-text,
body.dark-mode .comment-content {
    color: #cccccc !important;
}

/* WooCommerce */
body.dark-mode .woocommerce .product,
body.dark-mode .woocommerce-page .product {
    background-color: #242424 !important;
    color: #d0d0d0 !important;
}

body.dark-mode .woocommerce .price,
body.dark-mode .woocommerce-page .price {
    color: #aaaaaa !important;
}

/* Times Latest Posts / Times Latest Posts */
body.dark-mode .times-posts-section,
body.dark-mode .times-posts-section {
    background-color: #1a1a1a !important;
}

body.dark-mode .times-posts-card,
body.dark-mode .times-posts-card {
    background-color: #242424 !important;
}

body.dark-mode .times-posts-card-overlay,
body.dark-mode .times-posts-card-overlay {
    background: rgba(26, 26, 26, 0.92) !important;
}

body.dark-mode .times-posts-title,
body.dark-mode .times-posts-title {
    color: #f0f0f0 !important;
}

body.dark-mode .times-posts-kicker,
body.dark-mode .times-posts-kicker {
    color: #d1b48c !important;
}

body.dark-mode .times-posts-meta,
body.dark-mode .times-posts-meta {
    color: #999999 !important;
}

body.dark-mode .times-posts-author,
body.dark-mode .times-posts-author,
body.dark-mode .times-posts-date,
body.dark-mode .times-posts-date {
    color: #b0b0b0 !important;
}

body.dark-mode .times-posts-separator,
body.dark-mode .times-posts-separator {
    color: #555555 !important;
}

body.dark-mode .times-posts-thumb--placeholder,
body.dark-mode .times-posts-thumb--placeholder {
    background: linear-gradient(180deg, #2a2a2a 0%, #1e1e1e 100%) !important;
}

/* Times Post Slider Dark Mode */
body.dark-mode .times-slide-left {
    background-color: #242424;
}

body.dark-mode .times-slide-right {
    background-color: #1a1a1a;
}

body.dark-mode .times-slide-right--placeholder {
    background: linear-gradient(135deg, #2a2a2a 0%, #1e1e1e 100%) !important;
}

body.dark-mode .times-slide-left-content small {
    color: #bbbbbb;
}

body.dark-mode .times-slide-left-content h2 {
    color: #ffffff;
}

body.dark-mode .times-slide-left-content p {
    color: #d0d0d0;
}

body.dark-mode .times-spacer hr {
    border-top-color: rgba(255, 255, 255, 0.3);
}

body.dark-mode .times-read-button {
    background: #333333;
    color: #ffffff !important;
}

body.dark-mode .times-read-button:hover {
    background: #ffffff;
    color: #000000 !important;
}

body.dark-mode .times-slide-nav span {
    color: #d1b48c;
}

body.dark-mode .times-slide-nav span:hover {
    color: #ffffff;
}

/* Times Featured Categories Dark Mode */
body.dark-mode .times-featured-categories {
    background: #181818 !important;
}

body.dark-mode .times-featured-cat-image {
    background-color: #242424;
}

body.dark-mode .times-featured-cat-placeholder {
    background: linear-gradient(135deg, #2a2a2a 0%, #1e1e1e 100%) !important;
}

body.dark-mode .times-featured-cat-overlay {
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode .times-featured-cat-link:hover .times-featured-cat-overlay {
    background: rgba(0, 0, 0, 0.75);
}


/* Times Blog Feed Dark Mode */
body.dark-mode .grace-latest,
body.dark-mode .graceful-times-category-title,
body.dark-mode .graceful-times-search-title {
    background: #1e1e1e !important;
    border-color: #333333 !important;
    color: #f0f0f0 !important;
}

body.dark-mode .times-post-media {
    background: #1a1a1a !important;
}

body.dark-mode .post-categories.times-post-categories {
    background: #1e1e1e !important;
    border-color: #333333 !important;
}

body.dark-mode .post-categories.times-post-categories a {
    color: #e0e0e0 !important;
}

body.dark-mode .post-categories.times-post-categories a:hover {
    color: #c9a87c !important;
}

body.dark-mode .post-title.times-post-title a {
    color: #f0f0f0 !important;
}

body.dark-mode .post-title.times-post-title a:hover {
    color: #c9a87c !important;
}

body.dark-mode .post-meta.times-post-meta,
body.dark-mode .post-date.times-post-date,
body.dark-mode .post-title-author.times-post-author,
body.dark-mode .post-comments.times-post-comments,
body.dark-mode .post-comments.times-post-comments a {
    color: #999999 !important;
}

body.dark-mode .post-meta.times-post-meta a,
body.dark-mode .post-title-author.times-post-author a {
    color: #d0d0d0 !important;
}

body.dark-mode .post-meta.times-post-meta a:hover,
body.dark-mode .post-title-author.times-post-author a:hover {
    color: #c9a87c !important;
}

body.dark-mode .post-page-content.times-post-content p {
    color: #aaaaaa !important;
}

body.dark-mode .continue-read.times-continue-read a {
    border-color: #444444 !important;
    color: #e0e0e0 !important;
    background: transparent !important;
}

body.dark-mode .continue-read.times-continue-read a:hover {
    background: #f0f0f0 !important;
    color: #111111 !important;
    border-color: #f0f0f0 !important;
}

/* Smooth transition for dark mode switch */
body,
body #page-wrap,
body #main-nav,
body .main-content,
body article,
body .sidebar-right,
body .sidebar-left,
body .gracefultimes-widget,
body #page-footer {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}