/* 
Theme Name:		 Gabriel
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:     gabriel
Tested up to:    7.0.1
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=Poppins:wght@200;400;500;600;800&family=VT323&display=swap'); */

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

@import url('https://fonts.googleapis.com/css2?family=Varela+Round&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
:root {
	--primary-color: #11121a; /* black family */
    	--text-color: #fff; /* #c9c9c9 */
		--accent: #ac0e02; /* maroon */
		--border: #e7e3da; /* grayish */ 

	--hover-color: #112c66; /* cyan blueish family */
	/* maroon #5e0606 or #ac0e02*/
	/* footer2 #913535*/
	
	--p10: .625rem;
	--p20: 1.25rem;
	--p15: .9375rem;
}

*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
} 
html,
body {
	height: 100vh;
	height: 100dvh;
}

html {scroll-behavior: smooth; }

body {
	/* font-family: "Montserrat", sans-serif; 
	font-family: "Varela Round", sans-serif;
	 */
    font-family: "Roboto", sans-serif;
	color: var(--primary-color);
	background-color: var(--text-color);
}
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: 2em;
    margin-block-start: 0.67em;
    margin-block-end: 0.67em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;   
}

h2 {
    display: block;
    font-size: 1.5rem;  /* 24px */
    margin: 0.83rem 0;
    font-weight: 600;
    margin-bottom: var(--p20);
} 

h3 {
    /* font-size: 30px; */
    font-size: 1.17rem;   /* 18.72 */ 
}
h4,
.text-small,
.ptext-small{
    font-size: 1rem;    /* 16px */
    padding: 0;
    margin: 0;
}
.ptext-small {
    text-align: center;
}

h5,
.text-smaller {
    font-size: .90rem;   /* 14.4px */ 
    padding: 0;
    margin: 0;
}
h6 {
    font-size: .67rem;   /* 10.72px */ 
}
p {
    margin: 0 .5rem 0 0; /*0 0 1rem;*/
    padding: 0;
    font-size: 1.1rem;
	line-height: 1.3rem;
}
#ptitle {
    font-size: 1.2rem;
}
.paccent-color {
    color: #2243bc;
}
.alert-warning {
    color: red;
    font-weight: 600;
}
.success {
    font-size: 1.1rem;
    background-color: #bce954;
    width: 260px;
    padding: 0 var(--p20);
    border-radius: 20px;
    margin: 5px; 
}
/* title decorate */
.tdecorate, 
.tdecoratex,
.tdecoratey { 
	font-size: 1.5rem; 
	color: var(--accent); 
	margin: 0 0 1rem;
}
.tdecoratey {
	margin: 0;
}

.tdecorate::before { 
	content: ''; 
	background: var(--accent); 
	height: 5px; 
	width: 30px; /* Changed from 50% to a fixed width so it doesn't take up half the screen */
	display: inline-block; /* Forces it onto the same line as the text */
	vertical-align: middle; /* Centers it vertically relative to the text line */
	margin-right: 15px; /* Adds space between the red line and your text */
	border-radius: 10px;
}
.tdecorate::after { 
	content: ''; 
	background: var(--accent); 
	height: 5px; 
	width: 30px; /* Changed from 50% to a fixed width so it doesn't take up half the screen */
	display: inline-block; /* Forces it onto the same line as the text */
	vertical-align: middle; /* Centers it vertically relative to the text line */
	margin-left: 15px; /* Adds space between the red line and your text */
	border-radius: 10px;
}
/* End - title decorate */



/*==================================================
    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 */

ul {
	list-style: none;
}

ol {
	list-style-position: inside;
}
ul li {
	position: relative;
}

#main-content {	
	/* min-width: 21rem; //no longer set a minimumm width, scale by viewpoint to 1fr for 1 column layout */
	width: 100%;
}

#main-mh {
    min-height: 100vh;  
    min-height: 100dvh;
	display: grid;
	grid-template-columns: 1fr;
}
header {
     text-align: center;
     background-color: var(--text-color);
     position: sticky;
     top: 0;
	
	 z-index: 1000; /* Add this line to force the header to the front */
} 
body.tribe-events-page-template header {
	position: relative;
}
    
header #hd1 {
      padding: var(--p10)  0 var(--p10) 0; 
      
      display: grid;
      grid-template-columns: 1fr;
    
      align-items: center;
      justify-items: center;
      /* text-align: left; */
      row-gap: var(--p20);
}


