@media only screen and (min-width: 942px) and (max-width: 1170px) {
	
	/* General */
	
	#wrapper { width:940px; }
	.container { width:900px; }
	#main { width:610px; }
	#sidebar { width:260px; }
	
	/* Navigation */

	#nav-wrapper .menu li { margin:0 18px; }
	
	/* Featured Area */
	
	.feat-item {
		width:280px;
		height:420px;
	}
	.feat-inner h2 a { font-size:18px; }
	
	/* Grid Layout */
	
	.sp-grid.col3 > li {
		width:190px;
		margin-right:16px;
	}
	#main.fullwidth .sp-grid.col3 > li {
		width:280px;
	}
	
	.sp-grid.col2 > li {
		width:290px;
		margin-right:26px;
	}
	
	#main.fullwidth .sp-grid.col2 > li {
		width:430px;
	}
	
	.sp-grid.col4 > li {
		margin-right:1.52%;
	}
	
	/* Post */
	.item-related {
		width:190px;
		margin-right:20px;
	}
	#main.fullwidth .item-related {
		width:280px;
	}
	
	/* Newsletter */
	.post-widget .subscribe-text {
		width:40%;
	}
	.post-widget .subscribe-form {
		width:60%;
	}
	
	/* Footer */
	#footer-social a { margin:0 18px; }
	
}

@media only screen and (min-width: 767px) and (max-width: 960px) {
	
	/* General */
	
	#wrapper { width:726px; }
	.container { width:690px; }
	#main { width:100%; }
	#sidebar {
		width:480px;
		margin:0 auto;
		float:none;
		overflow:hidden;
		padding-top:5px;
	}
	
	#nav-wrapper {
		display:none;
	}
	
	.slicknav_menu {
		display:block;
	}
	
	#mobile-social {
		display:block;
	}
	
	#top-social { display:none; }
	
	/* Featured Area */
	
	.feat-item {
		width:216px;
		height:324px;
		margin-right:21px;
	}
	.feat-inner {
		padding: 12px 12px 13px;
	}
	.feat-inner h2 a { font-size:16px; }
	
	/* grid */
	
	.sp-grid.col3 > li, #main.fullwidth .sp-grid.col3 > li {
		width:216px;
		margin-right:17px;
	}
	
	.sp-grid.col2 > li, #main.fullwidth .sp-grid.col2 > li {
		width:330px;
		margin-right:26px;
	}
	.sp-grid.col4 > li {
		margin-right:1.50%;
	}
	
	/* Post */
	.item-related, #main.fullwidth .item-related {
		width:216px;
		margin-right:21px;
	}
	
	/* Newsletter */
	.subscribe-text {
		width:40%;
	}
	.subscribe-form {
		width:60%;
	}
	.home-widget .subscribe-box input, .subscribe-box input {
		width: 50%;
	}
	.subscribe-box input[type=submit] { width:auto; }
	
	/* Footer */
	#footer-social a { font-size:18px; }
	#footer-social a span { display:none; }
	
	textarea,
	input.text,
	input[type="text"],
	input[type="button"],
	input[type="submit"],
	.input-checkbox {
	-webkit-appearance: none;
	border-radius: 0;
	}
	
	.archive-description {
		max-width:90%;
	}
	
}

