/*
 * Theme overrides for the Property Home Services design.
 *
 * custom.css is the design's stylesheet; this file only adds what the
 * WordPress context needs: CMS classes, the admin bar, content entry
 * styles for inner pages and a few integration fixes.
 *
 * TABLE OF CONTENTS:
 * 1. Admin bar & sticky header offset
 * 2. WordPress core alignment/media classes
 * 3. Content entries (pages, posts, search results, comments)
 * 4. Header integration (custom logo, vertical centering)
 * 5. Footer integration (social menu lists)
 * 6. Buttons for CMS forms (search, comment, post navigation)
 */

/*--------------------------------------------------------------
1. Admin bar & sticky header offset
--------------------------------------------------------------*/

.admin-bar .site-header.main-header {
	top: 32px;
}

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

@media screen and (max-width: 600px) {
	/* WP collapses the admin bar; let the sticky header sit under it. */
	.admin-bar .site-header.main-header {
		top: 0;
	}
}


/*--------------------------------------------------------------
2. WordPress core alignment/media classes
--------------------------------------------------------------*/

/*
 * The design assumes Bootstrap's reboot for lists, but the legacy WP
 * stylesheet loads before it and would otherwise indent/offset every
 * menu (nav, drawer, footer, dropdowns). Reset globally, restore
 * spacing only inside long-form content.
 */
ul,
ol {
	margin: 0;
	padding: 0;
}

.entry-content ul,
.entry-content ol,
.comment-content ul,
.comment-content ol,
.page-content ul,
.page-content ol {
	margin: 0 0 1.5em;
	padding-left: 1.5em;
}

.alignleft {
	display: inline;
	float: left;
	margin-right: 1.5em;
}

