/*
Theme Name: Al Hafeed Blocks
Theme URI: https://alhafeedinteriors.com
Author: Al Hafeed Interior W.L.L.
Description: Block theme sample - the About page of alhafeedinteriors.com rebuilt with native WordPress blocks. Colours, fonts and spacing live in theme.json; every section is an editable pattern.
Version: 0.1.0
Requires at least: 6.6
Requires PHP: 7.4
License: Proprietary
Text Domain: alhafeed-blocks
*/

:root {
	--ah-ease: cubic-bezier(.25,.46,.45,.94);
	--ah-trans: 0.42s cubic-bezier(.25,.46,.45,.94);
	--ah-gutter: clamp(24px, 5.5vw, 80px);
}

body { overflow-x: hidden; -webkit-font-smoothing: antialiased; }
/* Full-width sections sit edge to edge, like the static site */
.wp-site-blocks > *, .wp-block-post-content > .alignfull { margin-block: 0 !important; }
img { display: block; }

/* Gold italic accent inside any heading (type in the editor with Ctrl+I) */
:where(h1, h2, h3, .ah-quote-text) em { font-style: italic; color: var(--wp--preset--color--gold); }

/* ---------- Brand block styles (registered in functions.php) ---------- */
.is-style-section-label {
	display: inline-flex !important; align-items: center; gap: 10px;
	font-size: 11px !important; font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; line-height: 1.4;
}
.is-style-section-label::before { content: ''; display: block; width: 28px; height: 1px; background: currentColor; }

.is-style-watermark {
	position: absolute; top: 50%; pointer-events: none; user-select: none; white-space: nowrap; margin: 0 !important;
	font-family: var(--wp--preset--font-family--display); font-weight: 300; line-height: 1;
	color: rgba(255,255,255,0.022); z-index: 0;
}

.wp-block-button__link { transition: var(--ah-trans); }
.is-style-ghost-white .wp-block-button__link { background: transparent !important; color: #fff !important; border-color: rgba(255,255,255,0.45) !important; }
.is-style-ghost-white .wp-block-button__link:hover { background: rgba(255,255,255,0.08) !important; border-color: #fff !important; }
.is-style-ghost-navy .wp-block-button__link { background: transparent !important; color: var(--wp--preset--color--navy) !important; border-color: var(--wp--preset--color--navy) !important; }
.is-style-ghost-navy .wp-block-button__link:hover { background: var(--wp--preset--color--navy) !important; color: #fff !important; }
.is-style-ghost-gold .wp-block-button__link { background: transparent !important; color: var(--wp--preset--color--gold) !important; }
.is-style-ghost-gold .wp-block-button__link:hover { background: var(--wp--preset--color--gold) !important; color: var(--wp--preset--color--navy) !important; }

/* ---------- Header ---------- */
.ah-header {
	position: sticky; top: 0; z-index: 200; height: 72px;
	background: rgba(10,22,40,0.96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid rgba(201,168,76,0.2); transition: border-color 0.5s var(--ah-ease);
}
.ah-header.is-scrolled { border-bottom-color: var(--wp--preset--color--gold); }
.admin-bar .ah-header { top: 32px; }
.ah-header .ah-logo img { height: 34px !important; width: auto !important; }
.ah-header .wp-block-navigation { font-size: 11px; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; }
.ah-header .wp-block-navigation-item__content { color: rgba(255,255,255,0.8); position: relative; padding-bottom: 3px; }
.ah-header .wp-block-navigation-item__content:hover,
.ah-header .current-menu-item > .wp-block-navigation-item__content { color: #fff; }
.ah-header .wp-block-navigation > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
	content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background: var(--wp--preset--color--gold); transition: width var(--ah-trans);
}
.ah-header .wp-block-navigation-item:hover > .wp-block-navigation-item__content::after,
.ah-header .current-menu-item > .wp-block-navigation-item__content::after { width: 100%; }
.ah-header .wp-block-navigation__submenu-container {
	background: rgba(7,16,32,0.98) !important; border: 1px solid rgba(201,168,76,0.18) !important; border-top: 2px solid var(--wp--preset--color--gold) !important;
	padding: 8px 0 !important; min-width: 260px !important;
}
.ah-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-size: 10px; color: rgba(255,255,255,0.55); padding: 12px 22px !important; transition: color .25s, padding-left .25s, background .25s;
}
.ah-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--gold); background: rgba(201,168,76,0.055); padding-left: 28px !important; }
.ah-header .wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--navy) !important; color: #fff !important; }
.ah-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-family: var(--wp--preset--font-family--display); font-size: clamp(34px, 7vw, 60px); letter-spacing: 0.04em; text-transform: none; }
.ah-header .ah-nav-cta .wp-block-button__link { padding: 10px 22px; }
/* Keep the menu on one line at tablet widths: tighten gaps, drop the CTA button first */
.ah-header .wp-block-navigation__container { flex-wrap: nowrap; gap: clamp(14px, 2.2vw, 32px) !important; white-space: nowrap; }
@media (max-width: 1100px) { .ah-header .ah-nav-cta { display: none; } .ah-header .wp-block-navigation { letter-spacing: 0.12em; } }

