/*
Theme Name: Danielle Avissar
Description: Child theme of Twenty Twenty-Five recreating the Squarespace (Wexley) design of danielleavissar.com, with a modernised look.
Template: twentytwentyfive
Version: 1.1.1
Requires at least: 6.7
Text Domain: danielle-avissar
*/

:root {
	--da-radius: 6px;
	--da-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--da-accent-dark: #33002f;
	--da-header-offset: var(--wp-admin--admin-bar--height, 0px);
}

html {
	scroll-padding-top: 120px;
	-webkit-text-size-adjust: 100%;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

::selection {
	background: var(--wp--preset--color--accent);
	color: #fff;
}

:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

h1,
h3 {
	text-wrap: balance;
}

/* Body copy lives in h2 blocks (Squarespace import), so it gets paragraph-style wrapping. */
h2,
p {
	text-wrap: pretty;
}

/* ---------- Header (sticky, blurred once content scrolls under it) ---------- */

header.wp-block-template-part {
	position: sticky;
	top: var(--da-header-offset);
	z-index: 50;
	padding-block: 18px;
	margin-bottom: 22px;
	transition: padding 0.3s var(--da-ease), box-shadow 0.3s ease;
}

/* The blur sits on a pseudo-element: backdrop-filter on the header itself would trap the
   mobile menu overlay (position: fixed) inside the header box. */
header.wp-block-template-part::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(252, 252, 252, 0.86);
	-webkit-backdrop-filter: saturate(160%) blur(14px);
	backdrop-filter: saturate(160%) blur(14px);
}

header.wp-block-template-part.is-scrolled {
	padding-block: 12px;
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05), 0 10px 30px -18px rgba(40, 0, 36, 0.35);
}

header.wp-block-template-part > .wp-block-group {
	margin-bottom: 0 !important;
}

.da-header {
	gap: 20px 40px;
}

.da-header .wp-block-site-title a {
	text-decoration: none;
}

.da-header .wp-block-site-tagline {
	margin-top: 0.7em;
	max-height: 3em;
	overflow: hidden;
	transition: opacity 0.3s ease, max-height 0.3s var(--da-ease), margin 0.3s var(--da-ease);
}

header.is-scrolled .da-header .wp-block-site-tagline {
	max-height: 0;
	margin-top: 0;
	opacity: 0;
}

.da-nav .wp-block-navigation-item__content,
.da-nav .wp-block-navigation-item__content:hover,
.da-nav .wp-block-navigation-item__content:focus {
	position: relative;
	color: var(--wp--preset--color--accent);
	text-decoration: none;
	line-height: 26px;
	padding: 7.4px 0;
}

/* Animated underline on hover, and on the current page. */
.da-nav .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0.12em; /* the letter-spacing trails the last letter */
	bottom: 4px;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.35s var(--da-ease);
}

.da-nav .wp-block-navigation-item__content:hover::after,
.da-nav .wp-block-navigation-item__content:focus-visible::after,
.da-nav .current-menu-item > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

/* Menu button and close button (phones only - WordPress hides them from 600px): 44px tap targets. */
@media (max-width: 599px) {
	.da-nav .wp-block-navigation__responsive-container-open,
	.da-nav .wp-block-navigation__responsive-container-close {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		color: var(--wp--preset--color--accent);
	}

	.da-nav .wp-block-navigation__responsive-container-open {
		margin: -10px -10px -10px 0;
	}

	.da-nav .wp-block-navigation__responsive-container-open svg,
	.da-nav .wp-block-navigation__responsive-container-close svg {
		width: 28px;
		height: 28px;
	}
}

/* Phone menu overlay: centred, large links. */
.da-nav .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--accent);
	animation: da-fade-in 0.25s ease;
}

.da-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 72px;
}

.da-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.da-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
	align-items: center;
}

.da-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
	gap: 14px;
}

.da-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
.da-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--accent);
	font-size: 20px;
	padding: 8px 0;
}

