/*
 Theme Name:   Bjork Child
 Theme URI:    https://andersnoren.se/themes/bjork/
 Description:  Child theme for the Bjork Block Theme
 Author:       Your Name
 Author URI:   https://example.com
 Template:     bjork
 Version:      1.0.0
 License:      GPLv2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  bjork-child
*/

/* Add your custom CSS below this line */

/* bakbak-one-regular - latin_latin-ext */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Bakbak One';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/bakbak-one.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

body {
    background-image: url('images/bg.jpg');
    background-color: #1c1a1b;
    background-repeat: repeat;
    background-size: 2560px 1080px;
    background-attachment: scroll;
}

/*precisamos ver a continuacao vertical do bg*/

.wp-block-site-tagline {
    display: none !important;
}

/* =========================================
   1. GLOBAL LAYOUT & FONTS (User Branding)
   ========================================= */

/* Prevent horizontal scrolling on mobile */
html, body {
    overflow-x: hidden !important;
    width: 100%;
    position: relative;
    /* Camouflage for pattern repeat gap */
    background-color: #111; 
}

/* Global Font Settings */
h1, h2, h3, h4, h5, h6, .site-sidebar, .wp-block-post-date {
    font-family: 'Bakbak One', sans-serif !important;
    font-weight: 400;
}

/* Sidebar/Content Split (Desktop Only > 1000px) */
@media (min-width: 1000px) {
    .wp-block-columns {
        flex-wrap: nowrap !important;
    }
    .wp-block-column:first-child { /* Sidebar */
        flex-basis: 20% !important;
        max-width: 20% !important;
    }
    .wp-block-column:last-child { /* Content */
        flex-basis: 80% !important;
        max-width: 80% !important;
    }
}

/* =========================================
   2. BLOG POST STYLING
   ========================================= */

/* Post Container */
.wp-block-post {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 5px solid #ed005b; /* User's Pink Separator */
}
.wp-block-post:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

/* Separator Styling */
.wp-block-separator {
    border: none;
    border-bottom: 2px solid #ed005b;
    width: 30rem;
    margin-top: 2rem;
}

/* Author Styling (Portuguese + Font) */
.wp-block-post-author__name {
    font-family: "BakBak One";
    font-weight: normal;
    opacity: 0.7;
}
.wp-block-post-author__name a::before,
.wp-block-post-author__name::before {
    content: "• por "; /* Portuguese */
    font-weight: normal;
    opacity: 0.7;
    margin-right: 5px;
    font-family: "BakBak One";
    display: inline-block;
}

/* Excerpt Color */
p.wp-block-post-excerpt__excerpt {
    color: #fff;
}

/* =========================================
   3. BUTTONS (User's Gradient Styles)
   ========================================= */

/* "LEIA MAIS" - Pink to Green Gradient */
.wp-block-read-more, .btn-leia-mais {
    font-family: "Albert Sans", sans-serif !important;
    font-size: 15px !important;
    font-weight: bold;
    
    /* Gradient Pink */
    background: linear-gradient(135deg, rgb(237, 0, 91) 0%, rgb(237, 0, 137) 50%, rgb(237, 0, 91) 100%);
    background-size: 200% auto;
    
    color: #ffffff !important;
    border-radius: 25px;
    padding: 11px 23px;
    text-decoration: none;
    text-shadow: 0px 2px 0px #000;
    
    display: inline-block;
    transition: 0.5s;
    
    /* FIX: Prevent stacking on mobile */
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

.wp-block-read-more:hover, .btn-leia-mais:hover {
    /* Gradient Green on Hover */
    background: linear-gradient(135deg, rgb(0, 242, 178) 0%, rgb(113, 206, 126) 50%, rgb(0, 242, 178) 100%) !important;
    background-position: 100% center;
    color: #fff !important;
    text-decoration: none;
}

/* =========================================
   4. SHARE BUTTONS (Pink Theme)
   ========================================= */

/* Container */
.share-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 36px;       /* Desktop Size */
    height: 36px;
    border-radius: 50%;
    
    /* COLORS */
    background-color: #ed005b !important; /* Pink Background */
    border: 1px solid #fff !important;    /* White Border */
    color: #fff !important;               /* White Icon */
    
    cursor: pointer;
    text-decoration: none !important;
    line-height: 0;
    padding: 0;
    flex-shrink: 0;
    
    /* MARGIN FIX: Forces spacing even if WordPress adds <p> tags */
    margin-left: 10px !important; 
}

