/*
 * Responsive layer for the BlogoLife (Shautsova) theme.
 * ------------------------------------------------------------------------
 * Loaded from header.php immediately AFTER style.css, so every rule here
 * wins on equal specificity without needing !important.
 *
 * DESIGN CONTRACT
 *   Nothing in this file may change the desktop rendering above 1024px.
 *   Everything layout-related therefore lives inside a max-width media
 *   query. The only top-level rules are for elements that did not exist
 *   before this file (the menu buttons, the phone text) and are hidden on
 *   desktop anyway.
 *
 * BREAKPOINTS
 *   > 1024px          untouched original 960px layout
 *   769px - 1024px    fluid shell, content + sidebar still side by side
 *   <= 768px          single column, sidebar below content
 *   <= 480px          phone tightening (smaller logo, 1-column galleries)
 *
 * The 1024px value is mirrored in js/mobile-nav.js (isMobile). Keep both
 * in sync if it ever changes.
 *
 * @package wplook
 * @subpackage BlogoLife
 */


/* ======================================================================
 * 1. New elements - invisible on desktop
 * ====================================================================== */

/* Hamburger and submenu arrows are injected for touch only. */
.menu-toggle,
.submenu-toggle {
	display: none;
}

/*
 * The phone number only ever existed as pixels inside images/cssSprite.png.
 * It is now also real text so that screen readers, search engines and
 * copy-paste work. On desktop the sprite stays authoritative and the text
 * is clipped - visually identical to before, but still in the a11y tree.
 * Do not use display:none here: that would remove it from the a11y tree too.
 */
.calllawyer .tel-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}


/* ======================================================================
 * 2. Tablet and below - shared rules (<= 1024px)
 * ====================================================================== */

