/*
Theme Name: MCA Theme
Theme URI: https://marieclairearabia.com
Author: MCA Development Team
Author URI: https://marieclairearabia.com
Description: Custom WordPress theme for Marie Claire Arabia - pixel-perfect conversion from React/Lovable
Version: 1.0.15
License: Private
License URI: 
Text Domain: mca-theme
Domain Path: /languages
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 8.0
*/

/* Main styles are loaded from assets/css/main.css */
/* Critical CSS for FOUC prevention is loaded inline via functions.php */

/* ============================================
   ARTICLE QUOTE DIVIDER
   ============================================ */

/* Ensure the quote divider is visible - matches Lovable */
header .flex.justify-center.my-6 > div,
.flex.justify-center.my-6 > div.w-16 {
    background-color: #000000 !important;
    height: 2px !important;
    min-height: 2px !important;
    width: 4rem !important;
    display: block !important;
}

/* ============================================
   ARTICLE CONTENT STYLING (Prose)
   ============================================ */

/* Base article content wrapper */
.prose {
    color: inherit;
    max-width: 100%;
    line-height: 1.8;
    font-size: 1.125rem;
}

.prose > * + * {
    margin-top: 1.5rem;
}

/* Headings */
.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
    font-weight: 700;
    line-height: 1.3;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.prose h1 { font-size: 2rem; }
.prose h2 { font-size: 1.75rem; }
.prose h3 { font-size: 1.5rem; }
.prose h4 { font-size: 1.25rem; }
.prose h5 { font-size: 1.125rem; }
.prose h6 { font-size: 1rem; }

/* Paragraphs */
.prose p {
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
    line-height: 1.9;
}

.prose p:first-child {
    margin-top: 0;
}

/* Links */
.prose a {
    color: #E91E63;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.2s ease;
}

.prose a:hover {
    color: #C2185B;
}

/* Single article links - underline style */
#single-article a {
    border-bottom: 1px solid #000;
    color: #000;
    text-decoration: none;
}

#single-article a:hover {
    border-bottom-color: #E91E63;
    color: #E91E63;
}

/* Images */
.prose img {
    max-width: 100%;
    height: auto;
    margin: 2rem auto;
    display: block;
    border-radius: 4px;
}

.prose figure {
    margin: 2rem 0;
}

.prose figure img {
    margin: 0 auto;
}

.prose figcaption {
    margin-top: 0.75rem;
    font-size: 0.875rem;
    color: #6b7280;
    text-align: center;
}

/* Lists */
.prose ul,
.prose ol {
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
    padding-right: 1.5rem;
    padding-left: 0;
}

.prose ul {
    list-style-type: disc !important;
}

.prose ol {
    list-style-type: decimal !important;
}

.prose li {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    padding-right: 0.5rem;
    list-style: inherit !important;
}

.prose li::marker {
    display: inline !important;
    content: initial !important;
}

/* Nested lists */
.prose ul ul,
.prose ol ol,
.prose ul ol,
.prose ol ul {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

/* Blockquotes - Match Lovable styling */
.prose blockquote,
#single-article .prose blockquote,
.wp-block-quote {
    border-right: 4px solid #E91E63;
    border-left: none;
    padding-right: 2rem;
    padding-left: 0;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    margin: 2.5rem 0;
    margin-right: 0;
    margin-left: 0;
    font-style: italic;
    font-size: 1.25rem;
    line-height: 1.8;
    color: #374151;
    background: #f9fafb;
    border-radius: 0 8px 8px 0;
    position: relative;
}

.prose blockquote::before,
#single-article .prose blockquote::before,
.wp-block-quote::before {
    content: '"';
    font-size: 4rem;
    line-height: 1;
    color: #E91E63;
    position: absolute;
    right: 1rem;
    top: 0.5rem;
    font-family: Georgia, serif;
    opacity: 0.3;
    z-index: 0;
}

.prose blockquote::after,
#single-article .prose blockquote::after,
.wp-block-quote::after {
    content: '"';
    font-size: 4rem;
    line-height: 1;
    color: #E91E63;
    position: absolute;
    left: 1rem;
    bottom: 0.5rem;
    font-family: Georgia, serif;
    opacity: 0.3;
    z-index: 0;
}

.prose blockquote p,
#single-article .prose blockquote p,
.wp-block-quote p {
    margin: 0;
    position: relative;
    z-index: 1;
}

.prose blockquote p:first-child,
#single-article .prose blockquote p:first-child,
.wp-block-quote p:first-child {
    margin-top: 0;
}

.prose blockquote p:last-child,
#single-article .prose blockquote p:last-child,
.wp-block-quote p:last-child {
    margin-bottom: 0;
}

/* Code */
.prose code {
    background: #f3f4f6;
    padding: 0.2em 0.4em;
    border-radius: 4px;
    font-size: 0.875em;
    font-family: ui-monospace, monospace;
}

.prose pre {
    background: #1f2937;
    color: #f9fafb;
    padding: 1rem;
    border-radius: 8px;
    overflow-x: auto;
    margin: 1.5rem 0;
}

.prose pre code {
    background: transparent;
    padding: 0;
    color: inherit;
}

/* Tables */
.prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 2rem 0;
    font-size: 1rem;
}

