/* Responsive fixes for phones, landscape phones and tablets (2026-10-24).
   Loaded after style-f6d1123244.min.css from includes/head.php.
   Desktop (>=1025px wide and taller than 500px) is untouched: every rule sits in a
   max-width / max-height media query. */

/* ---------- Sticky profile CTA (shown at <=640px on /p/*) ----------
   .ctaContainer_sticky is position:fixed; bottom:0 (about 50px tall), so without room
   under the footer it permanently covered the footer and the "Pogoji uporabe" link.
   body.hasStickyCta is set in profile.php. The footer is a float, so the space goes
   into its padding (a margin would not extend the page).
   The body:has() copies also cover profile1.php (a duplicate of profile.php without the
   class). They are separate rules so browsers without :has() still apply the class rules. */
@media screen and (max-width: 640px) {
	.hasStickyCta footer {
		padding-bottom: 80px;
	}

	body:has(.ctaContainer_sticky) footer {
		padding-bottom: 80px;
	}

	/* keep the cookie popup above the sticky CTA instead of on top of it */
	.hasStickyCta .gdprCookieAlertPopup {
		bottom: 70px;
		max-height: calc(100vh - 80px);
	}

	body:has(.ctaContainer_sticky) .gdprCookieAlertPopup {
		bottom: 70px;
		max-height: calc(100vh - 80px);
	}
}

/* ---------- GDPR cookie popup ---------- */
@media screen and (max-width: 1024px) {
	.gdprCookieAlertPopup {
		font-size: 12px;
	}

	.gdprCookieAlertPopup .actions button {
		font-size: 12px;
	}

	/* inline text links: taller tap area without changing the line layout */
	.gdprCookieAlertPopup .explanation a,
	footer a {
		padding: 4px 0;
	}
}

/* phones: full width with an even gutter (was left:30px + max-width:300px, flush right at 320px) */
@media screen and (max-width: 540px) {
	.gdprCookieAlertPopup {
		left: 15px;
		right: 15px;
		bottom: 15px;
		max-width: none;
		padding: 16px 20px;
		max-height: calc(100vh - 30px);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
}

/* short (landscape) viewports: never taller than the screen, even 10px gutters,
   tighter spacing so it covers less of the first screen (text stays 12px) */
@media screen and (max-height: 480px) {
	.gdprCookieAlertPopup {
		left: 10px;
		right: 10px;
		bottom: 10px;
		max-width: calc(100vw - 20px);
		padding: 14px 20px;
		max-height: calc(100vh - 20px);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	.gdprCookieAlertPopup .headline {
		font-size: 14px;
		padding-bottom: 2px;
	}

	.gdprCookieAlertPopup .explanation p {
		padding: 3px 0;
	}

	.gdprCookieAlertPopup .actions {
		margin-top: 6px;
	}
}

@media screen and (max-height: 480px) and (min-width: 541px) {
	.gdprCookieAlertPopup {
		right: auto;
		width: 420px;
		padding: 12px 16px;
	}
}

/* ---------- Footer SMS-price disclaimer: readable size and contrast ---------- */
@media screen and (max-width: 1024px) {
	.footer_disclaimer {
		font-size: 13px;
		line-height: 1.5;
		color: #75656a;
	}

	.footer_disclaimer p,
	.footer_disclaimer a {
		color: #75656a;
	}
}

/* ---------- Header on landscape phones: 180-208px header ate half the first screen ---------- */
@media screen and (max-width: 840px) and (max-height: 500px) and (orientation: landscape) {
	header {
		height: 135px;
		padding-top: 10px;
	}

	header .logo a {
		-webkit-transform: scale(0.7);
		-ms-transform: scale(0.7);
		transform: scale(0.7);
		-webkit-transform-origin: 0 0;
		-ms-transform-origin: 0 0;
		transform-origin: 0 0;
	}

	#mobileNavBtn {
		top: 30px;
	}
}

@media screen and (min-width: 841px) and (max-width: 1024px) and (max-height: 500px) and (orientation: landscape) {
	header {
		height: 150px;
		padding-top: 12px;
	}

	header .logo a {
		-webkit-transform: scale(0.7);
		-ms-transform: scale(0.7);
		transform: scale(0.7);
		-webkit-transform-origin: 0 0;
		-ms-transform-origin: 0 0;
		transform-origin: 0 0;
	}

	header .mainMenu {
		margin-top: 12px;
	}
}

/* ---------- Horizontal nav on tablets (841-1024px) and touch screens: 20px-tall links ----------
   Padding enlarges the tap area; the equal negative margin keeps the layout pixel-identical. */
@media screen and (min-width: 841px) and (max-width: 1024px), screen and (min-width: 841px) and (hover: none) and (pointer: coarse) {
	header .mainMenu .menu > nav > ul > li > a {
		display: inline-block;
		padding: 12px 10px;
		margin: -12px -10px;
	}
}