/* mobile.css - responsive overrides for baleti.hr
   Loaded after main.css. Apart from hiding the mobile-only chrome, every rule
   lives inside a media query, so the 960px desktop layout is untouched above
   1000px. The menu toggle is the #nav-toggle checkbox - no javascript. */

/* ---------------------------------------------------------------------------
   PER-SITE VALUES - the only thing that changes between the Kulisa sites.
   Everything below this block is identical across klasika / opera / kazaliste /
   baleti / plesnascena. Fonts are deliberately never set here: each site keeps
   the font stack from its own main.css.
     klasika.hr     #fef2db      opera.hr       #fef2db
     kazaliste.hr   #ffffff      baleti.hr      #e7e5be
     plesnascena.hr #d1d4d9
   --------------------------------------------------------------------------- */
:root {
	--site-bg: #e7e5be;   /* baleti.hr, sampled from its gfx/bg.jpg */
	--site-accent: #006633;
	--site-brand-font: 'Marcellus', serif;   /* matches baleti's header <h1> */
	--site-logo-nudge: -5px;   /* optical centre for the 40px wordmark */
}

/* mobile-only chrome, absent on desktop */
#nav-toggle, #mobile-bar, #fb-label { display: none; }

@media screen and (max-width: 1000px) {

	/* shell */
	html { -webkit-text-size-adjust: 100%; }
	/* overflow-x on BOTH html and body: on body alone a stray wide element in
	   editor content still expands the visual viewport, which drags the fixed
	   bar's right edge (and the hamburger) off screen */
	html, body { overflow-x: hidden; }
	body { background-attachment: scroll; }
	#wrap { width: auto; max-width: 100%; padding-top: 72px; }
	#main { margin: 20px 14px 30px 14px; }
	.dots { width: auto; }
	#footer { width: auto; }

	/* the desktop header is two decorative sliders plus the wordmark;
	   #mobile-bar carries the brand instead */
	#header { display: none; }

	/* --- sticky brand bar --- */
	#mobile-bar {
		display: -webkit-box; display: -ms-flexbox; display: flex;
		-webkit-box-align: center; -ms-flex-align: center; align-items: center;
		-webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
		position: fixed; top: 0; left: 0; right: 0;
		height: 72px;
		z-index: 100;
		padding: 0 6px 0 14px;
		background: #fef2db;
		background: var(--site-bg, #fef2db);
		border-bottom: 1px solid rgba(0, 0, 0, 0.18);
		box-sizing: border-box;
	}
	#mobile-brand { display: block; line-height: 0; }
	#mobile-brand img {
		height: 50px; width: auto; display: block; border: 0;
		position: relative; top: var(--site-logo-nudge, 0);
	}
	/* text wordmark, for the sites whose header is a styled <h1> rather than a
	   banner image (baleti.hr, plesnascena.hr). The font comes from the
	   per-site block so each keeps its own display face. */
	#mobile-brand.text {
		line-height: 1;
		/* the nudge needs position:relative here too - without it the text
		   wordmark silently ignored --site-logo-nudge */
		position: relative; top: var(--site-logo-nudge, 0);
		font-family: var(--site-brand-font, inherit);
		font-size: 31px;
		font-weight: normal;
		color: #000;
		text-decoration: none;
		white-space: nowrap;
	}

	/* --- hamburger --- */
	#nav-toggle {
		/* kept in the tab order rather than display:none, so it stays keyboard-operable */
		display: block; position: absolute;
		width: 1px; height: 1px; opacity: 0; margin: 0; padding: 0;
	}
	#nav-toggle-label {
		display: -webkit-box; display: -ms-flexbox; display: flex;
		-webkit-box-orient: vertical; -webkit-box-direction: normal;
		-ms-flex-direction: column; flex-direction: column;
		-webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
		-webkit-box-align: center; -ms-flex-align: center; align-items: center;
		width: 44px; height: 44px;
		cursor: pointer;
	}
	#nav-toggle-label span {
		display: block; width: 26px; height: 2px; margin: 3px 0;
		background: #000;
		-webkit-transition: -webkit-transform .25s ease, opacity .2s ease;
		transition: transform .25s ease, opacity .2s ease;
	}
	#nav-toggle:focus ~ #mobile-bar #nav-toggle-label span { background: var(--site-accent, #006633); }
	#nav-toggle:checked ~ #mobile-bar #nav-toggle-label span:first-child {
		-webkit-transform: translateY(8px) rotate(45deg);
		transform: translateY(8px) rotate(45deg);
	}
	#nav-toggle:checked ~ #mobile-bar #nav-toggle-label span:nth-child(2) { opacity: 0; }
	#nav-toggle:checked ~ #mobile-bar #nav-toggle-label span:last-child {
		-webkit-transform: translateY(-8px) rotate(-45deg);
		transform: translateY(-8px) rotate(-45deg);
	}

	/* --- navi drawer (#left holds the menu, facebook link and search) --- */
	#left {
		display: none;
		position: fixed; top: 72px; left: 0; right: 0; bottom: 0;
		z-index: 99;
		float: none; width: auto; margin: 0;
		/* generous bottom padding so the last links and the search box can
		   scroll clear of the fixed cookie notice, which sits above this drawer */
		padding: 4px 16px 210px 16px;
		background: #fef2db;
		background: var(--site-bg, #fef2db);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		box-sizing: border-box;
	}
	/* flex column so the search can be reordered above the facebook row
	   without moving the markup, which would also reorder desktop */
	#nav-toggle:checked ~ #main #left {
		display: -webkit-box; display: -ms-flexbox; display: flex;
		-webkit-box-orient: vertical; -webkit-box-direction: normal;
		-ms-flex-direction: column; flex-direction: column;
	}

	#left ul {
		display: block; margin: 0; padding: 0;
		border-bottom: 1px solid rgba(0, 0, 0, 0.12);
	}
	#left ul:last-of-type { border-bottom: 0; }
	#left ul li { margin: 0; }
	#left ul li a {
		display: block;
		padding: 9px 2px;
		font-size: 16px;
		line-height: 1.15;
		text-decoration: none;
	}
	#left ul li a.on { font-weight: bold; color: var(--site-accent, #006633); }

	/* the "find us on facebook" badge reads as a graphic in a list of text
	   rows, so swap it for a labelled row that matches the menu */
	.facebook {
		display: block;
		margin: 0;
		border-top: 1px solid rgba(0, 0, 0, 0.12);
		text-decoration: none;
		-webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2;
	}
	.facebook img { display: none; }
	#fb-label {
		display: block;
		padding: 9px 2px;
		font-size: 16px;
		line-height: 1.15;
	}

	/* sits between the menu groups and the facebook row */
	.search {
		-webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1;
		margin: 0;
		padding: 12px 0;
		border-top: 1px solid rgba(0, 0, 0, 0.12);
	}
	.search input {
		width: 100%;
		font-size: 16px; /* 16px stops ios zooming the page in on focus */
		padding: 10px;
		box-sizing: border-box;
	}

	/* --- unstack every fixed-width float --- */
	#right, #start, #category,
	#start #box-1, #start #box-2, #box-3,
	#category #box-category, #category #box-calendar,
	#box-article-list, #box-calendar-right {
		float: none;
		width: auto;
		margin-left: 0;
		margin-right: 0;
	}

	/* drop the pixel widths main.css sets on content blocks */
	.box-article-content li,
	.box-article-content span,
	.box-category-content li,
	.box-article-list-content a,
	.box-1-1-content span,
	.box-1-2-content span,
	.box-2-content span,
	.content li {
		width: auto;
	}
	.box-1-1-content li, .box-1-2-content li,
	.box-2-content li, .box-3-content li,
	.archiv-li {
		float: none;
	}
	/* separate stacked teasers - otherwise the last bullet of one block runs
	   straight into the next block's heading */
	.box-1-1-content li, .box-1-2-content li, .box-2-content li {
		margin-bottom: 18px;
	}
	.content li { margin: 0 0 24px 0; }

	/* editor content carries inline pixel width/height and align=right,
	   so images need !important to go fluid */
	#main img {
		max-width: 100% !important;
		width: auto !important;
		height: auto !important;
		float: none !important;
		/* unfloating an align="left" image leaves it inline, so a single line
		   of text sits beside its top and the rest drops below, stranding a
		   gap. Block puts it on its own line with the text under it. */
		display: block;
		margin-left: 0 !important;
		margin-right: 0 !important;
		/* the editor separates an image from the text under it with a bare
		   <br>, which gives no gap at all */
		margin-bottom: 12px !important;
	}
	/* Front-page teasers are stored at 210px. Where the source file is large
	   (klasika, opera) width:auto already fills the column, but where it is
	   exactly 210px (plesnascena, baleti) a third of the phone screen was left
	   empty. Fill the column so every site looks the same. */
	#start #box-1 img { width: 100% !important; }
	/* Listing and article images: min-width lifts a small stored image (some
	   are only 100px) to something legible, while a large source is still
	   capped at 100% of the column by max-width above. Deliberately not a
	   fixed width, which would shrink the 700px sources. */
	.box-category-content img, .box-article-content img { min-width: 150px; }
	/* the narrow second column is portrait-plus-name items at 100px; full
	   width would make three of them dominate the page */
	#start #box-2 img { width: 150px !important; }

	/* "osvrti i eseji" thumbnails are 85x110 in the design but their sources are
	   ~709px, so letting them size intrinsically fills the screen. Keep the
	   small floated thumb and let the text wrap, as on desktop.
	   Same specificity as #main img above, so this must stay after it. */
	#box-3 img {
		width: 100px !important;
		float: right !important;
		margin: 2px 0 8px 12px !important;
	}
	/* clear (not overflow:hidden, which would crop a thumb taller than its
	   own text) so one item's floated thumb cannot drift into the next */
	.box-3-content li { clear: both; padding-bottom: 14px; }

	/* --- author + sidebar block (box_author_list.php, box_news.php) ---
	   note #box-article-list is nested inside itself here, so the outer
	   frame is addressed as a direct child of #category */
	#category > #box-article-list {
		border-top: 1px solid rgba(0, 0, 0, 0.15);
		margin-top: 26px;
		padding-top: 2px;
	}
	/* main.css puts these headings at 14px, smaller than the 16px links
	   they introduce */
	#box-article-list h2 { font-size: 18px; margin: 20px 0 10px 0; }
	#box-article-list .box-article-list-content { padding-bottom: 6px; }
	#box-article-list .box-article-list-content li { margin-bottom: 7px; line-height: 1.4; }
	/* the author photo is align="left" with the name floated beside it, so
	   unfloating it dropped the surname below the photo - lay the pair out
	   with flex instead, which ignores the float entirely */
	#box-article-list > div[style] {
		display: -webkit-box; display: -ms-flexbox; display: flex;
		-webkit-box-align: center; -ms-flex-align: center; align-items: center;
		margin: 0 0 6px 0 !important;
	}
	#box-article-list > div[style] > .clear { display: none; }
	#box-article-list img {
		width: 100px !important;
		margin: 0 14px 0 0 !important;
		/* main.css strips borders from all images; a hairline frames the
		   portrait against the parchment background */
		border: 1px solid rgba(0, 0, 0, 0.18) !important;
	}
	#box-article-list span.text { font-size: 16px !important; line-height: 1.3; }

	/* the same inline sizes sit on the wrapper spans */
	#start span[style], #category span[style] {
		width: auto !important;
		height: auto !important;
	}
	/* the editor also writes fixed inline widths onto plain divs, including
	   spacers like <div class="clear" style="HEIGHT: 7px; WIDTH: 449px">.
	   One of those on opera.hr's front page overflowed the viewport, which
	   widened the visual viewport and pushed the fixed bar's right edge -
	   and the hamburger with it - off screen. */
	#main .clear { width: auto !important; }
	#main [style*="WIDTH"], #main [style*="width"] { max-width: 100% !important; }

	/* readable type - headlines carry the hierarchy on a small screen */
	#main span, #main p, #main a, #main li, #main .text { font-size: 16px; line-height: 1.55; }
	/* headline text is wrapped in an <a>, and the #main a rule above would
	   otherwise pin every title to body size regardless of its heading */
	#main h1 a, #main h2 a, #main h3 a, #main h4 a, #main h5 a,
	#main h1 span, #main h2 span, #main h3 span, #main h4 span,
	/* kazaliste.hr styles "#category #box-category h3 a" directly, which at
	   (2,0,2) outranks "#main h3 a" (1,0,2). These selectors tie with it and
	   win on load order. Only size is touched - each site keeps its own
	   heading font (kazaliste uses TwCenMTRegular here). */
	#category #box-category h2 a, #category #box-category h3 a,
	#category #box-category h4 a, #box-3 h3 a, #box-3 h3 a span {
		font-size: inherit;
		line-height: inherit;
	}
	#category #box-category .head { font-size: 24px; line-height: 1.2; margin: 0 0 6px 0; }
	#category #box-category .subhead { font-size: 16px; line-height: 1.4; margin-bottom: 18px; }
	#category #box-category h2 { font-size: 24px; line-height: 1.22; margin-bottom: 16px; }
	#category #box-category h3 { font-size: 20px; line-height: 1.24; margin-bottom: 6px; }
	#category #box-category h4 { font-size: 16px; line-height: 1.35; }
	#category #box-category h5 { font-size: 14px; }
	#start h2, #box-3 h3 { font-size: 20px; line-height: 1.25; }
	.box-category-content li { margin-bottom: 30px; }

	/* calendar rows stack */
	.calendar_date, .calendar_text, .calendar_image,
	#box-calendar-right .calendar_text, #box-calendar-right .calendar_image {
		float: none;
		width: auto;
	}
	.calendar_date { font-weight: bold; margin: 0 0 4px 0; }
	.clear_calendar { height: 20px; }

	/* bottom link row */
	.bottom-navi {
		display: -webkit-box; display: -ms-flexbox; display: flex;
		-ms-flex-wrap: wrap; flex-wrap: wrap;
		margin: 18px 0;
	}
	.bottom-navi a { padding: 8px 14px 8px 0; font-size: 15px; }

	/* ticker - its long &nbsp; runs would push the page sideways */
	#footer-ticker { overflow: hidden; }
	.ticker { width: auto; }

	/* cookie notice - the library's 2em padding and centred 1.5 line-height
	   ate roughly half the viewport, and it sits above the navi drawer */
	.cc-window.cc-floating, .cc-window.cc-banner {
		padding: 12px 14px;
		max-width: none;
	}
	/* the library positions this at left:8px but right:0 / bottom:0, so its
	   rounded card sat flush against two edges and gapped on the third */
	.cc-window.cc-floating {
		left: 10px;
		right: 10px;
		bottom: 10px;
		width: auto;
	}
	.cc-window { font-size: 13px; line-height: 1.4; }
	.cc-message {
		font-size: 13px;
		line-height: 1.4;
		margin: 0 0 10px 0;
		text-align: left;
	}
	.cc-floating.cc-type-info.cc-theme-classic .cc-compliance { text-align: left; display: block; }
	.cc-btn, .cc-banner .cc-btn:last-child, .cc-theme-classic .cc-btn:last-child {
		padding: 10px 18px;
		font-size: 14px;
		min-width: 0;
	}
}

@media screen and (max-width: 560px) {
	#main { margin: 10px 12px 24px 12px; }
	/* one step down from the 24px base, still above the 20px listing titles */
	#category #box-category .head { font-size: 22px; }
	/* decorative on a phone, and it costs a whole row */
	#footer-ticker { display: none; }
}

/* ===========================================================================
   PER-SITE ADDITIONS - baleti.hr only.
   Keep this block LAST and preserve it when regenerating this file from
   klasika.hr/css/mobile.css: these rules rely on coming after the shared ones
   to win ties on load order.
   =========================================================================== */
@media screen and (max-width: 1000px) {

	/* larger wordmark, this site only */
	#mobile-brand.text { font-size: 40px; }
}