/* ---------- Hero (Cover block) ---------- */
.ah-hero { min-height: max(520px, 65vh) !important; }
.ah-hero .wp-block-cover__image-background { object-position: center 40%; animation: ahZoom 14s ease-out forwards; transform: scale(1.05); }
@keyframes ahZoom { to { transform: scale(1); } }
.ah-hero::before {
	content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
	background-image: linear-gradient(rgba(201,168,76,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(201,168,76,0.03) 1px, transparent 1px);
	background-size: 80px 80px;
}
.ah-hero::after {
	content: ''; position: absolute; left: 80px; top: 18%; bottom: 18%; width: 1px; z-index: 2;
	background: linear-gradient(to bottom, transparent, var(--wp--preset--color--gold), transparent); opacity: .3;
}
.ah-hero .wp-block-cover__inner-container { padding: 0 0 80px 40px; }
.ah-hero .is-style-section-label { gap: 14px; }
.ah-hero .is-style-section-label::before { width: 32px; }
.ah-hero h1 { margin: 18px 0 16px; }
@media (max-width: 768px) {
	.ah-hero { min-height: 55vh !important; }
	.ah-hero::after { display: none; }
	.ah-hero .wp-block-cover__inner-container { padding: 0 0 56px; }
}

/* ---------- Our Story ---------- */
.ah-story p.ah-body { color: #555; line-height: 1.9; margin-bottom: 20px; }
.ah-story h2 { margin-top: 20px; margin-bottom: 28px; }
.ah-stats { border-top: 1px solid rgba(10,22,40,0.1); margin-top: 32px !important; }
.ah-stats > .wp-block-group { padding: 28px 20px; border-right: 1px solid rgba(10,22,40,0.1); }
.ah-stats > .wp-block-group:last-child { border-right: none; }
.ah-stat-num { font-family: var(--wp--preset--font-family--display); font-size: clamp(40px, 4.5vw, 60px) !important; line-height: 1 !important; color: var(--wp--preset--color--navy); font-variant-numeric: tabular-nums; }
.ah-stat-label { font-size: 10px !important; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; color: var(--wp--preset--color--grey); margin-top: 6px !important; line-height: 1.5 !important; }
.ah-story-media { position: relative; }
.ah-story-media::before {
	content: ''; position: absolute; top: -14px; right: -14px; width: 55%; height: 55%; z-index: 0; pointer-events: none;
	border-top: 1px solid var(--wp--preset--color--gold); border-right: 1px solid var(--wp--preset--color--gold); opacity: .4;
}
.ah-story-media .wp-block-image { position: relative; z-index: 1; margin: 0; }
.ah-story-media .wp-block-image img { width: 100%; aspect-ratio: 3/4; object-fit: cover; }
.ah-badge {
	position: absolute !important; bottom: -20px; left: -20px; width: 108px; height: 108px; z-index: 2; margin: 0 !important;
	display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 4px !important;
}
.ah-badge p:first-child { font-family: var(--wp--preset--font-family--display); font-size: 28px; font-weight: 400; line-height: 1; }
.ah-badge p:last-child { font-size: 8px; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; text-align: center; line-height: 1.4; padding: 0 8px; }
@media (max-width: 781px) {
	.ah-story .ah-story-cols { flex-direction: column-reverse; }
	.ah-stats { flex-wrap: wrap !important; }
	.ah-stats > .wp-block-group { flex-basis: 50% !important; }
	.ah-stats > .wp-block-group:nth-child(2) { border-right: none; }
	.ah-stats > .wp-block-group:nth-child(n+3) { border-top: 1px solid rgba(10,22,40,0.1); }
}

/* ---------- Dark sections with watermark ---------- */
.ah-dark { position: relative; overflow: hidden; }
.ah-dark > *:not(.is-style-watermark) { position: relative; z-index: 1; }
.ah-diff .is-style-watermark { right: -60px; transform: translateY(-50%); font-size: clamp(120px, 18vw, 220px); letter-spacing: -0.03em; }
.ah-values .is-style-watermark { left: 50%; transform: translate(-50%, -50%); font-size: clamp(80px, 16vw, 240px); letter-spacing: 0.06em; }
.ah-muted { color: rgba(255,255,255,0.4); font-size: 14px !important; line-height: 1.85; }

/* Card grids: 1px gold hairline between cards */
.ah-cards { gap: 1px !important; background: rgba(201,168,76,0.08); }
.is-style-card-dark { background: rgba(10,22,40,0.95); position: relative; overflow: hidden; transition: background var(--ah-trans); }
.is-style-card-dark:hover { background: rgba(13,31,60,0.98); }
.ah-diff .is-style-card-dark::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: var(--wp--preset--color--gold); transition: width .45s var(--ah-ease); }
.ah-diff .is-style-card-dark:hover::after { width: 100%; }
.ah-card-num { font-family: var(--wp--preset--font-family--display); font-size: 52px !important; line-height: 1 !important; color: rgba(255,255,255,0.04); }
.ah-icon svg { width: 30px; height: 30px; color: var(--wp--preset--color--gold); display: block; }
.ah-card-body { font-size: 13px !important; color: rgba(255,255,255,0.38); line-height: 1.75 !important; }
@media (max-width: 900px) { .ah-cards.ah-cards-4 { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 600px)  { .ah-cards { grid-template-columns: 1fr !important; } }

/* ---------- Capabilities (Cover blocks as image cards) ---------- */
.ah-cap-desc { max-width: 340px; text-align: right; color: var(--wp--preset--color--grey); font-size: 14px !important; }
.ah-cap-grid { gap: 2px !important; }
.is-style-service-card { aspect-ratio: 4/3; min-height: 0 !important; padding: 24px !important; align-items: flex-end !important; overflow: hidden; }
.is-style-service-card .wp-block-cover__image-background { transition: transform .65s var(--ah-ease); }
.is-style-service-card:hover .wp-block-cover__image-background { transform: scale(1.06); }
.is-style-service-card .wp-block-cover__inner-container { width: 100%; }
.is-style-service-card .ah-cap-num { font-family: var(--wp--preset--font-family--display); font-size: 12px; color: var(--wp--preset--color--gold); letter-spacing: 0.1em; }
.is-style-service-card .ah-cap-name { font-family: var(--wp--preset--font-family--display); font-size: 22px; font-weight: 400; line-height: 1.2; margin: 4px 0 8px; }
.is-style-service-card .ah-cap-link { font-size: 10px; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: var(--wp--preset--color--gold); opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; }
.is-style-service-card:hover .ah-cap-link { opacity: 1; transform: none; }
/* whole card clickable: the "Explore" link stretches over the card */
.is-style-service-card .ah-cap-link a::after { content: ''; position: absolute; inset: 0; z-index: 3; }
@media (max-width: 900px) { .ah-cap-grid { grid-template-columns: repeat(2, 1fr) !important; } .ah-cap-desc { text-align: left; max-width: 100%; } }
@media (max-width: 600px)  { .ah-cap-grid { grid-template-columns: 1fr !important; } }

/* ---------- Values ---------- */
.ah-pillar { text-align: center; }
.ah-pillar.is-style-card-dark { background: rgba(10,22,40,0.8); }
.ah-pillar .ah-icon svg { width: 38px; height: 38px; margin: 0 auto; }
.ah-pillar h3 { font-size: 26px; }
.ah-quote-mark { font-family: var(--wp--preset--font-family--display); font-size: 80px !important; line-height: .5 !important; color: var(--wp--preset--color--gold); opacity: .35; }
.ah-quote-text { font-family: var(--wp--preset--font-family--display); font-style: italic; font-size: clamp(26px, 3.2vw, 42px) !important; line-height: 1.45 !important; }
.ah-quote-attr { font-size: 10px !important; font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.3); }

/* ---------- Contact CTA ---------- */
.ah-cta-body { color: var(--wp--preset--color--grey); font-size: 14px !important; max-width: 480px; }

/* ---------- Footer ---------- */
.ah-footer { font-size: 13px; }
.ah-footer .ah-footer-logo img { height: 36px !important; width: auto !important; }
.ah-footer-title { font-size: 10px !important; font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 24px !important; }
.ah-footer .wp-block-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.ah-footer .ah-footer-logo { margin-bottom: 22px !important; }
.ah-footer .wp-block-social-links { margin-top: 26px !important; }
.ah-footer .wp-block-button__link { white-space: nowrap; }
.ah-footer a:hover { color: var(--wp--preset--color--gold); }
.ah-fs p { padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,0.05); line-height: 1.5; }
.ah-fs p:first-child { border-top: 1px solid rgba(255,255,255,0.05); }
.ah-fs strong { display: block; font-size: 10px; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 3px; }
.ah-contact p { font-size: 12px; line-height: 1.6; padding-left: 28px; background-repeat: no-repeat; background-size: 18px 18px; background-position: 0 1px; }
.ah-contact .ah-ic-mobile { background-image: url(assets/images/icon-mobile.png); }
.ah-contact .ah-ic-landline { background-image: url(assets/images/icon-landline.png); }
.ah-contact .ah-ic-map { background-image: url(assets/images/icon-map.png); }
.ah-footer .wp-block-social-links .wp-social-link { color: #fff; }
.ah-footer .wp-block-social-links .wp-social-link:hover { color: var(--wp--preset--color--gold); }
.ah-footer-bottom { border-top: 1px solid rgba(255,255,255,0.06); font-size: 12px; }

/* ---------- Scroll reveal (assets/js/site.js) ---------- */
.ah-js .ah-reveal { opacity: 0; transform: translateY(28px); transition: opacity .85s var(--ah-ease), transform .85s var(--ah-ease); }
.ah-js .ah-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.ah-js .ah-reveal { opacity: 1; transform: none; transition: none; }
	.ah-hero .wp-block-cover__image-background { animation: none; transform: none; }
}