@media only screen and (max-width: 767px) {
	
	#wrapper { width:320px;}
	.container { width:280px; }
	#main { width:100%; }
	#sidebar {
		width:100%;
		margin:0 auto;
		float:none;
		overflow:hidden;
		padding-top:5px;
	}
	
	#nav-wrapper {
		display:none;
	}
	
	.slicknav_menu {
		display:block;
	}
	
	#mobile-social {
		display:block;
		right:10px;
	}
	
	#top-social { display:none; }
	
	/* Featured Area */

	.feat-item {
		width:280px;
		height:280px;
		margin-right:0;
		margin-bottom:14px;
	}
	
	.feat-inner {
		padding: 12px 12px 13px;
	}
	.feat-inner h2 a { font-size:16px; }
	
	/* grid */
	
	.sp-grid.col3 > li, #main.fullwidth .sp-grid.col3 > li {
		width:100%;
		margin-right:0;
	}
	
	.sp-grid.col2 > li, #main.fullwidth .sp-grid.col2 > li {
		width:100%;
		margin-right:0;
	}
	
	.sp-grid.col4 > li {
		margin-right:0;
		width:100%;
	}
	
	/* List item */

	.list-item .post-img {
		float:none;
		margin-right:0;
	}
	.list-item .post-img img {
		max-width:100%;
	}
	
	.list-item .post-header h2 a {
		font-size:20px;
	}
	.list-item .post-meta { margin-top:0; }
	
	/* post */
	
	.post-header h2 a, .post-header h1 {
		font-size:24px;
	}
	
	.sp-grid.col2 .grid-item .post-header h2 a {
		font-size:18px;
	}
	
	.meta-info {
		width:100%;
		margin-bottom:5px;
	}
	.post-share {
		float:left;
	}
	.post-share a:first-child {
		margin-left:0;
	}
	
	.post-pagination .prev, .post-pagination .next {
		width:100%;
		float:none;
		text-align:center;
		display:block;
	}
	.post-pagination .prev {
		margin-bottom:10px;
	}
	
	.post-author {
		text-align:center;
	}
	.author-img {
		float:none;
		margin-right:0;
		margin-bottom:10px;
	}
	
	
	
	/* Post */
	.item-related, #main.fullwidth .item-related {
		width:100%;
		margin-right:0;
		margin-bottom:20px;
	}
	.thecomment .author-img {
		display:none;
	}
	
	/* newsletter */
	.home-widget {
		margin-top:20px;
	}
	.subscribe-box {
		padding:32px 28px;
	}
	.subscribe-text {
		float:none;
		width:100%;
		text-align:center;
	}
	.subscribe-form {
		float:none;
		width:100%;
		text-align:center;
	}
	.subscribe-box input, .home-widget .subscribe-box input {
		width:100%;
		box-sizing:border-box;
		margin-bottom:12px;
	}
	.subscribe-box input[type=submit] {
		width:100%;
		margin-left:0;
		margin-bottom:0;
	}
	.subscribe-box p {
		margin-bottom:20px;
		font-size:13px;
	}
	.subscribe-box h4 {
		margin-bottom:4px;
	}
	
	/* Footer */
	#footer-social a { font-size:14px; margin:0 5px; }
	#footer-social a span { display:none; }
	
	.left-copy {
		float:none;
		text-align:left;
		width:100%;
		margin-bottom:5px;
	}
	.right-copy {
		float:none;
		text-align:left;
	}
	#instagram-footer .instagram-pics li {
		width:25%;
	}
	#instagram-footer .instagram-pics > li:nth-child(12), #instagram-footer .instagram-pics > li:nth-child(11), #instagram-footer .instagram-pics > li:nth-child(10)
	#instagram-footer .instagram-pics > li:nth-child(9), #instagram-footer .instagram-pics > li:nth-child(8), #instagram-footer .instagram-pics > li:nth-child(7){ display:none; }
	
	/* Shortcode */
	.post-entry .index-heading a {
		position:relative;
		top:5px;
		display:block;
		padding-left:0;
	}
	.post-entry .index-heading > span {
		height:auto;
		line-height:15px;
	}
	
	textarea,
	input.text,
	input[type="text"],
	input[type="button"],
	input[type="submit"],
	.input-checkbox {
	-webkit-appearance: none;
	border-radius: 0;
	}
	
	.archive-description {
		max-width:90%;
	}
	
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
	
	#wrapper { width:480px;}
	.container { width:440px; }
	
	
	/* Featured Area */

	.feat-item {
		width:100%;
		height:280px;
		margin-right:0;
		margin-bottom:14px;
	}
	
	.feat-inner {
		padding: 12px 12px 13px;
	}
	.feat-inner h2 a { font-size:16px; }
	
	/* grid */
	
	.sp-grid.col3 > li:nth-of-type(2n+2), #main.fullwidth .sp-grid.col3 > li:nth-of-type(2n+2) {
		margin-right:0;
	}
	
	.sp-grid.col3 > li, #main.fullwidth .sp-grid.col3 > li {
		width:48%;
		margin-right:3.2%;
	}
	
	.sp-grid.col2 > li, #main.fullwidth .sp-grid.col2 > li {
		width:48%;
		margin-right:3.2%;
	}
	
	.sp-grid.col4 > li {
		width:23.5%;
		margin-right:1.36%;
	}
	
	/* list */

	.list-item .post-img {
		float:left;
		margin-right:20px;
	}
	.list-item .post-img img, #main.fullwidth .list-item .post-img img {
		max-width:160px;
	}

	.list-item .list-content .post-header {
		text-align:left;
		margin-top:0;
		margin-bottom:14px;
	}
	
	.list-item .post-meta .meta-comments, .list-item .post-meta .post-share {
		display:none;
	}
	
	/* post */
	.item-related, #main.fullwidth .item-related {
		width:138px;
		margin-right:13px;
		margin-bottom:0;
	}
	.thecomment .author-img {
		display:block;
		margin-right:10px;
	}
	.thecomment .author-img img {
		max-width:40px;
		height:auto;
	}
	
	/* footer */
	#footer-social a { font-size:16px; margin:0 12px; }
	
}
/* ---------------------------------------------------------------
   Archive fix: fluid mobile layout.
   The theme pins #wrapper to 320px and .container to 280px on any
   screen under 767px - a 2014 layout built for the original iPhone.
   On a modern phone that wastes ~25% of the screen as dead margin
   and leaves the ad slots narrower than the 300px standard unit,
   which is why creatives were being clipped.
   Replaces the fixed widths with a fluid container + real gutters.
   --------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
  #wrapper   { width: auto !important; max-width: 100% !important; }
  .container { width: auto !important; max-width: 100% !important;
               padding: 0 15px !important; box-sizing: border-box !important; }
}

/* ---------------------------------------------------------------
   Archive fix 2: never let an ad creative overflow the screen.
   SHE Media sizes creatives to the available slot, so a wider
   container can prompt a wider unit than the phone can show.
   Cap every slot and its contents to the viewport, and stop any
   overflow turning into a sideways-scrolling page.
   --------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
  html, body { overflow-x: hidden; max-width: 100%; }

  div[id^="skm-ad-"] {
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow: hidden;
  }
  div[id^="skm-ad-"] iframe,
  div[id^="skm-ad-"] img,
  div[id^="skm-ad-"] > div,
  div[id^="skm-ad-"] ins {
    max-width: 100% !important;
  }

  /* the sticky adhesion unit must not hang off the right edge */
  div[id^="skm-ad-bottom"] {
    left: 0 !important;
    right: 0 !important;
    max-width: 100vw !important;
  }
}