/* Horizontal rules inside page content (Squarespace line blocks). */
.da-divider.wp-block-separator {
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--divider);
	opacity: 1;
	width: 100%;
	max-width: none;
}

/* Tablets: title and menu stacked and centred (the full menu still shows). */
@media (max-width: 750px) {
	.da-header {
		flex-direction: column;
		align-items: center !important;
		text-align: center;
	}
}

/* Phones: one compact row - name and tagline on the left, menu button on the right. */
@media (max-width: 599px) {
	:root {
		--da-header-offset: 0px; /* the admin bar scrolls away on phones */
	}

	header.wp-block-template-part {
		padding-block: 12px;
		margin-bottom: 12px;
	}

	header.wp-block-template-part.is-scrolled {
		padding-block: 10px;
	}

	.da-header {
		flex-direction: row;
		flex-wrap: nowrap !important;
		align-items: center !important;
		justify-content: space-between;
		text-align: left;
		gap: 16px;
	}

	.da-header .wp-block-site-tagline {
		margin-top: 0.35em;
	}
}

/* ---------- Content ---------- */

.wp-block-post-content a:not(.wp-element-button) {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
	text-decoration-color: rgba(92, 0, 84, 0.35);
	transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.wp-block-post-content a:not(.wp-element-button):hover,
.wp-block-post-content a:not(.wp-element-button):focus-visible {
	color: var(--wp--preset--color--accent);
	text-decoration-color: currentColor;
}

.wp-block-post-content h1 strong,
.wp-block-post-content h3 strong {
	font-weight: 700;
}

.wp-block-post-content .wp-block-columns {
	gap: clamp(28px, 3.5vw, 56px);
}

/* Squarespace text blocks use h2 for body copy: 1em above (the flow gap), .5em below, like the original. */
.wp-block-post-content h2 {
	margin-block-end: 0.5em;
}

/* Squarespace blocks carry 17px padding top and bottom, so separate blocks sit 34px apart.
   Lines inside one text block (grouped as .da-text) keep the normal 1em gap. */
.wp-block-post-content > * + *,
.wp-block-post-content .wp-block-column > * + * {
	margin-block-start: 34px;
}

/* Horizontal rule blocks add their own 1em (13px) margin on top of the block spacing. */
.wp-block-post-content .da-divider.wp-block-separator,
.wp-block-post-content .da-divider.wp-block-separator + * {
	margin-block-start: 47px;
}

/* Squarespace quotes keep their 1em margin inside the block padding. */
.wp-block-post-content > .wp-block-quote,
.wp-block-post-content .wp-block-column > .wp-block-quote {
	margin-block: calc(34px + 1em) 0;
	border-left-color: var(--wp--preset--color--accent) !important;
	border-left-width: 2px !important;
}

.wp-block-post-content > .wp-block-quote + *,
.wp-block-post-content .wp-block-column > .wp-block-quote + * {
	margin-block-start: calc(34px + 14px);
}

.wp-block-post-content > .wp-block-quote:first-child,
.wp-block-post-content .wp-block-column > .wp-block-quote:first-child {
	margin-block-start: 1em;
}

/* Headings are followed by a half-line (Squarespace h3: margin-bottom .5em). */
.wp-block-post-content h3 + * {
	margin-block-start: 9px;
}

/* Real bold like the original's Proxima Nova. */
.wp-block-post-content strong,
.wp-block-post-content b {
	font-weight: 700;
}

/* Softer image corners throughout. */
.wp-block-post-content .wp-block-image img {
	border-radius: var(--da-radius);
}

/* Scroll-in fade for images below the fold (assets/js/site.js; skipped with reduced motion). */
.da-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.8s ease, transform 0.8s var(--da-ease);
}

.da-reveal.is-revealed {
	opacity: 1;
	transform: none;
}

/* ---------- Work grid: image tiles with hover caption overlay ---------- */

.da-work {
	--da-work-gap: clamp(20px, 2.6vw, 38px);
}

.wp-block-post-content .wp-block-columns.da-work {
	gap: var(--da-work-gap);
}

