/* Mobile skin: reflow the fixed 1003px table layout to a single readable column.
   Active under 1002px (see the media attribute on the stylesheet link); the
   device-width viewport lets it actually trigger on phones. */

body { margin: 0; }
img { max-width: 100%; height: auto; }
/* Header: drop the fixed 1006px width so it tracks the viewport; keep the logo at
   its natural size (it is a small 202px graphic, upscaling it to 100% looks blurry).
   The 1006x95 banner stays the background and the section logo (202x95) overlays its
   left, matching the desktop composition. Show the banner once (no tiling) and seat
   it on a dark colour that matches its edge, so there is no white flash or seam
   before the CloudFront image loads and none on the wider tablet widths. */
#header { overflow: hidden; width: 100% !important; height: auto !important;
	background-repeat: no-repeat; background-color: #161616; }
#header a { display: block; line-height: 0; }
/* The logo <img> in layout.njk has no width/height attributes, so before it loads
   the browser reserves 0 height and #header collapses; when the image arrives it
   jumps to 95px and shoves the nav and the whole page down (a large layout shift /
   CLS hit). A definite width plus the logo's own 202:95 aspect-ratio reserves that
   95px box up front, so nothing moves when the image loads. max-width keeps it from
   overflowing on sub-202px phones; the height tracks the ratio there too. */
#header img { width: 202px !important; max-width: 100% !important; height: auto !important;
	aspect-ratio: 202 / 95; display: block; }

/* The centered layout tables become full width. */
table[align="center"] { width: 100% !important; max-width: 100%; }

/* Inner fixed-width layout tables/cells are NOT align="center", so the rule above
   misses them; without this they (and the 827px footer image) keep the page wide. */
table[width="1003"], table[width="827"], td[width="827"], td[width="806"] { width: 100% !important; max-width: 100% !important; box-sizing: border-box; }
#footer, img[width="827"] { width: 100% !important; height: auto !important; }

/* Level-one image nav (.navtable) and its feet (.feettable): the ten fixed 91px button
   GIFs (and the angled "feet" joining them to the submenu) become an unreadable
   ~33x7px smear when squeezed into a phone width, so hide them entirely and expose
   level one through the burger menu instead (styles at the bottom of this file). The
   submenu (.subtable) still reflows proportionally. */
.navtable, .feettable { display: none !important; }
.subtable { width: 100% !important; table-layout: fixed; }
.subtable td { width: auto !important; }
.subtable #navigation img { width: 5px !important; height: 9px !important; }  /* keep breadcrumb arrows tiny */

/* Hide the dead login/sponsor rail and the fixed spacer columns. */
.sidebar { display: none !important; }
td[width="8"], td[width="5"], td[width="176"], td[width="24"], td[width="26"], td[width="136"] { display: none !important; }

/* Content area fills the screen. */
.contentcell { width: 100% !important; display: block; padding: 6px !important; box-sizing: border-box; }

/* News two-column split (main + quicklist rail) stacks; rail hidden on phones. */
.content-split, .content-split > tbody, .content-split > tbody > tr { display: block !important; width: auto !important; }
.content-split > tbody > tr > td { display: block !important; width: auto !important; }
.content-split .railcol { display: none !important; }
.content-split .maincol { width: 100% !important; }

/* Boxes, lists and the body table fit the width and wrap. */
.box, .box-title, .newsbody, .list_table { width: 100% !important; max-width: 100%; box-sizing: border-box; }
.newsbody td, .box .text, .box .header, .list_table td { word-break: break-word; }
.box_content { left: 0; top: 0; }            /* drop the 3px shadow offset on mobile */

/* Card / photo grids reflow. */
.topstories { flex-direction: column; }
.album-grid { gap: 6px; }
.album-card { width: 46%; box-sizing: border-box; }
.photo-grid .photo { width: 30%; }
.lanfacts th { width: auto; white-space: normal; }

/* specials list: narrower info column so the description has room on phones */
.specials-table td.info { width: 120px; }
.specials-table td.ico { width: 30px; }
.specials-table td.ico img { max-width: 24px; }