@media (max-width: 1024px) {

	/*
	 * Scoped border-box rather than a global "* { box-sizing }" so that
	 * plugin chrome outside #page / #copy keeps its own assumptions.
	 * This is what lets the fixed pixel widths below become percentages
	 * without every padding and border pushing the layout out of bounds.
	 */
	#page,
	#copy,
	#page *,
	#copy *,
	#page *::before,
	#page *::after {
		box-sizing: border-box;
	}

	/* Safety net: a single stray wide element must not create a page-wide
	   horizontal scrollbar on a phone. */
	body {
		overflow-x: hidden;
	}

	/* iOS renders background-attachment:fixed by scaling the image to the
	   full document height, which looks broken and costs a lot to repaint. */
	body.custom-background {
		background-attachment: scroll;
	}

	/* --- 2.1 Shell ------------------------------------------------- */

	#page {
		width: 100%;
		max-width: 960px;
	}

	#page img,
	#copy img {
		max-width: 100%;
		height: auto;
	}

	#page iframe,
	#page embed,
	#page object,
	#page video {
		max-width: 100%;
	}

	/* --- 2.2 Header ------------------------------------------------ */

	/*
	 * #flag and #branding were locked to 120/121px because every child was
	 * positioned by hand. They now grow with their content.
	 *
	 * The background-color on #flag is a safety net: american-flag.jpg is
	 * a 336x120 no-repeat image, so once the header grows past 120px the
	 * area it does not cover falls back to this palette blue instead of
	 * showing the body background through.
	 */
	#flag {
		height: auto;
		background-color: #5A82A6;
	}

	#branding {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		height: auto;
		padding: 10px;
	}

	/* Float clearers and the decorative flag overlay have no job in a
	   flex container. */
	#branding > .clear,
	#flagPng {
		display: none;
	}

	#logo {
		order: 1;
		flex: 0 1 auto;
		height: auto;
		float: none;
		min-width: 0;
	}

	#branding .menu-toggle {
		order: 2;
		display: flex;
		align-items: center;
		margin-left: auto;
		min-height: 44px;
		padding: 0 12px;
		border: 1px solid rgba(255, 255, 255, 0.45);
		border-radius: 3px;
		background: rgba(90, 130, 166, 0.9);
		color: #fff;
		font-family: 'Oswald', sans-serif;
		font-size: 14px;
		text-transform: uppercase;
		line-height: 1;
		cursor: pointer;
	}

	.menu-toggle-bars {
		position: relative;
		display: block;
		width: 20px;
		height: 2px;
		margin-right: 8px;
		background: #fff;
	}

	.menu-toggle-bars::before,
	.menu-toggle-bars::after {
		content: "";
		position: absolute;
		left: 0;
		display: block;
		width: 20px;
		height: 2px;
		background: #fff;
	}

	.menu-toggle-bars::before {
		top: -6px;
	}

	.menu-toggle-bars::after {
		top: 6px;
	}

	/* Open state: the three bars fold into a cross. */
	.wpl-nav-open .menu-toggle-bars {
		background: transparent;
	}

	.wpl-nav-open .menu-toggle-bars::before {
		top: 0;
		transform: rotate(45deg);
	}

	.wpl-nav-open .menu-toggle-bars::after {
		top: 0;
		transform: rotate(-45deg);
	}

	/* Site title block drops onto its own line under the logo. The 50px
	   top margin existed purely to push the title down inside the old
	   fixed-height header. */
	#headercenter {
		order: 3;
		flex: 1 1 100%;
		width: auto;
		height: auto;
		float: none;
		margin: 6px 0 0 0;
	}

	#branding hgroup {
		width: auto;
		margin: 0;
	}

	#site-title {
		margin: 0 0 2px 0;
		font-size: 1.15em;
	}

	#site-description {
		font-size: 14px;
	}

	/*
	 * The header extras. Desktop stacks them by hand inside a 355px right
	 * float; here they become a wrapping flex row:
	 *   row 1  phone (full width, the single most important mobile action)
	 *   row 2  search + social icons
	 *   row 3  newsletter
	 *
	 * To move these into the collapsible panel instead (option 1 from the
	 * planning discussion), add "display:none" here and
	 * ".wpl-nav-open .header-desc { display:flex }" - no markup change.
	 */
	.header-desc {
		order: 4;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		flex: 1 1 100%;
		width: auto;
		float: none;
		margin: 8px 0 0 0;
	}

	/* Phone: the sprite is kept pixel-for-pixel, centred inside a 44px
	   tall tap target, so the number looks exactly as designed while the
	   whole bar is comfortably tappable. */
	.calllawyer {
		order: 1;
		flex: 1 1 100%;
		width: 100%;
		height: auto;
		margin: 0 0 8px 0;
	}

	.calllawyer .tel {
		position: static;
		display: flex;
		align-items: center;
		justify-content: center;
		width: auto;
		height: auto;
		min-height: 44px;
		margin: 0;
		background: none;
	}

	.calllawyer .tel::before {
		content: "";
		display: block;
		width: 190px;
		height: 18px;
		background: url(images/cssSprite.png) 0 -32px no-repeat;
	}

	.header-desc #searchform {
		order: 2;
		flex: 1 1 180px;
		width: auto;
		height: auto;
		margin: 0 8px 8px 0;
	}

	.header-desc #searchform div {
		display: flex;
		width: auto;
		height: auto;
	}

	.header-desc #searchform #s {
		flex: 1 1 auto;
		width: auto;
		min-width: 0;
		height: 44px;
		margin-left: 0;
		padding: 0 10px;
	}

	.header-desc #searchform #searchsubmit {
		flex: 0 0 auto;
		min-height: 44px;
		padding: 0 12px;
		font-size: 14px;
	}

	.social-icons {
		order: 3;
		flex: 0 0 auto;
		width: auto;
		margin: 0 0 8px 0;
		float: none;
		text-align: center;
	}

	/* 22px icons are far below the 44px minimum tap target. */
	.social-icons a {
		display: inline-block;
		padding: 11px;
		line-height: 0;
	}

	#newsletter {
		order: 4;
		flex: 1 1 100%;
		width: 100%;
		margin: 0;
	}

	#newsletter form {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}

	#newsletter label {
		flex: 0 0 auto;
		margin-right: 6px;
	}

	#newsletter input {
		flex: 1 1 120px;
		width: auto;
		min-width: 0;
		height: 44px;
		line-height: normal;
	}

	#newsletter .button {
		flex: 0 0 auto;
		width: auto;
		min-width: 84px;
		height: 44px;
		margin: 0;
		font-size: 13px;
	}

	/* --- 2.3 Navigation -------------------------------------------- */

	/*
	 * Collapse the menu only when JS is running (mobile-nav.js adds
	 * .wpl-js to <html>). Without JS there is no button to open it, so it
	 * must stay visible.
	 */
	.wpl-js #wpl-primary-nav {
		display: none;
	}

	.wpl-js.wpl-nav-open #wpl-primary-nav {
		display: block;
	}

	nav {
		font-size: 1em;
		text-align: left;
	}

	nav ul {
		display: block;
		padding: 0;
		text-align: left;
	}

	nav ul li {
		display: block;
		float: none;
		border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	}

	nav ul li:last-child {
		border-bottom: 0;
	}

	nav a {
		padding: 12px 56px 12px 15px; /* right padding clears the arrow */
		min-height: 44px;
	}

	/*
	 * Submenus become inline accordions. The white panel and dark text are
	 * kept from style.css so the palette is unchanged; only the
	 * positioning is dropped.
	 */
	nav ul ul,
	nav ul ul ul {
		position: static;
		top: auto;
		left: auto;
		float: none;
		width: auto;
		padding: 0;
	}

	nav ul ul li {
		min-width: 0;
		margin: 0;
		border-bottom: 1px solid #dfdfdf;
	}

	nav ul ul li a {
		margin: 0;
		padding: 12px 56px 12px 30px;
	}

	nav ul ul ul li a {
		padding-left: 45px;
	}

	/* Hover can no longer be the trigger - a tap replaces it. */
	nav ul li:hover > ul {
		display: none;
	}

	.wpl-js nav ul li.submenu-open > ul {
		display: block;
	}

	nav .submenu-toggle {
		position: absolute;
		top: 0;
		right: 0;
		display: block;
		width: 52px;
		height: 44px;
		margin: 0;
		padding: 0;
		border: 0;
		background: transparent;
		cursor: pointer;
	}

	nav .submenu-toggle::before {
		content: "";
		display: block;
		width: 8px;
		height: 8px;
		margin: 14px auto;
		border-right: 2px solid #fff;
		border-bottom: 2px solid #fff;
		transform: rotate(45deg);
	}

	nav li.submenu-open > .submenu-toggle::before {
		margin: 18px auto 10px;
		transform: rotate(-135deg);
	}

	/* Inside the white submenu panel the arrow has to be dark. */
	nav ul ul .submenu-toggle::before {
		border-right-color: #000;
		border-bottom-color: #000;
	}

	/* --- 2.4 Front page slideshow (NextGEN) ------------------------ */

	/*
	 * The shortcode in header.php hard-codes gallery_width="960"
	 * gallery_height="300" and NextGEN writes inline styles per slide, so
	 * !important is unavoidable here. 31.25vw preserves the original
	 * 960x300 (3.2:1) ratio instead of letterboxing.
	 */
	#page .ngg-galleryoverview,
	#page .ngg-slideshow,
	#page .ngg-slideshow .slick-list,
	#page .ngg-slideshow .slick-track,
	#page .ngg-slideshow .ngg-gallery-slideshow-image {
		width: 100% !important;
		max-width: 100% !important;
	}

	#page .ngg-slideshow,
	#page .ngg-slideshow .ngg-gallery-slideshow-image {
		height: 31.25vw !important;
		min-height: 110px !important;
	}

	#page .ngg-slideshow .ngg-gallery-slideshow-image img {
		width: auto !important;
		height: auto !important;
		max-height: 100% !important;
		max-width: 100% !important;
	}

	#slideshowwrap header {
		width: auto;
		max-width: 70%;
		margin: 10px 0 0 0;
	}

	/* --- 2.5 Content column ---------------------------------------- */

	.template-full-widch #content,
	.right-sidebar .fullimg #content {
		width: auto;
	}

	article {
		margin: 0 10px 20px 15px;
	}

	.page-header {
		margin-left: 0;
	}

	.page-header h1,
	.page-header h2 {
		margin-left: 15px;
	}

	#nav-below {
		margin: 30px 0 20px 0;
	}

	/*
	 * .col1 / .col2 are a hand-built media object: a fixed icon gutter on
	 * the left and a pixel-width body on the right, re-declared for every
	 * comment depth. Turning .col2 into a block formatting context lets it
	 * simply fill whatever is left of the row at any width, which makes all
	 * the .depth-N width declarations irrelevant.
	 */
	.col2,
	.depth-2 .col2,
	.depth-3 .col2,
	.depth-4 .col2,
	.depth-5 .col2,
	.template-full-widch .col2,
	.fullimg .col2,
	.template-full-widch .depth-2 .col2,
	.fullimg .depth-2 .col2,
	.template-full-widch .depth-3 .col2,
	.fullimg .depth-3 .col2,
	.template-full-widch .depth-4 .col2,
	.fullimg .depth-4 .col2,
	.template-full-widch .depth-5 .col2,
	.fullimg .depth-5 .col2 {
		width: auto;
		float: none;
		overflow: hidden;
	}

	/* Tables: display:block turns the table itself into the scroll
	   container, so no extra wrapper markup is needed. */
	.entry-content table,
	.comment-content table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* Video embeds keep their aspect ratio; other iframes (maps, forms)
	   just stop overflowing. */
	.entry-content iframe[src*="youtube"],
	.entry-content iframe[src*="youtu.be"],
	.entry-content iframe[src*="vimeo"],
	.entry-content iframe[src*="dailymotion"],
	.entry-content iframe[src*="rutube"],
	.entry-content iframe[src*="facebook.com/plugins/video"] {
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 9;
	}

	.wp-caption {
		max-width: 100% !important;
	}

	.image-attachment div.attachment {
		margin: 0 0 1.625em;
		padding: 1em 1em 0;
	}

	.nr-images {
		width: auto;
		max-width: 100%;
	}

	#disqus_thread {
		width: auto;
		float: none;
	}

	/* --- 2.6 Forms ------------------------------------------------- */

	/*
	 * 16px is the threshold below which iOS Safari zooms the page when a
	 * field gets focus. Keeping every field at 16px avoids that jump.
	 */
	#page input[type=text],
	#page input[type=email],
	#page input[type=password],
	#page input[type=search],
	#page input[type=tel],
	#page input[type=url],
	#page input[type=number],
	#page textarea,
	#page select {
		max-width: 100%;
		font-size: 16px;
	}

	#page button,
	#page input[type=submit],
	#page input[type=button] {
		min-height: 44px;
	}

	#respond form {
		margin-left: 10px;
	}

	#respond input,
	#respond textarea {
		width: 100%;
	}

	#respond .form-submit input {
		width: auto;
	}

	#respond .must-log-in,
	.nocomments {
		margin-left: 10px;
	}

	#submit {
		font-size: 14px;
		padding: 2px 16px;
	}

	#contactForm {
		width: auto;
	}

	#contactForm li input,
	#contactForm li textarea {
		width: 100%;
	}

	#contactForm li input {
		height: 44px;
	}

	#contactForm li#sendForm input {
		width: auto;
		min-width: 96px;
	}

	#contactForm .required {
		position: static;
		margin-left: 0;
	}

	/* --- 2.7 Sidebar, widgets, footer ------------------------------ */

	#cat,
	#wp-calendar {
		width: 100%;
	}

	.widget ul,
	.textwidget,
	.tagcloud {
		margin-right: 10px;
	}

	#copy {
		width: 100%;
		max-width: 960px;
	}

	#copy ul {
		text-align: center;
	}

	/* inline-block instead of float keeps rows tidy once the menu wraps
	   onto several lines. */
	#copy li {
		float: none;
		display: inline-block;
	}

	#copy li a {
		display: inline-block;
		padding: 10px 12px;
	}
}


