/* Base reset & layout primitives */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; height: 100%; }
body {
	margin: 0;
	/* Guards against the 100vw full-bleed technique (used by .drreall-hero)
	   introducing a stray horizontal scrollbar on browsers where vw includes
	   the scrollbar gutter. */
	overflow-x: hidden;
	font-family: var(--drreall-font-body);
	color: var(--drreall-color-ink);
	background: var(--drreall-color-surface);
	line-height: 1.6;
	font-size: 16px;
	/* Sticky footer: on short pages (little content, no hero-slider filling
	   the fold) #drreall-content grows to fill the leftover space instead
	   of the footer floating up mid-viewport with a slab of body
	   background showing below it. */
	min-height: 100%;
	display: flex;
	flex-direction: column;
}
#drreall-content { flex: 1 0 auto; }
.drreall-header, .drreall-footer { flex-shrink: 0; }
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--drreall-color-accent); text-decoration: none; transition: color var(--drreall-transition-fast); }
a:hover { text-decoration: underline; }
h1, h2, h3, h4, h5, h6 {
	font-family: var(--drreall-font-heading);
	color: var(--drreall-color-ink);
	line-height: 1.2;
	margin: 0 0 0.6em;
	font-weight: 700;
	overflow-wrap: break-word;
}
p { overflow-wrap: break-word; }
h1 { font-size: clamp(2.25rem, 4vw, 3.5rem); }
h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.75rem); }
p { margin: 0 0 1em; }
button { font-family: inherit; }

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--drreall-color-ink);
	color: #fff;
	padding: 0.75em 1.25em;
	z-index: 10000;
}
.skip-link:focus { left: 1rem; top: 1rem; }

.drreall-container {
	max-width: var(--drreall-container);
	margin-inline: auto;
	padding-inline: var(--drreall-gutter);
}

.drreall-section {
	padding-block: clamp(3rem, 6vw, 6rem);
}

.drreall-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.85em 1.75em;
	border-radius: var(--drreall-radius-sm);
	background: var(--drreall-color-accent);
	color: var(--drreall-color-accent-ink);
	font-weight: 600;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background var(--drreall-transition-fast), transform var(--drreall-transition-fast), box-shadow var(--drreall-transition-fast);
	text-decoration: none;
}
.drreall-btn:hover {
	background: color-mix(in srgb, var(--drreall-color-accent) 85%, black);
	text-decoration: none;
	transform: translateY(-1px);
	box-shadow: var(--drreall-shadow-sm);
}
.drreall-btn:active { transform: translateY(0); }
.drreall-btn--outline {
	background: transparent;
	color: var(--drreall-color-accent);
	border-color: var(--drreall-color-accent);
}
.drreall-btn--outline:hover { background: var(--drreall-color-accent); color: #fff; }

/* Match Gutenberg's core Button block to the .drreall-btn look above, so a
   plain button dropped onto a page (no custom style/colors picked) looks
   consistent with the rest of the site by default — not just when someone
   remembers to reach for a specific block style. User-picked colors (which
   add their own classes/inline styles) still win over this as expected. */
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.85em 1.75em;
	border-radius: var(--drreall-radius-sm);
	background: var(--drreall-color-accent);
	color: var(--drreall-color-accent-ink);
	font-weight: 600;
	border: 1px solid transparent;
	transition: background var(--drreall-transition-fast), transform var(--drreall-transition-fast), box-shadow var(--drreall-transition-fast);
	text-decoration: none;
}
.wp-block-button__link:hover {
	background: color-mix(in srgb, var(--drreall-color-accent) 85%, black);
	text-decoration: none;
	transform: translateY(-1px);
	box-shadow: var(--drreall-shadow-sm);
}
.wp-block-button__link:active { transform: translateY(0); }
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--drreall-color-accent);
	border-color: var(--drreall-color-accent);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--drreall-color-accent); color: #fff; }

/* Subtle scroll-reveal, applied via main.js to top-level block sections.
   No transition on the base hidden state: main.js adds this class after
   the browser has already painted the (visible) content, so if opacity
   transitioned here too, that first class-add would visibly fade the
   block OUT before the reveal fades it back in. The transition only
   lives on .is-visible, so hiding is an instant snap and only the
   reveal itself animates. */
