/*
Theme Name: SHIFT
Theme URI: https://example.com/shift-theme
Author: Joshua Okposo
Author URI: https://example.com
Description: The complete Shift theme with mobile alignment fixes, responsive shapes, and advanced visual controls.
Version: 18.2.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: shift-theme
*/

/* === RESET & VARIABLES === */
:root {
    /* -- Defaults -- */
    --accent: #e50914; 
    --primary: #1a1a1a;
    --bg-body: #f4f4f4;
    --text-main: #333;
    
    --gap-spacing: 0px; 
    
    /* Site Title */
    --site-title-color: #ffffff;
    --site-title-font: 'Helvetica Neue', sans-serif;
    
    /* BLOCK 1: Menu */
    --b1-shape-color: #1a1a1a;
    --b1-menu-bg: #ffffff;
    --b1-font-family: 'Helvetica Neue', sans-serif;
    --b1-logo-size: 1.5rem;
    --b1-menu-size: 0.85rem;
    --b1-menu-color: #1a1a1a;
    --b1-menu-hover: #e50914;
    --b1-menu-weight: 700;
    --b1-menu-transform: uppercase;
    
    /* BLOCK 2 (and Standard Pages) */
    --b2-bg: #ffffff;
    --b2-head-color: #1a1a1a;
    --b2-text-color: #333333;
    --b2-font-family: inherit;
    --b2-head-size: 1.2rem;
    --b2-text-size: 1rem;
    
    /* BLOCK 3: Portfolio */
    --b3-bg: #ffffff;
    --b3-head-color: #1a1a1a;
    --b3-head-size: 1.2rem;
    --b3-font-family: inherit;
    --b3-img-fit: cover; 
    
    /* Portfolio Nav & Border */
    --pf-nav-bg: rgba(0, 0, 0, 0.5);
    --pf-nav-color: #ffffff;
    --pf-nav-size: 2rem;
    --pf-border-color: #e50914;
    
    /* BLOCK 4: Custom */
    --b4-head-color: #1a1a1a;
    --b4-text-color: #333333;
    --b4-head-size: 1.2rem;
    --b4-text-size: 1rem;
    --b4-font-family: inherit;
    
    /* BLOCK 5: Footer */
    --b5-bg: #1a1a1a;
    --b5-text: #ffffff;
    --b5-font-size: 0.9rem;
    --b5-font-family: inherit;
}

/* Global Reset for Box Sizing */
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    font-family: 'Open Sans', Helvetica, Arial, sans-serif;
    background-color: var(--bg-body);
    color: var(--text-main);
    margin: 0;
    padding: 0;
    line-height: 1.6;
    overflow-x: hidden;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

a { text-decoration: none; color: inherit; transition: 0.3s; }
img { max-width: 100%; height: auto; display: block; }

/* === BLOCK 1: SHIFT MENU === */
/* CHANGED: From #block-1 to .section-block-1 to allow custom IDs */
.section-block-1 {
    padding: 50px 0;
    display: flex;
    justify-content: center;
    font-family: var(--b1-font-family);
    position: relative;
}

.shift-nav-wrapper {
    display: flex;
    align-items: center;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    z-index: 100;
}

.shift-logo {
    background: var(--b1-shape-color);
    color: var(--site-title-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: var(--b1-logo-size);
    z-index: 10;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.1;
    overflow: hidden; 
    padding: 10px; 
    flex-shrink: 0;
}
.shift-logo a { 
    color: var(--site-title-color); 
    font-family: var(--site-title-font);
    text-decoration: none; 
}

.shift-menu {
    background: var(--b1-menu-bg);
    border: 2px solid var(--b1-shape-color);
    display: flex;
    align-items: center;
    padding: 0 25px;
    z-index: 5;
    margin-left: var(--gap-spacing);
    transition: 0.3s;
}

.shift-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}
.shift-menu ul li { margin: 0 15px; }
.shift-menu ul li a {
    color: var(--b1-menu-color);
    font-weight: var(--b1-menu-weight);
    text-transform: var(--b1-menu-transform);
    font-size: var(--b1-menu-size);
    letter-spacing: 1px;
}
.shift-menu ul li a:hover { color: var(--b1-menu-hover); }

