/*
Theme Name: GeneratePress Child
Theme URI: https://vibinme.com/
Description: A custom child theme for GeneratePress.
Author: Vibin'Me Community
Author URI: https://vibinme.com/
Template: generatepress
Version: 1.0.0
Text Domain: generatepress_child
*/

/* ==================================================
   TEMP to be used maybe TABLE OF CONTENTS
   ==================================================

    1.  Base Styles (Global, Typography, Resets)
        1.1. Global Typography
        1.2. Animations & Keyframes
    2.  Layout / Structure
        2.1. Global Layout Elements (e.g., site-header, site-footer, main)
        2.2. Page-Specific Backgrounds & Layouts
        2.3. Grid Layouts
    3.  Components / Modules (Reusable UI elements)
        3.1. Back to Top Button
        3.2. Custom Modal Styles
        3.3. Site Header & Branding (Logo, Site Title/Tagline)
        3.4. Navigation (Primary Nav, Simple Menus, Nav Buttons)
        3.5. Buttons (General, Form Submit)
        3.6. Forms (MemberPress Login, Registration, General Form Elements)
        3.7. Home Page Sections (e.g., H1 Grid Box)
        3.8. Lists
    4.  Utilities / Helpers (Single-purpose classes)
    5.  Theme / Plugin Overrides (Specific adjustments for GeneratePress or other plugins)

================================================== */

 * {
    outline: 1px solid red !important;
}


/* ==================================================
   1. Base Styles
   ================================================== */

/* Global body, html, box-sizing */
html {
    height: 100%; /* For pages that might use min-height on body */
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}

/* 1.1. Global Typography
---------------------------------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    font-family: "Montserrat", sans-serif !important;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.8);
    color: #fff !important;
}

p {
    margin-top: 0;
    margin-bottom: 1em;
}

/* 1.2. Animations & Keyframes
---------------------------------------------------------------------------------------------------- */
@keyframes fadeIn {
    to {
        opacity: 0.9;
    }
}

@keyframes stripeLoginGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}


/* ==================================================
   2. Layout / Structure
   ================================================== */

/* 2.1. Global Layout Elements
---------------------------------------------------------------------------------------------------- */
.site-header,
.inside-header {
    background-color: transparent !important;
}

.site-footer {
    background: transparent;
}

/* 2.2. Page-Specific Backgrounds & Layouts
---------------------------------------------------------------------------------------------------- */

/* PUBLIC PAGES BACKGROUND */
body.page-id-5,
body.page-id-708,
body.page-id-139,
body.page-id-107,
body.page-id-95,
body.page-id-697,
body.page-id-692,
body.page-id-118, /* Join */
body.page-id-470 /* grid-template */ {
    min-height: 100vh;
    margin: 0;
    background-color: #315457;
    background-image:
        linear-gradient(15deg, rgba(2, 30, 57, 0.9), rgba(49, 84, 87, 0.8)),
        url('https://vibinme.com/wp-content/uploads/2025/05/vibin-bkgrd.png');
    background-size: cover, 90%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
}
@media (max-width: 768px) {
    body.page-id-470 {
        background-position: center center;
        background-attachment: scroll; /* fixed backgrounds can be glitchy on mobile */
    }
}

/* LOGIN PAGE BACKGROUND & STYLING */
body.page-id-223 {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(-45deg,
        #a393f0,  /* softer indigo */
        #6fc3a6,  /* gentler minty teal */
        #f79c8c,  /* muted coral */
        #fcd975  /* softer gold */
    );
    background-size: 600% 600%;
    animation: stripeLoginGradient 30s ease infinite;
}

/* 2.3. Grid Layouts
---------------------------------------------------------------------------------------------------- */

/* Full Width Viewport */
.grid-full-cont {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    position: relative;
}

/* 2 box grid layout for Small Tablet */
@media (min-width: 401px) and (max-width: 600px) {
    /*
    .grid-boxes {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    */
}

/* Other MP Pages Background */


/* STICKY HEADER */
/*
.site-header {
    position: sticky !important;
    position: -webkit-sticky !important;
    top: 0 !important;
    z-index: 999 !important;
}
*/

/* Change Default Spacing */
/*
.separate-containers .inside-article {
    padding: 0px;
    margin: 0px;
}
*/


/* ==================================================
   3. Components / Modules
   ================================================== */

/* 3.1. Back to Top Button
---------------------------------------------------------------------------------------------------- */
.generate-back-to-top {
    border-radius: 25px;
}

/* 3.2. Custom Modal Styles (SHORTCODE -> MODAL WINDOW)
---------------------------------------------------------------------------------------------------- */
.acctpg-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.3s ease;
}

.acctpg-modal-hidden {
    display: none;
}

