/*
Theme Name: Al Raheem
Theme URI: https://alraheemjewellers.com/
Author: Al Raheem Jewellers
Description: Noir, gold and burgundy block theme for Al Raheem Jewellers, Lahore. Built with Gutenberg blocks only — no page builder, no jQuery.
Version: 2.1.0
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: alraheem
*/

/* Only what theme.json can't express. */

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
	/* Faint diamond lattice + warm glow, like light catching facets. Pure CSS, no image request. */
	background-image:
		radial-gradient(60rem 40rem at 85% -10%, rgba(200,164,93,.07), transparent 60%),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M14 0L28 14L14 28L0 14Z' fill='none' stroke='%23C8A45D' stroke-opacity='.045'/%3E%3C/svg%3E");
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
:where(img) { height: auto; }
::selection { background: var(--wp--preset--color--gold); color: var(--wp--preset--color--ink); }
:focus-visible { outline: 1px solid var(--wp--preset--color--gold-light); outline-offset: 4px; }
strong, b { font-weight: 600; color: var(--wp--preset--color--ivory); }

/* Section headings get a small gold rule beneath, centred when the heading is. */
h2.wp-block-heading:not(.ar-urdu)::after { content: ""; display: block; width: 44px; height: 1px; margin-top: .9rem; background: var(--wp--preset--color--gold); }
h2.wp-block-heading.has-text-align-center::after { margin-left: auto; margin-right: auto; }

/* ---------- Header ---------- */
.ar-topbar { font-size: .78rem; letter-spacing: .04em; border-bottom: 1px solid rgba(200,164,93,.18); }
.ar-topbar a { color: inherit; text-decoration: none; }
/* The blur lives on a ::before layer: backdrop-filter on the header itself would make it the containing
   block for the fixed-position mobile menu, trapping the menu inside the header's 70px box. */
/* The whole header template part sticks; it rises by the top bar's height so only the main bar stays. */
.wp-site-blocks > header.wp-block-template-part { position: sticky; top: calc(var(--ar-topbar-h, 0px) * -1); z-index: 50; }
.admin-bar .wp-site-blocks > header.wp-block-template-part { top: calc(32px - var(--ar-topbar-h, 0px)); }
@media (max-width: 782px) { .admin-bar .wp-site-blocks > header.wp-block-template-part { top: calc(var(--ar-topbar-h, 0px) * -1); } }
.ar-header { position: relative; z-index: 1; background: transparent !important; transition: padding .35s ease, box-shadow .35s ease; }
.ar-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(10,9,8,.84); -webkit-backdrop-filter: saturate(1.2) blur(14px); backdrop-filter: saturate(1.2) blur(14px); }
.ar-header.is-scrolled { padding-top: .6rem !important; padding-bottom: .6rem !important; box-shadow: 0 10px 30px -20px rgba(0,0,0,.9), 0 1px 0 rgba(200,164,93,.25); }
/* Desktop nav: gold underline grows on hover. */
.ar-header .wp-block-navigation-item__content { position: relative; }
.ar-header .wp-block-navigation-item__content::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: var(--wp--preset--color--gold); transform: scaleX(0); transform-origin: right; transition: transform .35s ease; }
.ar-header .wp-block-navigation-item__content:hover::after { transform: scaleX(1); transform-origin: left; }
.ar-header .wp-block-site-title a { text-decoration: none; color: var(--wp--preset--color--gold-light); }
.ar-header .wp-block-navigation a { text-decoration: none; color: var(--wp--preset--color--champagne); transition: color .2s; }
.ar-header .wp-block-navigation a:hover { color: var(--wp--preset--color--gold-light); }
.ar-header .wp-block-site-title, .ar-header .wp-block-button__link { white-space: nowrap; }
.ar-header .wp-block-navigation__responsive-container-open svg, .ar-header .wp-block-navigation__responsive-container-close svg { fill: var(--wp--preset--color--gold-light); }