ul li a {
	display: flex;             /* Align text and SVG side-by-side */
	align-items: center;       /* Vertically center the text and SVG */
	column-gap: 0px;           /* Create a clean space between text and SVG */
	padding: 0.625em 1.563em; /* 10px 25px */
	color: var(--primary-color);

	text-decoration: none;
    /* Forces the layout box to only occupy the space of the text */
    display: inline-block; 
	text-align: left;
	font-size: .94rem; /* 20px */	
}
/* Hide the actual checkbox completely */
#menu-toggle {
  display: none;
}
/* THE MAGIC: If the checkbox is checked, show the flexbox nav items */
/* #menu-toggle:checked ~ #navitem {
  display: flex;
} */


/* #menu-toggle:checked ~ #navitem {
	 display: grid;
} */

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

/* Style the hamburger button wrapper */
.hamburger-btn {
  display: flex;
  flex-direction: column;
  /* justify-content: space-between; / centers the 30px width */
  place-items: center;
  width: 100%;      /* 30px OR 100% of container */
  cursor: pointer;
  padding: 20px 0; /* Gives a nice big click target area */
  box-sizing: border-box;
  background: var(--accent);

  /* ADD THIS SINGLE LINE */
  /* margin: 0 auto;  Centers the 30px box horizontally on the screen */
}
.hamburger-btn svg {
    fill: var(--text-color);
	height: 36px;
	width: 36px;

	transition: transform 0.3s ease; /* Added for the smooth ease effect */
}

#navitem {
	/* background: var(--text-color); */
	color: black;

	display: none; 			/* Hides the menu */
	flex-direction: column; /* Stack links vertically on mobile */
	row-gap: 7px;           /* Clean spacing between vertical mobile links */
	/* align-items: center; */
}
#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 .3s ease;
}	
/* rotate on click */
#navitem li.is-open > a::after {
    transform: rotate(225deg);
}
#navitem li.is-open > a svg {
  transform: rotate(-90deg);
}
#navitem li ul.sub-menu li {
	display: block;
}

/* This class will be added by JavaScript when a user clicks the link on mobile */
/* #navitem li.is-open ul.sub-menu { */
#navitem li.is-open > ul.sub-menu {
  display: block;
}
#navitem li ul.sub-menu {
	width: 100%;
	background-color: var(--text-color);
	position: relative; /* absolute; */
	z-index: 999;
	display: none;
	text-align: left;
}
#navitem li ul.sub-menu li a {
	 padding-left: 40px;  /* Indent text inside dropdown links */
	 display: inline-block;
	 
}	 
#navitem li a:hover {
	/* background-color: var(--text-color); */
	text-decoration: underline;
    text-decoration-color: var(--accent);
    color: var(--accent);
}
#navitem li:hover ul.sub-menu {
	/* display: block; remove to prevent mobile 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);
}

#open-navbar-button {
	display: block;
	background: none;
	border: none;
	padding: 1em;
	margin-left: auto;
	cursor: pointer;
}
 

/* Content */
/*==================================================
    Hero
==================================================*/
.hero3 {
	display: grid;
    place-items: center;
}
.hero3 img {
	display: block;
	width: 100%;
    height: auto;
	max-height: 250px;
	min-height: 250px;
    object-fit: cover;
    object-position: 50% 80%;
    aspect-ratio: 21 / 4.9;
    
    grid-column: 1 / 1;
    grid-row: 1 / 1;    	
}
.hero3 div {
    grid-column: 1 / 1;
    grid-row: 1 / 1;	
}
.hero3 h1 {
    margin: 0;
    font-size: clamp(2rem, 5vw, 3.15rem);
    line-height: 1.1;
    color: var(--text-color);	
}

.hero3 p {
    margin: 12px 0 24px;
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.375rem;	
}
	
.hero3 a {
    display: inline-block;
    padding: 11px 24px;
    border-radius: 3px;
    color: var(--text-color);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .02em;
    transition: transform .15s ease, filter .15s ease;
    text-decoration: none;
    background: var(--accent);	
}	

