/*
Theme Name: Stega 1.4.3
Description: Shared child theme of Twenty Twenty-Five for diving.stega.org, flying.stega.org, networkgirl.org and stega.org. Header, footer and post grid live in theme files so every site looks the same; logo, title, tagline and menu come from each site's own settings.
Author: Stega
Template: twentytwentyfive
Version: 1.4.3
Requires at least: 6.7
Requires PHP: 7.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: stega
*/

/* ---------- Header ---------- */
.stega-header .wp-block-site-logo img { border-radius: 50%; }
.stega-header .wp-block-site-logo { flex-shrink: 0; }
.stega-header .wp-block-site-title { line-height: 1.1; }
.stega-header .wp-block-site-title a { text-decoration: none; }

.stega-socials { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.stega-socials img {
	width: 40px; height: 40px; display: block;
	transition: transform .15s ease;
}
.stega-socials a:hover img,
.stega-socials a:focus-visible img { transform: scale(1.08); }

/* Quiet, outlined search button instead of a solid black pill */
.stega-header .wp-block-search__button {
	background: transparent; color: inherit;
	border: 1px solid var(--wp--preset--color--accent-6);
	border-radius: 50%; padding: .5rem; width: 2.5rem; height: 2.5rem;
}
.stega-header .wp-block-search__button:hover { border-color: currentColor; }

/* ---------- Spacing under the header (all sites, every page) ---------- */
/* 20px between the header and the first thing on the page. Twenty Twenty-Five
   templates add a 70px margin plus 70px padding there; trim both. */
main.wp-block-group { margin-top: 20px !important; }
main.wp-block-group > .wp-block-group:first-child { padding-top: 0 !important; }
main.wp-block-group > :first-child { margin-top: 0 !important; }
main .wp-block-post-title + .wp-block-post-content,
main .wp-block-post-title + .wp-block-post-featured-image { margin-top: .5rem !important; }

/* ---------- Post grid: equal cards ---------- */
.stega-grid .wp-block-post-template.is-layout-grid { align-items: stretch; }
.stega-grid .wp-block-post-template > li { display: flex; }
.stega-grid .stega-card { flex: 1; min-width: 0; height: 100%; }
.stega-grid .stega-card > * { width: 100%; margin: 0; }

.stega-grid .stega-card-image { box-sizing: border-box; margin: 0 0 .25rem; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 6px; }
.stega-grid .stega-card-image img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; display: block; }
.stega-grid .stega-card-image--empty { background: var(--wp--preset--color--accent-5); border: 1px solid var(--wp--preset--color--accent-6); }
.stega-grid .stega-card-image--empty a { display: flex; height: 100%; align-items: center; justify-content: center; }
.stega-grid .stega-card-image--empty img { width: 40%; height: auto; object-fit: contain; border-radius: 50%; opacity: .55; }

/* Title: always two lines tall, clipped after two */
.stega-grid .stega-card-title {
	line-height: 1.25; height: 2.5em; overflow: hidden;
	display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
}
.stega-grid .stega-card-title a { text-decoration: none; }
.stega-grid .stega-card-title a:hover { text-decoration: underline; }

/* Text: always three lines tall, clipped after three */
.stega-grid .stega-card-excerpt { line-height: 1.5; height: 4.5em; overflow: hidden; color: var(--wp--preset--color--accent-4); }
.stega-grid .stega-card-excerpt .wp-block-post-excerpt__excerpt {
	margin: 0; display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}
.stega-grid .stega-card-excerpt .wp-block-post-excerpt__more-text { display: none; }

.stega-grid .stega-card-date { margin-top: auto !important; padding-top: .25rem; color: var(--wp--preset--color--accent-4); }

/* Photo-grid mode (Settings → Reading, used on stega.org): masonry of photos
   in their own shapes, no titles, 10px gaps (like the networkgirl.org galleries).
   assets/masonry.js adds .is-masonry; without it this is a plain top-aligned grid. */
