/*
 Theme Name:   Gibson RealFi Child
 Theme URI:    https://gibsonrealfigroup.com/
 Description:  Child theme for Gibson RealFi Group, LLC
 Author:       Reno
 Author URI:   https://gibsonrealfigroup.com/
 Template:     gibson-realfi-base
 Version:      1.0.0
 Text Domain:  gibson-realfi-child
*/




/* ========================================= */
/* ===  Mobile-First Styles (All Devices)  === */
/* ========================================= */

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    background-color: #f0f2f5;
    color: #333;
    margin: 0; /* Important: remove default browser margins */
    padding: 0; /* Important: remove default browser padding */
}

/* --- Header Section --- */
.custom-header {
    background-color: #ffffff;
    /* Use padding to create space around the logo.
     * The first value is for top/bottom, the second for left/right. */
    padding: 10px 15px; 
    text-align: center; /* Center the logo */
    border-bottom: 4px solid #000000; /* Adds a 1-pixel solid black line at the bottom */
}

.logo-link img {
    /* Set a max-width for the logo on mobile. 
     * Let's start with a more conservative size. */
    max-width: 150px;
    height: auto;
    width: 100%;
}


.header-tagline {
    font-size: 0.8rem; /* Makes the font smaller */
    font-weight: 600; /* Makes the font less "bulky" */
    color: #666; /* Sets a neutral gray color */
    margin-top: 5px; /* Adds a small margin above it */
    text-transform: uppercase; /* Makes all letters uppercase */
    letter-spacing: 1px; /* Adds a little space between letters */
}

/* --- Main Content Section --- */
.landing-page-wrapper {
    /* We'll use this to style the main body of the landing page */
}

.landing-page-container {
    max-width: 100%;
    margin: 20px 15px; /* Use margins for spacing outside the container */
    background-color: #ffffff;
    padding: 25px; /* Use padding for spacing inside the container */
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* --- Typography --- */
h1, h2, h3 {
    font-weight: 700;
}

h1.entry-title { /* Assuming you add a custom title block inside the editor */
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

p {
    font-size: 1rem;
    line-height: 1.6;
}


/* ========================================= */
/* ===  Footer Styles (All Devices)  === */
/* ========================================= */
.custom-footer {
    background-color: #000000; /* Solid Black Background */
    color: #ffffff; /* White text for contrast */
    text-align: center;
    padding: 10px 10px;
}

.footer-container {
    max-width: 900px;
    margin: 0 auto; /* Center the container */
}

.copyright {
    margin: 0 0 15px 0; /* Add some space below the copyright notice */
    font-size: 0.9rem;
    font-weight: 700; /* Another way to make the text bold */
}

.footer-links {
    /* Style for the links container */
}

.footer-links a {
    color: #007bff; /* A nice, prominent blue for the links */
    text-decoration: none;
    font-size: 0.9rem;
    margin: 0 10px; /* Space between the links */
    transition: color 0.3s ease; /* Smooth hover transition */
}

.footer-links a:hover {
    color: #ffffff; /* Change link color to white on hover */
}

/* ========================================= */
/* ===  Tablet/Desktop Footer Layout  === */
/* ========================================= */
@media screen and (min-width: 768px) {
    .footer-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: left;
    }

    .copyright {
        margin: 0;
    }
}


.header-phone-number {
    display: block; /* Ensures it's on its own line */
    font-size: 1rem;
    font-weight: bold;
    color: #007bff; /* Use a color that stands out */
    text-decoration: none;
    margin-top: 10px; /* Add some space below the tagline */
}


.footer-contact {
    margin-bottom: 10px;
}

.footer-contact p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.2;
    font-weight: bold;
}

.footer-contact a {
    color: #007bff;
    text-decoration: none;
}

@media screen and (min-width: 768px) {
    .footer-container {
        /* Now we'll use Flexbox to arrange the three columns */
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: left;
    }

    .footer-contact,
    .copyright,
    .footer-links {
        flex: 1; /* Give each item equal space */
        text-align: left;
    }

    .copyright {
        margin: 0;
        text-align: center;
    }

    .footer-links {
        text-align: right;
    }
}