.hero {
    min-height: 280px;
    background: url("/wp-content/uploads/course10ax1200_.png") 40% 70% / cover no-repeat;
    display: grid;
    place-items: center;
}
/* Golf Course Architecture */
.page-id-119 .hero {
    background: url("/wp-content/uploads/MVGC_0039.png") 40% 70% / cover no-repeat; 
}
/* home */
.home .hero {
    background: url("/wp-content/uploads/header2.png") center / cover no-repeat; 
}
.prates ul li {
    padding-bottom: 1rem;
}
.prates h2 {
    font-size: 1.5rem;
    color: var(--accent);
}
.prates h3 {
    font-size: 1.1rem;
    text-align: center;
}
.ptable { 
   padding: 20px 0;   
}
.ptable table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 70%;
  margin: 0 auto;

}
.ptable  th, td {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}
.ptable tr:nth-child(even) {
  background-color: #dddddd;
}
.ptable .mem {
  background-color: var(--accent);
  color: white;
}
.ptable .cmem { 
 background-color: var(--accent);    
    font-size:1.6em; 
    color: #FFFF00 !important;
    font-weight:900;
}
.ptable .hem {
    text-align: center;
    font-size:1.6em;
    color:#AC0E02
    
}

/*==================================================
    Photo Gallery
==================================================*/
.gold-gallery {
		width: 100%;
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
		justify-items: center;
		gap: 2px;
		padding: 2px;
}

.item {
	max-width: 400px;
}

.item img {
    width: 100%;
    max-width: 100%;
    height: 100%;
    display: block;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}






.hero-overlay {
    width: 100%;
    min-height: 280px;
    display: grid;
    place-items: center;
    background: rgba(20, 49, 21, .15);
}

.hero-content {
    text-align: center;
    color: var(--text-color);
    text-shadow: 0 2px 4px rgba(0,0,0,.55);
}

.hero h1 {
    margin: 0;
    font-size: clamp(2rem, 5vw, 3.15rem);
    line-height: 1.1;
	color: var(--text-color);
}

.hero p {
    margin: 12px 0 24px;
    font-size: clamp(1rem, 2vw, 1.25rem);
}

.hero .button {
    display: inline-block;
    padding: 11px 24px;
    border-radius: 3px;
    color: var(--text-color);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .02em;
    transition: transform .15s ease, filter .15s ease;
	text-decoration: none;
}

.hero .button:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
}

.hero .button-red {
    background: var(--accent);
}

.hero .button-green {
    background: green;
}
/* ---------------- End Hero ---------------- */
/* --------- Three information cards -------- */
.quick-info {
    display: grid;
    grid-template-columns: 1fr;
    width: min(100% - 32px, var(--max-width));
    margin: 20px auto;
}

.info-card {
    min-height: auto;
}

.info-card {
    min-height: 275px;
    padding: 22px;
    background: var(--text-color);
    border: 1px solid var(--border);
    box-shadow: 0 2px 8px rgba(0,0,0,.025);
}

.info-card h2 {
    margin: 0 0 18px;
    text-align: center;
    font-size: 12px;
    letter-spacing: .03em;
}

.event {
    display: grid;
    grid-template-columns: 35px 1fr;
    gap: 10px;
    align-items: center;
    padding: 7px 0;
}

.event-date {
    display: grid;
    place-items: center;
    line-height: 1;
    color: var(--accent);
}

.event-date strong {
    font-size: 12px;
}

.event-date b {
    font-size: 21px;
}

.event > div:last-child {
    display: grid;
    gap: 1px;
}

.event > div:last-child strong {
    font-size: 13px;
}

.event > div:last-child span {
    font-size: 13px;
}

.text-link {
    display: inline-block;
    margin-top: 16px;
    color: var(--accent);
    font-size: 14px;
    font-weight: 800;
}

.location {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.map {
    position: relative;
    width: 100%;
    max-width: 220px;
    height: 160px;
    margin-bottom: 12px;
    overflow: hidden;
    border-radius: 4px;
    background:
        linear-gradient(25deg, transparent 46%, rgba(255,255,255,.75) 47%, rgba(255,255,255,.75) 49%, transparent 50%),
        linear-gradient(-25deg, transparent 54%, rgba(255,255,255,.65) 55%, rgba(255,255,255,.65) 57%, transparent 58%),
        #e5e5d9;
}

.map::before,
.map::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(105deg, transparent 20%, rgba(126,155,114,.25) 21%, rgba(126,155,114,.25) 35%, transparent 36%),
        linear-gradient(15deg, transparent 62%, rgba(117,147,111,.22) 63%, rgba(117,147,111,.22) 82%, transparent 83%);
}

.map-pin {
    position: absolute;
    z-index: 2;
    left: 48%;
    top: 48%;
    color: #b72720;
    font-size: 34px;
    line-height: 1;
    text-shadow: 0 2px 2px rgba(0,0,0,.2);
}

