/*
Theme Name: Griffin Theme
Theme URI: https://akhmad.my.id
Author: Akhmad Rifki Maulana
Author URI: https://akhmad.my.id
Description: A lightweight starter theme built specifically to pair with Elementor.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: griffintheme
Tags: elementor, two-columns, flexible-header, custom-colors
*/

/**
 * 1.0 CSS Variables - Griffin Locations Design System
 * ----------------------------------------------------------------------------
 */
:root {
	/* Core Palette */
	--color-charcoal: #2A2A2A;
	--color-warm-stone: #EFECE6; /* Derived from Griffin-like restraint */
	--color-white: #FFFFFF;
	--color-text-muted: #767676;

	/* Accent Palette (From Griffin Locations logo color bar) */
	--color-accent-blue: #34A8C4;
	--color-accent-yellow: #F5C04F;
	--color-accent-pink: #E57388;
	--color-accent-green: #7BC1A8;

	/* Typography */
	--font-heading: 'Cormorant Garamond', serif; /* Strong architectural serif */
	--font-body: 'Inter', sans-serif; /* Clean modern sans serif */

	/* Spacing */
	--spacing-xs: 0.5rem;
	--spacing-sm: 1rem;
	--spacing-md: 2rem;
	--spacing-lg: 4rem;
	--spacing-xl: 8rem;
}

/**
 * 2.0 Base Typography & Body
 * ----------------------------------------------------------------------------
 */
body {
	font-family: var(--font-body);
	font-weight: 300;
	color: var(--color-charcoal);
	background-color: var(--color-white); /* Adjust to warm-stone if desired per section */
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	margin: 0;
	padding: 0;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	font-weight: 500;
	line-height: 1.2;
	color: var(--color-charcoal);
	margin-top: 0;
	margin-bottom: var(--spacing-md);
}

p {
	margin-top: 0;
	margin-bottom: var(--spacing-md);
}

a {
	color: var(--color-charcoal);
	text-decoration: none;
	transition: color 0.3s ease;
}

a:hover {
	color: var(--color-text-muted);
}

/**
 * 3.0 Utility Classes & Layout Principles
 * ----------------------------------------------------------------------------
 * - Restraint over decoration; white space as a design feature.
 * - Strong grid alignment.
 */

/* Container for architectural structure */
.griffin-container {
	max-width: 1400px; /* Generous width for high-end feel */
	margin: 0 auto;
	padding: 0 var(--spacing-md);
}

/* Sections with generous white space */
.griffin-section {
	padding: var(--spacing-xl) 0;
}

.griffin-section--stone {
	background-color: var(--color-warm-stone);
}

/**
 * 4.0 Header & Navigation Base (Griffin Style)
 * ----------------------------------------------------------------------------
 */

.griffin-style-header {
	background-color: transparent; /* Light beige similar to Griffin */
	border-bottom: none;
	position: sticky;
	top: 0;
	width: 100%;
	z-index: 99;
	transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.admin-bar .griffin-style-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .griffin-style-header {
		top: 46px;
	}
}

.griffin-style-header.is-scrolled {
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
	background-color: rgba(246, 245, 241, 0.95);
}

.griffin-header-inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	padding: 1.5rem 3rem;
	max-width: 100%;
	transition: padding 0.3s ease;
}

.griffin-style-header.is-scrolled .griffin-header-inner {
	padding: 0.8rem 3rem;
}

/* Left Section */
.griffin-header-left {
	display: flex;
	align-items: center;
	gap: 1.5rem;
}

.griffin-menu-toggle,
.griffin-search-toggle {
	background: transparent;
	border: none;
	padding: 0;
	cursor: pointer;
	color: var(--color-charcoal);
	display: flex;
	align-items: center;
	justify-content: center;
}

.griffin-hero-sequence-container {
	background:transparent!important;
}

.griffin-hero-bg.seq-active+.griffin-hero-overlay {
	opacity: 0!important;
}

.griffin-menu-toggle:hover,
.griffin-search-toggle:hover {
	opacity: 0.7;
}