/* --- Base Styles (Mobile First) --- */
/* These styles will apply to all devices. */

header {
  display: flex;
  flex-direction: column; /* Stack the nav and contact info on top of each other */
  align-items: center;    /* Center the stacked items horizontally */
  padding: 1rem;
}

.contact-info {
  margin-top: 1rem; /* Add some space between the nav and the phone number */
}

.contact-info a {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #333;
  font-size: 1rem; /* Base font size */
  font-weight: bold;
}

.contact-info .fa-phone-alt {
  margin-right: 0.5rem;
  font-size: 1.2rem;
  color: #007bff;
}








/* --- Media Query for Desktops (768px and up) --- */
/* These styles will override the base styles ONLY on larger screens. */

@media (min-width: 768px) {
  header {
        display: flex;
        justify-content: space-around; /* This creates space on either side of the items */
        align-items: center;
  }

  .contact-info {
    margin-top: 0; /* No need for top margin now that they are side-by-side */
  }

  .contact-info a {
    font-size: 1.2rem; /* Make the font slightly larger for bigger screens */
  }

  .contact-info .fa-phone-alt {
    font-size: 1.5rem; /* Make the icon slightly larger too */
  }
}



/* --- Simple Container for Contact Form --- */

.contact-form-container {
  /* Basic container styles */
  background-color: #f9f9f9;  /* A light gray background to make it stand out */
  border: 1px solid #ddd;      /* A subtle border */
  border-radius: 8px;          /* Rounded corners for a modern look */
  padding: 2rem;               /* Generous padding inside the container */
  margin: 2rem auto;           /* Centers the container and adds margin around it */
  max-width: 600px;            /* The magic: keeps the form from getting too wide */
  box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* A subtle shadow for depth */
}

/* --- Styles for the form elements inside the container --- */
.contact-form-container h3 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  color: #333;
  text-align: center;
}

.contact-form-container p {
  text-align: center;
  color: #666;
  margin-bottom: 2rem;
}

.contact-form-container form {
  display: flex;
  flex-direction: column; /* Stack form elements vertically */
}

.contact-form-container label {
  font-weight: bold;
  margin-bottom: 0.5rem;
  color: #555;
}

.contact-form-container input,
.contact-form-container textarea {
  width: 100%;                  /* Make inputs fill the container */
  padding: 0.75rem;
  margin-bottom: 1.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;       /* Ensures padding doesn't affect width */
  font-size: 1rem;
}

.contact-form-container textarea {
  resize: vertical;             /* Allow users to resize the height, but not the width */
  min-height: 150px;
}

.contact-form-container button {
  padding: 1rem;
  font-size: 1.1rem;
  color: white;
  background-color: #007bff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease; /* A smooth hover effect */
}

.contact-form-container button:hover {
  background-color: #0056b3;
}



/*
 * Custom CSS for the "No Header/Footer" page template.
 * This styles the content on the Privacy Policy and T&C pages.
 */
.content-wrapper {
    /* Set a maximum width for the content to improve readability on large screens. */
    max-width: 800px;
    
    /* Center the content horizontally on the page. */
    margin-left: auto;
    margin-right: auto;
    
    /* Add some padding to the sides to prevent the text from touching the edge of the browser window on smaller screens. */
    padding: 2rem 1rem;
    
    /* Add a little space above and below the content. */
    padding-top: 2rem;
    padding-bottom: 2rem;
}



/*
 * Custom CSS with !important
 * Use this if the form is still wide.
 */
#wpforms-13-container {
    max-width: 600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 2rem !important;
}


/*
 * Styles for the custom form wrapper.
 * This is a reliable way to control the form's width and spacing.
 */
.form-container-wrapper {
    /* Set a max-width for the wrapper */
    max-width: 600px;
    
    /* Center the wrapper horizontally */
    margin: 2rem auto;
    
    /* Add padding inside for spacing */
    padding: 2rem;
    
    /* Optional: Add a subtle border or background to make it stand out */
    border: 1px solid #ddd;
    background-color: #f9f9f9;
    border-radius: 8px;
}