/*
Theme Name: Qatar Discounts Modern
Theme URI: https://qataridiscounts.com/
Description: Modern child theme for Twenty Thirteen with premium aesthetics and ad optimization.
Author: Antigravity
Template: twentythirteen
Version: 1.0.0
*/

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

/* ==========================================================================
   1. Variables & Modern Setup
   ========================================================================== */
:root {
    /* Brand Colors - Premium Emerald & Dark Slate */
    --color-primary: #ed2227;
    /* Qatar Discounts Red */
    /* Emerald 600 */
    --color-primary-dark: #b91c1c;
    --color-secondary: #1e293b;
    /* Slate 800 */
    --color-accent: #f59e0b;
    /* Amber 500 for Badges */

    /* Neutral */
    --color-bg: #f8fafc;
    /* Slate 50 */
    --color-card-bg: #ffffff;
    --color-text-main: #0f172a;
    --color-text-muted: #64748b;
    --color-border: #e2e8f0;

    /* Effects */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;

    /* Fonts (Poppins Globally) */
    --font-heading: 'Poppins', system-ui, sans-serif;
    --font-body: 'Poppins', system-ui, sans-serif;
}

body {
    background-color: var(--color-bg);
    color: var(--color-text-main);
    font-family: var(--font-body);
}

/* ==========================================================================
   2. Layout Overrides (Full Width Fixes)
   ========================================================================== */

/* Remove Boxed Layout constraints */
body {
    background-color: var(--color-bg);
    /* Ensure background matches */
}

/* UNLOCK FULL SCREEN WIDTH: Override Parent Theme Limits */
.site,
#page {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.site {
    max-width: 100%;
    /* Full screen width */
    margin: 0;
    padding: 0;
    background-color: transparent;
    box-shadow: none;
}

.site-main {
    padding: 0;
    max-width: 100%;
}

/* Header Container - Keep Content Centered but Bar Full Width */
.site-header-inner {
    max-width: 95%;
    /* Use percentage for responsiveness */
    margin: 0 auto;
    width: 100%;
}

/* Grid Layout for Index/Archives - Responsive Full Width */
/* Grid Layout for Index/Archives - Responsive Full Width */
.site-content {
    display: grid;
    /* UNIFIED: Strict 3 Columns Everywhere (Home & Archives) */
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    /* Nuclear Equality */
    gap: 15px !important;
    /* Tight Gap */
    padding: 1rem 0 !important;
    max-width: 100%;
    margin: 0 !important;
}

