/* 
Theme Name:		 Enoch
Theme URI:       https://yessconsulting.com/enoch/
Author:			 YESS Consulting Services
Author URI:		 https://yessconsulting.com
Description:	 Fishing 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:     enoch
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');

:root {
	--primary-color: #11121a; /* black family */
	/* --hover-color: #272832;   // dark blue family */
	--accent-color: #2243bc;
	--accent-color2: rgb(13, 110, 253);
	--text-color: #fff; /* #c9c9c9 */
	--hover-color: #112c66; /* cyan blueish family */
	
	--p10: .625rem;
	--p20: 1.25rem;
	--p15: .9375rem;
}

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

body {
	font-family: "Poppins", 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 {
    font-size: 2rem; /* 32px */
    font-weight: 700;
    margin-bottom: var(--p20);    
}

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;
}
h5,
.text-smaller {
    font-size: .90rem;   /* 14.4px */ 
    padding: 0;
    margin: 0;
}
h6 {
    font-size: .67rem;   /* 10.72px */ 
}
p {
    margin: 0 0 24px;
    padding: 0;
}
.paccent-color {
    color: #2243bc;
}
/* contact form 7 */
.wpcf7-text, .wpcf7-select, .wpcf7-textarea, .wpcf7-file, .wpcf7-submit {
    font-size: 1rem;
}
.wpcf7-submit { 
    background-color: var(--primary-color);
    color: #fff;
    
    padding: .4rem .8rem;
    border: 0;
    border-radius: 3px;
}
.wpcf7-submit:hover { 
    background-color: var(--hover-color);
}
ul {
	list-style: none;
}

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

img {
    border-radius: .25rem;
    display: block;
    max-width: 100%;
    height: auto;
}

.img-shadow {
    box-shadow: 3px 2px rgba(0,0,0,.2);
}
.img-cover {
    width: 100%;
    height: 100%;
    
	border-radius: .125rem; /* 2px */
	aspect-ratio: 16 / 9;
	object-fit: cover; 
	object-position: 80% 50%; 
}

.img-round {
    border-radius: .5rem; /* 8px */
}

.img-center {
    object-position: center;
}

.img-left {
	object-position: 80% 50%; 
}

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

#main-mh {
	display: grid;
	grid-template-columns: 1fr;
}
#hdr-group {
    display: grid;
 	grid-template-columns: 1fr;   
}

#hdr-group #hd-sm {
    background-color: var(--text-color);
    padding: .625em 1em;

    display: flex;
    /* flex-wrap: wrap; */
    align-items: center;
}

#hdr-group #hd-sm .hd-sm-div {
        margin-right: auto;		        
}
#hdr-group #hd-sm img {
        width: 60px;
        height: auto;
        max-height: 58px;
    
        box-shadow: none;
}

#hdr-group #hd-sm .sm svg {
        display: block;
        
        width: 1.4rem;
        height: 1.4rem;
                
        fill: var(--accent-color);
		transition: transform 0.3s ease; /* Added for the smooth ease effect */
}

/* hover for the <a> that surrounds the svg */
#hdr-group #hd-sm a.sm:hover svg {
        fill: var(--primary-color);
}

#hdr-group #hd-sm ul.indigo {
		background-color: var(--text-color);
		display: flex;
}
#hdr-group #hd-sm li a:hover {
		background-color: var(--text-color);
}
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: #fff;

	text-decoration: none;
	text-align: left;
	font-size: 16px; /* 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: flex;
}
/* 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(--primary-color);

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

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

#navitem {
	background: var(--primary-color);

	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;
    
        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 {
  display: block;
}
#navitem li ul.sub-menu {
	width: 100%;
	background-color: var(--primary-color);
	position: relative; /* absolute; */
	z-index: 999;
	display: none;
}
#navitem li ul.sub-menu li a {
	 padding-left: 40px;  /* Indent text inside dropdown links */
}	 
#navitem li a:hover {
	background-color: var(--hover-color);
}
#navitem li:hover ul.sub-menu {
	/* display: block; remove to prevent mobile hover */
}

.pointer2 { 
  /* cursor: none; */
}
#open-navbar-button {
	display: block;
	background: none;
	border: none;
	padding: 1em;
	margin-left: auto;
	cursor: pointer;
}
/*
#main-proc {
	height: 100%;

	display: grid;
	grid-template-columns: 1fr;
}	
*/ 


