/* ==========================================================================
   GYC Header & Footer
   Ported 1:1 from gulshanyouthclub.com (post-8 kit + post-18 header + post-26 footer)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Alice&family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

:root{
	--gyc-primary:   #F8BF5A; /* gold */
	--gyc-secondary: #262626; /* near-black */
	--gyc-text:      #FFFFFF; /* white */
	--gyc-accent:    #61CE70; /* green */
	--gyc-muted:     #4D4D4D; /* divider / icon-list lines */

	--gyc-font-body:    "Poppins", serif;
	--gyc-font-heading: "Trebuchet MS", Tahoma, sans-serif;
	--gyc-font-nav:     "sans-serif";
	--gyc-font-reference: "ui-monospace", serif; /* matches reference footer font */

	--gyc-container-max: 1140px;
}

*{box-sizing:border-box}

.gyc-header,
.gyc-footer{
	font-family:var(--gyc-font-body);
}

/* ==========================================================================
   HEADER
   ========================================================================== */

.gyc-header{
	background-color:var(--gyc-secondary);
	box-shadow:0 0 21px 0 rgba(65,61,61,.31);
	position:sticky;
	top:0;
	z-index:999;
}

.gyc-header__inner{
	max-width:var(--gyc-container-max);
	margin:0 auto;
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	justify-content:flex-end;
}

.gyc-header__logo{
	width:15%;
	padding:10px 20px;
}
.gyc-header__logo img{
	max-width:87%;
	display:block;
}

.gyc-header__nav{
	width:67%;
	display:flex;
	align-items:center;
	justify-content:flex-end;
	padding:10px 20px;
}

.gyc-nav__menu{
	list-style:none;
	margin:0;
	padding:0;
	display:flex;
	flex-wrap:wrap;
	align-items:center;
}

.gyc-nav__menu > li{
	position:relative;
}

.gyc-nav__menu > li > a{
	display:flex;
	align-items:center;
	gap:6px;
	padding:8px 10px;
	font-family:var(--gyc-font-nav);
	font-size:14px;
	font-weight:500;
	text-transform:uppercase;
	color:var(--gyc-text);
	text-decoration:none;
	white-space:nowrap;
}

/* dropdown chevron — only on items that actually have a sub-menu */
.menu-item-has-children > a::after{
	content:"";
	display:inline-block;
	width:7px;
	height:7px;
	border-right:2.5px solid currentColor;
	border-bottom:2.5px solid currentColor;
	transform:rotate(45deg);
	margin-top:-3px;
	transition:transform .3s ease;
}

.gyc-nav__menu > li:hover > a,
.gyc-nav__menu > li.current-menu-item > a,
.gyc-nav__menu > li.current_page_item > a,
.gyc-nav__menu > li.current-menu-parent > a,
.gyc-nav__menu > li.current-menu-ancestor > a{
	color:var(--gyc-primary);
}

/* dropdowns (desktop hover only — scoped so it never fights the mobile accordion) */
/* @media (min-width:1025px){
	.gyc-nav__menu .sub-menu{
		list-style:none;
		margin:0;
		padding:0;
		position:absolute;
		top:100%;
		left:0;
		min-width:220px;
		background-color:var(--gyc-text);
		box-shadow:0 8px 20px rgba(0,0,0,.15);
		display:none;
		z-index:10;
	}

	.menu-item-has-children:hover > .sub-menu{
		display:block;
	}
} */
/* dropdowns (desktop hover only — scoped so it never fights the mobile accordion) */
@media (min-width:1025px){
	.gyc-nav__menu .sub-menu{
		list-style:none;
		margin:0;
		padding:0;
		position:absolute;
		top:100%;
		left:0;
		width:-moz-max-content;
		width:max-content;
		max-width:320px; /* safety cap so an unusually long label can't run off-screen */
		background-color:var(--gyc-text);
		box-shadow:0 8px 20px rgba(0,0,0,.15);
		display:none;
		z-index:10;
	}

	.gyc-nav__menu .sub-menu a{
		white-space:nowrap;
	}

	.menu-item-has-children:hover > .sub-menu{
		display:block;
	}
}
.sub-menu li a{
	display:block;
	padding:10px 18px;
	font-family:'Trebuchet MS';
	font-size:15px;
	font-weight:500;
	color:var(--gyc-secondary);
	text-decoration:none;
}

.sub-menu li a:hover,
.sub-menu li a:focus{
	background-color:var(--gyc-primary);
	color:var(--gyc-secondary);
}

/* active sub-menu item — stays gold even when not hovered */
.sub-menu li.current-menu-item > a,
.sub-menu li.current_page_item > a{
	background-color:var(--gyc-primary);
}

/* burger toggle (hidden on desktop) */
.gyc-menu-toggle{
	display:none;
	width:52px;
	height:52px;
	margin-left:10px;
	border:0;
	background-color:transparent;
	cursor:pointer;
	position:relative;
	flex-shrink:0;
	align-items:center;
	justify-content:center;
}
.gyc-menu-toggle:hover,
.gyc-menu-toggle:focus,
.gyc-menu-toggle:active{
	background-color:transparent;
	color:inherit;
	outline:none;
}