.griffin-menu-text {
	font-family: var(--font-body);
	font-size: 0.9rem;
	color: var(--color-charcoal);
	text-transform: capitalize;
	letter-spacing: 0.02em;
	cursor: pointer;
}

/* Center Logo */
.griffin-header-center {
	display: flex;
	justify-content: center;
	align-items: center;
}

.griffin-logo {
	display: flex;
	color: var(--color-charcoal);
	transition: transform 0.3s ease;
}

.griffin-logo svg {
	display: block;
}

.griffin-logo:hover {
	opacity: 0.8;
}

/* Custom Logo Upload Support */
.griffin-header-center .custom-logo-link {
	display: flex;
	align-items: center;
}

.griffin-header-center .custom-logo {
	max-height: 40px; /* Adjust default max-height */
	width: auto;
	height: auto;
	transition: max-height 0.3s ease;
}

.griffin-style-header.is-scrolled .griffin-header-center .custom-logo {
	max-height: 25px;
}

.griffin-style-header.is-scrolled .griffin-logo {
	transform: scale(0.8);
}

/* Right Section */
.griffin-header-right {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 2rem;
}

.griffin-lang-selector a {
	font-family: var(--font-body);
	font-size: 0.9rem;
	color: var(--color-charcoal);
	text-decoration: none;
	padding-bottom: 2px;
	border-bottom: 1px solid var(--color-charcoal);
	transition: opacity 0.3s ease;
}

.griffin-lang-selector a:hover {
	opacity: 0.7;
	color: var(--color-charcoal);
}

.griffin-reserve-btn {
	background-color: #333333;
	color: #ffffff !important;
	font-family: var(--font-body);
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 0.75rem 2rem;
	text-decoration: none;
	border: 1px solid #333333;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.griffin-reserve-btn:hover {
	background-color: #ffffff;
	color: #333333 !important;
}
.custom-logo-link img {
    max-width: 170px;
    height: auto;
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.griffin-header-inner {
		padding: 1rem 1.5rem;
		grid-template-columns: 1fr auto 1fr;
	}
	
	.griffin-style-header.is-scrolled .griffin-header-inner {
		padding: 0.5rem 1.5rem;
	}
	
	.griffin-menu-text {
		display: none;
	}
	
	.griffin-lang-selector {
		display: none;
	}
	
	.griffin-reserve-btn {
		padding: 0.5rem 1rem;
		font-size: 0.75rem;
	}
	
	.griffin-logo svg {
		width: 100px;
		height: 20px;
	}
}

/* Helper for Elementor: remove default margins */
.elementor-page .site-main {
	margin-top: 0;
}

/**
 * 5.0 Search Sidebar Overlay
 * ----------------------------------------------------------------------------
 */

.griffin-sidebar {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 9999;
	visibility: hidden;
	opacity: 0;
	transition: visibility 0.4s, opacity 0.4s;
	display: flex;
}

.griffin-sidebar.is-active {
	visibility: visible;
	opacity: 1;
}

/* Dimmer overlay */
.griffin-sidebar-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.6); /* Darker overlay as seen in screenshot */
	cursor: pointer;
}

/* Sidebar panel */
.griffin-sidebar-content {
	position: relative;
	width: 100%;
	max-width: 450px; /* Width matching the screenshot */
	height: 100%;
	background-color: #ffffff;
	transform: translateX(-100%); /* Slide in from left */
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
	display: flex;
	flex-direction: column;
	padding: 2rem;
	box-shadow: 2px 0 15px rgba(0,0,0,0.1);
}

.griffin-sidebar.is-active .griffin-sidebar-content {
	transform: translateX(0);
}

/* Specific Search Panel adjustments */
.griffin-search-panel {
	max-width: 450px;
}

/* Close button */
.griffin-sidebar-header {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 2rem;
}

.griffin-sidebar-close {
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	color: #666;
}

.griffin-sidebar-close:hover {
	color: #000;
}

/* Search Form Styling */
.griffin-search-form-container {
	margin-top: 2rem;
	padding: 0 1rem;
}