/* Force Grid Items to Respect Width */
.site-content>* {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Single Post & Page - Full Width */
/* Single Post & Page - Full Width with Readable Padding */
.single .site-content,
.page .site-content,
.error404 .site-content {
    display: block;
    max-width: 1200px;
    /* Constrain max width for readability */
    margin: 0 auto;
    padding: 2rem;
    /* External Padding */
}

/* Text Content Padding inside Single Post */
.single .entry-content,
.page .entry-content {
    padding: 0rem 1rem !important;
    /* Updated as requested */
    background: transparent;
    /* Reseting "Card" look for Single Post if it inherits article.post */
    box-shadow: none !important;
    border: none !important;
}

/* Specific Override for the Article Wrapper on Single Pages */
.single article.post {
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
}

/* Single Post Title Typography */
.single .entry-title {
    font-size: 2.0rem !important;
    font-weight: 400 !important;
    /* "0" interpreted as Normal/Light */
    margin-bottom: 1.5rem !important;
    padding: 0 !important;
    /* Reset generic card padding */
}

/* Ensure images/content inside single posts expand nicely */
.single .entry-content img,
.single .entry-thumbnail img {
    margin: 0 auto;
    display: block;
    max-width: 100%;
    height: auto;
}

/* ==========================================================================
   3. Card Component (Replaces Classic Blog Post)
   ========================================================================== */
article.post {
    background: var(--color-card-bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid var(--color-border);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0;
    margin-bottom: 0;
    /* Override */
    width: 100%;
    /* Ensure card fills grid slot */
}

article.post:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

/* Thumbnail Area (RENAMED to bypass parent theme hiding) */
.card-thumbnail {
    width: 100%;
    height: 200px;
    overflow: hidden;
    background: #e2e8f0;
    display: block !important;
    /* Force Visibility */
}

.card-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    display: block !important;
}

article.post:hover .card-thumbnail img {
    transform: scale(1.05);
}

/* Content Area */
.entry-header {
    padding: 0;
    /* REMOVED padding so content can be full width */
    background: transparent;
}

/* UPDATED: Title Styles */
.entry-title {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 500;
    /* Reduced to 500 */
    line-height: 1.4;
    color: var(--color-text-main);

    /* Layout - FORCE FULL WIDTH & MIN WIDTH */
    margin: 0 0 0.5rem 0;
    padding: 0 1rem;
    /* Padding for text inside */
    width: 100% !important;
    min-width: 300px !important;
    /* STRICT REQUIREMENT */
    max-width: none !important;
    display: block !important;
    box-sizing: border-box;
    text-align: left;
}

/* Adjust Title Spacing */
.entry-title {
    padding: 0.75rem 1rem 0 !important;
    /* Top padding + Side Padding */
    margin: 0 !important;
}

/* DESKTOP SPECIFIC FORCE (Nuclear Debug) */
@media (min-width: 768px) {

    .card-thumbnail,
    .entry-thumbnail {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        min-height: 200px !important;
        /* Force space allocation */
        opacity: 1 !important;
        visibility: visible !important;
    }

    .card-thumbnail img {
        display: block !important;
        height: 200px !important;
        object-fit: cover;
    }
}

.entry-title a {
    color: var(--color-text-main);
    text-decoration: none;
}

.entry-title a:hover {
    color: var(--color-primary);
}

/* Internal Card Padding */
.entry-summary {
    padding: 0 1rem 1rem !important;
    /* Space around content */
}

.entry-meta {
    padding: 0 1rem 1rem !important;
    /* Space around meta */
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

/* ==========================================================================
   3. Header & Navigation (Force Hamburger)
   ========================================================================== */

/* Force Menu Toggle to be Visible */
.menu-toggle {
    display: block !important;
    /* Force visible on desktop */
    width: auto !important;
    height: auto !important;
    font-size: 0 !important;
    /* Hide any fallback text */
    line-height: 0 !important;
    padding: 10px !important;
    /* Touch target */
    margin: 0;
    text-indent: 0 !important;
    /* Prevent hiding */
    overflow: visible !important;
    color: #ffffff !important;
}

/* Hide the menu by default (collapsed state) */
.nav-menu {
    display: none;
}

/* Show menu when toggled (Off-Canvas Sidebar Style) */
/* Animation for Drawer Slide-In */
@keyframes slideIn {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(0);
    }
}

.navigation.toggled-on .nav-menu,
.site-header .navigation.toggled-on .nav-menu {
    animation: slideIn 0.3s ease-out forwards;
    /* Visual enhancements */
    background: #141412;
    /* Dark Background as requested */
    border-right: 1px solid rgba(0, 0, 0, 0.05);
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 300px;
    /* Width of the drawer */
    height: 100vh;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);
    padding: 130px 20px 20px;
    /* INCREASED: Move links further down */
    z-index: 10000;
    overflow-y: auto;
    border-top: none;
}

/* Overlay Effect (Optional - simplifies to just the drawer for now) */
.navigation.toggled-on::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
}

/* Styling for menu items in drawer */
.nav-menu ul,
.nav-menu li {
    list-style: none;
    margin: 0;
    padding: 0;
    border: none;
    /* Clean look */
}

.nav-menu li a {
    display: block;
    padding: 12px 20px;
    font-size: 1.1rem;
    font-weight: 600;
    color: #ffffff;
    /* White Text */
    text-decoration: none;
    border-radius: 8px;
    /* Soft edges */
    margin-bottom: 5px;
    transition: all 0.2s ease;
}

/* Active/Hover State */
.nav-menu li a:hover,
.nav-menu li.current-menu-item>a {
    background-color: #f1f5f9;
    /* Light Slate bg */
    color: var(--color-primary);
    /* Emerald Green */
    padding-left: 25px;
    /* Slide effect */
}

/* Ensure the button looks clickable and stays above overlay */
.menu-toggle {
    cursor: pointer;
    background: transparent;
    border: none;
    padding: 5px;
    position: relative;
    z-index: 10001;
    /* Above the drawer/overlay */
}