/* ======================================================================
 * 3. Touch devices - neutralise sticky :hover
 * ====================================================================== */

/*
 * On a touch screen :hover latches after a tap, so the menu items would
 * stay inverted (white background, black text) after navigating. Pointer
 * devices in a narrow window keep their hover feedback.
 */
@media (max-width: 1024px) and (hover: none) {

	nav ul li:hover,
	nav ul li:hover a {
		background: transparent;
		color: #fff;
	}

	nav ul li.current_page_item > a,
	nav ul li.current-menu-ancestor > a,
	nav ul li.current-menu-item > a,
	nav ul li.current-menu-parent > a {
		background: rgba(255, 255, 255, 0.12);
		color: #fff;
	}

	nav ul ul li:hover {
		background: transparent;
	}

	/*
	 * "nav ul li:hover a" from style.css is (0,1,4) and would otherwise beat
	 * the plain "nav ul ul li a" rule (0,0,5) and repaint submenu links when
	 * the parent item is touched. The middle selector is (0,1,6) and settles
	 * it. Do not simplify this list.
	 */
	nav ul ul li a,
	nav ul li:hover ul li a,
	nav ul ul li:hover a {
		background: #fff;
		color: #000;
	}
}


/* ======================================================================
 * 4. Tablet: still two columns, but fluid (769px - 1024px)
 * ====================================================================== */