.griffin-search-title {
	font-family: var(--font-body);
	font-size: 0.85rem;
	font-weight: 400;
	letter-spacing: 0.1em;
	color: #333;
	margin-bottom: 1rem;
	text-transform: uppercase;
}

.griffin-search-form {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.griffin-search-input-wrapper {
	position: relative;
	border-bottom: 1px solid #dcdcdc;
	display: flex;
	align-items: center;
}

.griffin-search-field {
	width: 100%;
	border: none;
	background: transparent;
	padding: 0.5rem 0;
	font-family: var(--font-body);
	font-size: 1rem;
	color: #333;
	outline: none;
}

.griffin-search-field::placeholder {
	color: #a0a0a0;
	font-weight: 300;
}

.griffin-search-icon-small {
	position: absolute;
	right: 0;
	display: flex;
	align-items: center;
	color: #a0a0a0;
}

.griffin-search-submit {
	background-color: #000000;
	color: #ffffff;
	border: none;
	padding: 0.8rem 2rem;
	font-family: var(--font-body);
	font-size: 0.85rem;
	font-weight: 400;
	cursor: pointer;
	align-self: flex-end; /* Align right */
	transition: background-color 0.3s;
	min-width: 120px;
}

.griffin-search-submit:hover {
	background-color: #333333;
}

/**
 * 6.0 Menu Sidebar Overlay
 * ----------------------------------------------------------------------------
 */

.griffin-menu-panel {
	max-width: 800px; /* Wider panel for menu */
	padding: 0; /* Remove default padding, handle inside columns */
}

.griffin-menu-columns {
	display: flex;
	height: 100%;
}

/* Left Column (White) */
.griffin-menu-left {
	flex: 1;
	background-color: #ffffff;
	padding: 3rem;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
}

.griffin-menu-logo {
	margin-bottom: 3rem;
}

.griffin-overlay-nav ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.griffin-overlay-nav a {
	font-family: var(--font-body);
	font-size: 1.25rem;
	font-weight: 300;
	color: #333;
	text-decoration: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	transition: opacity 0.3s;
}

.griffin-overlay-nav a:hover {
	opacity: 0.6;
}

/* Add arrow to items with children (optional visual flair if needed, standard WP adds .menu-item-has-children class) */
.griffin-overlay-nav .menu-item-has-children > a::after {
	content: "›";
	font-size: 1.5rem;
	color: #999;
	font-weight: 300;
}

/* Right Column (Cream/Off-white) */
.griffin-menu-right {
	flex: 1;
	background-color: #fbfaf8; /* Very subtle off-white/cream */
	padding: 3rem;
	display: flex;
	flex-direction: column;
}

.griffin-menu-close-only {
	position: absolute;
	top: 3rem;
	right: 3rem;
}

.griffin-menu-right .griffin-sidebar-header {
	margin-bottom: 4rem; /* Push down content */
}

.griffin-regions-container {
	margin-top: 2rem;
}

.griffin-regions-title {
	font-family: var(--font-heading);
	font-size: 1.1rem;
	color: #333;
	margin-bottom: 1.5rem;
}

.griffin-regions-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.griffin-regions-list a {
	display: block;
	font-family: var(--font-body);
	font-size: 0.9rem;
	color: #333;
	text-align: center;
	padding: 1rem;
	border: 1px solid #333;
	text-decoration: none;
	transition: background-color 0.3s, color 0.3s;
}

.griffin-regions-list a:hover {
	background-color: #333;
	color: #fff;
}

@media (max-width: 768px) {
	.griffin-menu-panel {
		max-width: 100%;
	}
	
	.griffin-menu-columns {
		flex-direction: column;
	}
	
	.griffin-menu-right {
		/* Show close button in right column only if not mobile, on mobile we might need to adjust */
	}
}

/**
 * 7.0 Footer Base (Griffin Style)
 * ----------------------------------------------------------------------------
 */

.griffin-style-footer {
	background-color: var(--color-white);
	color: var(--color-charcoal);
	padding-top: var(--spacing-md);
	border-top: 1px solid #eaeaea;
}

/* Footer Top: Newsletter */
.footer-newsletter {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: var(--spacing-lg);
	border-bottom: 1px solid #eaeaea;
	margin-bottom: var(--spacing-lg);
	gap: 2rem;
}

.newsletter-title {
	flex: 0 0 25%;
}

.newsletter-title h2 {
	font-family: var(--font-heading);
	font-size: 1.75rem;
	font-weight: 400;
	margin: 0;
}

.newsletter-text {
	flex: 1;
}

.newsletter-text p {
	font-family: var(--font-body);
	font-size: 0.9rem;
	color: #666;
	margin: 0;
	max-width: 600px;
}

.newsletter-action {
	flex: 0 0 auto;
}

.btn-signup {
	display: inline-block;
	background-color: #333333;
	color: #ffffff !important;
	font-family: var(--font-body);
	font-size: 0.85rem;
	padding: 0.8rem 3rem;
	text-decoration: none;
	transition: background-color 0.3s ease;
}

.btn-signup:hover {
	background-color: #000000;
}

/* Footer Middle: Links Grid */
.footer-links-grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	gap: 2rem;
	margin-bottom: var(--spacing-m);
}

