/*
Theme Name: itkid_html5
Description: I.T. Kid — the responsive presentation layer over the itkid theme.
Version: 1.0
*/

/* This file is loaded *after* the base theme's style.css, which supplies the
   whole skin: the page texture, the Sheet frame and its corners, the nav strip,
   the menu buttons, the Post/Block boxes, the game cards and the collections
   work. Nothing here re-states any of that. What is here is the one thing the
   Artisteer stylesheet cannot do — the layout is a fixed 894px, and this makes
   it fluid — plus the banner the new theme changes.

   How the two sheets meet: _init_theme() merges a base theme's stylesheets with
   its sub-theme's, keyed by the filename as written in the .info file, base
   first. This theme declares only 'responsive.css', so itkid's 'style.css' is
   still in the list and still first, and every rule below is an override of a
   rule in it. Where a rule is not an override it is marked as new.

   The fixed widths being undone, one for one, from itkid's style.css:

     #art-page-background-*        min-width: 900px
     .art-Sheet                    width: 900px
     div.art-Header                width: 894px, height: 125px
     .art-Logo                     position: absolute, left: 110px, width: 774px
     .art-nav .r                   width: 894px, clip: rect(...)
     .art-contentLayout            width: 894px
     .art-contentLayout .art-sidebar1 / .art-content / .art-content-wide
                                   float: left, 223px / 670px / 893px
     .art-Footer                   width: 894px
     .art-Footer .art-Footer-background
                                   width: 894px, height: 150px

   Below 900px the sheet is the viewport; the content column is the last of the
   grid's two columns and takes whatever is left. There is one breakpoint, at
   760px, and it does the two things a phone has to do differently: the game
   page's sidebar moves below the game, and the nav may wrap. */

/* begin Fluid layout */

/* iOS enlarges text in landscape unless told not to, which on a page whose
   whole layout is now sized in ems and percents shows up as a jump. New rule:
   the base sheet never needed it, being 894px wide whatever it was viewed on. */
html
{
	-webkit-text-size-adjust: 100%;
}

/* The base sheet sizes images by their width and height attributes, which were
   written for a 894px column. New rule for the same reason as the one above. */
img
{
	max-width: 100%;
	height: auto;
}

#art-page-background-simple-gradient, #art-page-background-gradient, #art-page-background-glare
{
	min-width: 0;
}

/* The decorative glare is 100% wide and carries a 1px transparent border --
   itkid's `html:first-child #art-page-background-glare` rule, which was there
   for Opera. With the default content-box sizing that border sits outside the
   100%, so the element is 2px wider than the viewport on every page, at every
   width, and the document scrolls sideways by those 2px. It did that before
   this theme too; it only matters now because the rest of the page no longer
   forces a horizontal scrollbar of its own and this would be the only one
   left. */
#art-page-background-glare
{
	box-sizing: border-box;
}

.art-Sheet
{
	width: auto;
	max-width: 900px;
}

/* Two columns down to 760px, and the game page's sidebar is the first of them.
   The markup puts the sidebar before the content, so the source order is
   already the display order here and nothing needs reordering at this width.
   `minmax(0, 1fr)` rather than `1fr`: a grid track's minimum is its content's
   minimum by default, and a Flash embed or a long game title would then be
   able to push the column past the sheet instead of being clipped by it. */
.art-contentLayout
{
	width: auto;
	display: grid;
	grid-template-columns: 223px minmax(0, 1fr);
	align-items: start;
}

.art-contentLayout .art-sidebar1
{
	float: none;
	width: auto;
}

.art-contentLayout .art-content
{
	float: none;
	width: auto;
}

/* Most pages have no sidebar block at all, and the shell gives them a single
   .art-content-wide child; it has to span both tracks or it would sit in the
   223px one. */
.art-contentLayout .art-content-wide
{
	float: none;
	width: auto;
	grid-column: 1 / -1;
}

.art-Footer
{
	width: auto;
}

.art-Footer .art-Footer-background
{
	width: 100%;
}

/* end Fluid layout */

/* begin Banner */

/* The banner is a colour band with the site's logo image on it, in place of
   the 894x125 JPEG the old theme painted behind a text logo. It is the one
   visual change the new theme makes on purpose; everything else is meant to
   read as the same site.

   The colour is this theme's own token, one hex in one rule: #04049A is the
   deep blue the old Header.jpg was built from and the blue the base sheet
   already uses for the card border on hover, so the band is the same colour as
   the art it replaces. Change it here and nowhere else.

   The image is files/logo.gif, the 67x105 squarish mark that has been the
   site's configured logo all along (theme_itkid_settings: toggle_logo 1,
   logo_path sites/itkid.com/files/logo.gif) and that no page ever printed.
   $logo resolves it and itkid_cdn's output buffer serves it from
   https://cdn.itkid.com/logo.gif.

   The band is shorter than the old banner -- 72px of logo in 10px of padding,
   against 125px of JPEG -- which is the point of the change rather than a side
   effect of it. The site name and slogan keep their original colours from the
   base sheet (#FDEDBE) because the band is the same blue they were set on. */
div.art-Header
{
	width: auto;
	height: auto;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px 14px;
	background-color: #04049A;
	background-image: none;
	box-sizing: border-box;
}