.drreall-reveal {
	opacity: 0;
	transform: translateY(18px);
}
.drreall-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 0.6s var(--drreall-ease), transform 0.6s var(--drreall-ease);
}
@media (prefers-reduced-motion: reduce) {
	.drreall-reveal { opacity: 1; transform: none; transition: none; }
}

.drreall-icon { width: 1.25em; height: 1.25em; stroke: currentColor; fill: none; flex-shrink: 0; }

/* Site header — flat navy bar, matching the live site's header treatment */
.drreall-header {
	position: relative;
	z-index: 100;
	background: var(--drreall-color-accent);
}
.drreall-header.is-sticky { position: sticky; top: 0; }
.drreall-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	padding-block: 1.1rem;
}
.drreall-header__logo {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	flex-shrink: 0;
	text-decoration: none;
}
.drreall-header__logo-ef { height: 46px; width: auto; }
.drreall-header__logo-mark { height: 56px; width: auto; }

/* Site name lockup: short label crossfades to a 3-line full-meaning
   reveal on hover. The full text is absolutely positioned over the
   short label so it never gets clipped and never pushes the nav. */
.drreall-header__sitename {
	position: relative;
	display: inline-block;
	color: #fff;
	font-family: var(--drreall-font-heading);
	vertical-align: middle;
}
.drreall-header__sitename-short {
	display: inline-block;
	font-weight: 700;
	font-size: 1.4rem;
	white-space: nowrap;
	transition: opacity 0.25s ease, transform 0.25s ease;
}
.drreall-header__sitename-full {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(calc(-50% + 4px));
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	white-space: nowrap;
	transition: opacity 0.3s ease 0.05s, transform 0.3s ease 0.05s, visibility 0.3s ease 0.05s;
}
.drreall-header__sitename-full span {
	display: block;
	font-weight: 600;
	font-size: 0.8rem;
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}
.drreall-header__logo:hover .drreall-header__sitename-short,
.drreall-header__logo:focus-visible .drreall-header__sitename-short { opacity: 0; transform: translateY(-4px); }
.drreall-header__logo:hover .drreall-header__sitename-full,
.drreall-header__logo:focus-visible .drreall-header__sitename-full { opacity: 1; visibility: visible; transform: translateY(-50%); }
@media (max-width: 900px) {
	.drreall-header__sitename { display: none; }
}

.drreall-nav { flex: 1; display: flex; justify-content: flex-end; }
.drreall-nav__menu {
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 2rem;
	margin: 0;
	padding: 0;
}
.drreall-nav__menu > li { position: relative; }
.drreall-nav__menu > li > a {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	color: #fff;
	font-weight: 600;
	font-size: 0.95rem;
	padding: 0.5em 0.25em;
	position: relative;
	text-decoration: none;
}
.drreall-nav__menu > li > a::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -2px;
	height: 2px;
	background: var(--drreall-color-gold);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.2s ease;
}
.drreall-nav__menu > li:hover > a::after,
.drreall-nav__menu > li.current-menu-item > a::after,
.drreall-nav__menu > li > a:focus-visible::after { transform: scaleX(1); }
.drreall-nav__menu > li:hover > a,
.drreall-nav__menu > li > a:focus-visible { color: var(--drreall-color-gold); }

.drreall-nav__menu .sub-menu {
	list-style: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	background: var(--drreall-color-surface);
	border: 1px solid var(--drreall-color-border);
	border-radius: var(--drreall-radius-sm);
	box-shadow: var(--drreall-shadow-sm);
	padding: 0.5rem;
	margin: 0.5rem 0 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.15s ease, visibility 0.15s;
}
/* Added by main.js when left-anchoring would clip the dropdown off the
   right edge of the viewport (e.g. the last nav item). */