.stega-photo-grid .stega-grid .wp-block-post-template.is-layout-grid {
	grid-template-columns: repeat(auto-fill, minmax(min(13rem, 100%), 1fr));
	gap: 10px !important;
	align-items: start;
}
.stega-photo-grid .stega-grid .wp-block-post-template.is-masonry {
	grid-auto-rows: 4px;
	row-gap: 0 !important;
}
.stega-photo-grid .stega-grid .wp-block-post-template > li { display: block; }
.stega-photo-grid .stega-grid .stega-card { gap: 0 !important; height: auto; }
.stega-photo-grid .stega-grid .stega-card-image { margin: 0; aspect-ratio: auto; border-radius: 4px; }
.stega-photo-grid .stega-grid .stega-card-image img {
	width: 100%; height: auto; object-fit: initial; border-radius: 4px;
	/* WordPress gives lazy images a 3000x1500 placeholder size; that would make
	   masonry tiles huge, so use the image's own width/height instead. */
	contain: none !important; contain-intrinsic-size: none !important;
}
.stega-photo-grid .stega-grid .stega-card-image--empty { aspect-ratio: 3 / 2; }
.stega-photo-grid .stega-grid .stega-card-image--empty img { width: 40%; }
.stega-photo-grid .stega-grid .stega-card-image a:hover img { opacity: .9; }
@media (max-width: 620px) {
	.stega-photo-grid .stega-grid .wp-block-post-template.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 8px !important;
	}
}

/* Photo-grid sites (stega.org), single post pages: the post's photo is shown
   as large as the screen allows (both width and height), centered. */
.stega-photo-site.single .wp-block-post-content > p:has(> img),
.stega-photo-site.single .wp-block-post-content > p:has(> a > img),
.stega-photo-site.single .wp-block-post-content > figure.wp-block-image,
.stega-photo-site.single .wp-block-post-content > .wp-block-image {
	max-width: var(--wp--style--global--wide-size) !important;
	width: 100%;
	margin-left: auto !important; margin-right: auto !important;
	text-align: center;
}
.stega-photo-site.single .wp-block-post-content img {
	display: block;
	width: auto; height: auto;
	max-width: 100%;
	max-height: calc(100vh - 2rem);
	max-height: calc(100svh - 2rem);
	margin: 0 auto;
	object-fit: contain;
}

/* ---------- Footer: three columns (tags | sites | past posts) ---------- */
.stega-footer-cols {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--50);
	align-items: start;
}
.stega-footer-cols > * { margin-block-start: 0 !important; }
.stega-footer-col > :first-child { margin-top: 0; }
.stega-footer-title {
	font-size: var(--wp--preset--font-size--medium) !important;
	font-weight: 600;
	margin: 0 0 var(--wp--preset--spacing--20);
	padding-bottom: .5rem;
	border-bottom: 1px solid var(--wp--preset--color--accent-6);
}

/* Tags */
.stega-tags { line-height: 1.6; }
.stega-tags a { margin-right: .5em; text-decoration: none; }
.stega-tags a:hover { text-decoration: underline; }

/* Other sites */
.stega-sites { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-bottom: var(--wp--preset--spacing--30); }
.stega-sites a { display: block; }
.stega-sites img { width: 72px; height: 72px; object-fit: cover; border-radius: 50%; display: block; }
.stega-sites--brands img { width: 96px; height: 96px; border-radius: 0; object-fit: contain; }
.stega-sites a:hover img { opacity: .85; }

/* Past posts */
.stega-archive { font-size: var(--wp--preset--font-size--small); }
.stega-archive__year { border-bottom: 1px solid var(--wp--preset--color--accent-6); }
.stega-archive__year:last-child { border-bottom: 0; }
.stega-archive__toggle {
	display: flex; align-items: center; gap: .5rem; width: 100%;
	background: none; border: 0; padding: .55rem 0; cursor: pointer;
	color: inherit; font: inherit; font-weight: 600; text-align: left;
}
.stega-archive__toggle > span:first-child { flex: 1; }
.stega-archive__toggle:hover { color: var(--wp--preset--color--accent-4); }
.stega-archive__chevron { flex-shrink: 0; transition: transform .25s; }
.stega-archive__year.is-open .stega-archive__chevron { transform: rotate(180deg); }
.stega-archive__months { list-style: none; margin: 0; padding: 0 0 .5rem .75rem; }
.stega-archive__months[hidden] { display: none; }
.stega-archive__months a {
	display: flex; justify-content: space-between; padding: .25rem 0;
	color: inherit; text-decoration: none;
}
.stega-archive__months a:hover { text-decoration: underline; }
.stega-archive__count { color: var(--wp--preset--color--accent-4); font-weight: 400; font-size: .85em; }

@media (max-width: 960px) {
	.stega-footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.stega-footer-col--tags { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
	.stega-header .wp-block-site-logo img { width: 110px !important; height: auto; }
	.stega-footer-cols { grid-template-columns: 1fr; }
	.stega-sites { gap: .5rem; }
	.stega-sites img { width: 60px; height: 60px; }
	.stega-sites--brands img { width: 84px; height: 84px; }
}