.alignright {
	display: inline;
	float: right;
	margin-left: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.entry-content a,
.entry-summary a {
	text-decoration: underline;
}

.entry-content .wp-block-image img {
	height: auto;
}

/*--------------------------------------------------------------
3. Content entries (pages, posts, search results, comments)
--------------------------------------------------------------*/

/* The design's banner stands above the 1200px inner content grid.
   Desktop only — custom.css provides its own mobile paddings ≤991px. */
@media screen and (min-width: 992px) {
	.page-header {
		padding: 200px 0 120px;
	}
}

.page-header + .container-inner {
	margin-top: 60px;
}

/*
 * Inner-page container: 1200px max width (narrower than the home page's
 * 1300px design container so long-form content stays comfortable).
 */
.container-inner {
	margin-left: auto;
	margin-right: auto;
	max-width: 1200px;
	padding-left: 15px;
	padding-right: 15px;
	width: 100%;
}

/* Inner-page content grid (single column since v1.2 — no sidebar). */
.page-grid {
	display: grid;
	gap: 40px;
}

.entry-title {
	font-size: 44px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: -0.02em;
	margin-bottom: 20px;
}

/* The design hides the native cursor over headings for its magic-cursor
   effect (front page only). Inner pages don't load GSAP, so restore the
   normal cursor on the banner title. */
.page-header-box h1 {
	cursor: auto;
}

.entry-meta {
	color: var(--text-muted, #64748B);
	font-size: 15px;
	margin-bottom: 16px;
}

.entry-meta a {
	color: var(--brand-green, #00A63E);
}

.post-thumbnail img {
	border-radius: 14px;
	width: 100%;
	height: auto;
}

/* The 404 page renders its own widgets via the_widget(). */
.error-404 .widget {
	background: var(--bg-light, #F8FAFC);
	border: 1px solid var(--border-light, #E2E8F0);
	border-radius: 14px;
	margin: 0 0 24px;
	padding: 24px;
}

.error-404 .widget-title {
	font-size: 18px;
	font-weight: 600;
	letter-spacing: 0.02em;
	margin-bottom: 16px;
	position: relative;
	text-transform: uppercase;
}

.comments-area {
	margin-top: 50px;
}

.comment-list {
	list-style: none;
	margin: 0 0 1.5em;
	padding: 0;
}

.comment-list ol.children {
	list-style: none;
	padding-left: 30px;
}

.comment-body {
	background: var(--bg-light, #F8FAFC);
	border: 1px solid var(--border-light, #E2E8F0);
	border-radius: 12px;
	margin-bottom: 16px;
	padding: 20px;
}

.comment-form .form-control,
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
textarea,
select {
	border: 1px solid var(--border-light, #E2E8F0);
	border-radius: 8px;
	color: var(--text-dark, #1E293B);
	font-family: var(--default-font, "Jost", sans-serif);
	font-size: 16px;
	height: auto;
	max-width: 100%;
	padding: 12px 15px;
	width: 100%;
}

.comment-form .form-control:focus,
input:focus,
textarea:focus,
select:focus {
	border-color: var(--brand-green, #00A63E);
	outline: none;
}

/* Posts navigation styled like the design's buttons. */
.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
	gap: 16px;
	margin: 40px 0 10px;
}

.posts-navigation .nav-previous a,
.posts-navigation .nav-next a,
.post-navigation .nav-previous a,
.post-navigation .nav-next a {
	background: var(--white, #fff);
	border: 1px solid var(--border-light, #E2E8F0);
	border-radius: 10px;
	color: var(--brand-navy, #1A2B4C);
	display: inline-block;
	font-weight: 500;
	padding: 12px 22px;
	transition: all 0.2s ease;
}

.posts-navigation .nav-previous a:hover,
.posts-navigation .nav-next a:hover,
.post-navigation .nav-previous a:hover,
.post-navigation .nav-next a:hover {
	background: var(--brand-green, #00A63E);
	border-color: var(--brand-green, #00A63E);
	color: #fff;
}

/* Header CTA keeps white text in every state (visited links would
   otherwise win the cascade over .btn-primary's color). */
.header-actions .btn-primary,
.header-actions .btn-primary:hover,
.header-actions .btn-primary:focus,
.header-actions .btn-primary:active {
	color: #fff;
}

/* Same guarantee for the design's own CTA buttons. */
.agm-btn-gold,
.agm-btn-gold:hover,
.agm-footer-btn,
.agm-footer-btn:hover,
.btn-default.btn-highlighted,
.btn-default.btn-highlighted:hover {
	color: #fff;
}

.screen-reader-text {
	cursor: auto;
}

/*--------------------------------------------------------------
4. Header integration
--------------------------------------------------------------*/

.brand-logo img,
.agm-footer-logo img,
.custom-logo-link img,
.drawer-logo img {
	max-height: 55px;
	width: auto;
}

.brand-logo .custom-logo-link {
	display: inline-flex;
	align-items: center;
}

.drawer-logo.custom-logo-link img,
.drawer-logo img {
	max-height: 44px;
}

/*--------------------------------------------------------------
4. Header integration
--------------------------------------------------------------*/

/* wp_nav_menu outputs a wrapping <ul>; remove legacy margins so the
   nav stays vertically centered inside the 80px header bar. */
.desktop-menu,
.desktop-menu .nav-links {
	margin: 0;
	padding: 0;
}

.header-nav > * {
	min-width: 0;
}

/* NOTE: .desktop-menu must stay display:block — custom.css hides it at
   ≤1024px in favour of the drawer, and a later display:flex here would
   override that media query (same specificity, later load). */
.brand-logo,
.header-actions {
	display: flex;
	align-items: center;
}

/* Ensure the design's dropdown styles apply to wp_nav_menu output. */
.nav-links .menu-item-has-children {
	position: relative;
}

.nav-links .menu-item-has-children > a::after {
	content: '\f078';
	display: inline-block;
	font-family: 'Font Awesome 6 Free';
	font-size: 10px;
	font-weight: 900;
	margin-left: 6px;
	vertical-align: middle;
}

.nav-links .sub-menu {
	background: var(--white, #fff);
	border-radius: 12px;
	box-shadow: 0 12px 30px rgba(26, 43, 76, 0.12);
	left: 0;
	list-style: none;
	margin: 0;
	min-width: 210px;
	opacity: 0;
	padding: 10px 0;
	position: absolute;
	text-align: left;
	top: 100%;
	transform: translateY(8px);
	transition: all 0.25s ease;
	visibility: hidden;
	z-index: 999;
}

.nav-links li:hover > .sub-menu,
.nav-links li.focus > .sub-menu {
	opacity: 1;
	transform: translateY(0);
	visibility: visible;
}

.nav-links .sub-menu li a {
	color: var(--text-dark, #1E293B);
	display: block;
	font-size: 15px;
	font-weight: 400;
	padding: 8px 22px;
}

.nav-links .sub-menu li a:hover {
	color: var(--brand-green, #00A63E);
}

/*--------------------------------------------------------------
5. Footer integration
--------------------------------------------------------------*/

.agm-social-menu,
.footer-links-list,
.legal-links-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.agm-footer-social .agm-social-menu {
	display: flex;
	gap: 10px;
}

.agm-footer-social .agm-social-menu li a {
	align-items: center;
	background: rgba(0, 166, 62, 0.1);
	border-radius: 50%;
	color: var(--brand-green, #00A63E);
	display: flex;
	height: 40px;
	justify-content: center;
	transition: all 0.2s ease;
	width: 40px;
}

.agm-footer-social .agm-social-menu li a:hover {
	background: var(--brand-green, #00A63E);
	color: #fff;
}

.agm-footer-social .agm-social-menu li a i {
	font-size: 15px;
}

.agm-footer-bottom-links .legal-links-list {
	display: inline;
}

.agm-footer-bottom-links .legal-links-list li {
	display: inline-block;
}

.agm-footer-bottom-links .legal-links-list li a {
	color: #64748B;
	font-size: 12px;
	font-weight: 500;
	transition: color 0.2s ease;
}

.agm-footer-bottom-links .legal-links-list li a:hover {
	color: #00A63E;
}

/* Dot separators between legal links (design uses empty spans). */
.agm-footer-bottom-links a + a::before {
	content: '';
	display: inline-block;
	margin: 0 10px;
	vertical-align: middle;
}

/*--------------------------------------------------------------
6. CMS forms & misc
--------------------------------------------------------------*/

.search-form {
	display: flex;
	gap: 10px;
	max-width: 560px;
}

.search-form .search-submit,
.comment-form input[type="submit"],
.button,
button[type="submit"] {
	background: var(--brand-green, #00A63E);
	border: none;
	border-radius: 8px;
	color: #fff;
	cursor: pointer;
	padding: 10px 20px;
	transition: background 0.2s ease;
}

.search-form .search-submit:hover,
.comment-form input[type="submit"]:hover,
.button:hover,
button[type="submit"]:hover {
	background: var(--brand-green-hover, #008732);
}

/* wp_page_menu fallback gets the same look as the design nav. */
.desktop-menu .menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

body.no-scroll {
	overflow: hidden;
}

/*--------------------------------------------------------------
7. Responsive fixes
--------------------------------------------------------------*/

/* Nav links may wrap to two lines on ~1024–1200px widths. */
@media screen and (max-width: 1199px) and (min-width: 1025px) {
	.nav-links {
		gap: 18px;
	}

	.nav-links a {
		font-size: 14px;
	}
}

/* Content grid collapses; entries and widgets scale down. */
@media screen and (max-width: 991px) {
	.page-grid {
		gap: 32px;
	}

	.entry-title {
		font-size: 32px;
	}

	.comments-area {
		margin-top: 36px;
	}
}

@media screen and (max-width: 575px) {
	.page-header + .container-inner {
		margin-top: 40px;
	}

	.page-grid {
		gap: 24px;
	}

	.entry-title {
		font-size: 26px;
	}

	.posts-navigation .nav-links,
	.post-navigation .nav-links {
		flex-direction: column;
	}

	.comment-body {
		padding: 14px;
	}
}

/* Feature item content: design expects plain <p> styling. */
.features-item-content .features-item-desc p {
	color: var(--text-muted, #64748B);
	font-size: 16px;
	line-height: 1.6em;
	margin: 0;
}

/* ------------------------------------------------------------
 * 8. Floating WhatsApp chat button
 * ---------------------------------------------------------- */
.doon-whatsapp-btn {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 950;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	background: #25D366;
	border-radius: 50%;
	box-shadow: 0 6px 18px rgba(37, 211, 102, 0.35);
	text-decoration: none;
}

.doon-whatsapp-btn i {
	color: #fff;
	font-size: 30px;
	line-height: 1;
	transition: transform 0.25s ease;
}

.doon-whatsapp-btn:hover {
	background: #1EBE5A;
	text-decoration: none;
}

.doon-whatsapp-btn:hover i {
	transform: scale(1.12);
}

.doon-whatsapp-btn:focus-visible {
	outline: 3px solid #1E293B;
	outline-offset: 3px;
}

.doon-whatsapp-tooltip {
	position: absolute;
	right: calc(100% + 12px);
	top: 50%;
	transform: translateY(-50%) translateX(6px);
	background: var(--text-dark, #1E293B);
	color: #fff;
	font-family: 'Jost', sans-serif;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.35;
	white-space: nowrap;
	padding: 8px 14px;
	border-radius: 8px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}

.doon-whatsapp-btn:hover .doon-whatsapp-tooltip,
.doon-whatsapp-btn:focus-visible .doon-whatsapp-tooltip {
	opacity: 1;
	visibility: visible;
	transform: translateY(-50%) translateX(0);
}

@media screen and (max-width: 575px) {
	.doon-whatsapp-btn {
		width: 50px;
		height: 50px;
		right: 16px;
		bottom: 16px;
	}

	.doon-whatsapp-btn i {
		font-size: 26px;
	}

	.doon-whatsapp-tooltip {
		display: none;
	}
}