/*
 * CCN Responsive — small-screen layer for the Chic Cheap Nursery child theme.
 * Desktop (980px and wider) is untouched: every rule lives inside a max-width query.
 */

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

	html { -webkit-text-size-adjust: 100%; }
	body { overflow-x: hidden; }

	/* Fixed-width containers become fluid */
	#header,
	#nav ul,
	#subnav ul,
	#content-sidebar-wrap,
	.content-sidebar #content-sidebar-wrap,
	.sidebar-content #content-sidebar-wrap,
	.full-width-content #content-sidebar-wrap,
	#footer-widgets,
	#footer,
	.featured,
	.portfolio {
		width: auto;
		max-width: 100%;
	}

	#inner { padding: 15px 12px; box-sizing: border-box; }
	#footer-widgets, #footer { padding-left: 12px; padding-right: 12px; }

	/* Header image scales with the screen (artwork is 960x150) */
	/* "body" raises specificity above the theme's inline custom-header style, which prints later with !important */
	body #header {
		min-height: 0;
		aspect-ratio: 960 / 150;
		background-size: 100% auto !important;
	}
	.header-image #title-area,
	.header-image #title,
	.header-image #title a,
	.header-full-width #title-area,
	.header-full-width #title,
	.header-full-width #title a {
		width: 100%;
		height: 100%;
	}

	/* Triangle pattern behind the header (599x225 tile) shrinks by the same
	   factor as the logo (screen width / 960), so phones show as much pattern
	   around the logo as desktop does. Two stacked rows keep the shorter tile
	   covering the top menu + header. */
	#wrap {
		background-image:
			url('../../themes/chiccheapnursery/images/headerbg.png'),
			url('../../themes/chiccheapnursery/images/headerbg.png');
		background-repeat: repeat-x, repeat-x;
		background-size: 62.4vw auto, 62.4vw auto;     /* 599 / 960 */
		background-position: 0 0, 0 23.4375vw;         /* second row starts at tile height: 225 / 960 */
	}

	/* Menus wrap and center instead of running off-screen.
	   This "wrapped rows" style (A) is also the fallback if JavaScript is off. */
	#nav ul,
	#subnav ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	#subnav ul { flex-direction: row-reverse; } /* desktop shows these right-to-left */
	#nav li, #subnav li { float: none; }
	#nav li a { padding: 10px 9px 9px; }
	#subnav li a { padding: 9px 8px 8px; }

	/* Content above, sidebar below */
	#content,
	.content-sidebar #content,
	.sidebar-content #content,
	.full-width-content #content,
	.sidebar,
	#sidebar-alt {
		float: none;
		width: auto;
		display: block;
	}
	.sidebar { padding: 0; margin: 10px 0 20px; }

	/* Media never wider than its column */
	#content img,
	.sidebar img,
	#footer-widgets img {
		max-width: 100%;
		height: auto;
	}
	.wp-caption { max-width: 100% !important; box-sizing: border-box; }
	#content iframe,
	#content embed,
	#content object,
	#content video,
	.sidebar iframe {
		max-width: 100%;
	}
	.entry-content table { display: block; overflow-x: auto; max-width: 100%; }

	/* Long words/URLs wrap */
	.entry-content, .sidebar, #comments { overflow-wrap: break-word; }

	/* Home "welcome" slider box: scaled to fit by ccn-responsive.js */
	.welcome {
		width: auto;
		height: auto;
		max-width: 600px; /* desktop size; centered on tablets */
		margin-left: auto;
		margin-right: auto;
		padding: 12px;
		box-sizing: border-box;
	}
	.welcome #genesis-slider { transform-origin: 0 0; }

	/* Footer widgets and footer stack */
	.footer-widgets-1,
	.footer-widgets-2,
	.footer-widgets-3 {
		float: none;
		width: auto;
		padding: 0;
	}
	#footer .gototop,
	#footer .creds {
		float: none;
		width: auto;
		text-align: center;
	}

	/* Form fields fit */
	.s, #author, #email, #url, #comment,
	.wpcf7 input[type="text"],
	.wpcf7 input[type="email"],
	.wpcf7 input[type="url"],
	.wpcf7 input[type="tel"],
	.wpcf7 textarea {
		max-width: 100%;
		box-sizing: border-box;
	}

	/* Column classes stack */
	.five-sixths, .four-fifths, .four-sixths, .one-fifth, .one-fourth,
	.one-half, .one-sixth, .one-third, .three-fifths, .three-fourths,
	.three-sixths, .two-fifths, .two-fourths, .two-sixths, .two-thirds,
	.archive-page {
		float: none;
		width: auto;
		padding-left: 0;
	}
}

