/* ==========================================================
   Sri Ganga Vilas – main stylesheet
   STEP 1: Design tokens (from Figma) + base styles
   ========================================================== */

:root {
	/* Colors */
	--gv-red: #ac262d;          /* brand maroon – headings, buttons */
	--gv-red-dark: #8c1f25;     /* hover state */
	--gv-gold: #fcbf00;
	--gv-orange: #e68322;
	--gv-beige: #e8dccf;
	--gv-cream: #fcf8f3;
	--gv-brown: #5f4a3f;
	--gv-brown-light: #8a7a6c;
	--gv-text: #131313;
	--gv-gray: #686868;
	--gv-light: #f6f6f6;
	--gv-white: #ffffff;
	--gv-card-bg: rgba(201, 201, 201, 0.1);

	/* Fonts */
	--gv-font-body: 'Montserrat', sans-serif;
	--gv-font-alt: 'Manrope', sans-serif;
	--gv-font-ui: 'Inter', sans-serif;
	--gv-font-display: 'Instrument Serif', serif;

	/* Radius */
	--gv-radius-sm: 10px;
	--gv-radius-md: 16px;
	--gv-radius-pill: 50px;

	/* Layout */
	--gv-container: 1360px;
	--gv-gutter: 40px;
}

/* ---------- Reset / base ---------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	font-family: var(--gv-font-body);
	font-size: 16px;
	line-height: 1.5;
	color: var(--gv-text);
	background: var(--gv-white);
	-webkit-font-smoothing: antialiased;
}

img,
svg,
video {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}

a:hover {
	color: var(--gv-red);
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 0.5em;
	font-weight: 700;
	line-height: 1.2;
}

p {
	margin: 0 0 1em;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

/* ---------- Layout ---------- */
.gv-container {
	width: 100%;
	max-width: calc(var(--gv-container) + (var(--gv-gutter) * 2));
	margin-inline: auto;
	padding-inline: var(--gv-gutter);
}

/* Section titles – Instrument Serif 64px, maroon, centered */
.gv-section-title {
	margin: 0 0 40px;
	font-family: var(--gv-font-display);
	font-weight: 400;
	font-size: 64px;
	line-height: 1.1;
	color: var(--gv-red);
	text-align: center;
}

/* ---------- Accessibility ---------- */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed;
	top: 10px;
	left: 10px;
	z-index: 9999;
	width: auto;
	height: auto;
	padding: 12px 20px;
	clip: auto;
	background: var(--gv-red);
	color: var(--gv-white);
	border-radius: var(--gv-radius-sm);
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
	:root {
		--gv-gutter: 24px;
	}

	.gv-section-title {
		font-size: 48px;
	}
}

@media (max-width: 640px) {
	:root {
		--gv-gutter: 16px;
	}

	.gv-section-title {
		font-size: 36px;
	}
}

/* ==========================================================
   STEP 2: HEADER
   ----------------------------------------------------------
   1. Variables
   2. Header wrapper
   3. Top row (logo, search, icons)
   4. Navigation menus
   5. Dropdown menus
   6. Mobile buttons
   7. Small laptops (1024px – 1279px)
   8. Tablet & mobile (max-width: 1023px)
   ========================================================== */


/* ----------------------------------------------------------
   1. Variables
   ---------------------------------------------------------- */
:root {
	--gv-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / 24px no-repeat;
}


/* ----------------------------------------------------------
   2. Header wrapper
   ---------------------------------------------------------- */
.gv-header {
	position: relative;
	z-index: 100;
	padding-top: 23px;
	background: #fff;
}


/* ----------------------------------------------------------
   3. Top row – logo | search | icons
   ---------------------------------------------------------- */
.gv-header__top {
	display: grid;
	grid-template-columns: 95px 1fr auto;
	align-items: start;
	column-gap: 30px;
}

/* Logo */
.gv-logo img {
	width: 95px;
	height: auto;
}

/* Search bar */
.gv-search {
	display: flex;
	align-items: center;
	gap: 6px;
	height: 56px;
	margin-top: 17px;
	padding: 0 10px 0 18px;
	background: var(--gv-light);
	border-radius: 8px;
	color: var(--gv-gray);
}

.gv-search input {
	flex: 1;
	min-width: 0;
	height: 100%;
	border: 0;
	outline: 0;
	background: none;
	font-weight: 500;
	font-size: 16px;
}

.gv-search input::placeholder {
	color: var(--gv-gray);
	text-transform: capitalize;
	opacity: 1;
}

/* Account + cart icons */
.gv-icons {
	display: flex;
	gap: 29px;
	margin: 32px 0 0 18px;
}

.gv-icons a {
	position: relative;
	display: flex;
	color: var(--gv-red);
}

/* Cart count badge */
.gv-count {
	position: absolute;
	top: -8px;
	right: -10px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 9px;
	background: var(--gv-red);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
}

.gv-count.is-empty {
	display: none;
}


/* ----------------------------------------------------------
   4. Navigation menus
   ---------------------------------------------------------- */
.gv-nav {
	display: flex;
	justify-content: space-between;
	margin-top: 21px;
	padding: 0 5px 0 9px;
}