.footer-col h3 {
	font-family: var(--font-heading);
	font-size: 1.5rem;
	font-weight: 400;
	margin-bottom: 1.5rem;
	color: #333;
}

.footer-col h4 {
	font-family: var(--font-body);
	font-size: 0.9rem;
	font-weight: 600;
	margin-bottom: 1rem;
	color: #333;
}

.footer-col h4.spacer-heading {
	visibility: hidden; /* Takes up space to align with columns that have h3 */
	margin-bottom: 1.5rem;
	font-size: 1.5rem; /* Match h3 height roughly */
}

.mt-4 {
	margin-top: 2rem;
}

.footer-menu {
	list-style: none;
	padding: 0;
	margin: 0 0 2rem 0;
}

.footer-menu li {
	margin-bottom: 0.75rem;
}

.footer-menu a {
	font-family: var(--font-body);
	font-size: 0.85rem;
	color: #555;
	text-decoration: none;
	transition: color 0.3s ease;
}

.footer-menu a:hover {
	color: #000;
}

.btn-contact-us {
	display: inline-block;
	font-family: var(--font-body);
	font-size: 0.85rem;
	color: #333;
	padding: 0.6rem 2rem;
	border: 1px solid #ccc;
	text-decoration: none;
	margin-top: 1rem;
	transition: background-color 0.3s ease, border-color 0.3s ease;
}

.btn-contact-us:hover {
	background-color: #f5f5f5;
	border-color: #999;
}

/* Footer Bottom: Logo, Social, Copyright */
.footer-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--spacing-md) 0;
	border-top: 1px solid #eaeaea;
}

.footer-logo {
	flex: 1;
}

.footer-logo .griffin-logo svg {
	width: 100px;
	height: auto;
}

.footer-social {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
}

.footer-social span {
	font-family: var(--font-heading);
	font-size: 1.1rem;
	color: #333;
	margin-right: 0.5rem;
}

.social-icon {
	color: #333;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.3s ease;
}

.social-icon:hover {
	opacity: 0.6;
}

.footer-copyright {
	flex: 1;
	text-align: right;
	font-family: var(--font-body);
	font-size: 0.85rem;
	color: #666;
}

/* Responsive Footer adjustments */
@media (max-width: 992px) {
	.footer-newsletter {
		flex-direction: column;
		text-align: center;
		align-items: center;
	}
	
	.newsletter-text p {
		max-width: 100%;
	}
	
	.footer-links-grid {
		grid-template-columns: 1fr 1fr;
	}
	
	.footer-col h4.spacer-heading {
		display: none;
	}
	
	.footer-bottom {
		flex-direction: column;
		gap: 2rem;
		text-align: center;
	}
	
	.footer-copyright {
		text-align: center;
	}
}

@media (max-width: 576px) {
	.footer-links-grid {
		grid-template-columns: 1fr;
	}
}