/* Phones */
@media only screen and (max-width: 600px) {

	.hentry, .post { padding: 15px; }

	/* Floated images in posts go full width, centered */
	.entry-content img.alignleft,
	.entry-content img.alignright,
	.entry-content .wp-caption.alignleft,
	.entry-content .wp-caption.alignright {
		float: none;
		display: block;
		margin: 0 auto 10px;
	}

	/* Post title tab: keep the look, stop the 30px pull-out from leaving the screen */
	h2.entry-title a,
	h1.entry-title,
	#comments h3,
	#respond h3 {
		margin-left: -15px !important;
		padding-left: 15px !important;
	}
	.post-info { float: none; display: block; clear: both; }

	.sidebar .widget { padding: 15px; }

	.navigation li { display: inline-block; margin: 0 2px 8px; }

	/* Tighter category menu */
	#nav li a { padding: 8px 8px 7px; }

	/* Contact and comment forms: full-width fields, 16px text (no iOS zoom on focus) */
	.wpcf7 input[type="text"],
	.wpcf7 input[type="email"],
	.wpcf7 input[type="url"],
	.wpcf7 input[type="tel"],
	.wpcf7 textarea,
	#author, #email, #url, #comment {
		width: 100%;
		margin-left: 0;
		font-size: 16px;
	}
	.wpcf7 input[type="submit"],
	#submit {
		padding: 8px 20px;
		font-size: 14px;
	}
}

/* ==========================================================================
   Phone menu A/B test
   <html> gets ccn-phone-{a|b|c} and ccn-tab-{a|b|c} from a tiny script in <head>.
   B = "Browse Categories" button that opens a list. C = one row you swipe sideways.
   ========================================================================== */

#ccn-menu-toggle { display: none; } /* desktop never shows it */

/* ---- B: menu button (tablets, 601–979px) ---- */
@media only screen and (min-width: 601px) and (max-width: 979px) {
	html.ccn-tab-b #ccn-menu-toggle {
		display: flex; align-items: center; justify-content: center; gap: 10px;
		width: 100%; margin: 0; padding: 13px 0 12px;
		background: #fde5df; border: 0; border-radius: 0; cursor: pointer;
		color: #666; font: 11px 'Open Sans', arial, sans-serif;
		letter-spacing: .12em; text-transform: uppercase;
		-webkit-tap-highlight-color: transparent;
	}
	html.ccn-tab-b #ccn-menu-toggle .bars { display: inline-flex; flex-direction: column; gap: 3px; }
	html.ccn-tab-b #ccn-menu-toggle .bars i { display: block; width: 16px; height: 2px; background: #9b9796; transition: transform .2s, opacity .2s; }
	html.ccn-tab-b #nav.open #ccn-menu-toggle .bars i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
	html.ccn-tab-b #nav.open #ccn-menu-toggle .bars i:nth-child(2) { opacity: 0; }
	html.ccn-tab-b #nav.open #ccn-menu-toggle .bars i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
	html.ccn-tab-b #nav ul { display: none; }
	html.ccn-tab-b #nav.open ul { display: block; background: #fff; }
	html.ccn-tab-b #nav.open li { border-top: 1px solid #fde5df; }
	html.ccn-tab-b #nav.open li a { padding: 13px 20px; font-size: 12px; letter-spacing: .06em; color: #666; text-align: center; }
}

