/* 
Theme Name:		 Nolan
Theme URI:       https://yessconsulting.com/gabriel/
Author:			 YESS Consulting Services
Author URI:		 https://yessconsulting.com
Description:	 Golf Membership Website theme for 2026. It is designed to take full advantage of the flexibility 
         of a responsive design on multiple devices
Version:		 2.4.2
License:         GNU General Public License v2 or later
License URI:     http://www.gnu.org/licenses/gpl-2.0.html                 
Tags:            blog, multi-column, custom-background, custom-colors, custom-logo, custom-menu, editor-style, featured-images, 
         footer-widgets, full-width-template, sticky-post, theme-options, accessibility-ready, WordPress Native Code
Text Domain:     nolan
Tested up to:    7.1.3
Requires PHP:    8.3.30 (Supports 64bit values)
Requires mysqli: mysqlnd 8.3.30


All files, unless otherwise stated, are released under the GNU General Public
License version 2.0 (http://www.gnu.org/licenses/gpl-2.0.html)

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned
with others.
*/

@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");

:root {
    --primary-color: #333;
    --white: #fff;

    --accent: #008037;
    /* green */
    --hover: #7ED957;
    --border: #e7e3da;

    --p10: .625rem;
    --p14: .875rem --p18: 1.125rem --p20: 1.25rem;
    --p26: 1.625 --menu-speed: .5s;
}

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    height: 100vh;
    height: 100dvh;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Roboto", sans-serif;
    color: var(--primary-color);
    background-color: var(--white);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #333;
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    line-height: 1.25;
    margin: 0;
    padding: 0;
}

h1 {
    display: block;
    /* font-size: 1.875rem; // 30px; 
    margin-block-start: .67em;
    margin-block-end: .67em;
    font-weight: bold;
    */
    font-size: 2.5rem;
    /* 40px; */

    font-weight: bold;
    line-height: 1.2em;
    /* 19.2px */
    color: var(--accent);
}

h2 {
    /*          font-size: 1.5625; // 25px; 
    line-height: 1.7rem;
    margin: 0 0 .83rem 0;
    font-weight: 600;
    margin-bottom: var(--p20);
    color: var(--accent);
*/
    font-size: 2.2rem;
    /* 35.2px; */
    font-weight: bold;
    line-height: 1.2em;
    /* 19.2px */
    color: var(--accent);
}

h3 {
    font-size: 1.17rem;
}

p {
    /*            
    margin: 0 .5rem 1rem 0;
    padding: 0;
    font-size: 1.1rem;
    line-height: 1.3rem;
*/
    font-size: 1.125rem;
    /* 18px; */
    font-weight: 400;
    line-height: 1.625rem;
    /* 26px; */
    color: #333;
    text-align: justify;
    margin: 0 0 1.1rem 0;
    padding: 0;
}

ul {
    list-style: none;
}

ol {
    list-style-position: inside;
}

ul li {
    position: relative;
}

#main-content {
    width: 100%;
}

#main-mh {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    grid-template-columns: 1fr;
}

header {
    text-align: center;
    background-color: var(--white);
    position: sticky;
    top: 0;
    z-index: 1000;
}

header #hd1 {
    padding: var(--p10) 0;
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    justify-items: center;
    row-gap: var(--p20);
}

ul li a {
    display: inline-block;
    padding: .625em 1.563em;
    color: var(--primary-color);
    text-decoration: none;
    text-align: left;
    font-size: .94rem;
}

.tac {
    text-align: center;
}

.taj {
    text-align: justify;
}

/*==================================================
    Psudo-element - line
==================================================*/
.title-with-line {
    position: relative;
    /* 1. Establishes the positioning context */
    display: inline-block;
    /* 2. Constrains width to the text length (optional) */
    margin-bottom: 40px;
    /* 3. Leave extra breathing room below the element for the line */
}

.title-with-line::after {
    content: "";
    /* 4. Empty quotes are required for pseudo-elements to show up */
    position: absolute;
    /* 5. Positions the line relative to the title */
    left: 0;
    /* 6. Starts the line at the left edge of the text */
    bottom: -20%;
    /* 7. Drops the line approx 20% down past the text box baseline */

    width: 60px;
    /* Adjust to your desired line length (e.g., 50px, 100%, etc.) */
    height: 5px;
    /* Adjust to your desired line thickness */
    background-color: var(--accent);
    /* Adjust to your desired line color */
}

