/* ==========================================================================
   VICTORIA O'MAY ALVES: THEME STYLES

   1. SETTINGS     Everything you are likely to change. Edit values here, or paste
                   an overriding :root { ... } block into Appearance > Editor >
                   Styles > Additional CSS so it survives theme updates.
   2. BASE
   3. HEADER AND MENU
   4. SERIES PAGE AND VIEWER
   5. HOMEPAGE
   6. PAGES, FOOTER, 404
   ========================================================================== */


/* ========== 1. SETTINGS ================================================== */

:root {
	/* Colours */
	--bg: #fdfdfb;          /* page background */
	--ink: #202020;         /* text */
	--muted: #6a6a66;       /* captions, small print */
	--line: #202020;        /* the rule under the header */
	--soft: #e6e4de;        /* hairlines */
	--tile: #f3f2ee;        /* quiet backdrop behind thumbnails */
	--accent: #3b5f8a;      /* used sparingly: hovers, focus, the 404 underline */

	/* Typography: families */
	--font-ui: "Karla", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-text: "Source Serif 4", Georgia, "Times New Roman", serif;

	/* Typography: menu and buttons */
	--menu-size: 0.8rem;
	--menu-spacing: 0.14em;     /* letter spacing in the menu */
	--menu-case: uppercase;     /* uppercase, none or capitalize */
	--menu-weight: 400;

	/* Typography: text */
	--body-size: 1.125rem;
	--body-line-height: 1.65;
	--heading-weight: 400;
	--font-name: var(--font-ui);   /* font for your name in the header */
	--name-size: 1.2rem;
	--name-spacing: 0.16em;
	--name-case: none;             /* try uppercase to match the menu */
	--caption-size: 0.85rem;

	/* Layout */
	--page-pad: clamp(1rem, 3vw, 2rem);
	--grid-gap: clamp(1rem, 2.4vw, 2rem);
	--thumb-min: 13rem;         /* smallest thumbnail width in a series grid */
	--fade: 0.5s;               /* speed of hover and open effects */

	/* Work viewer */
	--viewer-height: clamp(20rem, 68svh, 46rem);   /* fixed height of the image window */
	--viewer-bg: transparent;                      /* try var(--tile) for a visible frame */

	/* Homepage, one large work */
	--home-one-height: 70svh;                      /* height of the image */
}


/* ========== 2. BASE ====================================================== */

body {
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-text);
	font-size: var(--body-size);
	line-height: var(--body-line-height);
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { text-underline-offset: 0.18em; }
:where(a, button, summary):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.vw-main { min-height: 60vh; }
.vw-pad { padding: 2rem var(--page-pad); }
.vw-empty { color: var(--muted); font-style: italic; }
button { font: inherit; color: inherit; }

button,
summary,
input[type="submit"],
.vw-nav,
.vw-bar,
.vw-count,
.vw-cap3 a,
.vw-newsletter {
	font-family: var(--font-ui);
}


/* ========== 3. HEADER AND MENU =========================================== */

.vw-header {
	position: sticky;
	top: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	--hp: 1.1rem;
	padding: var(--hp) var(--page-pad);
	background: var(--bg);
	border-bottom: 1px solid var(--line);
}
.admin-bar .vw-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .vw-header { top: 46px; } }

.vw-header .vw-name { margin: 0; font-family: var(--font-name); font-size: var(--name-size); letter-spacing: var(--name-spacing); text-transform: var(--name-case); line-height: 1.2; }
.vw-header .vw-name a { text-decoration: none; color: inherit; }

.vw-nav { font-family: var(--font-ui); font-size: var(--menu-size); letter-spacing: var(--menu-spacing); text-transform: var(--menu-case); font-weight: var(--menu-weight); }
.vw-nav a, .vw-nav button { color: inherit; text-decoration: none; letter-spacing: inherit; text-transform: inherit; font-size: inherit; font-weight: inherit; }
.vw-list, .vw-sub { list-style: none; margin: 0; padding: 0; }
.vw-list { display: flex; flex-wrap: wrap; align-items: center; gap: 0 2rem; }
.vw-list > li { position: relative; padding: 0.6rem 0; }
.vw-nav a:hover, .vw-nav button:hover, .vw-nav [aria-current="page"] { color: var(--muted); }
.vw-sub-toggle, .vw-menu-toggle { background: none; border: 0; padding: 0; cursor: pointer; }
.vw-menu-toggle { display: none; }