.prose th,
.prose td {
    border: 1px solid #e5e7eb;
    padding: 0.75rem 1rem;
    text-align: right;
}

.prose th {
    background: #f9fafb;
    font-weight: 600;
}

.prose tr:nth-child(even) {
    background: #f9fafb;
}

/* Horizontal Rules */
.prose hr {
    border: none;
    border-top: 1px solid #e5e7eb;
    margin: 2.5rem 0;
}

/* Embeds & iframes (Instagram, YouTube, etc.) */
.prose iframe {
    max-width: 100%;
    margin: 2rem auto;
    display: block;
    border-radius: 8px;
}

.prose .wp-block-embed,
.prose .instagram-media,
.prose .twitter-tweet,
.prose .tiktok-embed {
    margin: 2rem auto !important;
    max-width: 550px;
}

.prose .wp-block-embed__wrapper {
    position: relative;
}

/* Video embeds - maintain aspect ratio */
.prose .wp-block-embed-youtube .wp-block-embed__wrapper,
.prose .wp-block-embed-vimeo .wp-block-embed__wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

.prose .wp-block-embed-youtube .wp-block-embed__wrapper iframe,
.prose .wp-block-embed-vimeo .wp-block-embed__wrapper iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    margin: 0;
}

/* WordPress gallery – full width like Gutenberg editor */
.prose .wp-block-gallery {
    display: grid;
    gap: 1rem;
    margin: 2rem 0;
    width: 100%;
}

/* Default columns: show images side by side (WordPress default is 3) */
.prose .wp-block-gallery.columns-default {
    grid-template-columns: repeat(3, 1fr);
}

/* When columns-default has exactly 2 images, use 2 columns (Gutenberg may save "2" as default) */
.prose .wp-block-gallery.columns-default:has(.wp-block-image:nth-child(2):last-child) {
    grid-template-columns: repeat(2, 1fr);
}

.prose .wp-block-gallery.columns-2 {
    grid-template-columns: repeat(2, 1fr);
}

.prose .wp-block-gallery.columns-3 {
    grid-template-columns: repeat(3, 1fr);
}

/* When columns are set in Gutenberg (2, 3, or default), always use grid so the setting is respected */
.prose .wp-block-gallery.columns-2.is-layout-flex,
.prose .wp-block-gallery.columns-3.is-layout-flex,
.prose .wp-block-gallery.columns-default.is-layout-flex {
    display: grid !important;
}

