/*
 Theme Name:   Imagely Child
 Template:     imagely
 Version:      2.0.0 (Studio84 Redesign)
*/

@import url("../imagely/style.css");

/* =========================================
   1. PAGE BIO STUDIO84 (The "Linktree" Page)
   ========================================= */

/* 1. Make the Titles "Ink Brown" instead of Grey */
.page-id-36189 h1, 
.page-id-36189 h2, 
.page-id-36189 h3,
.page-id-36189 p {
    color: #603e00 !important; /* Mid Brown */
}

/* 2. Make the Divider Lines "Gold" */
.page-id-36189 hr {
    background-color: #cc9966 !important; /* Tan/Gold */
    height: 2px !important; /* Thicker */
    opacity: 1 !important; /* Solid color */
    max-width: 500px; /* Matches button width */
    margin-left: auto;
    margin-right: auto;
}

/* 3. Add a Brown Border to the Teal Buttons (Optional: "Framed Action") */
.page-id-36189 .wp-block-button__link {
    border: 2px solid #603e00 !important; /* Brown Border on Teal Button */
}

/* Center container */
.page-id-36189 .wp-block-buttons {
    display: flex;
    flex-direction: column !important;
    width: 100%;
    max-width: 500px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    gap: 15px;
}

.page-id-36189 .wp-block-button {
    width: 100% !important;
    margin: 0 !important;
}

/* BUTTONS: Updated to "Action Teal" */
.page-id-36189 .wp-block-button__link {
    display: block;
    width: 100% !important;
    text-align: center;
    
    /* NEW: Teal Background to match site buttons */
    background-color: #3db4a5 !important; 
    color: #fdf6e3 !important; /* Cream Text */
    border: 1px solid #3db4a5 !important;
    
    border-radius: 50px !important;
    padding: 15px 20px !important;
    font-size: 16px;
    font-weight: 600;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    text-decoration: none !important;
}

/* HOVER: "Darkroom Brown" */
.page-id-36189 .wp-block-button__link:hover {
    background-color: #312000 !important; 
    color: #ffffff !important;
    border-color: #312000 !important;
    transform: translateY(-2px);
}

/* Hide header on Bio page */
.page-id-36189 .imagely-header-image,
.page-id-36189 .entry-header {
    display: none !important;
}
.page-id-36189 .entry-content {
    margin-top: 40px !important;
}

/* =========================================
   2. GENERAL STYLES (Harmonized with Cream)
   ========================================= */

body.home #outer-wrap {
	width: 100%;
}

/* FIXED: Changed White #fff to Cream #fdf6e3 */
#main {
	background-color: #fdf6e3;	
	box-shadow: 0 0 12px 2px rgba(0, 0, 0, .1); /* Softer shadow */
}

#footer {
	box-shadow: 0 16px 12px 2px rgba(0, 0, 0, .4);
}

body.home #main{
	box-shadow: none;
}

#site-header {
	margin-bottom: 60px;	
}

.grecaptcha-badge {
	visibility: hidden;
}

/* FIXED: Border changed from White to Cream */
.page-header {
	border: 10px solid #fdf6e3;
}

.simple-lightbox .sl-prev:hover,
.simple-lightbox .sl-next:hover,
.simple-lightbox .sl-close {
	background: transparent;
}

.widget-title {
	border: none !important;
	padding-left: 0 !important;
}

.related-post-title, .related-posts-title {
	text-transform: uppercase;
	font-size: 14px;
	letter-spacing: 0.2px;
	color: #603e00; /* Mid Brown */
}

/* Blog Styles */
.blog .blog-entry.thumbnail-entry .blog-entry-category a {
	font-size: 11px
}

.blog .blog-entry.thumbnail-entry {
	margin-bottom: 40px;
	padding-bottom: 40px;
}

/* =========================================
   3. MOBILE & RESPONSIVE FIXES
   ========================================= */