/* HIDE the old "Desktop" menu bar logic */
@media (min-width: 644px) {
    .navigation.main-navigation .nav-menu {
        display: none;
        /* Keep hidden until toggled */
    }

    .navigation.main-navigation .nav-menu.toggled-on {
        display: block;
    }
}

/* Force Navigation Background to None */
.main-navigation {
    background: none !important;
}

/* ==========================================================================
   4. Header & Navigation
   ========================================================================== */
/* ==========================================================================
   4. Header & Navigation
   ========================================================================== */
.site-header {
    background: #ed2227 !important;
    /* Theme Color - Red */
    background-image: none !important;
    /* Explicitly remove image */
    /* Fallback */
    /* Overlay to ensure text readability if needed */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid var(--color-border);
    padding: 0;
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* Ensure inner content is transparent to show the header image */
.site-header-inner {
    background: transparent;
    width: 100%;
}

.home-link {
    font-family: var(--font-heading);
    font-weight: 800;
    color: var(--color-primary);
    font-size: 2rem;
    text-decoration: none;
}

/* ==========================================================================
   5. Ad Components
   ========================================================================== */
.ad-unit {
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
    /* Transparent for header */
    margin: 0;
    border-radius: var(--radius-md);
    overflow: hidden;
}

.ad-unit--header,
.responsive-header-ad {
    /* Strict Desktop Size */
    width: 728px;
    height: 90px;
    margin: 0 auto;
    display: block;
}

/* In-Feed Ad Card */
.ad-card {
    grid-column: span 1;
    /* Match normal card width */
    background: #fff;
    border: 2px dashed var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
}

.ad-unit--sidebar {
    position: sticky;
    top: 100px;
    /* Offset for header */
}

/* ==========================================================================
   6. Archive / Alignment Updates (FIXES)
   ========================================================================== */

/* Clean up Archive Header alignment & Background */
.archive-header {
    background: transparent !important;
    /* Requested Refinement */
    padding: 0 0 1rem 0 !important;
    border-bottom: 2px solid var(--color-border);
    margin-bottom: 1.5rem !important;
}

.archive-title {
    background: transparent !important;
}

/* ==========================================================================
   7. Mobile Optimizations (Added)
   ========================================================================== */

@media (max-width: 767px) {

    /* 1. Stack Flex Containers Vertical */
    #main-wrapper,
    #content .site-content {
        flex-direction: column !important;
        gap: 20px !important;
        padding: 10px !important;
    }

    /* 2. Allow Content to shrink */
    .content-area,
    .sidebar-wrapper {
        min-width: 0 !important;
        max-width: 100% !important;
        flex: 1 1 auto !important;
        width: 100% !important;
    }

    /* 3. Fix Header Ad Overflow */
    .ad-unit--header,
    .responsive-header-ad {
        width: auto !important;
        /* Override desktop fixed 728px */
        height: auto !important;
        /* Allow variable height */
        max-width: 100%;
        overflow: hidden;
        min-height: 50px;
        /* Minimum for mobile banner */
        display: block !important;
        margin: 10px auto;
    }

    /* 4. Fix Sticky Header Layout */
    .site-header-inner {
        flex-direction: row;
        /* Keep row for Logo + Menu */
        flex-wrap: wrap;
    }

    .header-right {
        width: 100%;
        /* Force Ad to new row */
        display: block;
        /* Show on mobile */
        text-align: center;
    }

    /* 5. Adjust Card Grid */
    .site-content {
        grid-template-columns: 1fr !important;
        /* Single column cards */
        padding: 10px !important;
    }

    /* 6. General Safety */
    body,
    html {
        overflow-x: hidden;
        /* Prevent horizontal scroll */
        width: 100%;
    }

    /* Hide Featured Image on Single Posts (Mobile Only) */
    .single .card-thumbnail {
        /* Handle renamed class too */
        display: none !important;
    }



    /* Adjust padding for single content on mobile */
    .single .site-content {
        padding: 20px !important;
    }

    /* Ensure ads don't overflow */
    .ad-unit ins {
        max-width: 100%;
        overflow: hidden;
    }
}