/*
#mahh-grid .orna  img {
	// 555 x 311 
	   - small 136 x 93 
	   - 3 col - 140 x 100 or 140 x 193 
	   - 1 col - 
	    //
	width: 220px;
	height: auto;
	max-width: 220px;

	box-shadow: none;
	margin-right: auto;
}
*/
/* Content */
#main-content h4.widget-title {
	padding-top: var(--p10);
	background-color: #000;
	color: #fff;
	padding: 5px;
	text-align: center;
	    
	font-size: var(--p15);
	text-transform: uppercase;
	/* margin-bottom: 20px; */
}

#main-content .ybadge,
#mahh-grid .orna .tribe-compatibility-container .tribe-events-widget-events-list__header-title {
    justify-self: start;
    
    padding: .4rem .8rem;
    border: 0;
    border-radius: 3px;
    
    background-color: var(--primary-color);
    
    color: #fff;
    font-size: .8rem;
    text-transform: uppercase;
}
#main-content button.yreadmore {
	padding: var(--p10);
    text-align: center;
    background-color: var(--primary-color);
    color: #fff;
    /* border-radius: 10%; */
	border: 1px solid var(--primary-color);

	transition: transform 0.3s ease; 
}
#mahh-grid {
    display: grid;
    grid-template-columns: 1fr;
	grid-template-areas:
		"item2"
		"item1" 
		"item3";
    gap: var(--p10);
    padding-top: var(--p10);
}

#mahh-grid .orna {
	grid-area: item1;
}
#mahh-grid .ornb {
	grid-area: item2;
}
#mahh-grid .ornc {
	grid-area: item3;
}


#mahh-grid .orna .members {
    margin-bottom: var(--p20);
}

#mahh-grid .orna .members img,
#mahh-grid .ornb .members img,
#mahh-grid .ornc .members img,
#missed .item img {
    display: block;
    width: 100%;
    height: auto;
}
#mahh-grid .ornc .members img {
    max-width: 180px;
    margin: 0 auto;
}

#mahh-grid .ornc .widget_text {
    font-family: "Roboto", sans-serif;
    padding: var(--p20);
}
#mahh-grid .ornc .textwidget b {
    font-weight: 600;
}


.tScholarship .logo, 
.tSchedule .logo {
    min-width: 250px;
    max-width: auto;
    height: auto;
    margin: 0 auto;
}

#mahh-tourney3 .mh-twinner {
	display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
#mahh-tourney3 .mh-twinner > div {
    padding: 0 var(--p10);
}

#mahh-grid .orna .asa_r1 {
    padding: var(--p10);
	
	display: grid;
    grid-template-columns: 120px 1fr;
    gap: 1rem;
}
#mahh-grid .orna .members img {
    max-width: 120px;
} 

#mahh-grid .orna .blog-content {
    /* border-bottom: 1px solid blue; */
    padding-bottom: 5px;
}

#mahh-grid .post-date {
    font-family: "Roboto", sans-serif;
    color: var(--primary-color);
    text-align: center;
    font-weight: 500;
    margin-top: var(--p10);
}
#mahh-grid .blog-thumbnail {
    overflow: hidden;
    border-radius: .25rem;
}
#mahh-grid .blog-thumbnail img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;

    box-shadow: none;
}

#mahh-grid .blog-content {
    display: grid;
    align-content: center;
    gap: .5rem;
}

#mahh-grid .blog-content .post-date {
    font-size: 12px;
    color: #636363;
    margin-bottom: 5px;

    text-decoration: none;
    transition: color .3s ease;
}
#mahh-grid .blog-content .post-title {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.1rem;
    margin-bottom: 0;
    color: #232323;
    text-decoration: none;
    transition: color .3s ease;
}
#mahh-grid .blog-content .post-title:hover {
    color: var(--hover-color);
}
#welcome {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--p10);
}

#welcome img {
	border-radius: 2px;
	box-shadow: 3px 2px rgba(0, 0, 0, 0.2);
	
	display: block; 
	width: 100%;
	/* Maintains the original 710x473 aspect ratio automatically */
	height: 100%; 
	
	aspect-ratio: 768 / 300;
	object-fit: cover; 
	object-position: 80% 50%;       /* Precise control: 80% from left, 50% from top */
}