.map-label {
    position: absolute;
    z-index: 3;
    left: 53%;
    top: 55%;
    color: #b72720;
    font-size: 8px;
    font-weight: 800;
    line-height: 1.1;
}

.weather-main {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

.weather-icon {
    font-size: 39px;
    color: #e69c17;
}

.weather-main strong {
    font-size: 35px;
}

.weather > p {
    margin: 0;
    text-align: center;
    font-size: 10px;
}

.weather-details {
    display: grid;
    gap: 1px;
    margin: 9px 0 13px;
    text-align: center;
    font-size: 9px;
}

.forecast {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--border);
    padding-top: 9px;
}

.forecast div {
    display: grid;
    gap: 2px;
    text-align: center;
}

.forecast b {
    font-size: 8px;
}

.forecast strong {
    font-size: 12px;
}
/* --------- End - Three information cards -------- */

/* ------------- Map & Weather Grids ------------- */
.map-grid-container,
.gold-digest-top-50,
.gold-digest-top-50r,
.gold-digest-text2,
.gold-digest-contact,
.gold-wrapper,
.gold-wrapper2 {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	padding: 15px;
}
.gold-wrapper {
	padding: 0 0 15px 0;
	gap: 0;
}

.gold-wrapper2 {
	gap: 20px;
}

.map-grid-item {
	background-color: var(--text-color);
	border-radius: 8px;
	overflow: hidden;
	width: 100%;
	box-sizing: border-box;
	align-self: stretch;
	border: 1px solid var(--border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .025);
    padding: 3rem;
}


/* ---------- Column 1: Upcoming Events ---------- */

.map-content-box {
	display: grid;
	grid-template-rows: 1fr auto;
}

.text-content-wrapper {
	box-sizing: border-box;
}
.text-content-wrapper_hdr {
    margin: 0 0 4px 0;
    text-align: center;
    font-size: 14px;
    letter-spacing: .03em;
}
.text-link {
	display: block;
	padding: 0 24px 24px;
}


/* ---------- Column 3: Weather ---------- */

.weather-box {
	display: grid;
}

.weather-atlas-wrapper {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}


/* ---------- Column 2: Google Map ---------- */

.map-box {
	display: grid;
}

.map-box iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}


/* ----------- End Map & Weather Grids ----------- */


/*==================================================
    Front Page - Section 3
==================================================*/
.gold-digest-top-50 img,
.gold-digest-top-50r img {
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    object-position: 100% 0;
    border-radius: 4px;
    aspect-ratio: 16 / 8;
}

.page-id-119 .gold-digest-top-50 img {
    object-position: center top;
}
.page-id-113 .gold-digest-top-50 img {
    object-position: center;
}
.page-id-140 .gold-digest-text2 .mem-rates {
	display: block;
	width: 100%;
    height: auto;
    border: 2px solid green;
    margin: 0 auto;
    max-width: 400px;	
}
.page-id-140 .gold-digest-text2 .mem-photo {
  padding-top: 30px;	
  display: block;
  width: 100%; /* Spans the full width of its container up to the max width below */
  max-width: 300px; /* Caps the image at your maximum desired size */
  height: auto; 
  margin: 0 auto;	
}

.kanish7 {
	font-size: 1.2rem;
    color: black !important;
    font-weight: 400;
}
/* -------- End - Front Page - Section 3 -------- */

/*  Front Page - Section must-play -------- */
.must-play, .first-tee {
	padding: 0 20px;
}
.gold-digest-text .black {
	color: #000000;
}

/*  End - Front Page - Section must-play -------- */


/*==================================================
    Newsletter
==================================================*/
.gold-digest_newsletter {
    display: grid;
	grid-template-columns: 1fr;
	grid-template-areas:
	    "box2"
	    "box1";
	    
	row-gap: var(--p20);
	padding: 0 20px;
}

.gold-digest_newsletter > aside {
    grid-area: box2;
}
.gold-digest_newsletter > article {
    grid-area: box1;
}
/* End - Newsletter */

/* Zoom */
.zoom-wrapper {
    padding: 20px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    row-gap: 2px;
}
.zoom-btn {
    
}
.zoom-course {
    padding: 20px;
    background-color: var(--accent);
    color: var(--text-color);
    font-size: 1.3rem;
}
.bi-zoom {
    padding: 20px;
    text-align: center;
}
.bi-zoom title {
       background-color: var(--accent);
    color: var(--text-color); 
}