.da-work .wp-block-column > .wp-block-image {
	margin-block: 0 var(--da-work-gap);
}

.da-work .wp-block-column > .wp-block-image:last-child {
	margin-bottom: 17px;
}

.da-hover-caption {
	position: relative;
	margin: 0;
}

.wp-block-post-content .da-hover-caption a {
	display: block;
	color: inherit;
	text-decoration: none;
}

.da-hover-caption img {
	display: block;
	width: 100%;
	height: auto;
}

.da-hover-caption figcaption.wp-element-caption {
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 1em;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border-radius: var(--da-radius);
	text-align: center;
	background: linear-gradient(160deg, rgba(92, 0, 84, 0.62), rgba(51, 0, 47, 0.88));
	color: #fff;
	font-family: var(--wp--preset--font-family--lato);
	font-size: clamp(20px, 10px + 1.2vw, 28px);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0.04em;
	opacity: 0;
	transition: opacity 0.4s ease;
	pointer-events: none;
}

.da-hover-caption figcaption p {
	margin: 0;
	font: inherit;
	color: inherit;
}

/* Name label under each tile, added by site.js - shown only on touch screens (no hover). */
.da-tile-label {
	display: none;
}

@media (hover: hover) {
	.da-hover-caption {
		overflow: hidden;
		border-radius: var(--da-radius);
	}

	.da-hover-caption img {
		transition: transform 0.8s var(--da-ease);
	}

	.da-hover-caption:hover img,
	.da-hover-caption:focus-within img {
		transform: scale(1.045);
	}

	.da-hover-caption:hover figcaption.wp-element-caption,
	.da-hover-caption:focus-within figcaption.wp-element-caption {
		opacity: 1;
	}
}

@media (hover: none) {
	.da-hover-caption figcaption.wp-element-caption {
		display: none;
	}

	.da-tile-label {
		display: block;
		padding: 10px 2px 0;
		color: var(--wp--preset--color--accent);
		font-family: var(--wp--preset--font-family--lato);
		font-size: 13px;
		font-weight: 700;
		line-height: 1.4;
		letter-spacing: 0.1em;
		text-transform: uppercase;
	}
}

/* Stacked phone layout: site.js numbers the tiles in the order they read across the desktop
   grid, so the phone list keeps that order instead of running down one column, then the other.
   A one-column grid rather than a flex column: iOS Safari could size flex items from images that
   hadn't loaded yet and let the next tile overlap. */
@media (max-width: 781px) {
	.wp-block-post-content .wp-block-columns.da-work {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}

	.da-work > .wp-block-column {
		display: contents;
	}

	.da-work .wp-block-column > .wp-block-image,
	.da-work .wp-block-column > .wp-block-image:last-child {
		margin: 0;
	}
}

/* ---------- Galleries: Squarespace grid aspect ratios ---------- */

.wp-block-gallery.has-nested-images.is-cropped[class*="da-ratio-"] figure.wp-block-image:not(#individual-image) img {
	height: auto;
	aspect-ratio: var(--da-ratio);
	object-fit: cover;
}

.wp-block-gallery.da-ratio-square { --da-ratio: 1; }
.wp-block-gallery.da-ratio-standard { --da-ratio: 3 / 2; }
.wp-block-gallery.da-ratio-four { --da-ratio: 4 / 3; }
.wp-block-gallery.da-ratio-widescreen { --da-ratio: 16 / 9; }

/* Tighter gaps on phones, and one image per row on small phones. */
@media (max-width: 600px) {
	.wp-block-post-content .wp-block-gallery.has-nested-images:not(.da-slideshow) {
		--wp--style--unstable-gallery-gap: 16px !important;
		gap: 16px !important;
	}
}

@media (max-width: 480px) {
	.wp-block-post-content .wp-block-gallery.has-nested-images:not(.da-slideshow) figure.wp-block-image:not(#individual-image) {
		width: 100% !important;
	}
}