/* Hamburger Toggle & Dropdown (Default styles) */
.mobile-toggle {
    display: none;
    font-size: 1.5rem;
    color: var(--b1-menu-color);
    cursor: pointer;
}
.mobile-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--b1-menu-bg);
    border: 2px solid var(--b1-shape-color);
    border-top: none;
    width: 200px;
    text-align: center;
    padding: 10px 0;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    z-index: 90;
    border-radius: 0 0 10px 10px;
}
.mobile-dropdown ul { list-style: none; padding: 0; margin: 0; }
.mobile-dropdown li { margin: 10px 0; }
.mobile-dropdown a {
    color: var(--b1-menu-color);
    font-weight: var(--b1-menu-weight);
    text-transform: var(--b1-menu-transform);
    display: block;
    padding: 5px;
}

/* Shapes */
.shape-spoon .shift-logo { width: 110px; height: 110px; border-radius: 50%; }
.shape-spoon .shift-menu { height: 55px; border-radius: 0 30px 30px 0; border-left: none; padding-left: 20px; }
.shape-spoon.is-detached .shift-menu { border-left: 2px solid var(--b1-shape-color); border-radius: 30px; }

.shape-arrow .shift-logo { width: 90px; height: 90px; clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%); }
.shape-arrow .shift-menu { height: 60px; clip-path: polygon(0% 0%, 95% 0%, 100% 50%, 95% 100%, 0% 100%); padding-right: 30px; }

.shape-spade .shift-logo { width: 100px; height: 100px; clip-path: path('M50 0 C20 0 0 20 0 50 C0 80 50 100 50 100 C50 100 100 80 100 50 C100 20 80 0 50 0 Z'); }
.shape-spade .shift-menu { height: 50px; border-radius: 4px; }

.shape-ace .shift-logo { width: 80px; height: 80px; transform: rotate(45deg); margin: 15px; }
.shape-ace .shift-logo span { transform: rotate(-45deg); display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; }
.shape-ace .shift-menu { height: 60px; }

.shape-rectangle .shift-logo { width: 140px; height: 60px; }
.shape-rectangle .shift-menu { height: 60px; border-left: none; }
.shape-rectangle.is-detached .shift-menu { border-left: 2px solid var(--b1-shape-color); }


/* === RESPONSIVE MENU LOGIC (Max Width 900px) === */
@media (max-width: 900px) {
    /* DISABLE Hamburger / Dropdown */
    .mobile-toggle { display: none !important; }
    .mobile-dropdown { display: none !important; }

    /* ENABLE Desktop Menu on Mobile */
    .shift-menu ul.desktop-menu { 
        display: flex !important; 
        flex-wrap: wrap; /* Wrap items if screen is too narrow */
        justify-content: center;
        width: 100%;
    }

    /* Container Adjustments for Wrapping */
    .shift-menu { 
        height: auto !important; /* Allow height to grow */
        min-height: 40px;
        padding: 5px 10px !important;
        justify-content: center;
        border-radius: 20px !important; /* Smooth corners for all shapes on mobile */
    }

    /* Compact Items */
    .shift-menu ul li { 
        margin: 2px 5px; /* Tighter spacing */
    }
    .shift-menu ul li a {
        font-size: 0.75rem; /* Smaller font for mobile */
        padding: 4px 6px;
    }

    /* Shape Adjustments for Mobile Flow */
    .shape-spoon .shift-logo { width: 70px; height: 70px; }
    /* Reset specialized padding for shapes so text flows naturally */
    .shape-spoon .shift-menu, 
    .shape-arrow .shift-menu { 
        padding-left: 10px; 
        padding-right: 10px; 
        clip-path: none !important; /* Remove complex clip-paths that might cut off wrapped text */
    }
    
    .shift-logo { font-size: 0.9rem; margin-right: 10px; }
    
    /* Ensure flex column if needed for very small screens */
    .shift-nav-wrapper {
        flex-direction: column;
    }
    .shift-menu {
        margin-left: 0;
        margin-top: 10px;
        width: 100%;
    }
}


/* === GENERAL BLOCK STYLES === */
.block-section {
    margin-bottom: 60px;
    background: #fff;
    overflow: hidden;
    transition: 0.3s;
}

.block-header {
    padding: 20px 30px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    font-weight: 800;
    text-transform: uppercase;
    background: rgba(0,0,0,0.03);
}
.block-content { padding: 40px; }

/* Responsive General */
@media (max-width: 600px) {
    .block-content { padding: 25px 20px; } /* Less padding on mobile */
    .block-header { padding: 15px 20px; font-size: 1rem; }
    .container { padding: 0 15px; }
}