.acctpg-modal-content {
    background: #021e39;
    padding: 2rem;
    border-radius: 12px;
    position: relative;
    max-width: 500px;
    width: 90%;
}

.acctpg-modal-close { /* Note: your JS uses .acctpg-modal-close-btn - review if this selector is correct */
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
}

/* 3.3. Site Header & Branding (Logo, Site Title/Tagline)
---------------------------------------------------------------------------------------------------- */
.logo-image-cont {
 /*   margin-left: -70px; */
}

.site-branding {
/*    margin-top: -100px; */
display: flex;
}

.site-branding .main-title-cont {
    text-align: center !important;
    margin: 0 auto;
}

.site-branding .main-title-link {
    text-decoration: none;
    display: inline-block;
}

.site-branding .main-title-1 {
    font-family: "Liu Jian Mao Cao", cursive;
    color: #fff;
    line-height: 1;
    margin: 0;
}

.site-branding .main-title-2 {
    font-family: "Syncopate", sans-serif;
    font-weight: 300;
    color: #fff;
    line-height: 1;
    margin-top: 2px;
    /* text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); */
}

/* SITE TITLE Responsive Styles */
@media (max-width: 400px) { /* Phones */
    .main-title-1 {
        font-size: 82px !important;
        letter-spacing: 2px;
    }
    .main-title-2 {
        font-size: 24px;
        letter-spacing: 8px;
        padding-left: 6px;
        /*text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); */
    }
}

@media (min-width: 401px) and (max-width: 600px) { /* Tablet-Small */
    /*
    .main-title-cont {
        margin: auto;
        padding-top: 10px !important;
        line-height: .8 !important;
        text-align: center;
    }
    */
    .main-title-1 {
        font-size: 74px;
        letter-spacing: 2px;
    }
    .main-title-2 {
        font-size: 30px;
        letter-spacing: 1px;
    }
}

@media (min-width: 601px) and (max-width: 1000px) { /* Tablet-Large */
    .main-title-1 {
        font-size: 94px;
        letter-spacing: 2px;
    }
    .main-title-2 {
        font-size: 24px;
        letter-spacing: 12px;
        line-height: 1;
        padding-left: 10px;
    }
}

@media (min-width: 1001px) { /* Desktop */
    .main-title-1 {
        font-size: 94px;
        letter-spacing: 2px;
    }
    .main-title-2 {
        font-size: 24px;
        letter-spacing: 12px;
        padding-left: 10px;
    }
}

/* Commented out main-title-tag styles (if needed in the future) */
/*
.main-title-tag,
.main-title-tag a {
    font-size: 28px;
    text-spacing: 2px;
    line-height: 1;
}
*/

/* 3.4. Navigation (Primary Nav, Simple Menus, Nav Buttons)
---------------------------------------------------------------------------------------------------- */

/* Primary Nav - GP Element */
.main-nav-button {
    position: relative;
    display: inline-block;
    padding: 6px 14px;
    border-radius: 12px;
    background-color: rgba(255, 255, 255, 0.55);
    color: #000000;
    text-decoration: none;
    font-weight: 500;
    font-size: 20px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    backdrop-filter: saturate(160%) blur(8px);
    -webkit-backdrop-filter: saturate(160%) blur(8px);
    z-index: 1;
    overflow: hidden;
}
/*.main-nav-button::before { *//* Optional: subtle noise texture overlay */
/*    content: '';
    position: absolute;
    inset: 0;
    background-image: url('https://www.transparenttextures.com/patterns/gray-floral.png');
    opacity: 0.03;
    z-index: 0;
    pointer-events: none;
    border-radius: 12px;
} */
.main-nav-button:hover,
.main-nav-button:focus {
    background-color: rgba(255, 255, 255, 0.65) !important;
    color: #000000 !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* Nav Title - EXPLORE */
    .explore-text-cont {
        margin-left: auto !important;
        margin-right: auto !important;
        margin-top: 0;
        margin-bottom: -6px;
        text-align: center !important;
    }
  /*.gb-text .gb-text-0dca7d3d .explore-text,*/
    .explore-text {
        font-family: "Syncopate", sans-serif;
        font-optical-sizing: auto;
        font-weight: 400;
        font-style: normal;
        letter-spacing: 16px;
        color: rgba(255, 255, 255, 0.8);
        text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
        z-index: 10;
        opacity: 0;
        text-align: center;
        animation: fadeIn 2s ease-in forwards;
    }

/* Simple Menu Buttons (added to MP forms) */
.simple-menu {
    background-color: transparent;
    padding: 6px 10px;
    text-align: center;
}
.simple-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 10px;
}
.simple-menu li {
    flex: 1;
    text-align: center;
}
.simple-menu a {
    display: block;
    width: 100%;
    padding: 6px 10px;
    border-radius: 12px;
    background-color: rgba(247, 247, 247, 0.35);
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    /* transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
}
.simple-menu a:hover,
.simple-menu a:focus {
    background-color: #ffffff;
    color: #000000;
    /* box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); */
}

