/*
Theme Name: MyApple
Description: Block theme for myapple.pl, after the look of myapple4.
Version: 0.2.0
Requires at least: 6.6
Requires PHP: 8.1
License: GNU General Public License v2 or later
Text Domain: myapple

Fonts in assets/fonts: Source Sans 3 (SIL Open Font License 1.1) and Roboto Slab (Apache License 2.0).
Colours, fonts and spacing are in theme.json; this is the rest.
*/

/* Header and footer */

.site-header {
	border-bottom: 1px solid var(--wp--preset--color--border);
	padding-block: 0.75rem;
}

.site-header a {
	text-decoration: none;
}

/* The leaf makes the logo taller above its lettering: the space below centres the lettering on the
   menu. */
.site-header .site-logo {
	padding-bottom: 10px;
}

/* The menu, as myapple4's: grey capitals (parts/header.html), the highlighted items (the Magazyn)
   in red, all darker when hovered, a caret on the items with a submenu and the submenu as a
   dropdown. Specific enough to beat the navigation block's `color: inherit`. */
.site-header .wp-block-navigation .is-featured > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--red);
}

.site-header .wp-block-navigation .wp-block-navigation-item:hover > :is(.wp-block-navigation-item__content, .wp-block-navigation__submenu-icon),
.site-header .wp-block-navigation .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--contrast);
}

.site-header .wp-block-navigation__submenu-icon svg {
	display: none;
}

.site-header .wp-block-navigation__submenu-icon::after {
	border-inline: 4px solid transparent;
	border-top: 4px solid;
	content: "";
	display: block;
}

.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container {
	border-radius: 4px;
	box-shadow: 0 6px 12px rgb(0 0 0 / 0.175);
	padding-block: 0.3rem;
	white-space: nowrap;
}

.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.3rem 1.25rem;
}

/* On tablets, until the menu folds at 600px, closer items and a shorter search field keep it on one
   line. */
@media (max-width: 900px) {
	.site-header .wp-block-navigation {
		gap: 1rem;
	}

	.site-header .wp-block-search__inside-wrapper {
		max-width: 150px;
	}
}

.site-footer {
	background: var(--wp--preset--color--light);
	border-top: 1px solid var(--wp--preset--color--border);
	margin-block-start: 3rem;
	padding-block: 2rem 1rem;
}

.site-footer .wp-block-list {
	list-style: none;
	padding-left: 0;
}

.site-footer a {
	text-decoration: none;
}

.site-footer a:hover {
	text-decoration: underline;
}

.site-footer-copyright {
	border-top: 1px solid var(--wp--preset--color--border);
	margin-block-start: 2.5rem;
	padding-top: 1rem;
}

/* Search: a compact field with the magnifier inside (the selectors match the block's own) */

.wp-block-search__button-inside .wp-block-search__inside-wrapper {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 4px;
	padding: 0;
}

.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input {
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	padding: 0.3rem 0.6rem;
}

.wp-block-search__input::-webkit-search-cancel-button {
	appearance: none;
}

.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button {
	background: transparent;
	border: 0;
	color: var(--wp--preset--color--contrast);
	margin: 0;
	padding: 0 0.5rem;
}

/* Post page */

.post-body > p:first-child {
	font-weight: 700;
}

.post-tags a {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 1rem;
	display: inline-block;
	font-size: var(--wp--preset--font-size--small);
	margin: 0 0.25rem 0.25rem 0;
	padding: 0.1rem 0.6rem;
	text-decoration: none;
}

.post-navigation {
	border-top: 1px solid var(--wp--preset--color--border);
	padding-top: 1rem;
}

.post-navigation a {
	text-decoration: none;
}

/* Home page */

.home-section {
	padding: 1rem 1.5rem 1.5rem;
}

.home-section a {
	text-decoration: none;
}

.home-sidebar {
	padding: 1.5rem 1rem;
}

/* Tiles as on myapple4: each in its colour, the image faded until hovered, the title on a highlight */

.home-tiles > :nth-child(1) { --tile: var(--wp--preset--color--green); }
.home-tiles > :nth-child(2) { --tile: var(--wp--preset--color--yellow); }
.home-tiles > :nth-child(3) { --tile: var(--wp--preset--color--orange); }
.home-tiles > :nth-child(4) { --tile: var(--wp--preset--color--red); }
.home-tiles > :nth-child(5) { --tile: var(--wp--preset--color--violet); }
.home-tiles > :nth-child(6) { --tile: var(--wp--preset--color--blue); }

.home-tiles .wp-block-cover {
	background-color: var(--tile);
	isolation: isolate;
}

/* The whole tile links to the post: the title link's ::after covers it. The image goes beneath
   the text in the tile's own stacking context, so the text needn't be positioned. */
.home-tiles .wp-block-cover .wp-block-cover__image-background,
.home-tiles .wp-block-cover .wp-block-cover__background {
	z-index: -1;
}

.home-tiles .wp-block-cover .wp-block-cover__inner-container {
	position: static;
}

.home-tiles .wp-block-post-title a::after {
	content: "";
	inset: 0;
	position: absolute;
}

.home-tiles .wp-block-cover__image-background {
	opacity: 0.4;
	transition: opacity 0.5s ease-out;
}

.home-tiles .wp-block-cover:hover .wp-block-cover__image-background {
	opacity: 1;
}

.home-tiles .wp-block-post-title {
	-webkit-box-orient: vertical;
	display: -webkit-box;
	font-size: 1.375rem;
	-webkit-line-clamp: 3;
	line-height: 1.32;
	overflow: hidden;
	text-shadow: 0 1px 1px rgb(0 0 0 / 30%);
}

.home-tiles .wp-block-post-title a {
	background-color: color-mix(in srgb, var(--tile) 80%, transparent);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	display: inline;
	padding-inline: 0.15em;
}

/* Ad slots, filled by Revive Adserver: the banner centred and scaled down to the available width,
   as on myapple4. A slot stays hidden until its zone delivers a banner (a link or an iframe; with
   nothing to show, Revive only adds an invisible beacon). */

.ad-slot {
	display: flex;
	justify-content: center;
	margin-inline: auto;
	width: 100%;
}

.ad-slot:not(:has(ins a, ins iframe)) {
	display: none;
}

.ad-slot ins {
	max-width: 100%;
}

.ad-slot iframe {
	display: block;
	max-width: 100%;
}

.ad-slot img {
	display: block;
	height: auto;
	max-width: 100%;
}

/* Where the sidebar goes below the content (the Columns block stacks below 782px), its last slot
   is left out, as on myapple4. */
@media (max-width: 781px) {
	.home-sidebar .ad-slot:last-child {
		display: none;
	}
}