/* Universal Styles */
.style-flat { box-shadow: none; border: 1px solid #eee; }
.style-card { box-shadow: 0 15px 35px rgba(0,0,0,0.1); border-radius: 12px; border: none; }
.style-borderless { border: none; background: transparent; box-shadow: none; }
.style-minimal { border-left: 5px solid var(--accent); background: #fff; box-shadow: 0 5px 15px rgba(0,0,0,0.05); }


/* === BLOCK 2 & GENERIC PAGE REUSE === */
.block-2-style {
    background-color: var(--b2-bg);
    font-family: var(--b2-font-family);
}
.block-2-style .block-header { color: var(--b2-head-color); font-size: var(--b2-head-size); }
.block-2-style .block-content { color: var(--b2-text-color); font-size: var(--b2-text-size); }


/* === BLOCK 3: PORTFOLIO === */
/* CHANGED: From #block-3 to .section-block-3 */
.section-block-3 { background-color: var(--b3-bg); font-family: var(--b3-font-family); }
.section-block-3 .block-header { color: var(--b3-head-color); font-size: var(--b3-head-size); }

/* Grid View Styles */
.pf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 30px; }
.pf-card { background: #fff; transition: transform 0.3s ease; overflow: hidden; }
.pf-img { height: 220px; overflow: hidden; position: relative; }
.pf-img img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }
.pf-info { padding: 20px; }
.pf-title { font-size: 1.1rem; margin: 0 0 10px 0; color: #333; font-weight: bold; }
.pf-meta { font-size: 0.85rem; color: #888; }

/* Grid Responsive */
@media (max-width: 600px) {
    .pf-grid { grid-template-columns: 1fr; } 
    .pf-img { height: 250px; }
}

/* Grid Item Variations */
.pf-style-card .pf-card { border: 1px solid #eee; border-radius: 4px; }
.pf-style-card .pf-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
.pf-style-rounded .pf-card { border-radius: 20px; box-shadow: 0 10px 25px rgba(0,0,0,0.08); border: none; }
.pf-style-rounded .pf-card:hover { transform: scale(1.02); }
.pf-style-circle .pf-card { background: transparent; text-align: center; box-shadow: none; }
.pf-style-circle .pf-img { width: 200px; height: 200px; border-radius: 50%; margin: 0 auto 15px auto; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.pf-style-circle .pf-info { padding: 0; }
.pf-style-star .pf-card { background: transparent; text-align: center; box-shadow: none; }
.pf-style-star .pf-img { width: 220px; height: 220px; margin: 0 auto; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); background: var(--accent); }
.pf-style-star .pf-img img { transform: scale(1.2); }
.pf-style-glass .pf-card { border-radius: 12px; position: relative; height: 300px; }
.pf-style-glass .pf-img { height: 100%; }
.pf-style-glass .pf-info { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(10px); padding: 15px; transform: translateY(100%); transition: 0.3s; }
.pf-style-glass .pf-card:hover .pf-info { transform: translateY(0); }


/* === ADVANCED SLIDER === */
.pf-slider-container {
    position: relative;
    background: #000;
    color: #fff;
    overflow: visible; 
    height: 500px;
    display: flex;
}

/* -- SLIDER BORDER STYLES -- */
.slider-border-none { border: none; box-shadow: 0 20px 40px rgba(0,0,0,0.2); border-radius: 8px; overflow: hidden; }
.slider-border-thin { border: 1px solid var(--pf-border-color); box-shadow: none; }
.slider-border-thick { border: 8px solid var(--pf-border-color); box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
.slider-border-neon { border: 2px solid var(--pf-border-color); box-shadow: 0 0 15px var(--pf-border-color), inset 0 0 10px var(--pf-border-color); overflow: hidden; }
.slider-border-offset { margin: 10px; box-shadow: 8px 8px 0px var(--pf-border-color); border: 2px solid #1a1a1a; overflow: hidden; }
.slider-border-rounded { border-radius: 30px; box-shadow: 0 15px 35px rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.1); overflow: hidden; }

/* -- NAV BUTTONS STYLING -- */
.pf-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: var(--pf-nav-bg);
    color: var(--pf-nav-color);
    border: none;
    font-size: var(--pf-nav-size);
    width: 60px; height: 60px;
    display: flex; justify-content: center; align-items: center;
    cursor: pointer; z-index: 30;
    transition: 0.3s; backdrop-filter: blur(5px);
    line-height: 1;
}
.pf-nav-btn:hover { background: var(--accent); color: #fff; }
.pf-prev { left: 20px; }
.pf-next { right: 20px; }

.nav-shape-circle { border-radius: 50%; }
.nav-shape-square { border-radius: 0; }
.nav-shape-rounded { border-radius: 10px; }

/* Slider Items */
.pf-single-item { position: absolute; width: 100%; height: 100%; display: flex; top: 0; left: 0; opacity: 0; pointer-events: none; z-index: 1; perspective: 1000px; }
.pf-single-item.active { opacity: 1; pointer-events: auto; z-index: 2; }

/* Transitions */
.effect-fade .pf-single-item { transition: opacity 0.8s ease; }
.effect-slide .pf-single-item { transition: transform 0.6s ease-in-out, opacity 0.6s ease; transform: translateX(100%); opacity: 0; }
.effect-slide .pf-single-item.active { transform: translateX(0); opacity: 1; }
.effect-zoom .pf-single-item { transition: transform 0.8s ease, opacity 0.8s ease; transform: scale(1.1); opacity: 0; }
.effect-zoom .pf-single-item.active { transform: scale(1); opacity: 1; }
.effect-flip .pf-single-item { transition: transform 0.8s cubic-bezier(0.4, 0.2, 0.2, 1), opacity 0.5s; transform: rotateY(90deg); opacity: 0; backface-visibility: hidden; }
.effect-flip .pf-single-item.active { transform: rotateY(0deg); opacity: 1; }
.effect-blur .pf-single-item { transition: filter 0.8s ease, opacity 0.8s ease; filter: blur(20px); opacity: 0; }
.effect-blur .pf-single-item.active { filter: blur(0); opacity: 1; }

/* Item Layout */
.pf-single-poster { width: 50%; height: 100%; position: relative; background: #000; }
.pf-single-poster img { width: 100%; height: 100%; object-fit: var(--b3-img-fit); display: block; }
.pf-single-details { width: 50%; padding: 60px; display: flex; flex-direction: column; justify-content: center; background: #1a1a1a; }
.pf-single-details h3 { font-size: 2.5rem; margin: 0 0 15px 0; line-height: 1.1; text-transform: uppercase; }
.pf-single-meta { color: var(--accent); font-weight: 700; margin-bottom: 25px; text-transform: uppercase; letter-spacing: 2px; }
.pf-btn { display: inline-block; padding: 14px 35px; background: var(--accent); color: #fff; font-weight: bold; text-transform: uppercase; border-radius: 4px; align-self: flex-start; }

/* === RESPONSIVE SLIDER FIXES === */
@media (max-width: 900px) {
    .pf-slider-container { height: auto; flex-direction: column; }
    .pf-single-item { position: relative; flex-direction: column; opacity: 1; display: none; }
    .pf-single-item.active { display: flex; }
    
    .pf-single-poster, .pf-single-details { width: 100%; }
    .pf-single-poster { height: 350px; }
    
    /* Center alignment fix for mobile */
    .pf-single-details { 
        padding: 40px 20px; 
        align-items: center; 
        text-align: center;
    }
    .pf-btn { 
        align-self: center; 
        margin-top: 15px; 
    }
    
    /* Nav adjustments */
    .pf-nav-btn { top: 30%; width: 40px; height: 40px; font-size: 1.2rem; }
    .pf-prev { left: 10px; }
    .pf-next { right: 10px; }
    
    .pf-single-details h3 { font-size: 1.8rem; }
}


/* === BLOCK 4: CUSTOM === */
/* CHANGED: From #block-4 to .section-block-4 */
.section-block-4 { font-family: var(--b4-font-family); background-color: #fff; }
.section-block-4 .block-header { color: var(--b4-head-color); font-size: var(--b4-head-size); }
.section-block-4 .block-content { color: var(--b4-text-color); font-size: var(--b4-text-size); }


/* === BLOCK 5: FOOTER === */
/* CHANGED: From #block-5 to .section-block-5 */
.section-block-5 {
    text-align: center;
    padding: 40px;
    background: var(--b5-bg);
    color: var(--b5-text);
    margin-top: 60px;
    font-family: var(--b5-font-family);
    font-size: var(--b5-font-size);
}
.back-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: var(--accent);
    color: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    cursor: pointer;
    opacity: 0;
    transition: 0.3s;
    z-index: 99;
}
.back-top.visible { opacity: 1; }