.hr-title-line {
    background-color: var(--accent);
    height: 5px;
    width: 60px;
    margin: 0 auto;
}

.hr-title {
    padding: 0 0 15px 0;
}

.hr-title-after {
    padding: 15px 0 0 0;
}

/* End - Psudo-element - line  */


/*==================================================
    Nav Menu
==================================================*/
#menu-toggle {
    display: none;
}

#menu-toggle:checked~#hd1 #navitem {
    display: grid;
    text-align: left;
}

.hamburger-btn {
    display: flex;
    flex-direction: column;
    place-items: center;
    width: 100%;
    cursor: pointer;
    padding: 20px 0;
    background: var(--accent);
}

.hamburger-btn svg {
    fill: var(--white);
    height: 36px;
    width: 36px;
    transition: transform .3s ease;
}

#navitem {
    color: black;
    display: none;
    flex-direction: column;
    row-gap: 7px;
}

/* Dropdown arrows */
#navitem .menu-item-has-children>a::after {
    content: "";
    display: inline-block;
    width: .45em;
    height: .45em;
    margin-left: .45em;
    margin-bottom: .15em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--menu-speed) ease;
}

#navitem li.is-open>a::after {
    transform: rotate(225deg);
}

#navitem li.is-open>a svg {
    transform: rotate(-90deg);
}

/* Mobile-first dropdowns */
#navitem li ul.sub-menu {
    display: block;
    width: 100%;
    background-color: var(--white);
    position: relative;
    z-index: 999;
    text-align: left;

    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;

    transition:
        max-height var(--menu-speed) ease,
        opacity var(--menu-speed) ease,
        visibility 0s linear var(--menu-speed);
}

#navitem li.is-open>ul.sub-menu {
    max-height: 60rem;
    visibility: visible;
    opacity: 1;

    transition:
        max-height var(--menu-speed) ease,
        opacity var(--menu-speed) ease,
        visibility 0s;
}

#navitem li ul.sub-menu li {
    display: block;
}

#navitem li ul.sub-menu li a {
    padding-left: 40px;
    display: inline-block;
}

#navitem li a:hover {
    text-decoration: underline;
    text-decoration-color: var(--accent);
    color: var(--accent);
}

#navitem li.current-menu-item>a {
    text-decoration: underline;
    text-decoration-color: var(--accent);
    color: var(--accent);
}

/* End - Nav Menu */


#mh-wrapper {
    min-width: 0;
    margin: 0;
    padding: 0;
}

/*==================================================
    layout image text - layout text image
==================================================*/
.gold-img-txt,
.gold-txt-img,
.gold-txt {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 15px;
}

.gold-img-txt img,
.gold-txt-img img {
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 5;
    object-fit: cover;
    object-position: 0 30%;
}

/* End - layout image text  */

/*==================================================
    Brands
==================================================*/
.lg-brands {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    justify-items: center;
    align-items: center;
    gap: 1rem;
}

.lg-brands img {
    display: block;
    width: 100%;
    /* Spans the full width of its container up to the max width below */
    max-width: 70px;
    /* Caps the image at your maximum desired size */
    min-width: 80px;
    /* Keeps the image from shrinking too small */
    height: auto;
}

/* end - brands */

/*==================================================
    Footer Layout
==================================================*/
footer {
    align-self: end;
}

.footer-grid {
    display: grid;
    grid-template-areas: "stack";
    place-items: center;
    /* Centers your text div automatically */
}

/* Force all three elements into the exact same grid area */
.footer-grid-img,
.blue-overlay,
.centered-div {
    grid-area: stack;
}

.footer-grid-img {
    width: 100%;
    height: 100%;
    max-height: 320px;
    object-fit: cover;

    /*  
    max-width: 100%;
    height: auto;
    display: block;
*/
}

