/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Child theme for GeneratePress
 Author:       Buskers Atlas
 Author URI:   https://buskersatlas.com
 Template:     generatepress
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  https://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  generatepress-child
*/

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

/* Add your custom styles below */

/* --- GeneratePress Site CSS (Keep this part) --- */
.inside-article,
.sidebar .widget,
.comments-area, 
.gb-loop-item:not(.sidebar .gb-loop-item),
.page-header,
.container-widget {
	border-right: 2px solid rgba(0, 0, 0, 0.07);
	border-bottom: 2px solid rgba(0, 0, 0, 0.07);
	box-shadow: 0 0 10px rgba(232, 234, 237, 0.5);
}
/* --- End GeneratePress Site CSS --- */


/* --- START: BUSKERSATLAS CUSTOM STYLES --- */

/* =============================================
1. PRIMARY BUTTON STYLES
=============================================
*/
a.wp-block-button__link,
input[type="submit"] {
    /* Basic Appearance */
    background-color: #df5a31 !important;
    color: #FFFFFF !important;
    border: none;
    border-radius: 4px;
    padding: 12px 24px;
    display: inline-block;

    /* Text Styling */
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);

    /* 3D Effect & Animation */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease-in-out;
}

a.wp-block-button__link:hover,
input[type="submit"]:hover {
    cursor: pointer;
    transform: translateY(-2px);
    box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.2);
}

a.wp-block-button__link:active,
input[type="submit"]:active {
    transform: translateY(1px);
    box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.15);
}


/* =============================================
2. SECONDARY BUTTON STYLES (GHOST STYLE)
=============================================
*/
.wp-block-button.button-secondary .wp-block-button__link {
    background-color: rgba(0, 0, 0, 0.4) !important;
    border: 2px solid #FFFFFF !important;
    color: #FFFFFF !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

.wp-block-button.button-secondary .wp-block-button__link:hover {
    background-color: #df5a31 !important;
    border-color: #df5a31 !important;
    box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.2) !important;
}


/* =============================================
3. HERO SECTION STYLES
=============================================
*/
.hero-gradient-overlay {
    position: relative;
    overflow: hidden;
}

.hero-gradient-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient( to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0) 50%, rgba(0, 0, 0, 0.4) 100% );
}

.hero-gradient-overlay > * {
    position: relative;
    z-index: 2;
}


/* =============================================
4. FEATURE GRID (4-COLUMN CARDS)
=============================================
*/
.wp-block-group.feature-grid {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* Tablet: 2 columns (force 2x2 on tablet landscape + portrait) */
@media (max-width: 1024px) {
    .wp-block-group.feature-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Mobile: 1 column - NOW WITH !important TO FORCE THE OVERRIDE */
@media (max-width: 500px) {
    .wp-block-group.feature-grid {
        grid-template-columns: 1fr !important;
    }
}


/* =============================================
5. UTILITY STYLES
=============================================
*/
.ba-icon {
  font-size: 48px;
  color: #df5a31;
  margin-bottom: 20px;
}

img.image-make-sepia {
  filter: contrast(80%) brightness(85%) sepia(3%) !important;
}

img.image-make-sepia2 {
  filter: contrast(135%) brightness(95%) sepia(5%) !important;
}

.gb-container ol,
.gb-container ul {
  text-align: left;
}

.wp-block-button {
    box-shadow: none !important;
}
/***************     ****************/
/* === Enhanced CTA Section Style === */
.cta-enhanced {
  position: relative;
  background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.6),
      rgba(0, 0, 0, 0.8)
    ),
    url('https://buskersatlas.com/wp-content/uploads/2025/08/Global-Busking-Map-Background.png'); /* Replace with your actual image URL */
  background-size: cover;
  background-position: center;
  border-radius: 16px;
  padding: 3rem 2rem;
  color: #ffffff;
  box-shadow: 0 0 24px rgba(255, 255, 255, 0.08);
  text-align: center;

  padding-top: 4rem !important;
  padding-bottom: 3.5rem !important;
  margin-top: 4rem !important;
  margin-bottom: 2rem !important;
}

/* CTA Headline */
.cta-enhanced h2 {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.3px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  margin-bottom: 1rem;
}

