/* ==========================================================================
   responsive.css  --  mobile styling for stevesdetectorrods.com
   --------------------------------------------------------------------------
   Loaded from header.php, so it reaches every page on the site.

   EVERYTHING here is inside a media query, so it only ever applies to
   screens narrower than 900px.  The desktop layout is untouched.

   It is loaded LAST, after each page's own <style> block, so these rules
   win where they need to.
   ========================================================================== */

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

/* --- overall page container ------------------------------------------------
   The desktop container is 90% wide with a border, which wastes space that
   phones don't have.  Go edge to edge instead.                              */

.main {
	width: 100% !important;
	max-width: 100% !important;
	border: none !important;
	}

.w3-container.main {
	padding-left: 8px !important;
	padding-right: 8px !important;
	}

body {
	font-size: 11pt !important;
	}


/* --- pictures --------------------------------------------------------------
   Stops any image running off the side of the screen.                       */

img {
	max-width: 100%;
	}


/* --- old-style aligned images ----------------------------------------------
   align="left" / align="right" float pictures beside text.  There isn't room
   for that on a phone, so stack them and centre them instead.
   (Declared early so the header rules below can override it for the small
   Facebook / YouTube icons, which also carry align="right".)               */

img[align="left"],
img[align="right"] {
	float: none !important;
	display: block !important;
	margin: 12px auto !important;
	height: auto !important;
	}


/* --- the header block ------------------------------------------------------
   "Contact us at..." plus the Facebook/YouTube icons are pinned over the top
   right of the header photo on desktop.  On a phone that lands on top of the
   artwork, so drop it out of the way.

   In the HTML the contact block comes before the banner, so once it stops
   floating it would push the banner down the page.  Re-order them so the
   branding still comes first: banner, then contact details, then the menu. */

.w3-display-container {
	display: flex !important;
	flex-direction: column !important;
	}

.w3-display-container > img       { order: 1; }
.w3-display-container > .w3-display-topright { order: 2; }
.w3-display-container > .w3-bar   { order: 3; }

.w3-display-topright {
	position: static !important;
	text-align: center !important;
	padding: 6px 0 !important;
	font-size: 11px !important;
	line-height: 1.5;
	}

.w3-display-container .w3-display-topright img {
	float: none !important;
	display: inline-block !important;
	margin: 4px 6px !important;
	height: 34px !important;
	width: auto !important;
	}


/* --- navigation bar --------------------------------------------------------
   Ten menu items will not fit across a phone.  W3.CSS would stack them as ten
   full-width rows, which pushes the actual page content right off the screen.
   Let them flow and wrap into a compact block instead.                      */

.w3-bar {
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: center !important;
	}

.w3-bar .w3-bar-item {
	display: inline-block !important;
	width: auto !important;
	float: none !important;
	padding: 9px 9px !important;
	font-size: 12px !important;
	line-height: 1.2 !important;
	}


/* --- tagline ---------------------------------------------------------------
   20pt bold is too large for a narrow screen.                               */

.mission {
	font-size: 13pt !important;
	padding: 6px 4px;
	line-height: 1.3;
	}


/* --- headings --------------------------------------------------------------- */

h1 {
	font-size: 15pt !important;
	line-height: 1.3;
	}


/* --- home page slideshow ---------------------------------------------------- */

#slideshow {
	width: 100% !important;
	}

/* Match the control bar to the full-width slide, and make the arrows and
   dots big enough to hit with a fingertip rather than a mouse pointer.     */

/* The slide itself is only about 120px tall on a phone (the artwork is 3:1),
   so the bar has to stay slim or it dominates the picture.  The height comes
   almost entirely from padding rather than the arrows, so the padding is cut
   vertically while staying generous left and right -- that keeps each arrow a
   wide, easy target without making the bar any taller.                     */

#slidecontrols {
	width: 100% !important;
	padding: 3px 2px !important;
	}

#slidecontrols .slidearrow {
	font-size: 20px !important;
	padding: 4px 18px !important;
	}

#slidemarkers {
	gap: 14px !important;
	}

#slidecontrols .marker {
	height: 15px !important;
	width: 15px !important;
	}


/* --- home page category cards ----------------------------------------------
   Four across becomes two across.                                           */

#cardWrap {
	grid-template-columns: 1fr 1fr !important;
	gap: 10px !important;
	}

#card {
	height: 80px !important;
	font-size: 11pt !important;
	}


/* --- product list pages (list.php / list2.php) -----------------------------
   Desktop puts the "Refine Search" box and the product list side by side as
   20% / 70% floated columns.  Stack them instead, search box first.         */

#product-search-column,
#product-display-column {
	width: 100% !important;
	float: none !important;
	margin-left: 0 !important;
	box-sizing: border-box;
	}

#product-search-column {
	margin-bottom: 15px !important;
	box-shadow: none !important;
	}

/* The filter list runs to roughly 40 checkboxes.  On a phone that is a full
   screen of options before the first product, so it is collapsed by default
   (see the small script at the foot of list.php) and opens on a tap.       */

#search-details > summary {
	cursor: pointer;
	padding: 10px 4px;
	font-size: 12pt;
	color: #A00;
	font-weight: bold;
	}

#search-details[open] > summary {
	border-bottom: 1px solid #CCC;
	margin-bottom: 8px;
	}

#product-search-column input[type="checkbox"] {
	width: 18px;
	height: 18px;
	vertical-align: middle;
	margin: 6px 4px 6px 0;
	}


