/* =====================================================================
   ჩემი იმერეთი — responsive layer for phones
   Loaded last in header.php. Desktop (1024px and wider) is untouched:
   every layout rule here lives inside the max-width:1023px query.
   Tablets are shown the desktop design scaled to fit (see the viewport
   script in header.php), so this file really targets phones, in both
   portrait and landscape.
   ===================================================================== */

/* Mobile header is hidden on desktop */
#mobile-header {display: none;}

/* The old hidden phone menu used to take up one line of text above the header.
   This keeps the desktop page at exactly the same position as before. */
@media screen and (min-width: 1024px) {
	header {padding-top: 1.4em;}
}

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

/* ------------------------------ base ------------------------------ */
*, *:before, *:after {box-sizing: border-box;}
html {-webkit-text-size-adjust: 100%; text-size-adjust: 100%;}
body {background: #fff; padding: 0; margin: 0; overflow-x: hidden; font-size: 100%; line-height: 1.5;}
img, video, embed, object, iframe {max-width: 100% !important;}
img {height: auto;}
iframe, embed, video {padding-bottom: 0;}

/* ------------------------------ mobile header ------------------------------ */
#header, #element, .logo {display: none !important;}

#mobile-header {
	display: block;
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 1000;
	background: #444 url(../images/bg-footer.jpg) repeat;
	border-bottom: 2px solid #ff9000;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.mh-bar {display: flex; align-items: center; height: 56px; padding: 0 6px 0 12px;}
.mh-logo {display: block; width: 40px; height: 40px; flex: 0 0 40px;}
.mh-logo img {display: block; width: 40px; height: 40px;}
.mh-title {flex: 1; min-width: 0; margin-left: 10px; color: #f0f0f9 !important; font-family: "BPG Glaho WEB Caps", "BPG Glaho WEB", sans-serif; font-size: 18px; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

.mh-toggle {position: relative; width: 48px; height: 48px; padding: 0; border: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent;}
.mh-toggle span {position: absolute; left: 13px; width: 22px; height: 2px; background: #f0f0f9; border-radius: 1px; transition: transform .25s, opacity .25s, top .25s;}
.mh-toggle span:nth-child(1) {top: 16px;}
.mh-toggle span:nth-child(2) {top: 23px;}
.mh-toggle span:nth-child(3) {top: 30px;}
#mobile-header.open .mh-toggle span:nth-child(1) {top: 23px; transform: rotate(45deg);}
#mobile-header.open .mh-toggle span:nth-child(2) {opacity: 0;}
#mobile-header.open .mh-toggle span:nth-child(3) {top: 23px; transform: rotate(-45deg);}
.mh-toggle:focus-visible {outline: 2px solid #ff9000; outline-offset: -4px;}

.mh-panel {display: none; max-height: calc(100vh - 58px); overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 10px; border-top: 1px solid rgba(255, 255, 255, 0.12);}
#mobile-header.open .mh-panel {display: block;}
.mh-panel ul {list-style: none; margin: 0; padding: 0;}
.mh-panel li {float: none; margin: 0; padding: 0;}
.mh-panel li a {display: block; padding: 13px 18px; color: #f0f0f9; font-family: "BPG Glaho WEB Caps", "BPG Glaho WEB", sans-serif; font-size: 17px; border-bottom: 1px solid rgba(255, 255, 255, 0.08);}
.mh-panel li a:hover, .mh-panel li a:active {color: #ff9000; background: rgba(0, 0, 0, 0.2);}
.mh-panel .mh-pages li a {font-size: 15px; color: #ff9000;}
.mh-panel .mh-pages li a:hover {color: #f0f0f9;}

.mh-search {display: flex; gap: 8px; padding: 14px 18px 6px;}
.mh-search input[type="search"] {flex: 1; min-width: 0; height: 40px; padding: 0 14px; border: 0; border-radius: 20px; font-size: 16px; font-family: inherit; color: #333; background: #fff;}
.mh-search button {height: 40px; padding: 0 16px; border: 0; border-radius: 20px; background: #ff9000; color: #fff; font-family: inherit; font-size: 15px; cursor: pointer;}

.mh-social {padding: 12px 18px 4px;}
.mh-social a {display: inline-block; margin-right: 10px;}
.mh-social img {width: 32px; height: 32px; display: block;}

/* ------------------------------ layout ------------------------------ */
#wrapper {width: auto; max-width: 100%; box-shadow: none; margin: 0;}
#container {width: auto; max-width: 100%; padding: 12px 14px 0; margin: 0;}
#content {float: none; width: auto; max-width: 100%;}
#sidebar {float: none; width: auto; margin-top: 25px; clear: both;}
#sidebar h3 {width: auto;}
.container {width: auto; max-width: 100%;}
#container > .container {padding-left: 0; padding-right: 0;}   /* single & category pages: avoid double side padding */

/* ad banner under the header */
#container > center {margin-bottom: 4px;}
#container > center img {display: block; margin: 0 auto;}

/* ------------------------------ homepage: lead story ------------------------------ */
#slide-container {float: none; width: auto; height: auto; padding-bottom: 0; margin: 0 0 16px;}
#slide-container > a {display: block;}
#slide-container > a img {display: block; width: 100%;}
#slide-container .slide h2 {position: static; top: auto; width: auto; height: auto; margin: 0; padding: 12px 14px; font-size: 1.2em; line-height: 1.3; background: #333;}

/* homepage: two stories next to the lead */
.home-right-sidebar {float: none; width: auto; height: auto; margin: 0 0 20px;}
.home-right-sidebar > a {display: block;}
.home-right-sidebar img {float: none; display: block; width: 100%; max-height: none; padding: 0;}
.home-right-sidebar h3, .home-right-sidebar h4 {position: static; top: auto; width: auto; height: auto; margin: 0 0 16px; padding: 10px 14px; font-size: 1em; line-height: 1.3; background: #333;}

/* ------------------------------ homepage: section titles ------------------------------ */
.top-news-two, .top-news-three, .top-news-news2, .other-news-head, .news1 h1, .news2 h1 {
	float: none; width: auto; height: auto; margin: 20px 0 16px; padding: 10px 14px;
	font-size: 1.25em; line-height: 1.3;
}
.cat-head-name, .cat-head-name:hover {float: none; width: auto; height: auto; margin: 20px 0 14px; padding: 0 0 8px; font-size: 1.25em; transition: none;}

/* ------------------------------ homepage: news lists ------------------------------ */
#news-cl-two, .news-cl-two1, #top-news, .top-news1, .top-news2, #news, .news1, .news2 {float: none; display: block; width: auto; padding-right: 0; margin: 0;}

.aside-cl-two, .aside-cl-three {
	float: none; width: auto;
	-webkit-column-count: 1; -moz-column-count: 1; column-count: 1;
	display: flow-root; margin-bottom: 20px; padding-bottom: 6px;
}
/* each story: thumbnail left, title and excerpt on the right */
.aside-cl-two > a, .aside-cl-three > a {float: left; clear: both; width: 36%; margin: 4px 12px 14px 0;}
.aside-cl-two > a:empty, .aside-cl-three > a:empty {display: none;}
.aside-cl-two > a img, .aside-cl-three > a img {display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;}
.aside-cl-two h2.r, .aside-cl-three h2.r {font-size: 1em; line-height: 1.3; margin: 0 0 6px;}
.aside-cl-two p, .aside-cl-three p, .aside-cl-two div {font-size: .9em; line-height: 1.45;}
.aside-cl-three p {margin-bottom: 16px;}
.aside-cl-two div[style] {padding-bottom: 14px !important;}

/* poll, video archive, politics links box */
.other-news, .other-news-second {display: block; float: none; width: auto; min-height: 0; margin: 10px 0 25px; padding: 12px; box-shadow: none;}
.other-news iframe {width: 100%; height: auto; aspect-ratio: 16 / 9;}

/* older homepage blocks, in case widgets still use them */
.colwrapper, .ltcol, .ctcol, .rtcol {float: none; width: auto; margin: 0 0 15px;}
.colwrapper img {max-width: 100%; max-height: none;}
.news-new-img-container, .news-new-img, .news-new-img-overlay, .news-new-header-text-excerpt {width: 100%; max-width: 100%;}
.news-new-img-container, .news-new-img {height: auto;}

/* ------------------------------ single post ------------------------------ */
.post-title {font-size: 1.5em; line-height: 1.25;}
.post-content {overflow-wrap: break-word; word-wrap: break-word;}
.post-content img.alignleft, .post-content img.alignright, .post-content img.aligncenter, .post-content img.alignnone {float: none; display: block; margin: 0 auto 15px;}
.post-content .wp-caption {width: auto !important; max-width: 100% !important;}
.post-content table {display: block; max-width: 100%; overflow-x: auto;}
.post-content pre {max-width: 100%; overflow-x: auto; white-space: pre-wrap;}
.post-content ul, .post-content ol {margin-left: 20px;}
.post-content iframe[src*="youtube"], .post-content iframe[src*="youtu.be"], .post-content iframe[src*="vimeo"],
.post-content iframe[src*="facebook.com/plugins/video"], .post-content video, .post-content embed {
	width: 100% !important; height: auto !important; aspect-ratio: 16 / 9;
}
.post .wp-post-image {display: block; width: 100%;}
.addthis_toolbox {margin-top: 10px;}

/* facebook comments box was fixed to 830px */
.fb-comments, .fb-comments > span, .fb-comments iframe,
fb\:comments, fb\:comments > span, fb\:comments iframe {width: 100% !important; max-width: 100% !important;}

/* comments form */
#comment-form input, #comment-form textarea {width: 100%;}
.comment-data {float: none; width: auto;}

/* ------------------------------ pages, search, 404 ------------------------------ */
#pagebox li {display: block; float: none; width: auto; margin: 0; padding: 10px 0; font-size: 18px;}
#s, #error404-s {width: 100%; max-width: 100%; margin-bottom: 8px; font-size: 16px;}
.post-content > a[style] {max-width: 40%;}
.navigation {display: flow-root; margin: 15px 0;}

/* ------------------------------ footer ------------------------------ */
/* css/modal.css hid the footer contents below 800px; show them again */
footer .container1 {display: block;}
footer {display: block;}
#footer {width: auto; margin: 1.5em 0 0; padding: 0 15px;}
#footer ul:nth-child(n) {width: auto; float: none; margin: 0 0 1em;}
#footer ul > img {float: none; display: block; margin: 0 0 10px;}
#footer li {padding: 3px 0;}
#footer img {max-width: 100%;}
#footer-links li {padding-left: 0;}

}

/* Very small phones: the thumbnail list gets slightly tighter */
@media screen and (max-width: 380px) {
	.aside-cl-two > a, .aside-cl-three > a {width: 34%; margin-right: 10px;}
	.mh-title {font-size: 16px;}
}

/* Landscape phones: the two secondary stories sit side by side */
@media screen and (min-width: 560px) and (max-width: 1023px) {
	.home-right-sidebar {display: grid; grid-template-rows: auto auto; grid-auto-flow: column; grid-auto-columns: 1fr; column-gap: 12px;}
	.home-right-sidebar h3, .home-right-sidebar h4 {margin-bottom: 0;}
}

@media (prefers-reduced-motion: reduce) {
	.mh-toggle span {transition: none;}
}