/* CTA Paragraph */
.cta-enhanced p {
  max-width: 640px;
  margin: 0 auto 2rem;
  font-size: 1.125rem;
  line-height: 1.6;
  color: #f0f0f0;
}

/* Buttons inside CTA */
.cta-enhanced .wp-block-button__link {
  background-color: #df5a31 !important;
  color: #fff !important;
  border-radius: 6px;
  font-weight: bold;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease-in-out;
  margin: 0 0.5rem;
}

.cta-enhanced .wp-block-button__link:hover {
  transform: translateY(-2px);
  box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.25);
}

/* === CTA CARD SHADOW / GLOW === */
.cta-card-glow {
    position: relative;
    z-index: 1;
    border-radius: 12px;
    box-shadow:
        0 0 30px rgba(254, 107, 63, 0.35), /* orange glow */
        0 20px 60px rgba(0, 0, 0, 0.2);     /* deep gray drop shadow */
    transition: box-shadow 0.3s ease-in-out;
}

.creator-photo {
  display: block;
  margin: 0 auto 1rem auto;
  max-width: 420px;  /* adjust this to taste */
  width: 100%;
  height: auto;
}
/***************     ****************/
/***************     ****************/
/* === 2 Enhanced CTA Section Style 2 === */
.cta-enhanced2 {
  position: relative;
  background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.6),
      rgba(0, 0, 0, 0.4)
    ),
    url('https://allnightvision.com/wp-content/uploads/2025/06/jamroomspage730x560bwimage3.png') !important; /* Replace with your actual image URL */
  background-size: cover;
  background-position: center;
  border-radius: 16px;
  padding: 3rem 2rem;
  color: #ffffff;
  box-shadow: 0 0 24px rgba(255, 255, 255, 0.08);
  text-align: center;
  padding-top: 4rem !important;
  padding-bottom: 3.5rem !important;
  margin-top: 2rem !important;
  margin-bottom: 2rem !important;
}

/***************     ****************/
/* Center the lists */
.centered-list {
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  max-width: 360px; /* or whatever width looks best */
}

/**
 * Gradient Overlay for Content Sections
 *
 * Use this class on a container with a background image
 * when you need to place text over one side of the image.
 * It darkens the left side and fades to transparent on the right.
 */
.content-gradient-overlay {
  position: relative; /* Establishes a positioning context for the ::before pseudo-element. */
  overflow: hidden;   /* Ensures the pseudo-element doesn't spill out. */
}

/* The pseudo-element that creates the actual gradient overlay. */
.content-gradient-overlay::before {
  content: "";
  position: absolute;
  inset: 0; /* A shorthand for top: 0; right: 0; bottom: 0; left: 0; */
  z-index: 1; /* Sits on top of the parent's background image. */

  /*
   * The Gradient:
   * - Starts from the left side of the container.
   * - Begins with a semi-transparent dark gray (matching your #333 foundation color).
   * - Fades to fully transparent by the time it reaches 70% of the width.
   * This provides a solid background for text on the left while leaving the right side clear.
   */
  background: linear-gradient(
    to right,
    rgba(51, 51, 51, 0.8) 20%,
    rgba(51, 51, 51, 0) 100%
  );
}

/*
 * Ensures all direct children of the container (like your headlines and form)
 * appear on top of the gradient overlay.
 */
.content-gradient-overlay > * {
  position: relative;
  z-index: 2;
}

/***    Gray buttons for inner pages    ***/
.button-smoky {
  background-color: rgba(0, 0, 0, 0.4);
  color: #fff;
  border: 1px solid #fff;
  border-radius: 6px;
  text-transform: uppercase;
  padding: 0.75rem 1.5rem;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-block;
}

.button-smoky:hover,
.button-smoky:focus {
  background-color: rgba(0, 0, 0, 0.6);
  transform: scale(1.03);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  text-decoration: none;
}
/***  END  Gray buttons for inner pages    ***/

/**
 * Custom Styles for FluentForms
 *
 * Provides base styles for the BuskersAtlas brand and layout
 * variations for different sections using custom wrapper classes.
 */

/* 1. Global FluentForms Styles
-------------------------------------------------- */

/* Global Style for all Submit Buttons */
.fluentform .ff-btn-submit {
    background-color: #df5a31 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    height: 50px;
    padding: 0 40px !important;
    transition: all 0.3s ease;
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.15);
    transform: translateY(0);
}

