/* Weekend Themes Store - styles that theme.json can't express. */

:root {
	--ws-radius: 18px;
	--ws-line: var(--wp--preset--color--line, #E6D8C3);
	--ws-shadow: var(--wp--preset--shadow--soft);
}

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: var(--wp--preset--color--peach); color: var(--wp--preset--color--navy); }
:where(h1, h2, h3) { text-wrap: balance; }
:where(p, li) { text-wrap: pretty; }
:where(h1, h2) em { font-style: italic; color: var(--wp--preset--color--ember); }
.has-navy-background-color :where(h1, h2) em { color: var(--wp--preset--color--peach); }
img { height: auto; }

/* ---------- Header --------------------------------------------------------- */
.ws-header {
	position: sticky; top: 0; z-index: 50;
	background: color-mix(in srgb, var(--wp--preset--color--cream) 92%, transparent);
	border-bottom: 1px solid var(--ws-line);
	padding-block: .75rem;
}
@supports (backdrop-filter: blur(1px)) {
	.ws-header { backdrop-filter: saturate(1.2) blur(10px); -webkit-backdrop-filter: saturate(1.2) blur(10px); }
}
.admin-bar .ws-header { top: var(--wp-admin--admin-bar--height, 32px); }
.ws-header__row { gap: 1.5rem; align-items: center; }
.ws-header__nav { gap: 1.5rem; align-items: center; }
.ws-header .wp-block-navigation a { text-decoration: none; color: var(--wp--preset--color--navy); }
.ws-header .wp-block-navigation a:hover { color: var(--wp--preset--color--ember); }
.ws-header__cta .wp-block-button__link { padding: .6rem 1.1rem; }
@media (max-width: 600px) { .wp-block-buttons.ws-header__cta { display: none; } }

.ws-brand { margin: 0; }
.ws-brand a { display: inline-flex; align-items: center; gap: .65rem; color: var(--wp--preset--color--navy); text-decoration: none; }
.ws-brand a::before {
	content: ""; flex: none; inline-size: 2.1rem; block-size: 2.1rem;
	background: url(../brand/weekend-themes-mark.svg) center / contain no-repeat;
}
.ws-brand--light a { color: var(--wp--preset--color--cream); }

/* ---------- Shared bits --------------------------------------------------- */
.ws-eyebrow {
	display: flex; align-items: center; gap: .6rem;
	font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
	color: var(--wp--preset--color--slate); margin-bottom: .25rem;
}
.ws-eyebrow::before { content: ""; inline-size: 1.6rem; block-size: 2px; background: var(--wp--preset--color--sunset); border-radius: 2px; }
.has-navy-background-color .ws-eyebrow { color: #C9D0DE; }
.ws-lede { color: var(--wp--preset--color--slate); max-inline-size: 38rem; line-height: 1.55; }
.has-navy-background-color .ws-lede { color: #C9D0DE; }
.ws-muted { color: var(--wp--preset--color--slate); }
.ws-muted-light { color: #C9D0DE; }
.ws-fine { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--slate); }
.ws-center { text-align: center; margin-inline: auto; }
.ws-crumbs { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--slate); }
.ws-crumbs a { color: inherit; }
.ws-note {
	background: var(--wp--preset--color--sand); border-inline-start: 3px solid var(--wp--preset--color--ember);
	padding: 1rem 1.25rem; border-radius: 0 10px 10px 0;
}

/* Outline buttons. */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent; color: var(--wp--preset--color--navy);
	border: 2px solid var(--wp--preset--color--navy); padding-block: calc(.8rem - 2px);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--wp--preset--color--navy); color: var(--wp--preset--color--cream); }
.has-navy-background-color .wp-block-button.is-style-outline > .wp-block-button__link { color: var(--wp--preset--color--cream); border-color: var(--wp--preset--color--cream); }
.has-navy-background-color .wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--wp--preset--color--cream); color: var(--wp--preset--color--navy); }
.wp-block-button__link { transition: background-color .2s ease, color .2s ease, transform .2s ease; }
.wp-block-button__link:active { transform: translateY(1px); }

/* Headings, links and focus on the dark sections follow the light text. */
.has-navy-background-color :where(h1, h2, h3, h4, h5, h6):not(.has-text-color) { color: inherit; }
.has-navy-background-color a:where(:not(.wp-element-button)) { color: var(--wp--preset--color--cream); }
.has-navy-background-color a:where(:not(.wp-element-button)):hover { color: var(--wp--preset--color--peach); }
.has-navy-background-color :is(a, button, summary):focus-visible { outline: 2px solid var(--wp--preset--color--cream) !important; outline-offset: 3px; }