/* ---------- Gallery pages: Wexley slideshow (assets/js/slideshow.js) ---------- */

/* Stacked images - the no-JS layout. */
.wp-block-gallery.has-nested-images.da-slideshow {
	gap: 20px;
}

.da-slideshow-thumbs,
.da-slideshow-count {
	display: none;
}

/* Phones: a swipeable strip, one image per screen, with a "3 / 12" counter. */
@media (max-width: 750px) {
	.wp-block-gallery.has-nested-images.da-slideshow.is-ready {
		flex-wrap: nowrap;
		align-items: center;
		gap: 12px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.wp-block-gallery.has-nested-images.da-slideshow.is-ready::-webkit-scrollbar {
		display: none;
	}

	.wp-block-gallery.has-nested-images.da-slideshow.is-ready figure.wp-block-image:not(#individual-image) {
		flex: 0 0 100%;
		width: 100%;
		margin: 0;
		justify-content: center;
		scroll-snap-align: center;
		scroll-snap-stop: always;
	}

	.wp-block-gallery.has-nested-images.da-slideshow.is-ready figure.wp-block-image img {
		width: auto;
		max-width: 100%;
		max-height: 75svh;
		object-fit: contain;
	}

	.da-slideshow-count {
		display: block;
		margin-top: 14px !important;
		color: var(--wp--preset--color--accent);
		font-family: var(--wp--preset--font-family--lato);
		font-size: 13px;
		letter-spacing: 0.12em;
		text-align: center;
		font-variant-numeric: tabular-nums;
	}
}

@media (min-width: 751px) {
	/* One image at a time, fitted inside a box that fills the window below the header. */
	.wp-block-gallery.has-nested-images.da-slideshow.is-ready {
		display: block;
		position: relative;
		height: clamp(320px, calc(100vh - 460px), 1000px);
		cursor: pointer;
	}

	.wp-block-gallery.has-nested-images.da-slideshow.is-ready figure.wp-block-image:not(#individual-image) {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		margin: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.6s ease, visibility 0.6s;
	}

	.wp-block-gallery.has-nested-images.da-slideshow.is-ready figure.wp-block-image:not(#individual-image).is-active {
		opacity: 1;
		visibility: visible;
	}

	.wp-block-gallery.has-nested-images.da-slideshow.is-ready figure.wp-block-image img {
		width: auto;
		height: auto;
		max-width: 100%;
		max-height: 100%;
		object-fit: contain;
	}

	/* Tiny thumbnails: 20px tall, dimmed except the current image. */
	.da-slideshow-thumbs {
		display: block;
		margin-top: 17.25px !important;
		text-align: center;
		line-height: 0;
	}

	.da-slideshow-thumb {
		margin: 0 2px 3px;
		padding: 0;
		border: 0;
		background: none;
		opacity: 0.4;
		cursor: pointer;
		transition: opacity 0.2s ease, transform 0.2s var(--da-ease);
	}

	.da-slideshow-thumb:hover,
	.da-slideshow-thumb:focus-visible,
	.da-slideshow-thumb.is-active {
		opacity: 1;
	}

	.da-slideshow-thumb:hover {
		transform: translateY(-2px);
	}

	.da-slideshow-thumb img {
		display: block;
		width: auto;
		height: 20px;
		border-radius: 2px;
	}
}

/* ---------- Buttons ---------- */

.wp-block-button__link.wp-element-button,
.wpcf7-submit {
	display: inline-block;
	padding: 1.15em 2.5em;
	border: 0;
	border-radius: var(--da-radius);
	background-color: var(--wp--preset--color--accent);
	color: #fff;
	font-family: var(--wp--preset--font-family--figtree);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s var(--da-ease), box-shadow 0.2s ease;
}

.wp-block-button__link.wp-element-button:hover,
.wp-block-button__link.wp-element-button:focus,
.wpcf7-submit:hover,
.wpcf7-submit:focus {
	background-color: var(--da-accent-dark);
	color: #fff;
	text-decoration: none;
	transform: translateY(-1px);
	box-shadow: 0 10px 22px -10px rgba(92, 0, 84, 0.6);
}

.wp-block-button__link.wp-element-button:active,
.wpcf7-submit:active {
	transform: none;
	box-shadow: none;
}

/* Squarespace pads the last block of a column by 17px. */
.wp-block-post-content .wp-block-column > .wp-block-buttons:has(.da-contact-open) {
	margin-block: 1.5em 17px; /* the About button sits close under the text, as on the original */
}

/* ---------- Contact form popup ---------- */

.da-dialog {
	width: min(600px, calc(100vw - 40px));
	max-height: calc(100vh - 40px);
	padding: 50px 40px 40px;
	border: 0;
	border-radius: 14px;
	background: #fff;
	color: var(--wp--preset--color--contrast);
	box-shadow: 0 30px 80px -20px rgba(40, 0, 36, 0.35);
}

.da-dialog[open] {
	animation: da-dialog-in 0.3s var(--da-ease);
}

.da-dialog::backdrop {
	background: rgba(40, 20, 38, 0.4);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

.da-dialog[open]::backdrop {
	animation: da-fade-in 0.3s ease;
}

@keyframes da-dialog-in {
	from {
		opacity: 0;
		transform: translateY(16px) scale(0.98);
	}
}

@keyframes da-fade-in {
	from {
		opacity: 0;
	}
}

/* No-JS fallback: the #contact link reveals the form inline. */
.da-dialog:target:not([open]) {
	display: block;
	position: static;
	width: auto;
	box-shadow: none;
	padding: 20px 0 0;
	background: transparent;
}

.da-dialog h3 {
	margin: 0 0 24px;
}

.da-dialog-close {
	position: absolute;
	top: 8px;
	right: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--wp--preset--color--accent);
	font-size: 30px;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.da-dialog-close:hover {
	background: rgba(92, 0, 84, 0.08);
}

.da-dialog .wpcf7 label {
	display: block;
	margin: 0 0 22px;
	font-size: 14px;
	font-weight: 500;
	line-height: normal;
}

.da-dialog .wpcf7-form-control:not(.wpcf7-submit) {
	width: 100%;
	margin: 8px 0 4px;
	padding: 13px 14px;
	border: 1px solid #d9d3d8;
	border-radius: 8px;
	background: #fcfbfc;
	color: #000;
	font-family: inherit;
	font-size: 16px; /* 16px stops iOS zooming into the field */
	line-height: normal;
	box-sizing: border-box;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.da-dialog textarea.wpcf7-form-control {
	min-height: 100px;
	height: 150px;
	resize: vertical;
}

.da-dialog .wpcf7-form-control:not(.wpcf7-submit):focus {
	outline: none;
	border-color: var(--wp--preset--color--accent);
	background: #fff;
	box-shadow: 0 0 0 3px rgba(92, 0, 84, 0.14);
}

.da-dialog .wpcf7-not-valid-tip {
	font-size: 12px;
	margin-top: 4px;
}

.da-dialog .wpcf7 form .wpcf7-response-output {
	margin: 20px 0 0;
	padding: 12px 16px;
	border-width: 1px;
	border-radius: 8px;
}

.da-dialog .wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

/* Phones: the form opens as a full-screen sheet. */
@media (max-width: 600px) {
	.da-dialog[open] {
		box-sizing: border-box;
		width: 100%;
		max-width: 100%;
		height: 100%;
		max-height: 100%;
		margin: 0;
		padding: 64px 20px 32px;
		border-radius: 0;
		box-shadow: none;
	}

	.da-dialog .wpcf7-submit {
		width: 100%;
	}
}

/* ---------- Footer ---------- */

.da-footer {
	margin-top: clamp(48px, 7vw, 96px) !important;
}

.da-footer p {
	margin: 0;
	padding-top: 24px;
	border-top: 1px solid var(--wp--preset--color--divider);
	color: #8a8585;
	font-size: 13px;
	letter-spacing: 0.02em;
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}