/* Global Hover/Active states */
.fluentform .ff-btn-submit:hover {
    background-color: #e55a30 !important;
    cursor: pointer;
    transform: translateY(-2px);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.fluentform .ff-btn-submit:active {
    transform: translateY(1px);
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
}


/* 2. Smoky glass button 2 style
-------------------------------------------------- */

/* Email Input Field ("Smoky Glass" Effect) */
.form2-jrhero .ff-el-form-control,
.form2-jrcta .ff-el-form-control {
    background-color: rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    color: #ffffff !important;
    height: 50px;
    width: 100%; /* Ensure input fills its container cell */
}

/* Placeholder text styling */
.form2-jrhero .ff-el-form-control::placeholder,
.form2-jrcta .ff-el-form-control::placeholder {
    color: rgba(255, 255, 255, 0.7) !important;
    opacity: 1;
}

/* --- Layout for HERO form (Horizontal) --- */
.form2-jrhero .ff-el-group {
    display: flex !important;
    gap: 10px; /* Space between input and button */
}

.form2-jrhero .ff-t-cell {
    flex-basis: auto !important; /* Override inline styles */
}

.form2-jrhero .ff-el-group .ff-el-input--email {
   flex-grow: 1; /* Make the email field's cell grow */
}

.form2-jrhero .ff-el-group .ff-el-input--submit {
   flex-grow: 0; /* Prevent the button's cell from growing */
   flex-shrink: 0;
}

/* --- Layout for bottom CTA form (Stacked & Centered) --- */
.form2-jrcta {
    display: flex;
    justify-content: center; /* Center-align the form container */
}

.form2-jrcta .fluentform {
    max-width: 450px; /* Constrain the width for a clean look */
    width: 100%;
}

/* For the stacked layout, center the button */
.form2-jrcta .ff-el-input--submit {
    text-align: center;
    margin-top: 10px; /* Add some space above the button */
}

/* 3. Form Messages (Success/Error)
-------------------------------------------------- */

/* Style for the success message after submission */
.fluentform .ff-message-success {
    background-color: rgba(0, 0, 0, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    padding: 20px !important;
    margin: 0 !important;
    text-align: center;
    font-size: 16px;
}

/**
 * Custom Styles for FluentForms Confirmation "Landing Page"
 *
 * This CSS transforms the default, unstyled confirmation page
 * into a branded, professional-looking experience that matches
 * the BuskersAtlas visual identity.
 */

/* 1. Page Body & Background
-------------------------------------------------- */
/* We target the specific body class FluentForms uses for this page. */
body.ff_landing_page_body {
    background-color: #333333; /* Foundation (Dark Gray) */
    color: #ffffff;
    font-family: 'Inter', sans-serif; /* Assumes 'Inter' font is loaded on your site */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
    padding: 20px;
}

/* 2. Confirmation Message Wrapper
-------------------------------------------------- */
/* This is the main container for the message. */
.ff_landing_form_wrapper {
    background-color: rgba(0, 0, 0, 0.2); /* A darker smoky glass effect */
    border-radius: 12px;
    padding: 50px 60px;
    max-width: 600px;
    width: 100%;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* 3. Confirmation Message Text
-------------------------------------------------- */
.ff_landing_form_wrapper .ff-landing-form-message {
    font-size: 24px;
    line-height: 1.5;
    margin: 0;
    padding: 0;
    color: #ffffff;
    font-weight: 500;
}

/* 4. "Back to Home" Button
-------------------------------------------------- */
/* We'll add a link/button after the message for better user experience. */
.ff_landing_form_wrapper .ff-back-to-home {
    display: inline-block;
    margin-top: 30px;
    background-color: #df5a31 !important; /* Primary Accent (Orange). */
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    padding: 15px 35px !important;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.15);
    transform: translateY(0);
}

.ff_landing_form_wrapper .ff-back-to-home:hover {
    background-color: #e55a30 !important;
    cursor: pointer;
    transform: translateY(-2px);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

/* 5. Hide Unwanted Elements
-------------------------------------------------- */
/* This hides the "Update cookie preferences" link from third-party cookie plugins. */
#open-preferences-center {
    display: none !important;
}
/**
 * END Custom Styles for FluentForms Confirmation "Landing Page"
 ***/

/*    orange button   */
.button-orange,
.button-outline-orange {
  display: inline-block;
  width: 100%;
  max-width: 300px;
  margin: 0.5rem auto; /* spacing + center alignment */
  text-align: center;
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  box-sizing: border-box;
}

.button-orange {
  background-color: #df5a31;
  color: #fff !important;
  border: none;
  transition: background-color 0.2s ease !important;
}

.button-orange:hover {
  background-color: #e75c34 !important;
  color: #fff !important;
}

.button-outline-orange {
  background-color: transparent;
  color: #df5a31 !important;
  border: 2px solid #df5a31;
  transition: all 0.2s ease;
}

.button-outline-orange:hover {
  background-color: #df5a31 !important;
  color: #fff !important;
}

/* Optional: Stack-specific layout for very small screens if needed */
@media (min-width: 601px) {
  .button-pair-horizontal {
    display: flex;
    justify-content: center;
    gap: 1rem;
  }

  .button-pair-horizontal .button-orange,
  .button-pair-horizontal .button-outline-orange {
    margin: 0;
    width: auto;
  }
}


/*** END orange button for pages ***/

/*
 * BuskersAtlas Child Theme Styles
 * ----------------------------------------------------------------------------
 *
 * 1. Header Button Styles
 * This CSS styles the custom Join/Login buttons added to the header.
 *
 * ----------------------------------------------------------------------------
 */

/* 1.1 - Button Container */
/* This container holds our buttons and uses flexbox for alignment. */
.menu-bar-items {
    display: flex;
    align-items: center;
    gap: 10px; /* Creates space between the buttons */
    margin-left: 20px; /* Creates space between the menu and the buttons */
}

/* 1.2 - General Button Styling */
/* Base styles for all header buttons */
.ba-button {
    display: inline-block;
    padding: 8px 18px;
    border-radius: 5px;
    font-weight: bold;
    text-decoration: none;
    font-size: 14px;
    line-height: 1;
    transition: all 0.2s ease-in-out;
    border: 2px solid transparent;
    white-space: nowrap; /* Prevents buttons from wrapping to a new line */
}

/* 1.3 - Primary Button (Join / Logout) */
/* Solid, attention-grabbing style for the main call-to-action. */
#site-navigation .ba-button.ba-button-primary {
    background-color: #df5a31; /* BuskersAtlas Orange */
    color: #ffffff !important;
    border-color: #df5a31;

	/*
 * BuskersAtlas Child Theme Styles
 * ----------------------------------------------------------------------------
 *
 * 1. Header Button Styles
 * This CSS styles the custom Join/Login buttons added to the header.
 *
 * ----------------------------------------------------------------------------
 */

/* 1.1 - Button Container */
.menu-bar-items {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 20px;
}

/* 1.2 - General Button Styling */
.ba-button {
    display: inline-block;
    padding: 8px 18px;
    border-radius: 5px;
    font-weight: bold;
    text-decoration: none;
    font-size: 14px;
    line-height: 1;
    transition: all 0.2s ease-in-out;
    border: 2px solid transparent;
    white-space: nowrap;
}

/* 1.3 - Primary Button (Join / Logout) */
.main-navigation .menu-bar-items .ba-button.ba-button-primary {
    background-color: #df5a31;
    color: #ffffff !important; /* !important needed to override link color */
    border-color: #df5a31;
}

.main-navigation .menu-bar-items .ba-button.ba-button-primary:hover {
    background-color: #e55a30;
    border-color: #e55a30;
    transform: translateY(-1px);
}

/* 1.4 - Secondary Button (Login / My Account) */
/* FINAL FIX: Using a more specific selector based on the theme's structure. */
.main-navigation .menu-bar-items .ba-button.ba-button-secondary {
    background-color: transparent;
    color: #333333 !important; /* !important needed to override link color */
    border-color: #cccccc;
}

.main-navigation .menu-bar-items .ba-button.ba-button-secondary:hover {
    background-color: #f0f0f0;
    color: #000000 !important;
}


/* 1.5 - Mobile Responsiveness */
@media (max-width: 768px) {
    .menu-bar-items {
        display: none;
    }
}
	
/* --- END: BUSKERSATLAS CUSTOM STYLES --- */