/*
Theme Name: Argenita Fetahu
Theme URI: https://argenitafetahu.com
Author: Nehar Jashari
Description: Child theme of Portfolio WP for the painter and muralist Argenita Fetahu. Palette and typography are drawn from her oil paintings: the inherited red dress, flat saturated grounds of teal, ochre and periwinkle, and bone-white canvas.
Template: portfolio-wp
Version: 1.0.0
License: GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: argenita-fetahu
*/

/************************************************
 Editor placeholders for the server-rendered blocks
************************************************/

.afz-block-placeholder {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 0.9rem 1rem;
	border: 1px dashed var(--wp--preset--color--line);
	background: var(--wp--preset--color--cream);
	font-family: var(--wp--preset--font-family--libre-franklin);
}

.afz-block-placeholder__label {
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--oxblood);
}

.afz-block-placeholder__hint {
	font-size: 0.8rem;
	color: var(--wp--preset--color--ink-soft);
}

/************************************************
 Artwork specs (single product + archive cards)
************************************************/

.afz-specs {
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--wp--preset--font-family--libre-franklin);
	font-size: var(--wp--preset--font-size--extra-small);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-soft);
}

.afz-specs li {
	display: flex;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 0.7rem 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.afz-specs li:first-child {
	border-top: 1px solid var(--wp--preset--color--line);
}

.afz-specs .afz-specs__label {
	flex: 0 0 auto;
}

.afz-specs .afz-specs__value {
	flex: 1 1 auto;
	text-align: right;
	color: var(--wp--preset--color--ink);
}

/* Compact single-line variant used on the grid cards. */
.afz-caption {
	font-family: var(--wp--preset--font-family--libre-franklin);
	font-size: var(--wp--preset--font-size--extra-small);
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--ink-soft);
	margin: 0.35rem 0 0;
	font-style: italic;
}

/* Note shown in place of a price for works held in public collections. */
.afz-collection-note {
	font-family: var(--wp--preset--font-family--libre-franklin);
	font-size: var(--wp--preset--font-size--extra-small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--oxblood);
	border: 1px solid var(--wp--preset--color--oxblood);
	padding: 0.75rem 1rem;
	display: block;
}

/************************************************
 Artwork grid: let the canvases breathe
************************************************/

/*
 * Paintings run from 49.5 cm wide to 180 cm tall, so a grid cannot crop them to
 * a common box. Instead every cell gets the same fixed height and the canvas is
 * sat on the floor of it, which lines the titles up across a row while leaving
 * each painting its true proportions.
 */
.afz-artwork-grid .wp-block-post-featured-image,
.afz-artwork-grid .wc-block-components-product-image {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	height: 26rem;
}

/*
 * WooCommerce wraps the image in a link, so the link has to carry the cell
 * height too, otherwise max-height on the image resolves against nothing.
 */
.afz-artwork-grid .wc-block-components-product-image > a,
.afz-artwork-grid .wc-block-components-product-image > figure,
.afz-artwork-grid .wp-block-post-featured-image > a {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	width: 100%;
	height: 100%;
	margin: 0;
}

/*
 * WooCommerce also prints object-fit:cover as an inline style on the image,
 * which crops the canvas once the cell has a fixed height, so it has to be
 * overridden rather than merely restyled.
 */
.afz-artwork-grid .wc-block-components-product-image img,
.afz-artwork-grid .wp-block-post-featured-image img {
	width: auto !important;
	max-width: 100%;
	height: auto !important;
	max-height: 100%;
	margin-inline: auto;
	display: block;
	object-fit: contain !important;
}

@media (max-width: 781px) {

	.afz-artwork-grid .wp-block-post-featured-image,
	.afz-artwork-grid .wc-block-components-product-image {
		height: 20rem;
	}
}

.afz-artwork-grid figure {
	margin: 0;
}

.afz-artwork-card .wp-block-post-title a {
	text-decoration: none;
}