.zoom-wrapper .image-wrap {
    width: 400px;
    flex: 0 0 400px;
    /* margin: 30px 0; */
}

.zoom-wrapper .image {
	width: 100%;
	padding-top: calc(100% / (16/9));
	background-size: 100%;
	background-position: center;
	background-repeat: no-repeat;
	
	border: 1px solid var(--border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .025);
    border-radius: 2px;
	cursor: crosshair;
}

.zoom-wrapper .image1 {
	background-image: url('https://mysteryvalleygolfcourse.com/wp-content/uploads/courseLayout.png');
}

.zoom-wrapper .image2 {
	background-image: url('https://mysteryvalleygolfcourse.com/wp-content/uploads/Scorecard.png');
}

.zoom-wrapper .image3 {
	background-image: url('https://mysteryvalleygolfcourse.com/wp-content/uploads/courseLayout.png');
}

.zoom-wrapper .image:hover {
	background-size: 175%;
}
/* End Zoom */

.side-newsletter,
.side-design {
	background-color: #f7f7ff;
	margin: 0 20px;
	width: 100%;
	height: 100%;
}

.pviewer-btn {
	padding: 0 0 0 10px;
	cursor: pointer;
	text-decoration: underline;
}
.gmanager {
	color: var(--accent);
	font-size: 1.25rem;
	font-weight: 600;
	text-decoration-style: italic;
}
.digestHOO {
	display: grid;
	grid-template-columns: .35fr.45fr;
	font-size: 1.125rem
}
.eepmail {
	margin: 0;
	padding: 0 0 10px;	
}
.eemail, .eephone {
	font-size: 1.1rem;
	font-weight: 600;
	color: #000000;
	text-decoration: none;

}
.eemail:hover {
	color: var(--accent);
}
.eephone {
	font-size: 1.1rem;
	font-weight: 400;
}

.ptb {
	margin:0;
	padding: 20px 0;
	font-weight: 600;
}

.privacy-policy- {
	padding: 0 20px;
}
.privacy.text-center {
	font-size: 12px;
	text-align:center;
}

#mahh-leaders {
	padding: 10px 0 0 0;
}


/* pdf viewer */
.pdf-viewer {
    width: 100%;
    /* aspect-ratio: 8.5 / 11; */
}

.pdf-viewer iframe {
    width: 100%;
    height:75vh;
    border: none;
}
/* end - pdf viewer*/
/* pdf ybadge */
.ybadge
 {
    /* sidebar heading label */
    /* justify-self: start; */
    
    padding: .4rem .8rem;
    border: 0;
    border-radius: 3px;
    
    background-color: var(--primary-color);
    
    color: var(--text-color);
    font-size: .8rem;
    text-transform: uppercase;
}
/* end - pdf ybadge */


/*==================================================
    pages
==================================================*/
#mh-wrapper {
    padding: 0 1rem;
 }
 /* CHECK PAGE to MOVE PADDING FROM #mh-wrapper to a DIFFERENT ELEMENT */

/*==================================================
    404 page
==================================================*/
.e404 {
	display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
	justify-items: center;
}
.error-title {
	margin-bottom: 0;
    color: #1e293b;
    font-weight: 400;
    font-size: 30px;
    line-height: 1.4em;	
}
.error-sub-title {
	font-size: 1.5rem;
}
.search-field-wrapper {
	margin-bottom: 5rem;
}
.search-field {
	padding: 12px 45px 12px 15px;
}
.search-results #mh-wrapper {
	padding: 2rem;
}
/* end - 404 page */

/*==================================================
    Password Protect  page
==================================================*/
.post-password-form {
    padding: 40px;
}
.post-password-form p:nth-of-type(2) {
    padding: 20px;
}
.post-password-form input {
    height: 1.875rem;
}

/*
.post-password-form input[name="post_password"] {
    height: 1.rem;
}
*/
.post-password-form input[type="submit"] {
    background-color: var(--accent);
    color: white;
    margin-left: .3rem;
    padding: 0.625rem 1.25rem 1.5625rem; /* 10px 20px 25px */
}

/* end - Password Protect page */

/*==================================================
    Design
==================================================*/
.gold-digest_design {
    display: grid;
	grid-template-columns: 1fr;
	grid-template-areas:
	    "box1"
	    "box2"
	    "box3";
	    
	row-gap: var(--p20);
	padding: 0 20px;
}

.gold-digest_design .ione {
    grid-area: box1;
}