.vw-sub {
	display: none;
	position: absolute;
	top: calc(100% + var(--hp) + 1px);   /* opens just below the header rule */
	left: -1.2rem;
	min-width: max-content;
	padding: 1rem 2.4rem 1.2rem 1.1rem;
	background: #fff;
	border-left: 1px solid var(--ink);
	box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.35);
	text-align: left;
	z-index: 30;
}
.vw-sub::before { content: ""; position: absolute; left: 0; right: 0; top: calc(-1 * (var(--hp) + 1px)); height: calc(var(--hp) + 1px); }  /* keeps the menu open while the pointer crosses the rule */
.vw-sub a { display: block; padding: 0.4rem 0; line-height: 1.4; white-space: nowrap; }
.vw-sub-toggle[aria-expanded="true"] + .vw-sub { display: block; }
@media (hover: hover) { .vw-has-sub:hover > .vw-sub { display: block; } }

@media (max-width: 48rem) {
	.vw-header { align-items: flex-start; }
	.vw-nav { width: 100%; }
	.vw-menu-toggle { display: inline-block; }
	.vw-list { display: none; flex-direction: column; align-items: flex-start; gap: 0; padding-top: 0.6rem; }
	.vw-list.is-open { display: flex; }
	.vw-sub { display: block; position: static; min-width: 0; background: none; border: 0; box-shadow: none; padding: 0 0 0 1rem; }
	.vw-sub::before { display: none; }
	.vw-sub a { padding: 0.35rem 0; white-space: normal; }
	.vw-has-sub > .vw-sub-toggle { color: var(--muted); pointer-events: none; }
}


/* ========== 4. SERIES PAGE AND VIEWER ==================================== */

.vw-series { padding: clamp(1.5rem, 4vw, 3rem) var(--page-pad) 4rem; max-width: 90rem; margin: 0 auto; }
.vw-series-head { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.vw-series-title { margin: 0 0 0.6rem; font-size: 1.7rem; font-weight: var(--heading-weight); }
.vw-note { max-width: 38rem; font-size: 0.95rem; color: var(--muted); line-height: 1.6; }
.vw-note p { margin: 0 0 0.6rem; }
.vw-note summary { cursor: pointer; font-size: var(--menu-size); letter-spacing: var(--menu-spacing); text-transform: var(--menu-case); margin-bottom: 0.6rem; }
.vw-group { margin: 2.5rem 0 1rem; font-size: 1.15rem; font-weight: var(--heading-weight); font-style: italic; }

.vw-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--thumb-min), 1fr)); gap: var(--grid-gap); align-items: start; }
.vw-item { margin: 0; }
.vw-link { display: block; text-decoration: none; color: inherit; }
.vw-media { position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1; overflow: hidden; background: var(--tile); }
.vw-media .vw-main { width: 100%; height: 100%; object-fit: contain; display: block; }
.vw-media .vw-hover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1); transition: opacity var(--fade) ease, transform calc(var(--fade) * 4) ease; }
@media (hover: hover) { .vw-link:hover .vw-hover, .vw-link:focus-visible .vw-hover, .vw-home-item:hover .vw-hover, .vw-home-item:focus-visible .vw-hover { opacity: 1; transform: scale(1.05); } }
.vw-label { display: block; margin-top: 0.5rem; font-size: var(--caption-size); font-style: italic; color: var(--muted); line-height: 1.35; }
.vw-item.is-open .vw-label { color: var(--ink); }

/* Opened work: sits in the grid, directly below the clicked row */
.vw-panel { grid-column: 1 / -1; margin: 0.5rem 0; padding: 1.2rem 0 1.8rem; border-top: 1px solid var(--soft); border-bottom: 1px solid var(--soft); outline: none; }
.vw-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; font-size: var(--menu-size); letter-spacing: var(--menu-spacing); text-transform: var(--menu-case); }
.vw-bar button { background: none; border: 0; padding: 0.3rem 0; cursor: pointer; font-size: inherit; letter-spacing: inherit; text-transform: inherit; }
.vw-bar button:hover { color: var(--muted); }
.vw-bar button:disabled { opacity: 0.3; cursor: default; }
.vw-bar .vw-step { display: flex; align-items: center; gap: 1.2rem; }
.vw-count { color: var(--muted); }
.vw-fig { margin: 0; display: flex; align-items: center; justify-content: center; height: var(--viewer-height); background: var(--viewer-bg); }
.vw-fig img { width: 100%; height: 100%; max-width: 100%; object-fit: contain; }
.vw-thumbs { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin: 1rem 0 0; padding: 0; list-style: none; min-height: 3.4rem; }
.vw-thumbs button { display: block; width: 3.4rem; height: 3.4rem; padding: 0; border: 1px solid transparent; background: var(--tile); cursor: pointer; opacity: 0.65; }
.vw-thumbs button:hover, .vw-thumbs button[aria-current="true"] { opacity: 1; border-color: var(--ink); }
.vw-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vw-caption { margin-top: 1.1rem; text-align: center; font-size: 0.95rem; line-height: 1.5; min-height: 5.2rem; }
.vw-caption p { margin: 0; }
.vw-cap2, .vw-cap3 { color: var(--muted); font-size: var(--caption-size); }
.vw-cap3 a { color: inherit; font-size: 0.72rem; letter-spacing: var(--menu-spacing); text-transform: var(--menu-case); }
.vw-static img { display: block; margin: 1rem auto; }