/* Flex layout only when no column count: images side by side */
.prose .wp-block-gallery.is-layout-flex:not(.columns-2):not(.columns-3):not(.columns-default) {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.prose .wp-block-gallery.is-layout-flex:not(.columns-2):not(.columns-3):not(.columns-default) .wp-block-image {
    flex: 1 1 auto;
    min-width: min(200px, 100%);
}

/* Gallery figures fill grid cells like in Gutenberg */
.prose .wp-block-gallery .wp-block-image {
    margin: 0;
    width: 100%;
    min-width: 0; /* allow grid cell to shrink */
    display: block;
}

/* Override core block gallery figure width (calc(33.33% - gap)) so our grid controls column size */
.prose .wp-block-gallery.has-nested-images.columns-default figure.wp-block-image,
.prose .wp-block-gallery.has-nested-images.columns-2 figure.wp-block-image,
.prose .wp-block-gallery.has-nested-images.columns-3 figure.wp-block-image {
    width: 100% !important;
}

/* Single image in gallery: span full width instead of one column */
.prose .wp-block-gallery .wp-block-image:only-child {
    grid-column: 1 / -1;
}

.prose .wp-block-gallery img {
    margin: 0;
    width: 100%;
    height: auto;
    display: block;
    vertical-align: middle;
}

/* Cropped galleries: fill cell and cover (match "Crop images to fit" in block) */
.prose .wp-block-gallery.is-cropped .wp-block-image {
    display: flex;
    overflow: hidden;
    align-items: stretch;
    min-height: 0;
}

.prose .wp-block-gallery.is-cropped img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    flex: 1;
    min-height: 0;
}

/* WordPress captions */
.prose .wp-caption {
    max-width: 100%;
    margin: 2rem auto;
}

.prose .wp-caption img {
    margin: 0;
}

.prose .wp-caption-text {
    margin-top: 0.75rem;
    font-size: 0.875rem;
    color: #6b7280;
    text-align: center;
}

/* Alignment classes */
.prose .aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.prose .alignright {
    float: left;
    margin-left: 1.5rem;
    margin-bottom: 1rem;
    max-width: 50%;
}

.prose .alignleft {
    float: right;
    margin-right: 1.5rem;
    margin-bottom: 1rem;
    max-width: 50%;
}

/* Clear floats */
.prose::after {
    content: "";
    display: table;
    clear: both;
}

/* Strong and emphasis */
.prose strong,
.prose b {
    font-weight: 700;
}

.prose em,
.prose i {
    font-style: italic;
}

/* Remove margins from last element */
.prose > *:last-child {
    margin-bottom: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .prose {
        font-size: 1rem;
    }
    
    .prose h1 { font-size: 1.75rem; }
    .prose h2 { font-size: 1.5rem; }
    .prose h3 { font-size: 1.25rem; }
    
    .prose blockquote,
    #single-article .prose blockquote,
    .wp-block-quote {
        font-size: 1.125rem;
        padding-right: 1.25rem;
        padding-left: 0;
        padding-top: 1.25rem;
        padding-bottom: 1.25rem;
        margin: 2rem 0;
        margin-right: 0.5rem;
        margin-left: 0.5rem;
    }
    
    .prose blockquote::before,
    #single-article .prose blockquote::before,
    .wp-block-quote::before {
        font-size: 3rem;
        right: 0.75rem;
        top: 0.25rem;
    }
    
    .prose blockquote::after,
    #single-article .prose blockquote::after,
    .wp-block-quote::after {
        font-size: 3rem;
        left: 0.75rem;
        bottom: 0.25rem;
    }
    
    .prose .alignright,
    .prose .alignleft {
        float: none;
        margin: 1.5rem auto;
        max-width: 100%;
    }
    
    /* 3-column and default galleries: 1 per row on mobile */
    .prose .wp-block-gallery.columns-3,
    .prose .wp-block-gallery.columns-default {
        grid-template-columns: 1fr;
    }

    /* 2-column galleries: 1 per row on mobile */
    .prose .wp-block-gallery.columns-2 {
        grid-template-columns: 1fr;
    }

    .prose .wp-block-gallery.is-layout-flex .wp-block-image {
        min-width: min(150px, 100%);
    }
}

/* ============================================
   END ARTICLE CONTENT STYLING
   ============================================ */

/* Remove default list styling from navigation menus */
nav ul,
nav ol,
.menu,
.sub-menu,
.mobile-submenu {
    list-style: none !important;
    list-style-type: none !important;
    margin: 0;
    padding: 0;
}

nav li,
.menu-item {
    list-style: none !important;
    list-style-type: none !important;
}