/* The overlay sits perfectly on top of the image because of source order */
.blue-overlay {
    width: 100%;
    height: 100%;
    /*  background-color: rgba(0, 0, 255, 0.5);
    Blue with 0.5 opacity */
    background-image: linear-gradient(0deg, #4A8A2F 0%, rgba(0, 128, 55, 0.85) 100%);
    /* opacity: 1; */
    transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
    z-index: 1;
}

/* Your centered div sits on the very top */
.centered-div {
    z-index: 2;
    color: white;
}

.footer-tri {
    width: 100%;
    display: grid;
    grid-auto-rows: 1fr;
}

.footer1 {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.footer1 img {
    width: 100%;
    height: 100%;
    max-width: 250px;
    object-fit: cover;
}

/* end - footer layout */

/*==================================================
    CONTACT FORM 7
==================================================*/
/* Force the entire form and everything inside it to sit below your navbar */
.wpcf7-form,
.wpcf7-form * {
    z-index: 10 !important;
}

.wpcf7 {
    font-family: "Roboto", sans-serif;
    background-color: var(--text-color);
    /* border: 2px solid #0f0; */
    max-width: 450px;
}

.wpcf7-form p,
.wpcf7-form .form-group {
    margin: 0 !important;
    padding: 0 !important;
}

/* 2. Control the exact spacing between fields here */
.wpcf7-form-control-wrap {
    display: block;
    margin-bottom: 8px;
    /* Change this number to control the spacing */
}

.wpcf7-text,
.wpcf7-email,
.wpcf7-select,
.wpcf7-textarea,
.wpcf7-file,
.wpcf7-submit {
    font-size: 1.1rem;
    width: 100%;
    height: 40px;
    padding: 5px;
}

.wpcf7-submit {
    background-color: var(--accent);
    color: var(--text-color);
    border-radius: 3px;
}

.wpcf7-submit:hover {
    background-color: var(--text-color);
    color: var(--accent);
}

/* End - contact form 7 */




/*==================================================
           Responsive
==================================================*/

    /* Tablet navigation */
    @media screen and (min-width: 48rem) {
        #main-mh {
            grid-template-rows: auto 1fr auto;
            column-gap: var(--p10);
        }
    
        header #hd1 {
            grid-template-columns: repeat(2, auto);
            align-items: center;
            justify-items: center;
        }
    
        /*==================================================
            Nav Menu
        ==================================================*/
        .hamburger-btn {
            display: none;
        }
    
        #navitem .menu-item-has-children:hover>a::after {
            transform: rotate(225deg);
        }
    
        #navitem {
            display: flex !important;
            flex-direction: row;
            column-gap: 5px;
            align-items: center;
            justify-content: center;
        }
    
        /* Tablet dropdowns open on hover */
        #navitem li ul.sub-menu {
            display: none;
            position: absolute;
            width: max-content;
            min-width: 170px;
            max-height: none;
            overflow: visible;
            visibility: visible;
            opacity: 1;
            transition: none;
            background-color: var(--white);
        }
    
        #navitem li:hover>ul.sub-menu {
            display: block;
        }
    
        /* End - Nav Menu */
        /*==================================================
        Layout Image - Text, Text - Image
    ==================================================*/
        /*   */
        .gold-img-txt {
            grid-template-columns: .7fr 1fr;
            column-gap: 50px;
            align-items: stretch; //the grid area stretches to the height required by your text.
    
            margin: 0;
            padding: 40px 50px 40px 0;
        }
    
        .gold-txt-img {
            grid-template-columns: 1fr .7fr;
            column-gap: 50px;
            align-items: stretch; //the grid area stretches to the height required by your text.
    
            margin: 0;
            padding: 40px 0 40px 50px;
        }
    
    
        .gold-img-txt img {
            border-radius: 0 0 0 70%;
            grid-column: 1 / 2;
        }
    
        .gold-txt-img img {
            grid-column: 2 / 3;
        }
    
        .gold-img-txt div {
            grid-column: 2 / 3;
        }
    
        .gold-txt-img div {
            grid-column: 1 / 2;
        }
    
        /* End - layout image text  */
    }
    
    /* Desktop+ */
    @media screen and (min-width: 75.0625rem) {
        #main-content {
            max-width: 75em;
            margin: 0 auto;
        }
    }