/* Reset margin for the very first button so it sits near the label */
.share-btn:first-of-type {
    margin-left: 0 !important;
}

.share-btn:hover {
    opacity: 0.8;
    transform: translateY(-2px);
}

/* Ensure overrides for specific brands match the Pink theme */
.share-fb:hover, .share-wa:hover, .share-copy:hover { 
    background-color: #ed005b !important; 
}

/* Emergency Cleanup: Remove <p> tag spacing if WP adds them */
.bjork-share-buttons p {
    display: inline-flex;
    margin: 0; 
    padding: 0;
}

/* COPY BUTTON (Pill Shape) */
.share-btn.share-copy {
    width: auto !important;     /* Let it grow horizontally */
    padding: 0 15px !important; /* Add space on left/right inside button */
    border-radius: 20px !important; /* Make it a pill shape, not circle */
    gap: 8px; /* Space between the Icon and the Text */
}

.copy-text {
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* =========================================
   5. RELATED POSTS ("Pode te interessar")
   ========================================= */

.related-posts-container {
    margin-top: 50px !important;
    background-color: #ed005b;
    clear: both;
    padding: 20px !important; 
    border-top: 5px solid #ed005b; /* Your Pink Border */
    width: auto;
}

.related-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 1.5px; 
    text-transform: uppercase;
    margin-bottom: 10px !important; 
    margin-top: 0 !important; 
    line-height: 1.2;
}

/* The Grid */
.related-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.related-item {
    display: flex;
    flex-direction: column;
}
.related-link {
    text-decoration: none;
    color: inherit;
    display: block;
}
.related-thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-position: center;
    border-radius: 4px;
    margin-bottom: 8px;
    background-color: #333;
    transition: opacity 0.2s ease;
}
.related-thumb:hover { opacity: 0.8; }

.related-item-title {
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.4;
    margin: 0;
    color: #fff; 
    letter-spacing: 0.5px; 
}
.related-link:hover .related-item-title { color: #ed005b; }

/* =========================================
   6. MOBILE HEADER RESCUE (Sticky & Aligned)
   ========================================= */

@media (max-width: 768px) {
    
    /* 1. MAKE IT STICKY & FULL WIDTH */
    header.wp-block-template-part {
        position: fixed !important;
        top: 0 !important;
        z-index: 99999 !important; /* Ensure it stays on top of everything */
        background-color: #000 !important; /* solid background so text doesn't scroll behind it */
        
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important; /* Force items to edges */
        align-items: center !important;
        
        width: 100% !important;
        max-width: 100vw !important; /* Prevent overflow */
        padding: 0px 20px !important;
        box-sizing: border-box !important;
        
        border-bottom: 1px solid rgba(255,255,255,0.1); /* Optional: subtle border */
    }

    /* 2. TARGET THE INNER ROW (If WordPress wraps them) */
    /* This forces the inner container to stretch full width too */
    header.wp-block-template-part > .wp-block-group,
    header.wp-block-template-part > .wp-block-columns {
        display: flex !important;
        justify-content: space-between !important;
        width: 100% !important;
        flex-grow: 1 !important;
    }

    /* 3. LOGO STYLING */
    .wp-block-site-title {
        display: block !important;
        margin-right: auto !important; /* Push everything else away */
    }
    
    .wp-block-site-title a {
        text-decoration: none !important;
    }

    /* 4. MENU BUTTON STYLING (Pink & Right Aligned) */
    .wp-block-navigation {
        display: block !important;
        margin-left: auto !important; /* Force to the right */
    }

    /* The actual Hamburger Icon */
    .wp-block-navigation__responsive-container-open {
        display: flex !important;
        align-items: center;
        justify-content: center;
        
        color: #fff !important;               /* White Icon */
        background-color: #ED0089 !important; /* Pink Background */
        
        border-radius: 4px;
        padding: 8px 12px !important;
        width: auto !important;
    }
    
    /* Hide the "Close" X icon if it accidentally shows up over the header */
    .wp-block-navigation__responsive-container-close {
        display: none;
    }
}

/* =========================================
   7. PHONE SPECIFIC (Adjustments for small screens)
   ========================================= */

@media (max-width: 600px) {
    /* Share Buttons: Hide Labels/Text to save space */
    .share-label, .copy-text { display: none !important; }
    
    /* Revert Copy Button to Circle */
    .share-btn.share-copy {
        width: 44px !important;
        padding: 0 !important;
        border-radius: 50% !important;
    }
    
    /* Bigger Touch Targets */
    .share-btn {
        width: 44px !important;
        height: 44px !important;
    }
    .share-btn svg { width: 22px; height: 22px; }

    /* Date & Author: Single Line Fix */
    .wp-block-post-date, .wp-block-post-author, .wp-block-post-author__name {
        white-space: nowrap !important;
    }
    /* Force Row Horizontal */
    .wp-block-group:has(.wp-block-post-date) {
        flex-wrap: nowrap !important;
        flex-direction: row !important;
        align-items: center !important;
        column-gap: 10px !important;
    }
    .wp-block-post-author { margin-left: 15px !important; }
    
    /* Stack Share buttons below date if needed */
    .wp-block-group:has(.bjork-share-buttons) {
        flex-wrap: wrap !important;
    }
}

/* Tiny Phones (iPhone SE etc) */
@media (max-width: 390px) {
    .share-btn, .share-btn.share-copy {
        width: 36px !important;
        height: 36px !important;
        margin-left: 8px !important;
    }
    .share-btn svg { width: 18px !important; height: 18px !important; }
    .bjork-share-buttons { gap: 5px !important; }
}

/* =========================================
   MOBILE MENU CLOSE BUTTON FIX (Corrected)
   ========================================= */

/* 1. Guarantee it is ALWAYS hidden on Desktop */
@media (min-width: 769px) {
    .wp-block-navigation__responsive-container-close {
        display: none !important;
    }
}

/* 2. Show and style it ONLY on Mobile/Tablet */
@media (max-width: 768px) {
    .wp-block-navigation__responsive-container-close {
        display: flex !important; 
        align-items: center !important;
        justify-content: center !important;
        
        color: #fff !important;               
        background-color: #111 !important; /* Pink Background */
        border: none !important;
        border-radius: 4px !important;
        padding: 8px 12px !important;
        
        /* Lock it to the top right of the screen */
        position: absolute !important;
        top: 15px !important;
        right: 20px !important;
        
        z-index: 100000 !important; 
    }

    /* Dark background for the open menu */
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
        color: #fff !important;
        padding-top: 80px !important; /* Push links down away from the 'X' */
    }

    /* Size the SVG 'X' icon perfectly */
    .wp-block-navigation__responsive-container-close svg {
        fill: currentColor !important;
        width: 24px !important;
        height: 24px !important;
    }
}