.gyc-menu-toggle__icon{
	width:30px;
	height:30px;
	fill:var(--gyc-primary);
}

.gyc-menu-toggle__icon--close{
	display:none;
}

.gyc-menu-toggle[aria-expanded="true"] .gyc-menu-toggle__icon--open{
	display:none;
}
.gyc-menu-toggle[aria-expanded="true"] .gyc-menu-toggle__icon--close{
	display:block;
}

/* CTA button */
.gyc-header__cta{
	width:18%;
	display:flex;
	justify-content:flex-end;
	padding:10px 20px;
}

.gyc-button{
	display:inline-flex;
	align-items:center;
	gap:5px;
	background-color:var(--gyc-primary);
	color:var(--gyc-secondary);
	font-family:var(--gyc-font-nav);
	font-size:14px;
	font-weight:600;
	text-transform:uppercase;
	text-decoration:none;
	border-radius:25px;
	padding:13px 25px;
	box-shadow:0 0 0 rgba(255,255,255,.9);
	animation:gyc-pulse 2s infinite;
	white-space:nowrap;
}
.gyc-button svg{
	width:16px;
	height:16px;
	fill:var(--gyc-secondary);
}
.gyc-button:hover,
.gyc-button:focus{
	background-color:var(--gyc-text);
	color:var(--gyc-secondary);
	animation:none;
}

@keyframes gyc-pulse{
	0%{   box-shadow:0 0 0 0 rgba(255,255,255,.9); }
	70%{  box-shadow:0 0 0 10px rgba(255,255,255,0); }
	100%{ box-shadow:0 0 0 0 rgba(255,255,255,0); }
}

/* ==========================================================================
   MOBILE / TABLET ACCORDION NAV PANEL
   (matches reference: white panel, full-width rows, gold highlight on
   current/open item, chevron rotates on open, nested sub-menu indented)
   ========================================================================== */

.gyc-mobile-nav{
	display:none;
	background-color:var(--gyc-text);
	max-height:0;
	overflow:hidden;
	transition:max-height .3s ease;
	width:100%;
}
.gyc-mobile-nav.is-open{
	max-height:calc(100vh - 70px); /* 70px ≈ header height; adjust if your header height differs */
	overflow-y:auto;
	-webkit-overflow-scrolling:touch;
}

.gyc-mobile-nav .gyc-nav__menu{
	flex-direction:column;
	align-items:stretch;
	width:100%;
}

.gyc-mobile-nav .gyc-nav__menu > li{
	width:100%;
}

.gyc-mobile-nav .gyc-nav__menu > li > a{
	width:100%;
	justify-content:flex-start;
	gap:8px;
	padding:10px 20px;
	color:var(--gyc-secondary);
	font-size:15px;
	font-weight:500;
}

.gyc-mobile-nav .menu-item-has-children > a::after{
	border-color:var(--gyc-secondary);
	width:8px;
	height:8px;
}

/* gold highlight: current page + the accordion item that's open */
.gyc-mobile-nav .gyc-nav__menu > li.current-menu-item > a,
.gyc-mobile-nav .gyc-nav__menu > li.current_page_item > a,
.gyc-mobile-nav .gyc-nav__menu > li.current-menu-parent > a,
.gyc-mobile-nav .gyc-nav__menu > li.current-menu-ancestor > a,
.gyc-mobile-nav .menu-item-has-children.is-open > a{
	background-color:var(--gyc-primary);
	color:var(--gyc-secondary);
}
.gyc-mobile-nav .menu-item-has-children.is-open > a::after{
	transform:rotate(225deg);
	margin-top:2px;
}

.gyc-mobile-nav .sub-menu{
	position:static;
	min-width:0;
	box-shadow:none;
	background-color:var(--gyc-text);
	list-style:none;
	margin:0;
	padding:0;
	max-height:0;
	overflow:hidden;
	transition:max-height .35s ease;
}
.gyc-mobile-nav .sub-menu li{
	list-style:none;
}
.gyc-mobile-nav .menu-item-has-children.is-open > .sub-menu{
	max-height:1000px; /* generous cap so longer sub-menus aren't clipped */
}
.gyc-mobile-nav .sub-menu li a{
	padding:10px 20px 10px 30px;
	font-family:var(--gyc-font-nav);
	font-size:15px;
	font-weight:400;
	color:var(--gyc-secondary);
	text-transform:none;
}

/* active mobile sub-menu item */
.gyc-mobile-nav .sub-menu li.current-menu-item > a,
.gyc-mobile-nav .sub-menu li.current_page_item > a{
	background-color:var(--gyc-primary);
}

/* ==========================================================================
   Header — responsive breakpoints
   Mobile accordion nav takes over at tablet width (1024px) and below,
   matching the reference site. The Slot Booking CTA stays visible on
   tablet and is hidden only on phone widths.
   ========================================================================== */