a.art-Logo-image
{
	display: block;
	flex: none;
	line-height: 0;
}

a.art-Logo-image img
{
	display: block;
	height: 72px;
	width: auto;
	border: 0;
}

/* Was absolutely positioned at left:110px over the JPEG; now the second item of
   the band's row, with the h1 and the slogan stacked in it. */
.art-Logo
{
	position: static;
	left: auto;
	top: auto;
	width: auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* end Banner */

/* begin The players */

/* Both players draw at the size the movie was authored at, and nothing in
   either of them reacts to the column it is dropped into. The wrapper is the
   theme's own markup (`itkid_swftools_embed()` for a .swf, the emvideo
   provider's `director-wrapper` for a .dcr), so this is where they can be
   constrained.

   Ruffle: it takes the <object>'s width and height attributes onto its own
   `ruffle-object` element and sizes that element from its own stylesheet, which
   480x384 was for the game below -- so in a 329px column the right 151px of the
   movie sat outside the column and was clipped by `.art-content`'s
   overflow:hidden, with no way to reach it. `max-width` is what makes it fit;
   it is `!important` because Ruffle's stylesheet belongs to the page after this
   one. The element keeps its authored height, so Ruffle letterboxes the movie
   inside a box that is now narrower than it is tall -- the same thing it does
   in a fullscreen window that is not the movie's shape. `height: auto` is not
   an option: `ruffle-object` is a custom element with no intrinsic ratio, and
   it collapses to zero. */
.swftools-wrapper
{
	max-width: 100%;
}

.swftools-wrapper object, .swftools-wrapper embed
{
	max-width: 100%;
}

.swftools-wrapper ruffle-object, .swftools-wrapper ruffle-embed
{
	max-width: 100% !important;
}

/* DirPlayer, the Shockwave player, cannot be constrained the way Ruffle can:
   it lays the movie out in the box the provider asked for, in fixed pixels,
   with its own inline styles and stylesheet, and the element carrying that
   width is inside React's tree. So the script does it — `fitDirector()` in the
   page head scales the mount's child to the column and sets the mount's height
   to match, which is the same transform the fullscreen button already applies.

   `max-width` keeps the wrapper inside the column for the moment before that
   runs. `overflow: hidden` is the clipping the base theme's `.art-content` did
   anyway, kept so that a page where the script somehow does not run is as it
   was rather than one that scrolls sideways. There is no scrolling fallback on
   purpose: the movie only exists once DirPlayer's script has built it, so
   there is nothing there to pan across. */
.director-wrapper
{
	max-width: 100%;
	overflow: hidden;
}

/* end The players */

/* begin Navigation */

/* The nav strip is nav.png, an 894x41 image, and .r is a clipped copy of it
   held at the right edge. Only the width has to follow the sheet now. */
.art-nav .r
{
	width: 100%;
	clip: auto;
}

/* end Navigation */

/* begin Narrow screens */

/* One breakpoint. Above it everything is as it was at 900px; below it the two
   things that cannot work side by side any more happen.

   The menu items are floated with fixed 29px-high three-state button sprites
   (MenuItem.png, 408x87 = three 29px states), so they are left alone: at this
   width they simply wrap onto as many rows as they need, and the sprite offsets
   that draw the hover and active states still line up. Making them taller would
   mean new art, not new CSS. */
@media (max-width: 760px)
{
	div.art-Header
	{
		padding: 8px 10px;
		gap: 10px;
	}

	a.art-Logo-image img
	{
		height: 56px;
	}

	h1.art-Logo-name, h1.art-Logo-name a, h1.art-Logo-name a:link, h1.art-Logo-name a:visited, h1.art-Logo-name a:hover
	{
		font-size: 20px;
	}

	.art-Logo-text, .art-Logo-text a
	{
		font-size: 15px;
	}

	/* The strip is one row high and the menu is now several, so the image steps
	   aside and the band colour takes over. Same token as the banner above it,
	   which is what the two did with nav.png and Header.jpg at full width. */
	.art-nav
	{
		height: auto;
		background-color: #04049A;
	}

	.art-nav .l, .art-nav .r
	{
		display: none;
	}

	/* The sidebar goes under the game rather than beside it: the game is why the
	   page was opened, and 223px of an author block beside a 360px-wide movie is
	   the wrong way round. It stays on the page -- it is the author's profile and
	   their other games -- so the content is ordered above it instead of the
	   block being hidden. */
	.art-contentLayout
	{
		grid-template-columns: minmax(0, 1fr);
	}

	.art-contentLayout .art-content
	{
		order: 1;
	}

	.art-contentLayout .art-sidebar1
	{
		order: 2;
	}

	/* The cover art on the pages whose movie is gone. It is a 640x480 box and
	   the artwork in it is deliberately not scaled up, so on a phone the box
	   shrinks to the column and the art keeps its own size in it. `table-cell`
	   exists to centre the art vertically in a box as tall as the player it
	   replaces; with the box no longer that tall, it has nothing to do. */
	div.emvideo-unavailable
	{
		display: block;
		width: auto;
		height: auto;
		padding: 14px 0;
	}
}

/* end Narrow screens */