.drreall-nav__menu .sub-menu.drreall-nav__submenu--right { left: auto; right: 0; }
.drreall-nav__menu li.menu-item-has-children:hover > .sub-menu,
.drreall-nav__menu li.menu-item-has-children:focus-within > .sub-menu { opacity: 1; visibility: visible; }
.drreall-nav__menu .sub-menu a {
	display: block;
	padding: 0.6em 0.75em;
	border-radius: var(--drreall-radius-sm);
	color: var(--drreall-color-ink);
	font-size: 0.9rem;
	font-weight: 500;
}
.drreall-nav__menu .sub-menu a:hover { background: var(--drreall-color-surface-alt); text-decoration: none; }
.drreall-nav__toggle-caret { width: 0.6em; height: 0.6em; margin-top: 2px; }
.drreall-nav__submenu-toggle { display: none; }

.drreall-nav__mobile-toggle {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0.5rem;
	color: #fff;
}

@media (max-width: 900px) {
	.drreall-nav__mobile-toggle { display: inline-flex; }

	/* Top drawer: drops down from directly below the header (which is
	   position:relative, so `top:100%` here needs no hardcoded height and
	   still tracks correctly when the header is sticky). Sits ABOVE the
	   backdrop (z-index 60 vs 55) — the previous version had the backdrop
	   at z-index:99 with no z-index set on the nav itself, so the backdrop
	   silently intercepted every click on the menu links underneath it. */
	.drreall-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		width: 100%;
		max-height: 80vh;
		overflow-y: auto;
		background: var(--drreall-color-accent);
		box-shadow: var(--drreall-shadow-md);
		justify-content: flex-start;
		padding: 0.5rem var(--drreall-gutter) 1.5rem;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		transition: opacity var(--drreall-transition-fast), transform var(--drreall-transition-fast), visibility var(--drreall-transition-fast);
		z-index: 60;
	}
	.drreall-nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
	.drreall-nav__menu { flex-direction: column; align-items: stretch; gap: 0; }
	.drreall-nav__menu > li { position: relative; display: flex; flex-wrap: wrap; }
	.drreall-nav__menu > li > a { padding: 0.9em 0; border-bottom: 1px solid rgba(255,255,255,0.15); width: calc(100% - 2.5rem); color: #fff; }
	.drreall-nav__menu > li:hover > a, .drreall-nav__menu > li > a:focus-visible { color: var(--drreall-color-gold); }
	.drreall-nav__menu .sub-menu { position: static; box-shadow: none; border: none; opacity: 1; visibility: visible; transform: none; display: none; margin: 0; padding-left: 1rem; width: 100%; background: transparent; }
	.drreall-nav__menu .sub-menu a { color: rgba(255,255,255,0.85); }
	.drreall-nav__menu .sub-menu a:hover { background: rgba(255,255,255,0.08); color: #fff; }
	.drreall-nav__menu li.menu-item-has-children.is-expanded > .sub-menu { display: block; }
	.menu-item-has-children > .drreall-nav__submenu-toggle {
		background: none; border: none; border-bottom: 1px solid rgba(255,255,255,0.15);
		width: 2.5rem; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #fff;
	}
	.drreall-nav__submenu-toggle .drreall-nav__toggle-caret { transition: transform 0.2s ease; }
	li.is-expanded > .drreall-nav__submenu-toggle .drreall-nav__toggle-caret { transform: rotate(180deg); }

	.drreall-nav__backdrop {
		position: fixed; inset: 0;
		background: rgba(17,17,17,0.4);
		opacity: 0; visibility: hidden;
		transition: opacity var(--drreall-transition-fast);
		z-index: 55;
	}
	.drreall-nav__backdrop.is-open { opacity: 1; visibility: visible; }
}

/* Footer */
.drreall-footer {
	background: var(--drreall-color-footer-bg);
	color: var(--drreall-color-footer-text);
	padding-block: clamp(2.5rem, 5vw, 4.5rem) 1.5rem;
}
.drreall-footer a { color: var(--drreall-color-footer-text); }
.drreall-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: 2.5rem;
	padding-bottom: 2.5rem;
	border-bottom: 1px solid rgba(255,255,255,0.12);
}
/* No footer menu assigned: drop the third track entirely (rather than
   leaving it blank) AND size Contact to its own content instead of an
   even 1fr share — an `fr` share stretches it across whatever space is
   left, which for a short address/phone/email/Facebook list is far more
   width than the text needs. min(max-content, 320px) hugs the content,
   capped so a long email/URL can't blow the column out. */