@media only screen and (max-width: 767px) {
	.page-header {
		height: 300px !important;
	}
	
	body {
		padding-left: 10px;
		padding-right: 10px;
	}
	
	#site-header-inner{
		display: block !important;
		padding-top: 20px !important;
	}
	
	#site-logo {
		width: 100% !important;
	}
	
    /* Adjust logo size for mobile */
	#site-logo a.site-logo-text, .middle-site-logo a {
		font-size: 30px !important;
	}
	
	body.default-breakpoint #site-header.vertical-header #site-header-inner .reactr-mobile-menu-icon {
		width: 100%;
		text-align: center;
	}
	
	#mobile-dropdown {
		position: relative;
		box-shadow: none;
		padding-top: 20px;
		padding-bottom: 20px
	}
	
	#footer-widgets .footer-box {
        padding-left: 0px;
		padding-right: 0px;
	}
}

/* =========================================
   4. BACKGROUND STRATEGY (Updated for Cream Paper)
   ========================================= */

/* A. MOBILE (< 1024px) : FIXED to use Cream Paper instead of Dark Brown */
@media only screen and (max-width: 1023px) {
    body, html, #outer-wrap, #wrapper, .site-inner, .site-container {
        background-image: none !important;
        background-color: #603e00 !important; /* Cream */
    }
    
    .imagely-mobile-menu, #ngg-imagely-mobile-menu {
        background-color: #603e00 !important; /* Cream Menu */
        color: #cc9966 !important; /* Grey Text */
    }
}

/* B. DESKTOP (>= 1024px) : Keeps Paris BG but uses Cream Content Box */
@media only screen and (min-width: 1024px) {
    
    html, body, #outer-wrap {
        background-image: url('https://studio84.fr/wp-content/uploads/2025/11/paris-night-architecture-seine-river-bnf.jpg') !important;
        background-position: center center !important;
        background-size: cover !important;
        background-attachment: fixed !important;
        background-repeat: no-repeat !important;
        background-color: transparent !important;
    }

    /* THE BOX: Changed from White to Cream */
    #main {
        background-color: rgba(253, 246, 227, 0.96) !important; /* #fdf6e3 @ 96% Opacity */
        max-width: 1300px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-shadow: 0 0 40px rgba(0,0,0,0.8) !important;
    }

    #wrapper, .site-container, .site-inner {
        background: transparent !important;
        background-color: transparent !important;
    }
}

/* =========================================
   5. FEATURED SECTION
   ========================================= */

.une-studio84 {
    border: 2px solid #cc9966 !important; /* Tan */
    border-radius: 20px !important;
    padding: 25px 15px !important;
    margin-bottom: 40px !important;       
    background-color: rgba(253, 246, 227, 0.5) !important; /* Cream tint */
    box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
    position: relative;
}

.une-studio84::before {
    content: "★ FEATURED / À LA UNE";
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #cc9966;
    color: #fdf6e3;
    padding: 2px 15px;
    font-size: 12px;
    font-weight: bold;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* =========================================
   6. HEADER & MOBILE TWEAKS
   ========================================= */

.page-id-36189 .entry-content,
.page-id-36189 #main {
    margin-top: 0 !important;
    padding-top: 20px !important;
}

/* Shopping Cart Icon Fix */
li.nextgen-menu-cart-icon-auto a {
    font-size: 0 !important;
    padding: 15px !important;
}

li.nextgen-menu-cart-icon-auto a::before {
    content: "🛒";
    font-size: 18px !important;
    color: inherit;
    display: block;
    line-height: 20px;
    visibility: visible;
}

/* =========================================
   7. STUDIO84: JOURNAL (The Cleanup)
   ========================================= */

/* IMPORTANT: Fonts removed here so Customizer (Merriweather) takes control */
.post .entry-content, .blog .entry-content {
    /* Font family removed to obey Customizer */
    font-size: 18px !important;
    line-height: 1.8 !important;
    color: #404040 !important; /* New Dark Grey */
    text-align: justify;
}

/* Titles: Removed Helvetica Override */
.single .entry-title {
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #603e00 !important; /* Mid Brown */
    text-align: center;
    margin-bottom: 30px !important;
    margin-top: 20px !important;
}