/* 3.5. Buttons (General, Form Submit)
---------------------------------------------------------------------------------------------------- */

/* Join & Login/Logout Buttons */
.join-button,
.login-out-button {
    position: relative;
    display: inline-block;
    padding: 6px;
    border-radius: 12px;
    background-color: rgba(255, 255, 255, 0.45);
    color: #000000;
    font-weight: 500;
    text-transform: uppercase !important;
    font-size: 26px;
    letter-spacing: -1px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    backdrop-filter: saturate(160%) blur(8px);
    -webkit-backdrop-filter: saturate(160%) blur(8px);
    z-index: 1;
    overflow: hidden;
}
/*.join-button::before,
.login-out-button::before { */ /* Optional: subtle noise texture overlay */
 /*   content: '';
    position: absolute;
    inset: 0;
    background-image: url('https://www.transparenttextures.com/patterns/gray-floral.png');
    opacity: 0.03;
    z-index: 0;
    pointer-events: none;
    border-radius: 12px;
} */
.join-button a,
.login-out-button a { /* Text link inside */
    text-decoration: none;
    color: #000000;
    font-size: 26px;
    letter-spacing: -1px;
    font-weight: 600;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
}
.join-button:hover,
.join-button:focus,
.login-out-button:hover,
.login-out-button:focus { /* Hover & focus */
    background-color: rgba(255, 255, 255, 0.65);
    color: #000000;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* Custom Modal Open Button (Simple Text Style) */
.acctpg-modal-open {
    background: transparent; 
    border: none;
    padding: 0; 
    margin: 0; 
    font-family: inherit; 
    font-size: 80%; 
    color: #fff;
    cursor: pointer;
    text-decoration: none; 
    box-shadow: none;
    transition: text-decoration 0.2s ease;     
    display: inline-block; /* Essential for text-decoration consistently */
}

.acctpg-modal-open:hover,
.acctpg-modal-open:focus {
    background: transparent;     
    color: #fff; 
    text-decoration: underline;
    transform: none; 
    box-shadow: none;
}

/* MP Forms Submit Buttons (LOGIN, REGISTRATION) */
input[type="submit"], /* General submit button styles */
form#mepr_forgot_password_form div.submit,
form#mepr_loginform.mepr-form .submit input#wp-submit.button-primary.mepr-share-button {
    text-align: center;
    width: 60%;
    margin: 0 auto;
    display: block;
}

form#mepr_loginform.mepr-form input[type="submit"],
form#mepr_signup_form input.mepr-submit {
    background: linear-gradient(135deg, #f4c430, #d4a017); /* richer gold */
    color: #000;
    font-weight: bold;
    padding: 12px 24px;
    font-size: 1.2rem;
    text-transform: uppercase;
    border: none;
    border-radius: 24px;
    box-shadow: 0 4px 12px rgba(212, 160, 23, 0.3);
    transition: background 0.3s ease, transform 0.2s ease;
    cursor: pointer;
    text-shadow: none;
}
form#mepr_loginform.mepr-form input[type="submit"]:hover,
form#mepr_signup_form input.mepr-submit:hover { /* Hover effect */
    background: linear-gradient(135deg, #ffcc33, #cc9900);
    transform: scale(1.04);
    box-shadow: 0 6px 16px rgba(204, 153, 0, 0.4);
}
form#mepr_loginform.mepr-form input[type="submit"],
form#mepr_signup_form input.mepr-submit { /* Font size Submit text - Registration */
    font-size: 1rem;
}


/* 3.6. Forms (MemberPress Login, Registration, General Form Elements)
---------------------------------------------------------------------------------------------------- */

/* Login Form Wrapper */
.mp_wrapper.mp_login_form {
    background: rgba(31, 34, 45, 0.75);
    padding: 2rem;
    border-radius: 16px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
    max-width: 520px;
    width: 100%;
    margin: 2rem;
    backdrop-filter: blur(8px);
}

/* General MemberPress Wrapper (Various forms) */
.mp_wrapper {
    width: 100%;
    max-width: 600px;
}

/* Enhance labels and inputs (Login Form) */
.mp_login_form label {
    font-weight: 600;
    color: #1f2937;
}
.mp_login_form input[type="text"],
.mp_login_form input[type="password"] {
    background-color: rgba(60, 65, 80, 0.5);
    color: #f0f0f0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 0.75rem;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    font-size: 1rem;
    backdrop-filter: blur(4px);
}
.mp_login_form input[type="text"]::placeholder,
.mp_login_form input[type="password"]::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