.drreall-footer__grid--no-links { grid-template-columns: 1fr min(max-content, 320px); }
.drreall-footer__logo-img { max-height: 48px; width: auto; margin-bottom: 1rem; }
.drreall-footer__partners-banner { max-width: 320px; width: 100%; height: auto; margin-bottom: 1.25rem; }
.drreall-footer__tagline { color: rgba(255,255,255,0.7); max-width: 32ch; }
.drreall-footer h4 { color: #fff; font-size: 1rem; margin-bottom: 1rem; }
.drreall-footer__links { list-style: none; margin: 0; padding: 0; }
.drreall-footer__links li { margin-bottom: 0.6em; }
.drreall-footer__links a { color: rgba(255,255,255,0.75); }
.drreall-footer__links a:hover { color: #fff; text-decoration: none; }
.drreall-footer__contact { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.85rem; }
.drreall-footer__contact li { display: flex; align-items: flex-start; gap: 0.65rem; color: rgba(255,255,255,0.85); }
.drreall-footer__contact .drreall-icon { margin-top: 0.15em; color: var(--drreall-color-accent); }
.drreall-footer__bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding-top: 1.5rem; font-size: 0.85rem; color: rgba(255,255,255,0.6); }

@media (max-width: 780px) {
	.drreall-footer__grid { grid-template-columns: 1fr; gap: 2rem; }
}

/* Pagination */
.drreall-pagination { display: flex; gap: 0.5rem; justify-content: center; margin-top: 2.5rem; flex-wrap: wrap; }
.drreall-pagination a, .drreall-pagination span {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 40px; height: 40px; padding: 0 0.5em;
	border-radius: var(--drreall-radius-sm); border: 1px solid var(--drreall-color-border);
	color: var(--drreall-color-ink); font-weight: 600; font-size: 0.9rem;
}
.drreall-pagination a:hover { border-color: var(--drreall-color-accent); color: var(--drreall-color-accent); text-decoration: none; }
.drreall-pagination .current { background: var(--drreall-color-accent); border-color: var(--drreall-color-accent); color: #fff; }

/* Post grid & cards (index/archive/search + reused by the posts-showcase block) */
.drreall-post-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
}
.drreall-post-card {
	display: flex;
	flex-direction: column;
	background: var(--drreall-color-surface);
	border: 1px solid var(--drreall-color-border);
	border-radius: var(--drreall-radius-md);
	overflow: hidden;
	transition: border-color var(--drreall-transition), box-shadow var(--drreall-transition), transform var(--drreall-transition);
}
.drreall-post-card:hover { border-color: var(--drreall-color-accent); box-shadow: var(--drreall-shadow-md); transform: translateY(-3px); }
.drreall-post-card__thumb { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--drreall-color-surface-alt); }
.drreall-post-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--drreall-transition); }
.drreall-post-card:hover .drreall-post-card__thumb img { transform: scale(1.04); }

/* Placeholder shown when a post has no featured image: navy field with the
   white DRREALL mark centered, sized to fill whatever context it's in
   (post card thumb or single-post hero). */