.entry-content h2, .entry-content h3 {
    color: #603e00 !important; /* Mid Brown */
    margin-top: 40px !important;
}

/* Drop Cap: Updated color */
.single .entry-content > p:first-of-type::first-letter {
    font-size: 3.5em;
    color: #cc9966; /* Tan */
    float: left;
    margin-right: 10px;
    line-height: 0.8;
}

/* Hide Default Headers */
h1.page-header-title,
.page-header-title,
.imagely-fancy-header .imagely-header-title,
.imagely-fancy-header .imagely-header-description {
    display: none !important;
}

.imagely-fancy-header, .page-header {
    min-height: 400px !important;
    visibility: visible !important;
}

.entry-meta {
    text-align: center;
    font-size: 12px !important;
    color: #999 !important;
    border-bottom: 1px solid #e0d5c0; /* Cream border */
    padding-bottom: 20px;
    margin-bottom: 30px;
}

.entry-content img {
    border: none;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

/* Blockquotes: Updated background to Cream */
blockquote {
    border-left: 3px solid #cc9966 !important;
    font-style: italic;
    font-size: 20px;
    color: #603e00;
    background: rgba(204, 153, 102, 0.1); /* Tan with low opacity */
    padding: 20px !important;
    margin: 30px 0 !important;
}

.wp-block-image figcaption {
    display: none;
}

/* === BLOG INDEX === */

.blog .entry-title a, 
.archive .entry-title a {
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    font-weight: 700 !important;
    font-size: 22px !important;
    color: #603e00 !important; /* Brown */
    text-decoration: none !important;
}

.blog .entry-title a:hover, 
.archive .entry-title a:hover {
    color: #3db4a5 !important; /* Teal on Hover */
}

/* Read More Button: Updated to Teal style */
.blog a.more-link, 
.archive a.more-link {
    display: inline-block !important;
    margin-top: 15px !important;
    font-size: 11px !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    
    color: #3db4a5 !important; /* Teal Text */
    border-bottom: 2px solid #3db4a5 !important;
    text-decoration: none !important;
    padding-bottom: 3px !important;
    transition: all 0.3s ease;
}

.blog a.more-link:hover, 
.archive a.more-link:hover {
    background-color: #3db4a5;
    color: white !important;
    padding: 5px 10px !important;
    border-bottom: none !important;
}

/* =========================================
   8. STUDIO84: JOURNAL MOBILE FIXES (UPDATED)
   ========================================= */

@media only screen and (max-width: 768px) {
    /* 1. Titles: Sync with Desktop (Brown + Merriweather) */
    .blog .entry-title a, 
    .archive .entry-title a {
        /* Removed Helvetica override so it uses Merriweather */
        font-size: 20px !important;
        color: #603e00 !important; /* MID BROWN (Not Gold) */
        letter-spacing: 0.5px !important;
        text-transform: uppercase !important;
        font-weight: 700 !important;
    }
    
    /* 2. Text: Sync with Desktop (Dark Grey + Merriweather) */
    .blog .entry-content, 
    .blog .entry-summary,
    .archive .entry-summary {
        /* Removed Georgia override */
        font-size: 16px !important;
        line-height: 1.6 !important;
        color: #404040 !important; /* DARK GREY */
    }
    
    /* 3. "Continue Reading": Sync with Teal Action */
    .blog a.more-link, .archive a.more-link {
        display: inline-block !important;
        margin-top: 10px !important;
        color: #3db4a5 !important; /* TEAL */
        border-bottom: 2px solid #3db4a5 !important; /* Teal Underline */
        text-transform: uppercase !important;
        font-size: 10px !important;
        letter-spacing: 2px !important;
    }
}

/* =========================================
   9. STUDIO84: BOOKSTORE LAYOUT (Page 35710)
   ========================================= */

/* 1. RECLAIM HEADER SPACE */
.page-id-35710 .imagely-header-image, 
.page-id-35710 .entry-header {
    display: none !important;
}
.page-id-35710 .entry-content {
    margin-top: 20px !important;
    padding-top: 0 !important;
}

/* 2. FIX THE "ENGLISH" BADGE (Gold Border) */
.page-id-35710 .wp-block-column p.has-background {
    display: table !important;
    margin: 0 auto 15px auto !important;
    padding: 6px 12px !important; 
    font-size: 11px !important;
    white-space: nowrap !important;
    width: auto !important;
    line-height: 1 !important;
    border: 1px solid #cc9966;
    /* Force text to be readable on dark or light */
    color: #312000 !important; 
    background-color: #fdf6e3 !important; 
}

/* 3. MOBILE OPTIMIZATION (Dark Mode + Thumb Zone) */
@media only screen and (max-width: 768px) {

    /* --- A. DARK MODE COLORS --- */
    
    /* Background: Deep Dark Brown */
    body, html, #outer-wrap, #wrapper, .site-inner, #main {
        background-color: #312000 !important; 
        background-image: none !important;
    }

    /* Text: Cream (Readable on Dark) */
    p, li, .entry-content {
        color: #fdf6e3 !important; 
    }

    /* Headings: Gold (Premium Look) */
    h1, h2, h3, h4, h5, h6 {
        color: #cc9966 !important;
    }

    /* --- B. LAYOUT & SPACING --- */

    /* Divider Lines: Subtle Gold */
    .studio84-book-grid > div > div {
        border-bottom: 1px solid #603e00; /* Subtle divider */
        padding-bottom: 60px;
        margin-bottom: 60px !important;
    }
    .studio84-book-grid > div > div:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    .studio84-book-grid {
        display: flex !important;
        flex-direction: column !important;
        row-gap: 80px !important; 
    }

    /* Typography Adjustments */
    .studio84-book-grid h2.wp-block-heading {
        font-size: 1.6rem !important;
        line-height: 1.2;
        margin-bottom: 15px;
    }

    /* --- C. THE "THUMB ZONE" (Full Width Buttons) --- */
    
    .studio84-book-grid .wp-block-buttons {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important; /* Stretches buttons */
        width: 100% !important;
        gap: 15px !important;
    }

    .studio84-book-grid .wp-block-button {
        width: 100% !important;
        margin: 0 !important;
    }

    .studio84-book-grid .wp-block-button__link {
        display: block !important;       
        width: 100% !important;
        text-align: center !important;
        padding: 16px 0 !important;
        font-size: 18px !important;
        border-radius: 8px !important; 
        /* Add a thin border so dark buttons pop on dark background */
        border: 1px solid rgba(255,255,255,0.15) !important;
    }
}