#welcome div { 
	padding: var(--p10); 
}
	
#welcome .yrhdr,
#welcome .yrtext {
	font-size: var(--p15);
	padding: 0;
	}
	
#welcome .yrhdr {
	font-weight: 650;
	margin-bottom: 10px;
	}
#welcome .yrtext {
	text-align: justify;
	}
/* gallery */
#missed {
    padding: 2rem .5rem;
    text-align: center
}
#missed p {
    padding-bottom: 1.7rem;
}
#missed .a8a, 
.cat-wrapper {
	width: 100%;
	display: grid;
	/* grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); */
	grid-template-columns: repeat(auto-fit, minmax(200px, 320px));
	gap: 1rem;
	justify-content: center;
}
.cat-wrapper2 {
	width: 100%;
	display: grid;
	/* grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); */
	grid-template-columns: minmax(200px, 320px);
	grid-auto-rows: auto;
	gap: 1rem;
	justify-content: center;
}
.cat-wrapper,
.cat-wrapper2 {
    text-align: center;
}
.cat-wrapper2 img {
    margin: 0 auto;
}
.a8a_aside {
	width: 100%;
	display: grid;
	/* grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); */
	grid-template-columns: repeat(auto-fit, minmax(180px, 220px));
	gap: 1rem;
	justify-content: center;
}
.a8a_aside img {
    max-width: 150px;
    height: auto;
}
/* side image margin from top*/
.a8a_aside .item {
    display: none;
    margin: var(--p20);
}
/*
html {
    background-color: yellow;
}

#main-content {
    background-color: green;
    outline: 5px solid white;
}
body {
    background-color: blue;
    margin: 0;
    outline: 5px solid red;
}
*/

/* gallery end */
/* pdf */
/*
.page-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.25rem;
}

@media screen and (min-width: 60em) {

	.page-grid {
		grid-template-columns: minmax(15rem, 1fr) minmax(0, 2fr);
	}
}
*/
.pdf-viewer {
    width: 100%;
    /* aspect-ratio: 8.5 / 11; */
}

.pdf-viewer iframe {
    width: 100%;
    height:75vh;
    border: none;
}

/* pdf end */
/* pages */
.watermark-y {
    background: url(/wp-content/uploads/logo_watermark.png) no-repeat center center;
}
.tScholarship {
    margin: 0 1rem;
}
.blue {
    color: #337ab7;
}
.pg-title {
    font-family: "Roboto", sans-serif;
    background-color: var(--primary-color);
    color: white;
    padding: 2rem;
}
#mh-wrapper {
    padding: 0 1rem;
 }
 /* CHECK PAGE to MOVE PADDING FROM #mh-wrapper to a DIFFERENT ELEMENT */
.page #mh-wrapper .mahh-grid-sright { 
    padding: 1rem 0 1rem 1rem;
}
.page #mh-wrapper .mahh-grid-sleft { 
    padding: 1rem 1rem 1rem 0;
}

.page h2 {
    text-align: center;
}
.home #mh-wrapper {
    padding: 0;
}
.mahh-grid-sleft {
    display: grid;
	grid-template-columns: 1fr;
	grid-template-areas:
	    "box2"
	    "box1";
	    
	row-gap: var(--p20);
}

.mahh-grid-sleft > aside {
    grid-area: box1;
}
.mahh-grid-sleft > article {
    grid-area: box2;
}
.mahh-grid-sright {
    display: grid;
	grid-template-columns: 1fr;
	row-gap: var(--p20);
}
.error404 .e404 h1 {
    color: #ff0000;
}

/* pages End */

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

	align-self: end;
}

/*==================================================
    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;
}
/*==================================================*/
/* default background color for content for tester scripts page-urslider-defrag.php */
.bungo {
    background-color: var(--text-color);
}

/* portfolio winner */
#ar6-wrapper {
	/* background-color: #111; */
	font-family: Georgia, Times, "Times New Roman", sans-serif;
	/* padding: 5vh;
	padding: 5dvh; */
	margin-bottom: var(--p10);

	display: grid;
	grid-template-columns: min(400px, 500px);
	justify-content: center;
}
#ar6-wrapper h1 {
		margin: 0;
		font-size: 1.3rem;
		padding: 0.5rem 1rem;
}
#ar6-wrapper img {
		display: block;
		max-width: 100%;
		height: auto;
}