.drreall-thumb-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--drreall-color-accent);
}
.drreall-thumb-placeholder img { width: 30%; max-width: 120px; height: auto; opacity: 0.9; }
.drreall-post-card__body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
.drreall-post-card__cat {
	align-self: flex-start;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--drreall-color-accent);
	border: 1px solid var(--drreall-color-accent);
	padding: 0.25em 0.75em;
	border-radius: var(--drreall-radius-sm);
	margin-bottom: 0.75rem;
}
.drreall-post-card__title { font-size: 1.2rem; margin-bottom: 0.5rem; }
.drreall-post-card__title a { color: var(--drreall-color-ink); text-decoration: none; }
.drreall-post-card__title a:hover { color: var(--drreall-color-accent); }
.drreall-post-card__excerpt {
	color: var(--drreall-color-muted); font-size: 0.92rem; flex: 1; margin-bottom: 1rem;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.drreall-post-card__excerpt p { margin: 0; }
.drreall-post-card__link { display: inline-flex; align-items: center; gap: 0.35em; font-weight: 700; font-size: 0.9rem; }
.drreall-post-card__link .drreall-icon { width: 1em; height: 1em; transition: transform 0.15s ease; }
.drreall-post-card__link:hover .drreall-icon { transform: translateX(3px); }

@media (max-width: 1000px) { .drreall-post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .drreall-post-grid { grid-template-columns: 1fr; } }

/* Single post */
.drreall-single__header { padding-block: 2rem 1rem; text-align: left; max-width: 780px; margin-inline: auto; padding-inline: var(--drreall-gutter); }
.drreall-single__cat {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--drreall-color-accent);
	margin-bottom: 0.75rem;
	border: 1px solid var(--drreall-color-accent);
	border-radius: var(--drreall-radius-sm);
	padding: 0.25em 0.75em;
}

/* Full-bleed hero image with the title overlaid bottom-left, same
   breakout technique as .drreall-hero. */
.drreall-single__hero {
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	height: clamp(360px, 55vw, 620px);
	overflow: hidden;
}
.drreall-single__hero-image { width: 100%; height: 100%; object-fit: cover; }
.drreall-single__hero-overlay {
	position: absolute; inset: 0;
	background: linear-gradient(0deg, rgba(17,17,17,0.75) 0%, rgba(17,17,17,0.15) 55%, rgba(17,17,17,0) 100%);
}
.drreall-single__hero-content {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: clamp(1.5rem, 4vw, 3rem) var(--drreall-gutter);
	max-width: 900px;
}
.drreall-single__hero-content .drreall-single__cat { color: #fff; border-color: rgba(255,255,255,0.6); }
.drreall-single__hero-content h1 { color: #fff; margin: 0; font-size: clamp(2rem, 4vw, 3.25rem); }

/* max-width/margin/padding-inline deliberately NOT set here — both
   elements already carry the shared .drreall-container class in
   single.php, so they match the same width/gutter as the rest of the
   site instead of narrowing to their own reading-column width. */
.drreall-single__content { padding-block: 2rem 3rem; font-size: 1.05rem; }
.drreall-single__content img { border-radius: var(--drreall-radius-md); }
.drreall-single__content blockquote { border-left: 3px solid var(--drreall-color-accent); margin: 1.5em 0; padding-left: 1.25em; color: var(--drreall-color-muted); font-style: italic; }
.drreall-single__tags { margin-bottom: 3rem; display: flex; gap: 0.5rem; flex-wrap: wrap; }
.drreall-single__tags a {
	font-size: 0.8rem;
	border: 1px solid var(--drreall-color-border);
	border-radius: var(--drreall-radius-sm);
	padding: 0.35em 0.9em;
	color: var(--drreall-color-muted);
}
.drreall-single__tags a:hover { border-color: var(--drreall-color-accent); color: var(--drreall-color-accent); text-decoration: none; }

/* Archive / search headers */
.drreall-archive__header { text-align: center; margin-bottom: 2.5rem; }
.drreall-archive__description { color: var(--drreall-color-muted); max-width: 60ch; margin-inline: auto; }

/* Empty state / 404 */
.drreall-empty-state { text-align: center; max-width: 560px; margin-inline: auto; }
.drreall-empty-state .drreall-btn { margin-block: 1.5rem; }

/* Generic page content typography (from block content on page.php).
   padding-inline matters here: drreall/* blocks each set their own
   max-width + padding-inline (they intentionally full-bleed their
   background past this wrapper), but a plain core block (Heading,
   Paragraph, Group…) placed directly on the page has no such styling of
   its own — it just inherits this wrapper's box, so without the same
   gutter here it sits flush to the 1240px edge while custom blocks'
   actual content is inset from that edge, misaligning the two. */
.drreall-page__content { max-width: var(--drreall-container); margin-inline: auto; padding-inline: var(--drreall-gutter); }
.drreall-page__hero-image img { width: 100%; max-height: 60vh; object-fit: cover; }