/*
 * The original layout pins #content to 660px and floats a 290px #secondary
 * against it, which only adds up inside a 960px page. Flexbox expresses the
 * same intent without the arithmetic: the sidebar keeps its designed 290px
 * and the content column absorbs whatever is left.
 *
 * At a 1024px viewport #page is 960px, so content lands on 670px - within a
 * pixel of the 671px it occupies on desktop.
 */
@media (max-width: 1024px) and (min-width: 769px) {

	#main {
		display: flex;
		align-items: flex-start;
	}

	#main > .clear {
		display: none;
	}

	.right-sidebar #content,
	.template-full-widch #content,
	.right-sidebar .fullimg #content {
		flex: 1 1 auto;
		width: auto;
		min-width: 0;
		float: none;
		margin: 20px 0 0 0;
	}

	.right-sidebar #secondary {
		flex: 0 0 290px;
		width: 290px;
		float: none;
		margin: 20px 0 0 0;
	}
}


/* ======================================================================
 * 5. Single column (<= 768px)
 * ====================================================================== */

@media (max-width: 768px) {

	/*
	 * The two-column float layout becomes one flex column. Using flex on
	 * #main is what the "header and sidebar to flexbox" item was about:
	 * #content no longer needs a width at all, and the pixel margin chain
	 * (-10px on #secondary, 660/290 widths) disappears.
	 */
	#main {
		display: flex;
		flex-direction: column;
	}

	#main > .clear {
		display: none;
	}

	.right-sidebar #content,
	.template-full-widch #content,
	.right-sidebar .fullimg #content {
		width: auto;
		float: none;
		margin: 15px 0 0 0;
		padding-right: 0;
		border-right: 0; /* the divider has no second column to divide */
	}

	.right-sidebar #secondary {
		width: auto;
		float: none;
		margin: 10px 0 20px 0;
	}

	/* The meta row was laid out by pushing the comment count 540px to the
	   right; as floats they now simply sit next to each other. */
	.comment-i {
		margin-left: 0;
	}

	.col1 {
		width: 38px;
	}

	.depth-2 .col1 { width: 46px; }
	.depth-3 .col1 { width: 54px; }
	.depth-4 .col1 { width: 62px; }
	.depth-5 .col1 { width: 70px; }

	article {
		margin: 0 10px 20px 10px;
	}

	.entry-title {
		font-size: 1.35em;
	}

	blockquote,
	.quote blockquote {
		font-size: 17px;
		line-height: 28px;
		padding: 10px;
	}

	.entry-content ul,
	.entry-content ol {
		margin-left: 1.4em;
	}

	.gallery .gallery-item,
	.gallery-columns-4 .gallery-item {
		width: 50%;
	}
}