/* DESKTOP SIDEBAR FIX (CSS Grid - Robust) */
@media (min-width: 992px) {

    /* 1. Grid Container */
    /* 1. Grid Container */
    .site-main {
        display: grid !important;
        grid-template-columns: 1fr 300px !important;
        /* Content | Sidebar */
        gap: 20px !important;
        /* Unified Tight Gap for Max Width */
        align-items: start !important;
        position: relative !important;

        /* Polishing Spacing */
        /* FIX: Adjusted top padding (Reduced to 20px for minimal clearance) */
        padding: 20px !important;
        max-width: 100% !important;
        /* Take full screen width */
        margin: 0 auto !important;
    }


    /* FIX: Force Architecture 3-Column Width (Same as Home) */
    .archive .site-content,
    .category .site-content,
    .tag .site-content,
    .author .site-content,
    .search .site-content {
        max-width: 100% !important;
        /* Uncap width for Grid */
    }


    /* 2. Content Area (Fixed in Column 1) */
    #primary {
        grid-column: 1 !important;
        width: 100% !important;
        float: none !important;
        margin-right: 0 !important;
        max-width: 100% !important;
    }

    .site-content {
        margin: 0 !important;
        float: none !important;
        width: 100% !important;
        max-width: 1060px !important;
        /* Internal 3-column trigger */
    }

    /* 3. Sidebar (Fixed in Column 2) */
    .sidebar-container {
        grid-column: 2 !important;
        position: static !important;
        /* Back in flow */
        width: 100% !important;
        margin: 0 !important;
        display: block !important;
        height: auto !important;
    }

    /* 4. Footer Fallback (Just in case) */
    .site-footer {
        grid-column: 1 / -1 !important;
        width: 100% !important;
    }
}

/* ==========================================================================
   VERTICAL NAVIGATION FIX (Desktop Drawer)
   ========================================================================== */

/* 1. Submenu Structure: Accordion Style (Not Flyout) */
.nav-menu .sub-menu,
.nav-menu .children {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    width: 100% !important;

    /* Animation: Slide Down */
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    /* Hide content */

    transition: all 0.4s ease-in-out !important;

    /* Decoration */
    background: rgba(255, 255, 255, 0.05) !important;
    /* Subtle contrast */
    box-shadow: inset 0 4px 6px -2px rgba(0, 0, 0, 0.1) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    display: block !important;
    /* Always "render" for animation */
}

/* 2. Reveal on Hover */
.nav-menu li:hover>.sub-menu,
.nav-menu li:focus-within>.sub-menu {
    max-height: 1000px !important;
    /* Allow expansion */
    opacity: 1 !important;
    visibility: visible !important;
}