/* ---------- Sections ------------------------------------------------------ */
/* Full-width sections sit edge to edge (no strips of background between them). */
.wp-site-blocks > * + * { margin-block-start: 0; }
main > .alignfull, main > .wp-block-group.alignfull + .alignfull, .wp-block-post-content > .alignfull { margin-block: 0; }
.ws-section { padding-block: var(--wp--preset--spacing--60); }
.ws-section--tight { padding-block: var(--wp--preset--spacing--50); }
.ws-section__head { max-inline-size: 46rem; margin-bottom: var(--wp--preset--spacing--40); }
.ws-section__head > * { margin-block: 0 .9rem; }
.ws-page-head { padding-top: var(--wp--preset--spacing--50); }

/* ---------- Hero ---------------------------------------------------------- */
.ws-hero { padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60); overflow: clip; }
.ws-hero__cols { gap: var(--wp--preset--spacing--50); }
.ws-hero__copy h1 { margin-block: .4rem 1.1rem; }
.ws-hero__copy .wp-block-buttons { margin-top: 1.75rem; }
.ws-hero__art { position: relative; }
.ws-hero__art .ws-hero__desk { margin: 0; }
.ws-hero__art .ws-hero__phone {
	position: absolute; inset-inline-end: -1rem; inset-block-end: -3.5rem;
	inline-size: 26%; max-inline-size: 10rem; margin: 0;
}
@media (min-width: 782px) {
	.ws-hero__cols > .ws-hero__copy { flex-basis: 46%; }
	.ws-hero__cols > .ws-hero__art { flex-basis: 54%; }
}
@media (max-width: 781px) {
	.ws-hero__art { margin-top: 1rem; margin-bottom: 2.5rem; }
	.ws-hero__art .ws-hero__phone { inset-inline-end: .5rem; inline-size: 28%; }
}

/* Device frames. */
.wp-block-image.is-style-browser {
	background: var(--wp--preset--color--paper); border: 1px solid var(--ws-line);
	border-radius: 14px; padding-top: 1.6rem; position: relative; overflow: hidden;
	box-shadow: var(--wp--preset--shadow--lift);
}
.wp-block-image.is-style-browser::before {
	content: ""; position: absolute; inset-block-start: .6rem; inset-inline-start: .8rem;
	inline-size: .45rem; block-size: .45rem; border-radius: 50%;
	background: #E6D8C3; box-shadow: .75rem 0 0 #E6D8C3, 1.5rem 0 0 #E6D8C3;
}
.wp-block-image.is-style-browser img { display: block; inline-size: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-top: 1px solid var(--ws-line); }
.wp-block-image.is-style-browser figcaption { margin: 0; padding: .7rem 1rem .8rem; text-align: start; }
.wp-block-image.is-style-phone {
	border: 6px solid var(--wp--preset--color--navy); border-radius: 26px; overflow: hidden;
	background: var(--wp--preset--color--navy); box-shadow: var(--wp--preset--shadow--lift);
}
.wp-block-image.is-style-phone img { display: block; inline-size: 100%; aspect-ratio: 520 / 1125; object-fit: cover; object-position: top; border-radius: 20px; }