@media (max-width:1024px){
	.gyc-header__inner{ justify-content:space-between; flex-wrap:nowrap; }

	.gyc-header__logo{ width:auto; padding:10px 0 10px 15px; }
	.gyc-header__logo img{ max-width:130px; }

	.gyc-header__nav{ width:auto; justify-content:flex-end; }

	.gyc-nav{ display:none; } /* desktop inline menu hidden, burger shown */
	.gyc-menu-toggle{ display:block; }

	.gyc-header__cta{ width:auto; padding:10px 15px; }

	.gyc-mobile-nav{ display:block; }
}

@media only screen and (max-width: 767px) {
  .gyc-header__logo img {
    max-width: 30%; /* Adjust this value to your preferred phone logo size */
    width: auto;
    height: auto;
  }
}



@media (max-width:600px){
	.gyc-header__cta{ display:none; } /* hidden on phone, matches reference */
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.gyc-footer{
	color:var(--gyc-text);
}

.gyc-footer__top{
	background-color:var(--gyc-secondary);
	padding:40px 0 0;
}

.gyc-footer__inner{
	max-width:var(--gyc-container-max);
	margin:0 auto;
	display:flex;
	flex-wrap:wrap;
}

.gyc-footer__col{
	width:25%;
	padding:10px;
}

.gyc-footer__about{
	width:calc(25% - 15px);
	margin:-15px 15px 0 0;
}

.gyc-footer__about img{
	max-width:115px;
	display:block;
}

.gyc-footer__about p{
	font-family:var(--gyc-font-reference);
	text-align:justify;
	font-weight:400;
	margin:15px 0;
}

.gyc-social{
	list-style:none;
	display:flex;
	gap:15px;
	margin:0;
	padding:0;
	padding-top:20px;
}
.gyc-social a{
	display:flex;
	align-items:center;
	justify-content:center;
	width:50px;
	height:50px;
	border-radius:2px;
	background-color:var(--gyc-muted);
	transition:background-color .3s;
}
.gyc-social a:hover{ background-color:var(--gyc-primary); }
.gyc-social svg{ width:25px; height:25px; fill:var(--gyc-text); }

.gyc-footer__col h5{
	font-family:var(--gyc-font-heading);
	font-weight:600;
	font-size:18px;
	text-transform:uppercase;
	color:var(--gyc-primary);
	margin:0 0 10px;
}

.gyc-footer__col .gyc-incorp{
	line-height:24px;
}
.gyc-footer__col .gyc-incorp span{ color:var(--gyc-text); }

.gyc-divider{
	border:none;
	border-top:2px solid var(--gyc-text);
	width:25%;
	margin:15px 0 16px;
}

.gyc-icon-list{
	list-style:none;
	margin:0;
	padding:0;
}
.gyc-icon-list li{
	padding-top:8px;
	margin-top:8px;
	border-top:1px solid var(--gyc-muted);
}
.gyc-icon-list li:first-child{
	margin-top:0;
	border-top:0;
}
.gyc-icon-list a{
	display:flex;
	align-items:center;
	gap:8px;
	color:var(--gyc-text);
	text-decoration:none;
	font-family:var(--gyc-font-reference);
	font-size:16px;
	transition:color .3s;
}
.gyc-icon-list a:hover{ color:var(--gyc-primary); }
.gyc-icon-list svg{
	width:14px;
	height:14px;
	fill:var(--gyc-text);
	flex-shrink:0;
}
.gyc-icon-list--plain a,
.gyc-icon-list--plain span{
	display:block;
	font-family:var(--gyc-font-reference);
	font-size:16px;
}

.gyc-map{
	border-radius:0;
	overflow:hidden;
}
.gyc-map iframe{
	width:100%;
	height:272px;
	border:0;
	display:block;
}

.gyc-footer__rule{
	background-color:var(--gyc-secondary);
	margin-left:calc(50% - 50vw);
	padding-top:25px;
}
.gyc-footer__rule hr{
	max-width:var(--gyc-container-max);
	margin:0 auto;
	border:none;
	border-top:1px solid var(--gyc-muted);
}

.gyc-footer__bottom{
	background-color:#262626;
	color: #F8BF5A;
	padding:20px 0;
}
.gyc-footer__bottom p{
	max-width:var(--gyc-container-max);
	margin:0 auto;
	text-align:center;
	font-family:var(--gyc-font-heading);
	font-size:13px;
	font-weight:100;
}

h5.gyc-incorp {
    padding-top: 30px;
}

.gyc-footer__payment{
	background-color:#FFFFFF;
	padding:15px 0;
	margin-left:calc(50% - 50vw);
}
.gyc-footer__payment img{
	width:100%;
	max-width:none;
	margin:0;
	display:block;
}

/* ==========================================================================
   Footer — responsive breakpoints
   ========================================================================== */

@media (max-width:767px){
	.gyc-footer__top{ padding:20px; }
	.gyc-footer__inner{ padding:0; }
	.gyc-footer__col{ width:100%; }
	.gyc-footer__about{ margin:0; }
	.gyc-footer__about img{ max-width:120px; }
	.gyc-footer__payment{ padding:10px 0; }
}