.gold-digest_design .itwo {
    grid-area: box2;
}
.gold-digest_design > aside {
    grid-area: box3;
}
.ione {
    justify-items: center;
}

.ione h1 {
    margin: 0;
}

.editable-field {
	min-height: 1.5rem;
	padding: .25rem;
	border: 1px solid #ccc;
}

.upload-area {
	display: grid;
	gap: .5rem;
}

.text-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-family: monospace; /* Monospace makes character width exact */
}



.text-field2 {
  width: 340px;  /* Replaces cols="40" */
  height: 80px; /* Replaces rows="5" */
}




/* New dedicated class for the 20x4 textarea behavior */
.textarea-mimic {
	border: 1px solid #ccc;
	padding: 4px;
	overflow-y: auto;
	white-space: pre-wrap; /* Preserves line breaks and wrapping */

	/* 20 Columns Wide (using 'ch' for character width) */
	width: 50ch; 

	/* 4 Rows High (using 'lh' or line-height multiplication) */
	line-height: 1.2em;
	height: calc(1.2em * 5); 

	/* Optional: Allows user resizing like a real textarea */
	resize: both; 
}

.textarea-mimic:focus {
	outline: 1px solid #0056b3;
}
/* custom form for Design */

/* 3. INLINE CSS GRID STYLING */
/* Clean container using CSS Grid setup instead of Bootstrap grid rows */
.itwo .wp-form-grid-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    align-items: end;

    margin: 20px auto;
    padding: 15px;
    background: #fdfdfd;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

.itwo .grid-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.itwo .grid-label {
    font-size: 1rem;
    font-weight: 600;
    color: #46b450; /* Matches your text-success look styling color */
    margin: 0;
}

.itwo .grid-field input,
.itwo .grid-field select {
    padding: 8px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    font-size: 1rem;
    width: 100%;
    box-sizing: border-box;
}

.itwo .grid-submit-wrap {
    display: flex;
    justify-content: flex-start;
}

.itwo .btn-submit {
    background-color: #46b450;
    color: #ffffff;
    border: none;
    padding: 10px 24px;
    font-size: 1rem;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
    width: 100%;
    transition: background-color 0.2s ease;
}

.itwo .btn-submit:hover {
    background-color: #379a3f;
}

.image-btn
.ptitle2 {
    font-size: .875rem;
}

.image-btn:hover {
    color: blue;
    font-weight: 550;
    cursor: pointer;
    
}
/* End - 3. INLINE CSS GRID STYLING */ 

/* End - CUstom form for Design*/

/*    End - Design    */   

/* pages End */
footer {
	/*border-top: 1px solid #ddd;
	margin-top: var(--p20);
	padding: var(--p20) 0;
	text-align: center; */

	align-self: end;
}

.fcpy {
    color: var(--text-color);
    font-size: 1rem;
}

.fcpy a {
    color: var(--text-color);
	text-decoration: none;
}
footer img {
    width: 100%;
    height: auto;
    max-width: 90px;
    min-width: 60px;    
    padding: 20px 0 0 0;
}

footer .mfooter1 {
    background-color: var(--accent);
    color: white;
    font-size: 1.1rem;

    display: grid;
    grid-template-columns: 1fr;
    row-gap: 10px;
    justify-items: center;
}
footer .fcontact1,
footer .fcontact2 {
    width: 100%;
    max-width: 340px;
    justify-self: center;
    text-align: left;
    padding: 0 10px;
}

footer .fcontact1 {
    display: grid;
    row-gap: 8px;
}

footer .fc_street {
    display: grid;
    row-gap: 8px;
}

footer .fsocial {
    display: flex;
    column-gap: 0;
}

footer .fsocial .msm svg {
    transition: transform 0.3s ease;
}
footer .fsocial .msm:hover svg {
    fill: #f3cf7a;
}

footer .mfooter2 {
    background-color: #913535;
    text-align: center;
    padding: 20px;
}
#logoYESS {
    display: block; 
}

/*==================================================
    THE EVENTS CALENDAR
==================================================*/
/*
 * Month View
 * Hide event times.
 * The tooltip and Single Event page display
 * "Safe light" when appropriate.
 */
.tribe-events-calendar-month__calendar-event-datetime {
    display: none;
}
.tribe-events-c-nav__list,
.tribe-events-c-top-bar__nav-list,
.tribe-events-c-view-selector__list,
.tribe-events-calendar-list,
.tribe-events-meta-list {
    background-color: white;
}
/*=== Fix Month View display:
S Sunday, M Monday T Tuesday W Wednesday T Thursday F Friday S Saturday  
===*/
.tribe-events .tribe-events-calendar-month__header-column-title > span[aria-hidden="true"] {
	display: none;
}