/* --- fixed heights ---------------------------------------------------------
   Several pages pin a height on their wrapper (450px, 550px, 800px, 850px).
   Text gets much taller when it reflows into a narrow column, so those need
   to become minimums rather than fixed sizes.                               */

#product-wrapper,
#contact-wrapper {
	height: auto !important;
	min-height: 0 !important;
	padding-left: 4px;
	padding-right: 4px;
	}

.product-summary {
	height: auto !important;
	width: 100% !important;
	overflow: hidden;
	box-sizing: border-box;
	}

.product-summary-image {
	height: 110px !important;
	}

.product-summary-title {
	font-size: 16px !important;
	}


/* --- contact form ----------------------------------------------------------
   Make the radio button rows a comfortable size to tap.                     */

#sdr-form-wrap .sdr-choice {
	padding: 8px 2px;
	font-size: 11pt !important;
	}

#sdr-form-wrap .sdr-choice input[type="radio"] {
	width: 18px;
	height: 18px;
	vertical-align: middle;
	}


/* --- instruction pages -----------------------------------------------------
   These use width="250" on every step photo.                                */

.pagetitle {
	font-size: 15pt !important;
	line-height: 1.3;
	}


/* --- product detail pages --------------------------------------------------
   The zoom gallery is built for a mouse; just make sure it fits.            */

.xzoom-container,
.xzoom,
#xzoom-default {
	max-width: 100% !important;
	height: auto !important;
	}

.xzoom-thumbs {
	display: block;
	margin-top: 8px;
	}


/* --- wide tables -----------------------------------------------------------
   Lets a wide price table scroll sideways on its own rather than stretching
   the whole page.                                                           */

table {
	max-width: 100% !important;
	}


/* --- footer ----------------------------------------------------------------
   The footer is pinned to the bottom of the screen on desktop.  On a phone
   that permanently covers part of an already small screen, so let it sit at
   the end of the page instead.                                              */

.w3-bottom {
	position: static !important;
	}

.bottombar {
	font-size: 10pt !important;
	line-height: 1.4;
	padding: 6px 4px;
	}

.bottombar center {
	display: block;
	}

}  /* end max-width 900px */


/* ==========================================================================
   DESKTOP ONLY
   The "Refine Search" box was changed to a <details> element so it can be
   collapsed on phones.  On a full-size screen it must look and behave
   exactly as it always has: no disclosure triangle, and not clickable.
   ========================================================================== */

@media screen and (min-width: 901px) {

/* The menu grew to ten items when Contact was added, and at that size it
   needs about 1241px -- so it wrapped onto two rows on any window narrower
   than roughly 1378px, which includes a lot of laptops.  Trimming the side
   padding of each button from 16px to 10px saves 120px and puts it back on
   one row.  Top and bottom padding is untouched, so the bar keeps its height
   and the buttons stay the same size to click. */

.w3-bar .w3-bar-item {
	padding-left: 10px !important;
	padding-right: 10px !important;
	}

/* Centre the buttons as a single group inside the black bar, rather than
   letting them pile up against the left edge and leave a gap on the right.
   The browser measures the available width itself, so this stays balanced
   on any monitor, and if the bar ever does wrap, both rows stay centred. */

.w3-bar {
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: center !important;
	}

/* W3.CSS adds these to clear the floated buttons.  Once the bar is a flex
   container the floats no longer apply, and these would just become stray
   empty items that throw the centring off very slightly. */

.w3-bar:before,
.w3-bar:after {
	display: none !important;
	}

#search-details > summary {
	list-style: none;
	cursor: default;
	pointer-events: none;
	display: block;
	}

#search-details > summary::-webkit-details-marker { display: none; }
#search-details > summary::marker { content: ""; }

}


/* ==========================================================================
   FULL-SCREEN PHOTO VIEWER  (phones and small tablets)
   Built by mobilezoom.js.  Deliberately NOT inside a media query: the viewer
   is only ever created on a small screen, but if the phone is rotated while
   it is open the styling has to survive.
   ========================================================================== */

#sdr-zoom-overlay {
	display: none;
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	background: #000;
	z-index: 99999;
	}

#sdr-zoom-bar {
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 46px;
	background: #111;
	border-bottom: 1px solid #333;
	color: #DDD;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 10px;
	font: 11px Verdana, Geneva, sans-serif;
	z-index: 2;
	box-sizing: border-box;
	}

#sdr-zoom-close {
	background: none;
	border: 1px solid #888;
	color: #FFF;
	font-size: 22px;
	line-height: 1;
	width: 38px;
	height: 34px;
	border-radius: 4px;
	cursor: pointer;
	flex: none;
	}

#sdr-zoom-stage {
	position: absolute;
	top: 46px; left: 0; right: 0; bottom: 0;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	}

/* fitted to the screen: centre it both ways */
#sdr-zoom-stage:not(.sdr-zoomed) {
	display: flex;
	align-items: center;
	justify-content: center;
	}

#sdr-zoom-img {
	max-width: 100%;
	max-height: 100%;
	display: block;
	cursor: zoom-in;
	}

/* zoomed to actual size: let it overflow and be dragged around.  Centring is
   deliberately dropped here -- a centred item wider than its container gets
   its left edge clipped and becomes unreachable. */
#sdr-zoom-img.sdr-zoomed {
	max-width: none;
	max-height: none;
	cursor: zoom-out;
	}