/* =========================================
   FIX CONTENT OVERLAP (Universal Fix)
   ========================================= */

@media (max-width: 768px) {
    /* 1. Target whatever block comes immediately AFTER the header */
    header.wp-block-template-part + * {
        margin-top: 100px !important; /* 70px header + 30px space */
    }

    /* 2. Push it down even further if you are logged in (Admin Bar) */
    body.admin-bar header.wp-block-template-part + * {
        margin-top: 80px !important; /* 100px + 46px WP Admin Bar */
    }
}

/* =========================================
   SOCIAL ICONS FIX (Pink Theme)
   ========================================= */

.wp-block-social-links .wp-social-link svg {
    fill: #fff !important; /* White Logo */
}

/* Hover Effect */
.wp-block-social-links .wp-social-link:hover {
    transform: translateY(-3px);
    opacity: 0.8;
}

/* =========================================
   SPLASH SCREEN (Loading Animation)
   ========================================= */
#custom-splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #ed005b; /* Your signature Pink */
    z-index: 9999999; /* Stays on top of absolutely everything */
    
    /* Center the GIF */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Smooth fade-out animation */
    transition: opacity 0.5s ease-out, visibility 0.5s;
}

/* Adjust the size of your GIF here */
#custom-splash-screen img {
    width: 150px; 
    height: auto;
}

/* The class JavaScript will add to trigger the fade */
.splash-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* =========================================
   READING PROGRESS BAR STYLING
   ========================================= */
#reading-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%; /* Starts at zero */
    height: 4px; /* Thickness of the line */
    
    /* Gradient matching your custom buttons */
    background: linear-gradient(90deg, rgb(237, 0, 91) 0%, rgb(0, 242, 178) 100%);
    
    z-index: 9999999; /* Guarantees it sits above the fixed header */
    transition: width 0.1s ease-out; /* Makes the tracking feel incredibly smooth */
}

/* Push it down slightly ONLY if you are logged in so the WP Admin Bar doesn't hide it */
body.admin-bar #reading-progress-bar {
    top: 32px; 
}
@media (max-width: 782px) {
    body.admin-bar #reading-progress-bar {
        top: 46px; 
    }
}