.tribe-events .tribe-events-calendar-month__header-column-title .screen-reader-text {
	position: static;
	width: auto;
	height: auto;
	padding: 0;
	margin: 0;
	overflow: visible;
	clip: auto;
	white-space: normal;
	border: 0;
}

/*==================================================
    Weather Atlas
==================================================*/
/* .weather-atlas-wrapper {
	font-size: .75rem !important;
	color: blue;
} */
.weather-atlas-body .daily {
    display: none; /* hide next day on map */
}
/*==================================================*/
/* default background color for content for tester scripts page-urslider-defrag.php */
.bungo {
    background-color: var(--text-color);
}

/* portfolio winner */

/* image, text - cards */
.card-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 500px));
    column-gap: 3em;
    row-gap: 2em;
    margin: 0 auto;
}
.card {
    position: relative;
    display: grid;
    grid-template-rows: subgrid;
    grid-rows: span 3;
    align-self: start;
    gap: 0;
}
.card-image {
    width: 100%;
    padding: var(--p10);
    aspect-ratio: 16 / 9;
    object-fit: cover;
    
}

/* post */
.ph-title {
    text-align: center;
}

/* responsive table */
.table-wrapper {
	width: 100%;
	padding: 1rem;
}

.responsive-table {
	width: 80%;
	border-collapse: collapse;
	margin: 0 auto;
}

.responsive-table caption {
	font-size: 1.25rem;
	font-weight: 700;
	margin-bottom: 1rem;
	text-align: left;
}

.responsive-table thead {
	display: none;
}

.responsive-table tbody tr {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.5rem;

	margin-bottom: 1rem;
	padding: 1rem;

	border: 1px solid #aaa;
	border-radius: 0.5rem;
	background-color: #f5f5f5;
}

.responsive-table tbody td {
	padding: 0.5rem;
	border-bottom: 1px solid #ccc;
}

.responsive-table tbody td:last-child {
	border-bottom: 0;
}
/* responsive table  end */

/* fix for gird overflowing */
#mh-wrapper {
    min-width: 0;
	margin: 0;
	padding:0;
}

/* Back to top */
/* remember to add scroll behavior to html {}
html {scroll-behavior: smooth; }*/
.back-to-top {
	position: fixed;
	bottom: 1rem;
	right: 2rem;
	display: inline-flex;
	align-items: center;
	justify-items: center;
	background-color: #913535;
	color: white;
	border-radius: 0.3rem;
	padding: 0.5rem 0.7rem;
	text-decoration: none;

	transition: 0.2s ease-out;
}

.back-to-top:hover span {
	transform: translateY(-4px);
}