#ar6-wrapper .ar6 {
	border: 1px solid hsla(0, 0%, 100%, 0.75);
	padding: 0.3125rem; /* 5px */

	display: grid;
	grid-template-areas: "rosez";
	place-items: end;
}
#ar6-wrapper .ar6 h1 {
		margin: 0;
		font-size: 1.3rem;
		padding: 0.5rem 1rem;
}
	
#ar6-wrapper .ar6 img {
		grid-area: rosez;

		display: block;
		max-width: 100%;
		height: 100%;
		object-fit: cover;
}
#ar6-wrapper .ar6 .a6text {
		grid-area: rosez;

		width: 100%;
		background-color: hsla(0, 0%, 100%, 0.9);
		text-align: center;
}
/* image, text - grid stacking */
.student-wrapper {
   	/* background-color: #111; 
   	   margin-bottom: var(--p10);
   	   grid-template-columns: min(400px, 500px);
	justify-content: center;
   	*/
   	
	font-family: Georgia, Times, "Times New Roman", sans-serif;

   	border-radius: 1rem;
	display: grid;
	width: 480px;
	grid-template-areas: "enoch";
	place-items: end;
	
	text-align: center;
 
}
.student-wrapper img {
    display: block;
    width: 100%;
    object-fit: cover;
    border-radius: 1rem;
    
    grid-area: enoch;   
}
.student-wrapper .text-content {
    height: max-content;
    width: 100%;
    padding: 1rem 1rem 0 1rem;
    background-color: rgba(255, 255, 255, 0.90);
    color: var(--primary-color);
    font-weight: 600;
    
    grid-area: enoch;
}

.student-wrapper .text-content .sname {
    font-size: 1.5rem;
    font-style: italic;
    
    margin: 0;
}
.student-wrapper .text-content .stitle {
    font-size: 1.2rem;
    
    margin: 0;
}
/* 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;
    
}
/* category grid */
.cat-grid {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 320px));
	gap: 1rem;
	justify-content: center;
	
	border-bottom: 1px solid blue;
    padding-bottom: 1em;
}
.scholarship h2 {
    text-align: center;
    margin-bottom: var(--p20);
}
.scholarship .logo img {
    max-width: 482px;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Prevents squishing/stretching */
    object-position: center; /* Centers the image cropping */
    margin: 0 auto;
 }
.scholarship a {
    text-decoration: none;
    color: var(--primary-color);
}
.scholarship a:hover {
    color: var(--accent-color);
}


.twinner {
    border: 2px solid var(--primary-color);
    border-radius: 3px;
}
.twinner a {
    color: var(--primary-color);
    text-decoration: none;
}
.twinner a:hover {
    text-decoration: underline;
}
.twinner h2 {
    margin: 0;
}
.twinner h3,
.sblog h2 {
    font-size: 1rem;
}
.twinner img {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        object-fit: cover;
        object-position: left top;
}

.twinner .text-center > h3 {
    fonr-size: 1rem;
    padding: 0 .2rem;
}

.twinner .text-center > h2,
.sblog .text-center > h2 {
    color: var(--accent-color);
    font-size: 1.1rem;
    font-style: italic;
    font-weight: 750;
    padding: .625rem;
    justify-self: center;   
}
.twinner .text-center > h6,
.sblog .text-center > h6 {
    font-size: 1.1rem;
    font-weight: 500;
    justify-self: center;
    padding-bottom: var(--p10);

}

.twinner .text-center > p {
    display: none;
}
/* post */
.sblog {
    margin: 0 auto;
    width: 100%;
}

.sblog img {
    padding: .25rem;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;

}
.sblog .student-wrapper img {
    border:none;
}
.sblog h2 {
    margin-bottom: 0;
    text-align: center;
}
.sblog .text-center > h2,
.sblog .text-center > h6 {
    padding: 0;
    margin: 0;
}




/* 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 {
/*	display: grid;
	grid-template-columns: minmax(6rem, 40%) 1fr;
	gap: 1rem;
*/
	padding: 0.5rem;
	border-bottom: 1px solid #ccc;
}