.afz-artwork-card .wp-block-post-title a:hover {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/************************************************
 Single artwork
************************************************/

.afz-artwork-image img {
	width: 100%;
	height: auto;
	max-height: 82vh;
	object-fit: contain;
}

/* WooCommerce renders a star-rating slot even with reviews off. */
.afz-single-artwork .woocommerce-product-rating,
.afz-single-artwork .comment-form-rating {
	display: none;
}

/*
 * Each canvas exists once, so the quantity stepper can only ever say one. The
 * input stays in the DOM, where WooCommerce reads it as 1.
 */
.afz-single-artwork form.cart .quantity {
	display: none;
}

/************************************************
 Exhibition and award tables
************************************************/

/*
 * Applied to a core/table block, so the class lands on the wrapping figure.
 * The award table carries five columns, which cannot compress to a phone width
 * without becoming unreadable, so it scrolls inside itself rather than pushing
 * the page sideways.
 */
.afz-list {
	font-family: var(--wp--preset--font-family--libre-franklin);
	font-size: var(--wp--preset--font-size--small);
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.afz-list table {
	width: 100%;
	min-width: 30rem;
	border-collapse: collapse;
	table-layout: auto;
}

.afz-list td,
.afz-list th {
	border: 0;
}

.afz-list th {
	text-align: left;
	font-weight: 500;
	font-size: var(--wp--preset--font-size--extra-small);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-soft);
	padding: 0 0 0.9rem;
	border-bottom: 1px solid var(--wp--preset--color--ink);
}

.afz-list td {
	padding: 0.85rem 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	vertical-align: baseline;
}

.afz-list td:first-child {
	width: 5.5rem;
	color: var(--wp--preset--color--ink-soft);
	font-variant-numeric: tabular-nums;
}

.afz-list td:last-child {
	text-align: right;
	color: var(--wp--preset--color--ink-soft);
	white-space: nowrap;
}

.afz-list .afz-list__title {
	color: var(--wp--preset--color--ink);
}

@media (max-width: 600px) {

	.afz-list td:last-child {
		white-space: normal;
	}

	.afz-list td:first-child {
		width: 3.75rem;
	}
}

/* Long exhibition lists collapse behind a disclosure. */
.afz-more {
	border: 0;
}

.afz-more > summary {
	cursor: pointer;
	font-family: var(--wp--preset--font-family--libre-franklin);
	font-size: var(--wp--preset--font-size--extra-small);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 1.25rem 0 0;
	color: var(--wp--preset--color--oxblood);
}

.afz-more[open] > summary {
	padding-bottom: 1rem;
}

/************************************************
 Typographic details
************************************************/

/* Oversized display headings want tighter tracking than the parent sets. */
.afz-display {
	letter-spacing: -0.02em;
	line-height: 0.95;
}

.afz-eyebrow {
	font-family: var(--wp--preset--font-family--libre-franklin);
	font-size: var(--wp--preset--font-size--extra-small);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-soft);
}

.afz-rule {
	border: 0;
	border-top: 1px solid var(--wp--preset--color--ink);
	opacity: 1;
	margin: 0;
}

/* Pull quote for the artist statement. */
.afz-quote p {
	font-family: var(--wp--preset--font-family--playfair-display);
	font-style: italic;
	text-wrap: balance;
}

/************************************************
 Cart and checkout: quieter than the parent theme
************************************************/

.woocommerce-message,
.woocommerce-info {
	border-top-color: var(--wp--preset--color--oxblood);
}

.wc-block-components-notice-banner {
	border-radius: 0;
}

/************************************************
 Guard against sideways page scroll
************************************************/

/*
 * Deliberately no overflow-x:hidden on html/body. It would mask overflow rather
 * than fix it, and an overflow container on an ancestor breaks the sticky detail
 * column on an artwork page. Wide content scrolls inside its own box instead.
 */

/* Very large display type must break rather than push the layout. */
.afz-display,
.afz-quote p {
	overflow-wrap: break-word;
}

.afz-specs li {
	flex-wrap: wrap;
}

/************************************************
 Artwork card hover
************************************************/

/*
 * The padding is always present, not added on hover, so the card never shifts
 * as the pointer crosses it. The tint is the only thing that changes.
 */
.afz-artwork-card {
	padding: 1.25rem;
	background-color: transparent;
	transition: background-color 0.25s ease;
}

.afz-artwork-card:hover {
	background-color: var(--wp--preset--color--cream);
}

/* The grid item behind the card stays out of it. */
.afz-artwork-grid li.wp-block-post {
	background-color: transparent;
}

/************************************************
 Price and availability on a card
************************************************/

/* Stands in for a price when a work cannot be bought. */
.afz-price-status {
	font-family: var(--wp--preset--font-family--libre-franklin);
	font-size: var(--wp--preset--font-size--extra-small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--oxblood);
	margin: 0;
	white-space: nowrap;
}

.afz-price-status--sold {
	color: var(--wp--preset--color--ink-soft);
}

/* Euro is a guide price; francs are what gets charged. */
.afz-price-note {
	font-family: var(--wp--preset--font-family--libre-franklin);
	font-size: var(--wp--preset--font-size--extra-small);
	color: var(--wp--preset--color--ink-soft);
	margin: 0.35rem 0 0;
}

/************************************************
 Buttons

 The parent theme sets `.wp-element-button:hover { color: inherit }`, which
 outranks the hover colour declared in theme.json and left hover text dark on a
 dark fill. Buttons that carry their own inline colours are unaffected, since an
 inline style still wins.
************************************************/

.wp-block-button .wp-element-button:hover,
.wp-block-button .wp-element-button:focus,
.wp-block-button .wp-element-button:active,
.wp-block-button .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link:focus,
.wp-block-button .wp-block-button__link:active {
	color: #ffffff;
}