/* Hamburger menu up to small-laptop width (core switches only below 600px). */
@media (max-width: 1360px) {
	.ar-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex !important; }
	.ar-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none !important; }
	.ar-header .wp-block-navigation__responsive-container.is-menu-open {
		position: fixed !important; inset: 0 !important; z-index: 100000 !important; display: flex !important; flex-direction: column;
		width: auto !important; height: 100dvh; box-sizing: border-box; overflow-y: auto; padding: 1.5rem clamp(1.25rem, 6vw, 3rem) 3rem;
		background: radial-gradient(80% 60% at 100% 0%, rgba(90,22,38,.55), transparent 70%), var(--wp--preset--color--ink) !important;
		animation: ar-menu-in .35s cubic-bezier(.2,.7,.2,1) both;
	}
	.admin-bar .ar-header .wp-block-navigation__responsive-container.is-menu-open { top: 46px !important; height: calc(100dvh - 46px); }
	.ar-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { display: flex !important; position: absolute; top: 1.4rem; right: clamp(1.25rem, 6vw, 3rem); }
	.ar-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 4.5rem; align-items: stretch !important; justify-content: flex-start !important; width: 100%; }
	.ar-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { flex-direction: column; align-items: flex-start !important; gap: 0 !important; width: 100%; }
	.ar-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { width: 100%; justify-content: flex-start !important; text-align: left; border-bottom: 1px solid var(--wp--preset--color--line); }
	.ar-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { display: block; width: 100%; padding: .8rem 0 !important; font-family: var(--wp--preset--font-family--display); font-size: 1.45rem; font-weight: 300; letter-spacing: .04em; text-transform: none; color: var(--wp--preset--color--ivory); }
	.ar-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after { display: none; }
	.ar-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { animation: ar-rise .5s cubic-bezier(.2,.7,.2,1) both; }
	.ar-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(2) { animation-delay: .04s; }
	.ar-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(3) { animation-delay: .08s; }
	.ar-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(4) { animation-delay: .12s; }
	.ar-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(5) { animation-delay: .16s; }
	.ar-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(6) { animation-delay: .2s; }
	.ar-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(7) { animation-delay: .24s; }
	.ar-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(8) { animation-delay: .28s; }
	@keyframes ar-menu-in { from { opacity: 0; } to { opacity: 1; } }
}
@media (max-width: 600px) { .ar-hide-mobile { display: none !important; } }

/* ---------- Text styles ---------- */
.is-style-eyebrow { text-transform: uppercase; letter-spacing: .32em; font-size: .7rem !important; font-weight: 500; color: var(--wp--preset--color--gold); }
.is-style-eyebrow::before { content: ""; display: inline-block; width: 28px; height: 1px; background: currentColor; vertical-align: middle; margin-right: .9em; opacity: .7; }
.is-style-eyebrow.has-text-align-center::after { content: ""; display: inline-block; width: 28px; height: 1px; background: currentColor; vertical-align: middle; margin-left: .9em; opacity: .7; }
.ar-sheen { background: var(--wp--preset--gradient--gold-sheen); -webkit-background-clip: text; background-clip: text; color: transparent; font-style: italic; font-weight: 500; }

/* ---------- Cards ---------- */
.is-style-card { background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0)) var(--wp--preset--color--graphite); border: 1px solid var(--wp--preset--color--line); border-radius: 2px; transition: border-color .35s ease, transform .35s ease; }
.is-style-card:hover { border-color: rgba(200,164,93,.55); transform: translateY(-3px); }

/* ---------- Media ---------- */
.is-style-rounded-media img, .wp-block-post-featured-image img { border-radius: 2px; }
.wp-block-post-featured-image { overflow: hidden; border-radius: 2px; position: relative; }
.wp-block-post-featured-image img { transition: transform .8s cubic-bezier(.2,.7,.2,1), filter .6s; filter: saturate(.95); }
.wp-block-post:hover .wp-block-post-featured-image img { transform: scale(1.05); filter: saturate(1.1); }
.wp-block-post .wp-block-post-title a { text-decoration: none; }
.wp-block-post:hover .wp-block-post-title a { color: var(--wp--preset--color--gold-light); }

/* Collection tile: placeholder or photo, framed by a hairline gold inset. */
.ar-ph-box { aspect-ratio: 1; border-radius: 2px; padding: 1rem; position: relative; overflow: hidden; }
.ar-ph-box::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(200,164,93,.35); pointer-events: none; transition: inset .5s ease, border-color .5s; }
.wp-block-column:hover .ar-ph-box::before { inset: 16px; border-color: rgba(231,205,147,.7); }
.ar-ph { font-family: var(--wp--preset--font-family--display); font-weight: 300; font-size: 1.7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--gold-light); line-height: 1.2; }
.ar-grid-2 h3 a { text-decoration: none; color: var(--wp--preset--color--ivory); }
.ar-grid-2 h3 a:hover { color: var(--wp--preset--color--gold-light); }