/*
.responsive-table tbody td::before {
	content: attr(data-label);
	font-weight: 700;
}
*/
.responsive-table tbody td:last-child {
	border-bottom: 0;
}
/* responsive table  end */

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

#welcome,
#mahh-grid {
    min-width: 0;
}

#welcome > *,
#mahh-grid > * {
    min-width: 0;
}

/* Responsive */
  /* Smart Phone Breakpoint is better at 400px ~  25rem / 470px ~ 29.375   */
  @media screen and (min-width: 25rem) {
      #mahh-grid {
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr auto;
        	grid-template-areas:
        		"item2 item2"
        		"item1 item3";
            gap: var(--p10);
        }
 
         #mahh-grid .orna .members img {
            margin: 0;
        }  
        
        #mahh-grid .orna .asa_r1 {
            grid-template-columns: 1fr;
        }
        .tScholarship .logo, 
        .tSchedule .logo {
            max-width: 400px;
        }
      
  }
    /* larger smart phones  (500px / 31.25rem */
  @media screen and (min-width: 31.25rem) {
        #mahh-grid .orna .asa_r1 {
            padding: var(--p10);
        	
            grid-template-columns: 120px 1fr;
            gap: 1rem;
            /* margin-bottom: 30px; */
        } 
        #mahh-tourney3 .mh-twinner {
            grid-template-columns: 1fr 1fr;
        }
        
        /* 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: #fff;
    	}
    
    	.responsive-table tbody tr:nth-child(even) {
    		background-color: #eee;
    	}
    	/* responsive table  end */
    	
    	/* Post tournament section styling */
        .ptext-small {
            margin: 0 auto;
            width: 70%;
        }
}
 /* 2. Tablet Breakpoint (768px ~  48rem and up -- 750px ~46.875) */
 @media screen and (min-width: 46.875rem) {
	
		#main-mh {
        	grid-template-rows: auto 1fr auto;
        	column-gap: var(--p10);
        } 

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

			flex-direction: row;  /* Automatically flip links horizontally */
			column-gap: var(--p10);     /* One line to control exact horizontal space */
			align-items: center;  /* Vertically center the items */
			justify-content: center;
			/*
			/ Creates 4 columns that wrap tightly around your link text /
			grid-template-columns: repeat(4, max-content);

			column-gap: 10px; / This handles your exact spacing between the nav items /
			align-items: center; / Vertically centers the items in the navbar /
			justify-items:start;
			*/
		}
		#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 + */
		}
		
        #mahh-grid {
            /* minmax(0, 280px) allows the sidebars to shrink if the screen gets tight */
  			/* grid-template-columns: minmax(180px, 280px) 1fr minmax(180px, 280px); */
  			grid-template-columns: minmax(0, 33%) 1fr minmax(0, 23%);
			gap: var(--p20);
        	grid-template-areas:
        		"item1 item2 item3";
        }		
		
        #welcome {
			/* grid-template-columns: auto minmax(400px,1fr); */
			grid-template-columns: minmax(250px, 55%) 1fr;

			gap: var(--p20); 
        }
        
        #mahh-grid .ornc .members img {
            max-width: 100%;
        }
        #mahh-grid .orna .asa_r1 {
            padding: var(--p10);
        	
            grid-template-columns: 120px 1fr;
            gap: 1rem;
        }
        #mahh-grid .orna .members img {
            max-width: 120px;
        } 
        
        /* categories */
        .cat-grid {
        	border-bottom: none;
            padding-bottom: none;
        }
        /* Post tournament section styling */
        .ptext-small {
            width: 60%;
        }
        
        /* pages */
        .mahh-grid-sleft {
        	/* minmax(0, 280px) allows the sidebars to shrink if the screen gets tight */
        	grid-template-columns: minmax(0, 320px) 1fr;
        	grid-template-areas:
	                "box1 box2";
        	row-gap: var(--p20);
        	padding-top: var(--p10);
        }
        
        .mahh-grid-sright {
        	/* minmax(0, 280px) allows the sidebars to shrink if the screen gets tight */
        	grid-template-columns: 1fr minmax(0, 320px);
        	row-gap: var(--p20);
        	padding-top: var(--p10);        	
        }
        /* side image margin from top*/
        .a8a_aside .item {
            display: block;
            margin: 5rem 0 1em 0;
        }
        
        /* 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 */
		} 
  }