/* ---------------------------------------------------------------------------
   Burger navigation (replaces the hidden level-one image nav)

   Pure CSS, no JS: the burger is an <a href="#mobilenav">, the panel is
   #mobilenav and opens via :target. That keeps it working under the strict CSP
   (script-src 'self', no inline) and makes the open state deep-linkable.
   Colours/typography reuse the 2006 chrome: olive-grey panel, white bold Tahoma,
   the original button labels, and per-section accent colours (--sc, set inline in
   layout.njk) that echo the navi_<name>_hover.gif tab fill.
   --------------------------------------------------------------------------- */

/* Nav bar: a dark 2006-chrome strip standing in for the hidden image nav. In normal
   flow (not floating) so it always paints and stays high-contrast over the busy header
   art; the classic light top bevel (.shadow_title) and a section-colour bottom edge tie
   it to the current section. */
.mobilebar {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	height: 38px;
	padding: 0 6px 0 12px;
	background: #4d514c;
	border-top: 1px solid #B7B893;
	border-bottom: 3px solid var(--sc);
	box-sizing: border-box;
}
.mobilebar-sec {
	color: #fff;
	font-weight: bold;
	font-size: 13px;
	letter-spacing: 1px;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
}
/* Burger: three white bars on the right, in a comfortable tap target. */
.burger {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	width: 30px;
	height: 38px;
	padding: 7px 0;
	box-sizing: border-box;
}
.burger span {
	display: block;
	width: 100%;
	height: 3px;
	background: #fff;
}

/* Panel is hidden until the burger sets the URL hash to #mobilenav. */
.mobilenav { display: none; }
.mobilenav:target { display: block; }

/* Full-screen dim behind the panel; tapping it (href="#") closes the menu. */
.mnav-overlay {
	display: block;
	position: fixed;
	inset: 0;
	z-index: 1090;
	background: rgba(0, 0, 0, 0.5);
}

/* The sliding panel itself. */
.mnav-panel {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 1095;
	width: min(78vw, 250px);
	max-height: 100vh;
	overflow-y: auto;
	background: #5A5E59;                 /* myhome sidebar grey */
	border-left: 1px solid #000;
	box-shadow: -2px 0 6px rgba(0, 0, 0, 0.5);
	font-family: Tahoma, Arial, Verdana;
}

/* Panel header strip reuses the olive title bar look (.shadow_title). */
.mnav-head {
	position: relative;
	padding: 7px 10px;
	background: #98997A;
	color: #fff;
	font-weight: bold;
	border-top: 1px solid #B7B893;
	border-bottom: 1px solid #000;
}
.mnav-x {
	position: absolute;
	top: 1px;
	right: 9px;
	color: #fff;
	font-size: 20px;
	line-height: 1.3;
	text-decoration: none;
}

/* Each entry: white bold label, a per-section colour swatch as the left border and a
   small triangle (echoing the breadcrumb arrows.gif), on the 2006 list divider line. */
.mnav-item {
	display: block;
	padding: 11px 12px;
	color: #fff;
	font-size: 12px;
	font-weight: bold;
	text-decoration: none;
	border-top: 1px solid #7E847D;       /* exact .list_color divider */
	border-left: 6px solid var(--sc);
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
}
.mnav-item::before {
	content: "";
	display: inline-block;
	width: 0;
	height: 0;
	margin-right: 8px;
	vertical-align: middle;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	border-left: 5px solid var(--sc);
}
/* Current section is filled with its colour, mirroring navi_<name>_hover.gif. */
.mnav-item.active { background: var(--sc); }
.mnav-item:hover, .mnav-item:active { background: var(--sc); }
.mnav-item.active::before,
.mnav-item:hover::before,
.mnav-item:active::before { border-left-color: #fff; }
/* Keep the panel links white+bold in EVERY section: news.css / gallery.css set a
   section a{} colour that otherwise bleeds into these links on those pages. */
.mnav-item:link, .mnav-item:visited, .mnav-item:hover, .mnav-item:active { color: #fff; font-weight: bold; }