/* ---------- Buttons ---------- */
.wp-block-button.is-style-outline > .wp-block-button__link { background: transparent; border: 1px solid rgba(200,164,93,.7); color: var(--wp--preset--color--gold-light); }
.wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--wp--preset--color--gold); border-color: var(--wp--preset--color--gold); color: var(--wp--preset--color--ink); }
.wp-block-button__link { transition: background-color .25s, color .25s, border-color .25s; }

/* ---------- FAQ (core/details) ---------- */
.wp-block-details summary { cursor: pointer; font-family: var(--wp--preset--font-family--display); font-size: 1.3rem; font-weight: 500; list-style: none; position: relative; padding-right: 2rem; color: var(--wp--preset--color--ivory); }
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after { content: "+"; position: absolute; right: 0; top: -.1em; font-family: var(--wp--preset--font-family--body); font-weight: 200; font-size: 1.6rem; color: var(--wp--preset--color--gold); transition: transform .25s; }
.wp-block-details[open] summary::after { transform: rotate(45deg); }
.wp-block-details > :not(summary) { margin-top: .75rem; color: var(--wp--preset--color--champagne); }

/* ---------- Quote ---------- */
.wp-block-quote cite { display: block; margin-top: 1rem; font-family: var(--wp--preset--font-family--body); font-style: normal; font-size: .7rem; letter-spacing: .3em; text-transform: uppercase; color: var(--wp--preset--color--gold); }

/* ---------- Tables ---------- */
.wp-block-table table { border-collapse: collapse; width: 100%; }
.wp-block-table td, .wp-block-table th { border: 0; border-bottom: 1px solid var(--wp--preset--color--line); padding: .85rem .6rem; text-align: left; }
.wp-block-table thead { border-bottom: 1px solid var(--wp--preset--color--gold); }
.wp-block-table thead th { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 500; color: var(--wp--preset--color--gold); }

/* ---------- Forms ---------- */
.wp-block-search__input { background: var(--wp--preset--color--graphite); border: 1px solid var(--wp--preset--color--line); color: var(--wp--preset--color--ivory); }

/* ---------- Urdu ---------- */
.ar-urdu, [lang="ur"] { font-family: var(--wp--preset--font-family--urdu); direction: rtl; line-height: 2.1; }

/* ---------- Breadcrumbs ---------- */
.ar-crumbs { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--wp--preset--color--muted); }
.ar-crumbs a { color: inherit; text-decoration: none; }
.ar-crumbs a:hover { color: var(--wp--preset--color--gold-light); }

/* ---------- Footer ---------- */
.ar-footer { border-top: 1px solid rgba(200,164,93,.25); }
.ar-footer .wp-block-site-title a { text-decoration: none; color: var(--wp--preset--color--gold-light); }
.ar-footer a { text-decoration: none; }
.ar-footer a:hover { text-decoration: underline; }

/* ---------- Two-up collection tiles on phones ---------- */
@media (max-width: 781px) {
	.wp-block-columns.ar-grid-2.is-not-stacked-on-mobile { flex-wrap: wrap !important; gap: 1.25rem .9rem !important; }
	.wp-block-columns.ar-grid-2.is-not-stacked-on-mobile > .wp-block-column { flex-basis: calc(50% - .45rem) !important; flex-grow: 0; }
	.ar-grid-2 .ar-ph { font-size: 1.05rem; }
	.ar-grid-2 h3 { font-size: 1.15rem !important; }
	.ar-grid-2 .has-small-font-size { font-size: .8rem !important; }
}

/* ---------- Motion (respects reduced-motion) ---------- */
@media (prefers-reduced-motion: no-preference) {
	.ar-reveal { animation: ar-rise 1.1s cubic-bezier(.2,.7,.2,1) both; }
	.ar-reveal:nth-child(2) { animation-delay: .12s; }
	.ar-reveal:nth-child(3) { animation-delay: .24s; }
	@keyframes ar-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
}
.ar-footer a[href^="mailto:"] { white-space: nowrap; }

/* ================= Micro-interactions ================= */