/* Login Form Intro Text */
.login-intro {
    text-align: center;
    margin-bottom: 30px;
}
.login-returning-text {
    font-size: 14px !important;
    color: #ffd700;
    margin-bottom: 4px;
}
.login-join-text {
    font-size: 14px !important;
    color: #ffd700;
    margin-bottom: 20px;
}
.login-join-text a { /* Link styling inside the join text */
    color: #ffda3a;
    text-decoration: none;
    font-size: 14px !important;
    font-weight: 300;
    transition: color 0.3s ease;
}
.login-join-text a:hover {
    color: #ffffff;
    text-decoration: none;
}

/* Login Form Font etc */
.mp-form-label,
body.page-id-223 .mp_wrapper,
body.page-id-223 .mp_wrapper * {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1.6rem;
    line-height: 1.5;
    color: #ffffff;
    text-decoration: none;
}

/* REMEMBER ME CHECKBOX */
#rememberme { /* Style the native checkbox */
    width: 24px;
    height: 24px;
    accent-color: #f7b733;
    border: 2px solid #666;
    border-radius: 6px;
    cursor: pointer;
    transition: box-shadow 0.3s ease, transform 0.2s ease;
}
#rememberme:hover { /* Hover effect */
    box-shadow: 0 0 8px rgba(247, 183, 51, 0.7);
    transform: scale(1.1);
}
#rememberme:checked { /* Checked (clicked) effect */
    box-shadow: 0 0 12px rgba(247, 183, 51, 0.9);
    transform: scale(1.15);
}

/* FORGOT PASSWORD STYLING */
.mepr-login-actions {
    text-align: center;
    margin: 0 auto;
}

/* Forgot Password & Remember Me Text Responsive Styles */
@media (max-width: 480px) { /* Mobile */
    body.page-id-223 .remember-me-text,
    body.page-id-223 .forgot-password-link a {
        font-size: 90%;
    }
}
@media (min-width: 481px) { /* Desktop */
    body.page-id-223 .remember-me-text,
    body.page-id-223 .forgot-password-link a {
        font-size: 80%;
    }
}

/* MP REGISTRATION PAGE */
/* General rule for all inputs in the MemberPress signup form */
form#mepr_signup_form input,
form#mepr_signup_form select,
form#mepr_signup_form textarea {
    background-color: rgba(247, 247, 247, 0.65) !important;
    -webkit-box-shadow: 0 0 0px 1000px rgba(247, 247, 247, 0.65) inset !important;
    color: #000 !important;
    font-weight: 600 !important;
}

/* Password Strength Meter */
.mp-password-strength-display {
    padding: 2px !important;
    width: 120px !important;
    line-height: 0.8 !important;
    font-size: 90% !important;
    border: 2px solid #ffd700;
    border-radius: 2px;
    background-color: rgba(247, 247, 247, 0.65) !important;
    color: #000 !important;
    z-index: 9999;
    position: relative;
}
.mp-password-strength-area {
    font-size: 90% !important;
    letter-spacing: -0.03em;
    position: relative;
    z-index: 9999;
}


/* 3.7. Home Page Sections
---------------------------------------------------------------------------------------------------- */

/* H1 Grid Box - Self Discovery */
.home-title h1 {
    position: relative;
    line-height: 1;
}
.home-title-span-1 {
    font-family: "Syncopate", sans-serif;
    font-size: 1.5em;
    letter-spacing: 1px;
}
.home-title-span-2 {
    font-family: "Loved by the King", serif !important;
    font-size: 1.4em;
    letter-spacing: 2px;
    font-weight: normal;
    padding-left: 30px !important;
}
.home-title h1::before {
    content: "(Re)";
    position: absolute;
    top: 2.3em;
    left: 0.5em;
    font-family: "Loved by the King", serif !important;
    font-size: 1em;
    font-weight: normal;
    color: #fff;
    transition: transform 0.3s ease-out, top 0.3s ease-out;
    opacity: 1;
}

/* H1 Grid Box Responsive Styles */
@media (max-width: 400px) { /* Phones */
    .home-title h1::before {
        top: 1em;
        left: 0.2em;
    }
}

/* Subheading */
.subhead {
    font-family: "Syncopate", sans-serif;
    font-size: 1.2em;
    color: #fff;
    margin-top: -0.4em;
}

/* 3.8. Lists
---------------------------------------------------------------------------------------------------- */
@media (max-width: 400px) {
    ul.like-block-list {
        margin: 0 0 1.5em 1.6em;
    }
}


/* ==================================================
   4. Utilities / Helpers
   ================================================== */
.p-margin {
    margin-bottom: 4px;
}


/* ==================================================
   5. Theme / Plugin Overrides
   ================================================== */

/* Copyright Footer (Customizer) */
/*
.copyright-footer {}
*/

/* Other specific overrides */