@media (prefers-reduced-motion: reduce) {
	.vw-media .vw-hover { transition: none; transform: none !important; }
}


/* ========== 5. HOMEPAGE ================================================== */

.vw-home { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--grid-gap); align-items: start; padding: clamp(2rem, 7vw, 5.5rem) var(--page-pad) 5rem; min-height: 68vh; }
.vw-home-item { display: block; grid-column: var(--c, 1 / span 4); margin-top: var(--mt, 0); color: inherit; text-decoration: none; }
.vw-home .vw-media { aspect-ratio: auto; display: block; background: var(--tile); }
.vw-home .vw-media .vw-main { width: 100%; height: auto; display: block; }
.vw-home-cap { display: block; margin-top: 0.55rem; font-size: var(--caption-size); font-style: italic; color: var(--muted); line-height: 1.35; }
.vw-home.is-one { display: flex; align-items: center; justify-content: center; padding: clamp(1.5rem, 4vw, 3rem) var(--page-pad) 3rem; min-height: calc(100svh - 7rem); }
.vw-home.is-one .vw-home-item { display: flex; flex-direction: column; align-items: center; align-self: center; width: auto; max-width: 100%; margin: 0; text-align: center; }
.vw-home.is-one .vw-media { display: inline-block; line-height: 0; background: none; }
.vw-home.is-one .vw-media .vw-main { width: auto; max-width: 100%; height: auto; max-height: var(--home-one-height); }
.vw-home.is-one .vw-home-cap { margin-top: 0.8rem; }
.vw-home-static { display: flex; flex-wrap: wrap; gap: 2rem; justify-content: center; }
.vw-home-static .vw-home-item { width: min(24rem, 90%); }

@media (max-width: 48rem) {
	.vw-home { display: flex; flex-direction: column; gap: 2.2rem; min-height: 0; }
	.vw-home-item { width: var(--mw, 80%); align-self: var(--as, flex-start); margin-top: 0; }
}


/* ========== 6. PAGES, FOOTER, 404 ======================================== */

.vw-page { padding: clamp(2rem, 5vw, 4rem) var(--page-pad); }
.vw-page .wp-block-post-title, .vw-page h1 { font-size: 1.7rem; font-weight: var(--heading-weight); margin-bottom: 1.2rem; }
.vw-page .wpcf7 input[type="text"], .vw-page .wpcf7 input[type="email"], .vw-page .wpcf7 textarea { width: 100%; font: inherit; padding: 0.6rem 0.7rem; border: 1px solid var(--soft); background: #fff; border-radius: 0; }
.vw-page .wpcf7 input[type="submit"] { font-family: var(--font-ui); font-size: var(--menu-size); letter-spacing: var(--menu-spacing); text-transform: var(--menu-case); background: var(--ink); color: var(--bg); border: 0; padding: 0.8rem 1.6rem; cursor: pointer; }

.vw-footer { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 2.5rem var(--page-pad) 3rem; border-top: 1px solid var(--soft); text-align: center; }
.vw-footer .vw-fine { margin: 0; font-size: 0.8rem; color: var(--muted); }
.vw-newsletter { font-family: var(--font-ui); font-size: 0.9rem; }
.vw-newsletter p { margin: 0 0 0.5rem; }
.vw-newsletter input[type="email"], .vw-newsletter input[type="text"] { font: inherit; padding: 0.5rem 0.6rem; border: 1px solid var(--soft); background: #fff; border-radius: 0; }
.vw-newsletter input[type="submit"], .vw-newsletter button { font-size: var(--menu-size); letter-spacing: var(--menu-spacing); text-transform: var(--menu-case); background: var(--ink); color: var(--bg); border: 0; padding: 0.6rem 1.2rem; cursor: pointer; }
.vw-mark { color: var(--muted); display: inline-flex; }
.vw-mark svg { transition: transform calc(var(--fade) * 3) ease; }
.vw-mark:hover svg { transform: rotate(120deg); color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .vw-mark svg { transition: none; } .vw-mark:hover svg { transform: none; } }

.vw-404 h1 { text-decoration: underline wavy var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.3em; }