/* ======================================================================
 * 6. Phones (<= 480px)
 * ====================================================================== */

@media (max-width: 480px) {

	#branding {
		padding: 8px;
	}

	/* 232px of logo plus a 44px button does not fit on a 320px screen. */
	#logo img {
		width: auto;
		max-width: 170px;
	}

	#branding .menu-toggle {
		padding: 0 10px;
		font-size: 13px;
	}

	#site-title {
		font-size: 1.05em;
	}

	/* Search and icons each take a full row: at this width sharing one
	   would leave the input too narrow to type in. */
	.header-desc #searchform,
	.social-icons {
		flex: 1 1 100%;
		margin-right: 0;
	}

	.social-icons a {
		padding: 11px 7px;
	}

	#newsletter label {
		flex: 1 1 100%;
		margin: 0 0 4px 0;
	}

	article {
		margin: 0 8px 16px 8px;
	}

	.col1 {
		width: 34px;
	}

	.depth-2 .col1,
	.depth-3 .col1,
	.depth-4 .col1,
	.depth-5 .col1 {
		width: 40px;
	}

	.entry-title {
		font-size: 1.2em;
	}

	.page-header h1,
	.page-header h2 {
		margin-left: 10px;
		font-size: 1em;
	}

	.gallery .gallery-item,
	.gallery-columns-2 .gallery-item,
	.gallery-columns-4 .gallery-item {
		width: 100%;
	}

	.format-gallery .gallery-thumb,
	.category-gallery .gallery-thumb {
		float: none;
		width: auto;
		height: auto;
		margin: 0 0 10px 0;
	}

	.widget ul {
		margin-left: 8px;
		margin-right: 8px;
	}

	.textwidget {
		margin-left: 8px;
		margin-right: 8px;
	}

	#copy p {
		padding: 6px;
	}
}