/************************************************
 Footer

 The navigation block in the second column inherits its link colour from the
 editor, which rendered near-black on the dark footer.
************************************************/

.afz-footer .wp-block-navigation a,
.afz-footer .wp-block-navigation a:visited,
.afz-footer .wp-block-navigation .wp-block-navigation-item__content {
	color: var(--wp--preset--color--cream);
	text-decoration: none;
	padding: 0;
}

.afz-footer .wp-block-navigation a:hover,
.afz-footer .wp-block-navigation a:focus,
.afz-footer .wp-block-navigation .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--ochre);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/************************************************
 Currency switcher
************************************************/

.afz-currency {
	display: inline-flex;
	align-items: center;
	gap: 0.15rem;
	font-family: var(--wp--preset--font-family--libre-franklin);
	font-size: var(--wp--preset--font-size--extra-small);
	letter-spacing: 0.08em;
}

.afz-currency__option {
	color: var(--wp--preset--color--ink-soft);
	text-decoration: none;
	padding: 0.3rem 0.45rem;
	border: 1px solid transparent;
	line-height: 1;
}

.afz-currency__option:hover {
	color: var(--wp--preset--color--oxblood);
}

.afz-currency__option.is-active {
	color: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--line);
}

.afz-currency__sep {
	color: var(--wp--preset--color--line);
}

/************************************************
 Document downloads
************************************************/

.afz-docs {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none !important;
}

/* The list marker needs clearing on the item too, not just the list. */
.afz-docs li {
	list-style: none !important;
	margin: 0;
}

.afz-docs li::marker {
	content: none;
}

.afz-docs a {
	display: inline-flex;
	align-items: baseline;
	gap: 0.6rem;
	font-family: var(--wp--preset--font-family--libre-franklin);
	font-size: var(--wp--preset--font-size--extra-small);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--ink);
	padding: 1rem 1.5rem;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.afz-docs a:hover {
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--bone);
}

.afz-docs .afz-docs__meta {
	font-size: 0.7em;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--ink-soft);
}

.afz-docs a:hover .afz-docs__meta {
	color: var(--wp--preset--color--line);
}

/************************************************
 Press list
************************************************/

/*
 * Two balanced columns of links. The outlet sits in a fixed-width gutter so the
 * titles line up down each column, and list markers are cleared explicitly:
 * the core list block re-adds them inside a multi-column context.
 */
.afz-press {
	margin: 0;
	padding: 0;
	list-style: none !important;
	columns: 2;
	column-gap: 4rem;
}

.afz-press li {
	display: grid;
	grid-template-columns: 7rem 1fr;
	gap: 0.75rem;
	align-items: baseline;
	break-inside: avoid;
	padding: 0.7rem 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	font-family: var(--wp--preset--font-family--libre-franklin);
	font-size: var(--wp--preset--font-size--small);
	list-style: none !important;
}

.afz-press li::marker {
	content: none;
}

.afz-press a {
	text-decoration: none;
	color: var(--wp--preset--color--ink);
}

.afz-press a:hover {
	color: var(--wp--preset--color--oxblood);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.afz-press .afz-press__kind {
	font-size: 0.72em;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-soft);
	line-height: 1.6;
}

@media (max-width: 900px) {

	.afz-press {
		columns: 1;
	}

	.afz-press li {
		grid-template-columns: 1fr;
		gap: 0.15rem;
	}
}

/************************************************
 Gutters
************************************************/

/*
 * Every full-width section carries an inline padding-left/right of 2rem, set in
 * the block markup, so a stylesheet can only reach it with !important.
 * The attribute selector is deliberate: it matches only the elements that
 * already declare that padding, which leaves the unpadded wrappers they nest
 * inside (main.site-main above all) alone. A blanket
 * .wp-block-group.alignfull rule would hit the wrapper too and the two would
 * add up to double the gutter.
 */
@media (max-width: 781px) {

	.wp-block-group.alignfull[style*="padding-left:2rem"] {
		padding-left: 24px !important;
		padding-right: 24px !important;
	}
}

/*
 * The parent theme assumes a full-width section brings no padding of its own,
 * so below 1310px it gives every child of one a gutter of a block-gap (24px),
 * with !important. Ours are padded, so the two stack: page content ends up one
 * whole gutter further in than the site title and navigation in the header,
 * which sits outside .site-main and never gets the parent's half. Drop the
 * parent's gutter wherever our own section already supplies one.
 *
 * This needs to outrank .site-main > .entry-content > .alignfull:not(...) >
 * *:not(.alignfull), five classes and !important, so .wp-block-group and the
 * attribute selector are both load-bearing: they take it to six.
 */
@media (max-width: 1310px) {

	.site-main > .entry-content > .wp-block-group.alignfull[style*="padding-left:2rem"] > *:not(.alignfull) {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}