/*
 * Header (logo, main menu, phone menu) and footer.
 * The menus themselves are edited in Wygląd → Edytor → Nawigacja.
 */

/* Header
 ---------------------------------------------------------------------------- */
.site-header {
	border-bottom: 1px solid var(--wp--preset--color--border-light);
}

/* The logo keeps its proportions and shrinks on narrow screens, so the menu button
   always stays on screen (also at 320px and at 400% zoom). */
.site-header .is-layout-flex > .site-logo {
	flex: 0 1 auto;
	min-width: 0;
}

.site-logo img {
	display: block;
	width: var(--wp--custom--logo--width);
	max-width: 100%;
	height: auto;
}

/* The logo link must be a block too: as an inline link it adds an empty text line
   under the image, which pushes the logo above the vertical centre of the header. */
.site-logo a {
	display: block;
}

/* Desktop menu (not the phone menu): active page in red with a line underneath.
 ---------------------------------------------------------------------------- */
.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	position: relative;
	padding-block: var(--wp--preset--spacing--small);
}

.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 2px;
}

/* "Informacje ▾": the line ends where the text ends, not under the arrow
   (the arrow sits in the link's right padding of 0.85em). */
.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .has-child > .wp-block-navigation-item__content::after {
	right: 0.85em;
}

.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > :is(.current-menu-item, .current-menu-ancestor) > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}

.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > :is(.current-menu-item, .current-menu-ancestor) > .wp-block-navigation-item__content::after {
	background: var(--wp--preset--color--accent);
}

.site-header .wp-block-navigation .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--accent);
}

/* Desktop drop-down (Informacje): white card with title + short description. */
.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container {
	z-index: 20 !important;
	min-width: 17.5rem !important;
	margin-left: calc(var(--wp--preset--spacing--medium) * -1);
	padding: var(--wp--preset--spacing--x-small);
	border: 1px solid var(--wp--preset--color--border-light) !important;
	border-radius: var(--wp--preset--border-radius--medium);
	background: var(--wp--preset--color--surface);
	box-shadow: var(--wp--preset--shadow--popover);
}

.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container li {
	padding: 0 !important;
}

.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: var(--wp--preset--spacing--small) var(--wp--preset--spacing--medium) !important;
}

.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	border-radius: var(--wp--preset--border-radius--x-small);
}

.site-header .wp-block-navigation__submenu-container :is(.wp-block-navigation-item__content:hover, .current-menu-item > .wp-block-navigation-item__content) {
	background: var(--wp--preset--color--surface-subtle);
}

.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__label {
	font-weight: 700;
	color: var(--wp--preset--color--ink);
}

.site-header .wp-block-navigation .wp-block-navigation-item__description {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	letter-spacing: 0;
	line-height: var(--wp--custom--line-height--snug);
	color: var(--wp--preset--color--muted);
}

/* Sub-menus (Informacje) open only when their arrow is clicked, on the desktop and in the
   phone menu. The arrow's aria-expanded says whether it is open (see submenu_toggle_state()
   in inc/wyswietlanie.php). */
.wp-block-navigation .has-child .wp-block-navigation__submenu-container {
	display: none;
}

.wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
	display: flex;
}

/* Tablets: the full menu does not fit in one row next to the logo, so use the
   menu button (hamburger) up to 1023px instead of WordPress' default 599px. */
@media (min-width: 600px) and (max-width: 1023px) {
	.site-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.site-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/* Phone menu (full screen): large tap areas, the arrow of "Informacje" on the right.
 ---------------------------------------------------------------------------- */
.wp-block-navigation__responsive-container.is-menu-open.has-modal-open {
	padding: var(--wp--preset--spacing--medium);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	gap: var(--wp--preset--spacing--medium);
}

.wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation__container {
	width: 100%;
	gap: var(--wp--preset--spacing--xx-small) !important;
}

.wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation__container li {
	position: relative;
	width: 100%;
	padding: 0;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
	width: 100%;
	padding: var(--wp--preset--spacing--small) 3.75rem var(--wp--preset--spacing--small) var(--wp--preset--spacing--small);
	border-radius: var(--wp--preset--border-radius--x-small);
	font-size: var(--wp--preset--font-size--base);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container :is(.current-menu-item, .wp-block-navigation-item:hover) > .wp-block-navigation-item__content {
	background: var(--wp--preset--color--surface-subtle);
	text-decoration: none;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container {
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--xx-small);
	width: 100%;
	margin: 0;
	padding: var(--wp--preset--spacing--xx-small) 0 0 var(--wp--preset--spacing--large);
	border-radius: 0;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-icon {
	position: absolute;
	top: var(--wp--preset--spacing--xx-small);
	right: 0;
	z-index: 10;
	display: block;
	width: 3.75rem;
	height: auto;
	margin: 0;
	padding: var(--wp--preset--spacing--small) 0;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-icon svg {
	height: 1rem;
	margin: 0;
}

/* Menu button and close button: a small light square. */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	padding: var(--wp--preset--spacing--xx-small);
	border-radius: var(--wp--preset--border-radius--x-small);
	background: var(--wp--preset--color--surface-subtle);
	color: var(--wp--preset--color--ink);
}

/* With the admin bar (logged in), the phone menu starts below it. */
.admin-bar .wp-block-navigation__responsive-container.is-menu-open {
	top: var(--wp-admin--admin-bar--height, 0px);
}

/* Footer
 ---------------------------------------------------------------------------- */
.site-footer a {
	color: var(--wp--preset--color--surface);
}

.site-footer a:hover {
	color: var(--wp--preset--color--accent-on-dark);
}

/* "Na skróty" menu: looks like the other footer links (white, underlined).
   Menu links always take the menu's colour (WordPress rule), so the colour is set on the menu. */
.site-footer .wp-block-navigation {
	color: var(--wp--preset--color--surface);
}

.site-footer .wp-block-navigation a {
	text-decoration: underline;
}

.site-footer .wp-block-navigation a:hover {
	color: var(--wp--preset--color--accent-on-dark);
}

.site-footer .site-logo img {
	width: 100%;
	max-width: var(--wp--custom--logo--footer-width);
	height: auto;
}

.site-footer__bottom {
	border-top: 1px solid var(--wp--custom--color--dark-2);
	color: var(--wp--custom--color--on-dark-muted);
}

.site-footer__bottom a {
	color: var(--wp--custom--color--on-dark-muted);
}