/* =========================================
   10. MENU ICON REPAIR (Mobile Dark Mode)
   ========================================= */

@media only screen and (max-width: 1023px) {
    /* Since background is now DARK (#312000), 
       The Menu Icon must be LIGHT (Cream #fdf6e3).
    */
    button.menu-toggle,
    button.menu-toggle *,
    .mobile-menu-toggle,
    .mobile-menu-toggle *,
    .reactr-mobile-menu-icon,
    #site-header .menu-toggle,
    #site-header .menu-toggle span {
        color: #fdf6e3 !important; /* CREAM */
        fill: #fdf6e3 !important;
        border-color: #fdf6e3 !important;
    }
    
    /* Ensure the mobile menu dropdown matches the dark theme */
    .imagely-mobile-menu, #ngg-imagely-mobile-menu {
        background-color: #312000 !important;
    }
    .imagely-mobile-menu a {
        color: #fdf6e3 !important;
        border-bottom: 1px solid #603e00 !important;
    }
}

/* --- Force Hide Header Social Icons --- */
/* This targets the container and the icons specifically */
.site-header .social-icons,
.site-header .simple-social-icons,
.site-header .widget_simple_social_icons,
.site-header .fa-facebook,
.site-header .fa-instagram,
.site-header .fa-youtube,
.site-header .fa-envelope {
    display: none !important;
}
/* --- Hide the Top Bar Social Icons --- */
#top-bar-social {
    display: none !important;
}