.gv-menu {
	display: flex;
	gap: 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gv-menu > li {
	position: relative;
	padding-bottom: 10px;   /* keeps the dropdown open while moving the mouse */
	margin-bottom: -10px;
}

.gv-menu > li > a {
	display: flex;
	align-items: center;
	height: 24px;
	font-size: 18px;
	text-transform: capitalize;
	white-space: nowrap;
}

/* Left menu – red */
.gv-menu--primary > li > a {
	font-weight: 600;
	color: var(--gv-red);
}

/* Right menu – orange */
.gv-menu--secondary {
	gap: 29px;
}

.gv-menu--secondary > li > a {
	font-weight: 500;
	color: var(--gv-orange);
}

/* Down arrow on items that have a dropdown */
.gv-menu > .menu-item-has-children > a::after {
	content: "";
	width: 24px;
	height: 24px;
	margin-left: 1px;
	background: currentColor;
	-webkit-mask: var(--gv-arrow);
	mask: var(--gv-arrow);
}


/* ----------------------------------------------------------
   5. Dropdown menus
   ---------------------------------------------------------- */
.gv-menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 20;
	min-width: 220px;
	margin: 0;
	padding: 10px 0;
	list-style: none;
	background: #fff;
	border: 1px solid var(--gv-beige);
	border-radius: 10px;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
	opacity: 0;
	visibility: hidden;
	transition: 0.2s;
}

.gv-menu--secondary .sub-menu {
	left: auto;
	right: 0;
}

.gv-menu li:hover > .sub-menu,
.gv-menu li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
}

.gv-menu .sub-menu a {
	display: block;
	padding: 8px 18px;
	font-size: 15px;
	font-weight: 500;
	color: var(--gv-text);
}

.gv-menu .sub-menu a:hover {
	color: var(--gv-red);
	background: var(--gv-cream);
}


/* ----------------------------------------------------------
   6. Mobile buttons (hidden on desktop)
   ---------------------------------------------------------- */
.gv-menu-toggle,
.gv-menu-close,
.gv-overlay {
	display: none;
}

.gv-menu-toggle,
.gv-menu-close {
	padding: 6px;
	border: 0;
	background: none;
	color: var(--gv-red);
	cursor: pointer;
}


/* ----------------------------------------------------------
   7. Small laptops (1024px – 1279px): tighter menu so it fits
   ---------------------------------------------------------- */
@media (min-width: 1024px) and (max-width: 1279px) {
	.gv-nav {
		gap: 24px;
	}

	.gv-menu,
	.gv-menu--secondary {
		gap: 16px;
	}

	.gv-menu > li > a {
		font-size: 16px;
	}
}


/* ----------------------------------------------------------
   8. Tablet & mobile (max-width: 1023px)
   ---------------------------------------------------------- */
@media (max-width: 1023px) {

	/* Header wrapper */
	.gv-header {
		padding: 12px 0 14px;
	}

	/* Top row: menu button | logo | space | icons
	   Second row: search */
	.gv-header__top {
		grid-template-columns: auto auto 1fr auto;
		align-items: center;
		gap: 12px 8px;
	}

	.gv-menu-toggle {
		display: flex;
		margin-left: -6px;
	}

	.gv-logo img {
		width: 64px;
	}

	.gv-icons {
		grid-column: 4;
		grid-row: 1;
		gap: 22px;
		margin: 0;
	}

	.gv-search {
		grid-column: 1 / -1;
		grid-row: 2;
		height: 46px;
		margin: 0;
	}

	/* Slide-in menu panel */
	.gv-nav {
		position: fixed;
		inset: 0 auto 0 0;
		z-index: 1001;
		width: min(86vw, 360px);
		margin: 0;
		padding: 60px 24px 32px;
		flex-direction: column;
		justify-content: flex-start;
		gap: 16px;
		background: #fff;
		overflow-y: auto;
		transform: translateX(-105%);
		transition: transform 0.3s;
	}

	.gv-menu-open .gv-nav {
		transform: none;
	}

	.gv-menu-close {
		display: flex;
		position: absolute;
		top: 12px;
		right: 12px;
	}

	/* Menu items – stacked */
	.gv-menu {
		flex-direction: column;
		gap: 0;
	}

	.gv-menu > li {
		padding: 0;
		margin: 0;
		border-bottom: 1px solid var(--gv-light);
	}

	.gv-menu > li > a {
		height: auto;
		padding: 14px 0;
		font-size: 17px;
	}

	.gv-menu > .menu-item-has-children > a::after {
		display: none;
	}

	/* Dropdowns – always open inside the panel */
	.gv-menu .sub-menu {
		position: static;
		min-width: 0;
		padding: 0 0 10px 12px;
		border: 0;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
	}

	.gv-menu .sub-menu a {
		padding: 8px 0;
	}

	/* Dark background behind the open menu */
	.gv-menu-open .gv-overlay {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 1000;
		background: rgba(0, 0, 0, 0.45);
	}

	.gv-menu-open {
		overflow: hidden;
	}
}