.back-to-top span {
	color: #fff;
	font-weight: 600;
	font-size: 1rem;
	transition: 0.2s ease-out;
}
.back-to-top {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@supports (animation-timeline: scroll()) {
  .back-to-top {
    animation: show-button linear both;
    animation-timeline: scroll(root);
    animation-range: 0px 100px;
  }

  @keyframes show-button {
    0% {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }
    1% {
      visibility: visible;
      pointer-events: auto;
    }
    100% {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }
  }
}
/* End - Back to top */


/* Responsive */

  /* larger smart phones  (520px / 32.5rem */
  @media screen and (min-width: 32.5rem) {
        /* hero */	  
		 .hero {
			min-height: 320px;
		}

		.hero-overlay {
			min-height: 320px;
			padding-inline: 15px;
		}
      
        /* responsive table */
    	.table-wrapper {
    		overflow-x: auto;
    	}
    
    	.responsive-table thead {
    		display: table-header-group;
    	}
    
    	.responsive-table tbody tr {
    		display: table-row;
    		margin: 0;
    		padding: 0;
    		border: 0;
    		background-color: transparent;
    	}
    
    	.responsive-table th,
    	.responsive-table td {
    		padding: 0.75rem;
    		border: 1px solid #aaa;
    		text-align: left;
    	}
    
    	.responsive-table tbody td {
    		display: table-cell;
    	}
    
    	.responsive-table tbody td::before {
    		content: none;
    	}
    
    	.responsive-table thead {
    		background-color: #222;
    		color: var(--text-color);
    	}
    
    	.responsive-table tbody tr:nth-child(even) {
    		background-color: #eee;
    	}
    	/* responsive table  end */
    	
    	/* Post tournament section styling */
        .ptext-small {
            padding: 0 3rem;
        }
}

 /* 2. Tablet Breakpoint (768px ~  48rem and up -- 899px ~56.1875) */
 @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;
        }

		/* Hide the hamburger button on desktop screens */
		.hamburger-btn {
			display: none;
		}
		#navitem .menu-item-has-children:hover > a::after {
            transform: rotate(225deg);
        }
        
        .canto {
			display: flex !important; /* Overrides the mobile display: none */

			flex-direction: row;  /* Automatically flip links horizontally */
			column-gap: 5px;     /* One line to control exact horizontal space */
			align-items: center;  /* Vertically center the items */
			justify-content: center;
        }       
        
		#navitem {
			display: flex !important; /* Overrides the mobile display: none */

			flex-direction: row;  /* Automatically flip links horizontally */
			column-gap: 5px;     /* One line to control exact horizontal space */
			align-items: center;  /* Vertically center the items */
			justify-content: center;
	
		}
		#navitem li ul.sub-menu {
			position: absolute; /* Restore the floating overlay behavior ONLY for horizontal tablet, et al view */
			width: max-content;
			min-width: 170px;
		} 
		#navitem li:hover > ul.sub-menu {	
			display: block; /* hover on tablet + */
		}
	 
        /* hero */		
		.hero,
		.hero-overlay {
			min-height: 265px;
		}	
	 
	 	/* Three information cards */
            .quick-info {
                grid-template-columns: 1.05fr .95fr 1fr;
                gap: 16px;
            }
	 
		/* ------------- Map & Weather Grids ------------- */
        .map-grid-container { 
            grid-template-columns: repeat(3, minmax(0, 1fr)); 
            gap: 24px; 
            padding: 30px; }	 
		/* ----------- End Map & Weather Grids ----------- */
		
		/* ----------- Front Page - Section 3 ----------- */
        .gold-digest-top-50,
        .gold-digest-top-50r {
            grid-template-columns: repeat(2, 1fr);
            column-gap: 20px;
            align-items: stretch; 
        }

        .gold-digest-top-50 img {
            grid-column: 1 / 2;
        }
        .gold-digest-top-50r img{
            grid-column: 2 / 3;
        } 
        
        .gold-digest-top-50 div {
            grid-column: 2 / 3;
        }
        .gold-digest-top-50r div{
            grid-column: 1 / 2;
        }        
        .gold-digest-text2 {
            grid-template-columns: repeat(2, 1fr);
            column-gap: 20px;
            align-items: stretch; 
        }
	    .page-id-140 .gold-digest-text2 {
			justify-items: center;
	 	}
        
	    .gold-digest-contact {
            grid-template-columns: repeat(2, 1fr);
            column-gap: 20px;
            align-items: stretch; 
        }
	 
        /* Newsletter */
        .gold-digest_newsletter {
        	/* minmax(0, 280px) allows the sidebars to shrink if the screen gets tight */
        	grid-template-columns: 1fr minmax(0, 320px);
        	grid-template-areas:
	                "box1 box2";
        	row-gap: var(--p20);
        	padding-top: var(--p10);
        }
        /* End - Newsletter */
        
        
        /* Design */
         .gold-digest_design {
        	grid-template-columns: 1fr 1fr minmax(0, 450px);
        	grid-template-areas:
        	    "box1 box2 box3";
        	row-gap: var(--p20);
        	padding-top: var(--p10)
        }        
        /* End - Design */        
        
        
        /* -------- End - Front Page - Section 3 -------- */

		footer .mfooter1 {
		   display: grid;
           grid-template-columns: minmax(0, 200px) repeat(3,1fr);
           column-gap: 10px;
           row-gap: 0;
         
           justify-content: space-around;
           align-items: center;
        }
        
        footer img {
            padding: 20px 0;
        }
        
		footer .fcontact1,
        footer .fcontact2 {
            width: 100%;
            justify-self: center;
        }
        
        footer .fc_email_text {
            font-size: .9rem;
        }
		
		
        
        /* categories */

        
        /* pages */
 
        
        /* pages End */

		
  }
 /* 3. XX-Lrg Breakpoint (1201px and up) */
 @media screen and (min-width: 75.0625rem) {
		#main-content { 
			max-width: 75em;    /* Caps desktop container at 1200px */
			margin: 0 auto;     /* Centers the layout container */
		} 
  }