/* ---- B: menu button (phones, up to 600px) ---- */
@media only screen and (max-width: 600px) {
	html.ccn-phone-b #ccn-menu-toggle {
		display: flex; align-items: center; justify-content: center; gap: 10px;
		width: 100%; margin: 0; padding: 13px 0 12px;
		background: #fde5df; border: 0; border-radius: 0; cursor: pointer;
		color: #666; font: 11px 'Open Sans', arial, sans-serif;
		letter-spacing: .12em; text-transform: uppercase;
		-webkit-tap-highlight-color: transparent;
	}
	html.ccn-phone-b #ccn-menu-toggle .bars { display: inline-flex; flex-direction: column; gap: 3px; }
	html.ccn-phone-b #ccn-menu-toggle .bars i { display: block; width: 16px; height: 2px; background: #9b9796; transition: transform .2s, opacity .2s; }
	html.ccn-phone-b #nav.open #ccn-menu-toggle .bars i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
	html.ccn-phone-b #nav.open #ccn-menu-toggle .bars i:nth-child(2) { opacity: 0; }
	html.ccn-phone-b #nav.open #ccn-menu-toggle .bars i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
	html.ccn-phone-b #nav ul { display: none; }
	html.ccn-phone-b #nav.open ul { display: block; background: #fff; }
	html.ccn-phone-b #nav.open li { border-top: 1px solid #fde5df; }
	html.ccn-phone-b #nav.open li a { padding: 13px 20px; font-size: 12px; letter-spacing: .06em; color: #666; text-align: center; }
}

/* ---- C: swipe strip (tablets, 601–979px; only used if C is chosen for everyone) ---- */
@media only screen and (min-width: 601px) and (max-width: 979px) {
	html.ccn-tab-c #nav { position: relative; }
	html.ccn-tab-c #nav ul {
		flex-wrap: nowrap; justify-content: flex-start;
		overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none;
		overscroll-behavior-x: contain;
		/* Superfish (Genesis menu script) sets an inline touch-action: pan-y on the menu,
		   which blocks sideways swiping on iPhone. Allow both directions. */
		touch-action: pan-x pan-y !important;
		padding: 0 32px 0 6px;
	}
	html.ccn-tab-c #nav ul::-webkit-scrollbar { display: none; }
	html.ccn-tab-c #nav li { flex: 0 0 auto; }
	html.ccn-tab-c #nav li a { padding: 12px 10px 11px; white-space: nowrap; }
	html.ccn-tab-c #nav::after {
		content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 36px;
		background: linear-gradient(to right, rgba(253, 229, 223, 0), #fde5df 75%);
		pointer-events: none; transition: opacity .2s;
	}
	html.ccn-tab-c #nav.at-end::after { opacity: 0; }
}

/* ---- C: swipe strip (phones, up to 600px) ---- */
@media only screen and (max-width: 600px) {
	html.ccn-phone-c #nav { position: relative; }
	html.ccn-phone-c #nav ul {
		flex-wrap: nowrap; justify-content: flex-start;
		overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none;
		overscroll-behavior-x: contain;
		/* Superfish (Genesis menu script) sets an inline touch-action: pan-y on the menu,
		   which blocks sideways swiping on iPhone. Allow both directions. */
		touch-action: pan-x pan-y !important;
		padding: 0 32px 0 6px;
	}
	html.ccn-phone-c #nav ul::-webkit-scrollbar { display: none; }
	html.ccn-phone-c #nav li { flex: 0 0 auto; }
	html.ccn-phone-c #nav li a { padding: 12px 10px 11px; white-space: nowrap; }
	html.ccn-phone-c #nav::after {
		content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 36px;
		background: linear-gradient(to right, rgba(253, 229, 223, 0), #fde5df 75%);
		pointer-events: none; transition: opacity .2s;
	}
	html.ccn-phone-c #nav.at-end::after { opacity: 0; }
}

/* ==========================================================================
   Home page, phones and tablets: show "Keep in Touch" right under the
   slider, above the posts. (The search/tabs widget stays in the sidebar.)
   The content and sidebar boxes are flattened (display: contents) so their
   blocks become one column that can be re-ordered. Nothing is moved or copied
   in the HTML, so desktop and the tab switcher are unaffected.
   ========================================================================== */
@media only screen and (max-width: 979px) {
	body.home #content-sidebar-wrap { display: flex; flex-direction: column; }
	body.home #content,
	body.home #sidebar { display: contents; }

	body.home #content > * { order: 3; }                     /* posts, Next Page */
	body.home #sidebar > * { order: 4; }                     /* rest of sidebar */
	body.home #content > .welcome { order: 1; width: 100%; } /* slider; width keeps it filling the column (auto margins would shrink it) */
	body.home #sidebar > #text-20 { order: 2; margin-bottom: 25px; } /* Keep in Touch; same gap as slider → first post */
	body.home #content > .navigation { margin-bottom: 10px; }
}