nav li::before,
nav li::marker,
.menu-item::before,
.menu-item::marker {
    content: none !important;
    display: none !important;
}

/* ============================================
   WOOCOMMERCE OVERRIDES - Header Logo Fix
   ============================================ */

/* Ensure header logo is always visible and not affected by WooCommerce styles */
header img,
header .woocommerce img,
header .woocommerce-page img,
.woocommerce header img,
.woocommerce-page header img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-width: 100% !important;
    height: auto !important;
}

/* Specifically target the logo in the header center */
header .absolute {
    z-index: 10 !important;
}

header .absolute img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 170px !important;
    height: auto !important;
    max-width: 170px !important;
    max-height: 4rem !important;
}

header .absolute a {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
}

@media (min-width: 768px) {
    header .absolute img {
        height: 2.5rem !important;
        width: auto !important;
        max-width: none !important;
        max-height: 2.5rem !important;
    }
}

/* ============================================
   MCA ANIMATIONS (Framer Motion Replication)
   ============================================ */

/* AnimateOnScroll - Initial state (hidden) */
.mca-animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.mca-animate-on-scroll.mca-animated {
    opacity: 1;
    transform: translateY(0);
}

/* AnimatedHeader - Initial state (hidden) */
.mca-animated-header {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.mca-animated-header.mca-animated {
    opacity: 1;
    transform: translateY(0);
}

/* StaggerGrid - Container (no initial styling needed) */
.mca-stagger-grid {
    /* Container doesn't need animation itself */
}

/* StaggerItem - Initial state (hidden) */
.mca-stagger-item {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    /* transition-delay is set dynamically by JavaScript */
}

.mca-stagger-item.mca-animated {
    opacity: 1;
    transform: translateY(0);
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .mca-animate-on-scroll,
    .mca-animated-header,
    .mca-stagger-item {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ============================================
   GALLERY ITEMS (Default/Numbered View)
   ============================================ */

.gallery-item {
    text-align: center;
    margin-bottom: 40px;
}

.gallery-item-number {
    display: block;
    color: #000;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 4px;
    margin-bottom: 20px;
}

.gallery-item-image {
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

.gallery-item-title {
    margin-top: 20px;
    font-size: 14px;
    color: #6b7280;
}

/* ============================================
   PAGINATION STYLING
   ============================================ */

/* Main navigation container */
nav.navigation {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

/* Nav links container */
nav.navigation .nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* All page number links and spans */
nav.navigation .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.5rem;
    font-size: 1rem;
    font-weight: 500;
    color: #374151;
    background: transparent;
    border: none;
    transition: all 0.2s ease;
    text-decoration: none;
}

nav.navigation .page-numbers:hover {
    color: #000;
}

/* Current page */
nav.navigation .page-numbers.current {
    color: #d4a853;
    font-weight: 700;
}

/* Previous and Next arrows */
nav.navigation .prev.page-numbers,
nav.navigation .next.page-numbers {
    color: #374151;
}

nav.navigation .prev.page-numbers:hover,
nav.navigation .next.page-numbers:hover {
    color: #000;
}

nav.navigation .prev.page-numbers svg,
nav.navigation .next.page-numbers svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* Dots */
nav.navigation .page-numbers.dots {
    color: #9ca3af;
    min-width: 1.5rem;
    padding: 0;
}

/* Screen reader text */
nav.navigation .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================
   SKIN/WALLPAPER AD
   ============================================ */

/* Skin ad - responsive background that covers viewport */
#wallpaperDivID {
    position: absolute !important;
    z-index: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    min-height: 100vh !important;
    background-size: cover !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
	cursor:pointer;
}

#topMarginDiv {
    position: relative !important;
}

/* ============================================
   HERO SECTION MARGIN
   ============================================ */

/* Hero section desktop margin-top from ACF field */
.hero-section-margin {
    --hero-margin-top: 0;
}

@media (min-width: 768px) {
    .hero-section-margin {
        margin-top: var(--hero-margin-top, 0);
    }
}

/* Subcategory: big featured article image – align to top center */
.mca-subcategory-featured-img {
    object-position: top center;
}