/* Scroll reveal (only when JS has opted in and motion is allowed). */
.ar-motion .ar-will-rise { opacity: 0; transform: translateY(18px); transition: opacity .9s cubic-bezier(.2,.7,.2,1) var(--ar-delay, 0ms), transform .9s cubic-bezier(.2,.7,.2,1) var(--ar-delay, 0ms); }
.ar-motion .ar-will-rise.is-in { opacity: 1; transform: none; }
.ar-motion h2.wp-block-heading.ar-will-rise::after { transform: scaleX(0); transform-origin: left; transition: transform 1s cubic-bezier(.2,.7,.2,1) .35s; }
.ar-motion h2.wp-block-heading.has-text-align-center.ar-will-rise::after { transform-origin: center; }
.ar-motion h2.wp-block-heading.ar-will-rise.is-in::after { transform: scaleX(1); }

@media (prefers-reduced-motion: no-preference) {
	/* Gold text slowly catches the light. */
	.ar-sheen { background-size: 220% 100%; animation: ar-sheen 7s ease-in-out infinite; }
	@keyframes ar-sheen { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

	/* Buttons: a sweep of light across on hover. */
	.wp-block-button__link { position: relative; overflow: hidden; isolation: isolate; }
	.wp-block-button__link::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%); transform: translateX(-120%); transition: transform .8s ease; }
	.wp-block-button__link:hover::after { transform: translateX(120%); }
	.wp-block-button__link:active { transform: translateY(1px); }

	/* Photos: slow zoom on hover inside their frame. */
	.wp-block-image.is-style-rounded-media { overflow: hidden; }
	.wp-block-image.is-style-rounded-media img { transition: transform 1.2s cubic-bezier(.2,.7,.2,1), filter .8s; }
	.wp-block-column:hover > .wp-block-image.is-style-rounded-media img, .wp-block-image.is-style-rounded-media:hover img { transform: scale(1.06); filter: brightness(1.08); }

	/* Social icons lift. */
	.wp-block-social-link { transition: transform .25s ease; }
	.wp-block-social-link:hover { transform: translateY(-3px); }

	/* FAQ answer fades in. */
	.wp-block-details[open] > :not(summary) { animation: ar-rise .45s cubic-bezier(.2,.7,.2,1) both; }
}

/* Spotlight that follows the pointer on cards (position set by interactions.js). */
.is-style-card, .ar-card, .ar-calc { position: relative; }
.is-style-card::before, .ar-card::before, .ar-calc::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(231,205,147,.10), transparent 70%); }
.is-style-card:hover::before, .ar-card:hover::before, .ar-calc:hover::before { opacity: 1; }

/* Collection photos framed by the same hairline as the placeholders. */
.ar-grid-2 .wp-block-image { position: relative; margin-bottom: 0; }
.ar-grid-2 .wp-block-image::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(231,205,147,.35); pointer-events: none; transition: inset .5s ease, border-color .5s; }
.ar-grid-2 .wp-block-column:hover .wp-block-image::after { inset: 16px; border-color: rgba(231,205,147,.75); }
.ar-grid-2 .wp-block-image img { filter: brightness(.88) contrast(1.05); }

/* Trust badges in the hero. */
.ar-badges { gap: .6rem !important; }
.ar-badges p { margin: 0; padding: .45rem .9rem; border: 1px solid rgba(200,164,93,.35); background: rgba(10,9,8,.35); font-size: .74rem !important; letter-spacing: .06em; color: var(--wp--preset--color--champagne); transition: border-color .3s, color .3s; }
.ar-badges p:hover { border-color: var(--wp--preset--color--gold); color: var(--wp--preset--color--gold-light); }
.ar-hero-urdu { font-size: 1.55rem !important; color: var(--wp--preset--color--gold-light); margin-top: -.25rem !important; }

/* Owner / portrait tiles in About. */
.ar-portrait .ar-ph-box { aspect-ratio: 4 / 5; }
.ar-stat { font-family: var(--wp--preset--font-family--display); font-weight: 300; font-size: clamp(2.4rem, 5vw, 3.4rem) !important; line-height: 1; color: var(--wp--preset--color--gold-light); margin-bottom: .2rem !important; }
.ar-h1-kicker::before { content: ""; display: inline-block; width: 28px; height: 1px; background: var(--wp--preset--color--gold); vertical-align: middle; margin-right: .9em; }
.ar-h1-kicker { display: block; margin-bottom: 1.1rem; font-family: var(--wp--preset--font-family--body); font-size: .78rem; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--wp--preset--color--champagne); line-height: 1.4; }

/* Keep the WhatsApp bubble out of the way while the mobile menu is open. */
.has-modal-open .ar-wa-float { display: none; }