/* ---------------------------------------------------------------
   Archive fix 3: don't request desktop ad units on phones.
   SHE Media's "banner" slot type IS the 728x90 leaderboard - it is
   selected by slot type, not by screen width, so on a 390px phone
   it renders ~340px wider than the viewport and gets clipped.
   The medrec/flexrec slots (300px wide) are kept; only the
   desktop-only leaderboards are suppressed on small screens.
   --------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
  /* These desktop-only units are no longer REQUESTED on phones (the push is
     wrapped in a viewport check), so there is nothing to hide. The rule is
     kept only as a belt-and-braces guard for any slot that slips through -
     note that display:none also makes a slot unfillable, so never apply it
     to a slot we actually want filled. */
  /* (no rules needed here: desktop-only units are simply not requested
     on phones, and display:none would make a slot unfillable) */
}

/* ---------------------------------------------------------------
   Archive fix 4: mobile header spacing + grid image sizing.
   - #header carries 65px/60px padding at every breakpoint, which
     eats ~125px of a phone screen before any content appears.
   - Grid/featured thumbnails only had max-width:100%, which caps
     but never fills, so a narrower image variant sits centred in
     the slot with dead space either side. width:100% makes them
     fill. List thumbnails are excluded - they float beside text.
   --------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
  /* the gap ABOVE the white frame, not the space inside it */
  #wrapper { margin-top: 8px !important; }

  .sp-grid .post-img img,
  .grid-item .post-img img,
  #main > article > .post-img img {
    width: 100% !important;
    height: auto !important;
  }

  /* keep the category/archive list thumbnails at their small size */
  .list-item .post-img img { width: auto !important; }
}