/* ---------- Strip of facts ------------------------------------------------ */
.ws-strip { border-block: 1px solid var(--ws-line); padding-block: 1.4rem; background: var(--wp--preset--color--paper); }
.ws-strip__list { list-style: none; padding: 0; margin-block: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem 2rem; font-size: .95rem; color: var(--wp--preset--color--slate); }
.ws-strip__list li { display: flex; flex-direction: column; gap: .15rem; }
.ws-strip__list strong { color: var(--wp--preset--color--navy); font-weight: 600; }
@media (max-width: 781px) { .ws-strip__list { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Cards --------------------------------------------------------- */
.is-style-card {
	background: var(--wp--preset--color--paper); border: 1px solid var(--ws-line);
	border-radius: var(--ws-radius); padding: clamp(1.25rem, 3vw, 2rem);
	box-shadow: var(--wp--preset--shadow--soft);
}
.ws-cards { gap: var(--wp--preset--spacing--40); }
.ws-theme-card > * + * { margin-top: .9rem; }
.ws-theme-card h3 { margin-top: 1.25rem; }
.ws-theme-card h3 a { color: inherit; text-decoration: none; }
.ws-theme-card h3 a:hover { text-decoration: underline; }
.ws-theme-card .wp-block-image a { display: block; }
.ws-theme-card .wp-block-image img { transition: transform .5s ease; }
.ws-theme-card .wp-block-image:hover img { transform: scale(1.02); }
.ws-theme-card .wp-block-buttons { margin-top: 1.4rem; }
.ws-theme-card--soon { background: transparent; border-style: dashed; box-shadow: none; display: flex; flex-direction: column; justify-content: center; }
.ws-price-line { font-weight: 600; }
.ws-doc-card h2 a { color: inherit; }

/* ---------- Points and steps --------------------------------------------- */
.ws-points, .ws-steps { gap: var(--wp--preset--spacing--40); }
.ws-points h3, .ws-steps h3 { margin-bottom: .5rem; }
.ws-points .wp-block-column { border-top: 2px solid var(--wp--preset--color--navy); padding-top: 1.1rem; }
.ws-step-num { font-family: var(--wp--preset--font-family--display); font-style: italic; font-size: 1.4rem; color: var(--wp--preset--color--ember); margin-bottom: .25rem; }

/* ---------- Features (product page) -------------------------------------- */
.ws-features { gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--40); }
.ws-feature { border-top: 1px solid var(--ws-line); padding-top: 1.1rem; }
.ws-feature h3 { margin-bottom: .5rem; }
.ws-feature p { color: var(--wp--preset--color--slate); }

/* ---------- Gallery ------------------------------------------------------- */
.ws-gallery { gap: var(--wp--preset--spacing--30); }
.ws-gallery .wp-block-image { margin: 0; }

/* ---------- Pricing ------------------------------------------------------- */
.ws-prices { gap: var(--wp--preset--spacing--40); }
.ws-price > * + * { margin-top: .75rem; }
.ws-price--studio { border-top: 4px solid var(--wp--preset--color--sunset); }
.ws-amount { margin-top: 1.25rem !important; font-size: 1rem; color: var(--wp--preset--color--slate); }
.ws-amount strong { font-family: var(--wp--preset--font-family--display); font-size: 3rem; font-weight: 560; color: var(--wp--preset--color--navy); line-height: 1; margin-inline-end: .2rem; }
.ws-amount-alt { color: var(--wp--preset--color--slate); margin-top: .25rem !important; }
.ws-price__buttons { flex-direction: column; gap: .6rem; margin-top: 1.5rem !important; }
.ws-prices + .ws-fine { margin-top: 1.5rem; max-inline-size: 46rem; }

/* Check-mark lists. */
.wp-block-list.is-style-checks { list-style: none; padding-inline-start: 0; }
.wp-block-list.is-style-checks li { position: relative; padding-inline-start: 1.75rem; margin-block: .45rem; }
.wp-block-list.is-style-checks li::before {
	content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .3em;
	inline-size: 1.05rem; block-size: 1.05rem; border-radius: 50%;
	background: var(--wp--preset--color--sunset) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%231D2B45' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 75% no-repeat;
}

/* ---------- Questions ----------------------------------------------------- */
.ws-faq { border-bottom: 1px solid var(--ws-line); padding-block: 1.1rem; }
.ws-faq summary {
	cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem;
	font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--medium); font-weight: 520;
}
.ws-faq summary::-webkit-details-marker { display: none; }
.ws-faq summary::after { content: "+"; font-family: var(--wp--preset--font-family--body); color: var(--wp--preset--color--ember); font-weight: 400; transition: transform .2s ease; }
.ws-faq[open] summary::after { transform: rotate(45deg); }
.ws-faq > :not(summary) { color: var(--wp--preset--color--slate); margin-top: .75rem; }

/* ---------- Closing band -------------------------------------------------- */
.ws-cta h2 { max-inline-size: 22ch; }
.ws-cta .wp-block-buttons { margin-top: 1.75rem; }

/* ---------- Plain pages (docs, policies) --------------------------------- */
.ws-page { padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60); }
.ws-page-title { margin-bottom: 1.5rem; }
.ws-page h2 { margin-top: 2.25rem; margin-bottom: .6rem; }
.ws-page li + li { margin-top: .4rem; }

/* ---------- Footer -------------------------------------------------------- */
.ws-footer { padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30); }
.ws-footer__cols { gap: var(--wp--preset--spacing--40); }
.ws-footer__brand { flex-basis: 34% !important; }
.ws-footer__brand p { max-inline-size: 24rem; margin-top: 1rem; }
.ws-footer__head { font-family: var(--wp--preset--font-family--body); font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #C9D0DE; margin-bottom: .75rem; }
.ws-footer__links { list-style: none; padding: 0; margin: 0; }
.ws-footer__links li { margin-block: .45rem; }
.ws-footer__links a { text-decoration: none; }
.ws-footer__links a:hover { text-decoration: underline; }
.ws-footer__legal { border-top: 1px solid rgb(251 243 230 / .15); margin-top: var(--wp--preset--spacing--40); padding-top: 1.25rem; font-size: var(--wp--preset--font-size--small); color: #C9D0DE; }

/* ---------- Motion -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }

/* ---------- Print --------------------------------------------------------- */
@media print {
	.ws-header, .ws-cta, .wp-block-buttons { display: none !important; }
	.ws-footer { background: none !important; color: #000 !important; }
}
.ws-brand--light a::before { border-radius: 8px; box-shadow: 0 0 0 1px rgb(251 243 230 / .28); }
.ws-footer { border-top: 1px solid rgb(251 243 230 / .12); }