/* 3. Submenu Links: High Contrast */
.nav-menu .sub-menu li a {
    padding-left: 40px !important;
    /* Indent Hierarchically */
    font-size: 1rem !important;
    color: #cbd5e1 !important;
    /* Slate 300 (Readable on Dark) */
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

/* 4. Submenu Highlight */
.nav-menu .sub-menu li a:hover {
    color: #ffffff !important;
    background: rgba(237, 34, 39, 0.1) !important;
    /* Red Tint */
    padding-left: 45px !important;
    /* Slide hint */
}

/* ==========================================================================
   UX FIXES: Hamburger & Social
   ========================================================================== */

/* 1. Toggle Icons (Hamburger vs X) */
/* 1. Toggle Icons (Hamburger vs X) */
.menu-toggle {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Nuke Twenty Thirteen's Pseudo Arrows */
.menu-toggle::after,
.menu-toggle::before {
    display: none !important;
    content: none !important;
}

.menu-toggle svg {
    margin: 0 auto;
    /* Removed !important to allow overrides */
    width: 32px !important;
    /* Slightly bigger button */
    height: 32px !important;
    height: 32px !important;
    transition: opacity 0.2s ease;
}

/* ==========================================================================
   HEADER LAYOUT (Responsive Row Always)
   ========================================================================== */

/* DEFAULTS (Mobile First - Horizontal Row) */
/* DEFAULTS (Mobile First - Horizontal Row) */
.header-left {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    /* FORCE Vertical Center */
    gap: 5px !important;
    width: auto !important;
    flex-wrap: nowrap !important;
    height: 100%;
}

/* FIX: Ensure Link helper doesn't break alignment */
.home-link {
    display: flex !important;
    align-items: center !important;
    align-self: center !important;
    /* Double Force */
    height: auto !important;
    line-height: 0 !important;
    /* Kill text ghosting */
    margin: 0 !important;
    padding: 0 !important;
}

.header-logo-img {
    max-height: 250px;
    /* MAXIMUM Mobile Logo */
    width: auto;
    max-width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    align-self: center !important;
}

/* DESKTOP (Row Layout - Minimal Changes) */
@media (min-width: 992px) {
    .header-left {
        gap: 20px;
    }

    .header-logo-img {
        max-height: 100px;
        /* Standard Desktop Size */
        /* Standard Desktop Size */
    }
}

/* FIX: Restore Menu Icons (Accidentally removed) */
.icon-menu-open,
.icon-menu-close {
    display: none;
    /* Base state */
}

.icon-menu-open {
    display: block !important;
}

.menu-toggle.toggled-on .icon-menu-open {
    display: none !important;
}

.menu-toggle.toggled-on .icon-menu-close {
    display: block !important;
}

/* ==========================================================================
   PAGINATION FIXES (Grid Span)
   ========================================================================== */
.paging-navigation,
.navigation,
nav.pagination,
.site-content>nav {
    grid-column: 1 / -1 !important;
    /* Span ALL columns */
    width: 100% !important;
    min-width: 100% !important;
    margin: 2rem 0 !important;
    padding: 1rem !important;
    display: flex !important;
    justify-content: space-between !important;
    background: transparent !important;
    border-top: 1px solid var(--color-border);
    float: none !important;
}

.paging-navigation a {
    font-weight: 500;
    font-size: 1.1rem;
    padding: 10px 20px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    color: var(--color-text-main);
    text-decoration: none;
    transition: all 0.2s ease;
}

/* ==========================================================================
   HEADER AD (CSS Cleanup)
   ========================================================================== */
/* Ad toggle handled via PHP (wp_is_mobile) */

.icon-menu-close {
    display: none !important;
}

/* Toggled State: Hide Hamburger, Show Close */
.navigation.toggled-on .icon-menu-open,
.navbar.toggled-on .icon-menu-open {
    display: none !important;
}

.navigation.toggled-on .icon-menu-close,
.navbar.toggled-on .icon-menu-close {
    display: block !important;
}

/* 2. Show Social Icons in Drawer */
/* Target BOTH possible toggle parents to be safe */
.navigation.toggled-on .drawer-social,
.navbar.toggled-on .drawer-social {
    display: block !important;
    opacity: 1 !important;
    /* Force visible immediately */

    /* POSITIONING FIX: Sit ON TOP of the drawer */
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 300px !important;
    /* Match drawer width */
    z-index: 10005 !important;
    /* Above the container */
    background: #141412 !important;
    /* Match drawer bg */
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 30px !important;
    /* Safe area */
}

/* 3. Force Icon Size & Color (SafetyNet) */
.drawer-social svg {
    width: 24px !important;
    height: 24px !important;
    color: #ffffff !important;
    stroke: #ffffff !important;
    display: block !important;
}

.drawer-social a {
    display: inline-block !important;
    padding: 10px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    transition: all 0.2s ease;
}

.drawer-social a:hover {
    opacity: 1 !important;
    transform: scale(1.1);
    background: var(--color-primary) !important;
    color: white !important;
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

/* ==========================================================================
   404 PAGE FIXES
   ========================================================================== */
.error404 .site-main {
    display: block !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.error404 .site-content {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* FIX: Remove Parent Theme's 404 Icon/Space */
.error404 .page-title:before {
    display: none !important;
    content: none !important;
}

/* FIX: Kill the gigantic 300px padding from Parent Theme */
.error404 .page-title {
    padding: 0 !important;
    margin-top: 0 !important;
    background: transparent !important;
    border: none !important;
}

/* ==========================================================================
   SINGLE POST CONTENT PADDING
   ========================================================================== */
/* Default (Desktop) */
.custom-entry-content {
    padding: 0 2rem !important;
}

/* Mobile (Reset Padding) */
@media (max-width: 767px) {
    .custom-entry-content {
        padding: 0 !important;
    }

    .single .site-content {
        padding: 5px 0px !important;
    }
}