/* ---------------------------------------------------------------
   Archive fix 5: Popular Recipes (Jetpack Top Posts) thumbnails.
   The widget hard-codes width/height/max-width to 300px and floats
   the image left, so on a phone it neither fills nor centres.
   The markup carries a density srcset (300/450/600/900), so going
   full width pulls a sharper file rather than upscaling.
   --------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
  .widgets-list-layout-blavatar {
    float: none !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    margin: 0 0 12px 0 !important;
  }
  .widgets-list-layout li { overflow: hidden; }
  .widgets-list-layout-links { display: block !important; margin-left: 0 !important; }
}

/* ---------------------------------------------------------------
   Archive fix 6: post prev/next links on mobile.
   The theme stacks both links full-width and centred below 767px,
   losing the directional cue. Desktop already puts prev left and
   next right; this restores that on phones using flex so the two
   columns stay aligned even when the titles wrap to
   different heights.
   --------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
  .post-pagination { display: flex; gap: 16px; align-items: flex-start; }
  .post-pagination .prev {
    float: none !important; width: 50% !important;
    text-align: left !important; margin-bottom: 0 !important;
  }
  .post-pagination .next {
    float: none !important; width: 50% !important;
    text-align: right !important; margin-left: auto !important;
  }
}

/* ---------------------------------------------------------------
   Archive fix 7: homepage featured items (top 3) on phones.
   The theme has two conflicting mobile rules:
     max-width:767px                  -> .feat-item { width:280px }
     min-width:480px and max:767px    -> .feat-item { width:100%  }
   So phones UNDER 480px got a hard-coded 280px, sized to match the
   theme's old fixed 280px container. With the fluid container that
   leaves a dead strip on the right. These are background-image
   tiles, not <img>, so earlier image fixes never touched them.
   --------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
  .feat-item {
    width: 100% !important;
    float: none !important;
    margin-right: 0 !important;
  }
}

/* ---------------------------------------------------------------
   Archive fix 8: the empty grey box under the featured posts.
   That strip is the ad widget's own box (#f4f4f4 background plus
   25/20/22 padding), which kept its height even with no ad in it:
     - on phones, fix 3 hides the 970x250 flexbanner, leaving the
       box empty;
     - on desktop the flexbanner had no push call at all, so it was
       never even requested.
   Now: flexbanner on desktop, a 300x250 medrec on phones, and the
   box collapses entirely whenever neither one fills.
   --------------------------------------------------------------- */

/* the 300x250 is for phones only */
/* medrec is removed from the DOM on desktop by the viewport check, so no
   display:none is needed (and it would make the slot unfillable anyway). */



/* ---------------------------------------------------------------
   Archive fix 9: reserve the ad slot at its real size immediately.
   No hiding, no :has() collapsing, no post-load manipulation - the
   slot is laid out at the unit's own dimensions on first paint, so
   the ad server sees a correctly sized slot straight away and the
   creative can start loading without waiting on style recalculation.
   Also removes cumulative layout shift when the ad arrives.
     desktop  banner  728 x 90
     phones   medrec  300 x 250
   --------------------------------------------------------------- */
#skm-ad-banner-1  { min-height: 90px; }    /* 728x90  - in-post leaderboard */
#skm-ad-flexbanner { min-height: 250px; }  /* 970x250 - homepage billboard */

@media only screen and (max-width: 767px) {
  #skm-ad-medrec-1 { min-height: 250px; }
  #skm-ad-banner-1 { min-height: 0; }   /* not requested on phones */
}

/* ---------------------------------------------------------------
   Archive fix 10: make the search icon a usable target.
   The icon renders at 12x12px - far below the ~44px minimum for a
   reliable tap - so clicking it often missed even once it was
   wired up. Negative margin keeps it visually where it was while
   expanding the clickable area.
   --------------------------------------------------------------- */
form[role="search"] i,
#searchform i {
  padding: 14px;
  margin: -14px;
  cursor: pointer;
  position: relative;
  z-index: 2;
}