/*
	Animation Sketchpad — restyle layer (loads AFTER style.css / faq.css / manual.css /
	tutorial.css and AFTER site.css).

	Purpose: bring the legacy Bootstrap-era layout in line with the shared Appy Monkeys
	design (see website-design-document.md) WITHOUT rewriting each page's HTML:
	  - flat navy background instead of the rainbow gradient
	  - retire absolute-positioned header/footer/gradient "bottom_container" hacks
	  - fluid type + fluid feature rows instead of fixed-px per-breakpoint sizes
*/

/* ---------- Base ---------- */
html, body { margin: 0; }
body {
	min-height: 0 !important; min-width: 0 !important;
	font-family: var(--am-font); font-size: 1rem; line-height: 1.65; font-weight: 300;
	color: var(--am-text); text-align: left;
	background: var(--am-bg) !important;
}
h1, h2, h3, h4, h5, h6 {
	font-family: var(--am-font); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #fff;
}
a { color: #fff; }
.clear { margin: 0 !important; clear: both; height: 0; overflow: hidden; line-height: 0; }

/* sections sit below the fixed header (hero-less pages) */
body { padding-top: calc(var(--am-header-h) + 1.5rem); }
body:has(#banner) { padding-top: 0; }

/* legacy layout wrappers: neutralise gradients / absolute positioning */
.bottom_container { position: static !important; height: auto !important; margin: 0 !important; background: none !important; }
.body_container { position: relative; width: min(72rem, 100% - 2 * var(--am-gutter)) !important; margin: 0 auto; text-align: left; }
.main { width: min(55em, 100%) !important; margin: 0 auto; text-align: center; }
.main img { width: auto; max-width: 100%; }
.main h2, .body_container > h2 { font-size: 1.4rem; margin: 1.5rem 0 1rem; }
.main p { font-size: 1.05rem !important; text-align: left; color: #fff; }

/* ---------- Store row (badges + demo button) ---------- */
.store_row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 1.5rem; margin: 1rem 0 1.5rem; }
.store_row a { border: 0; }
#store { width: 4rem !important; height: auto; padding: 0 !important; background: transparent; }
.demo_button { font-size: .85rem !important; padding: .9em 1.8em !important; }

/* ---------- Feature rows (legacy <table>: gif | text, alternating) ---------- */
table { display: table; width: 100%; border-collapse: separate; border-spacing: 0 1.5rem; }
table h2 { font-size: 1.15rem; }
td, th { width: 50%; padding: .75rem; border: 0; vertical-align: middle; }
td h2 { display: block; margin: .5rem 0; font-size: clamp(1.15rem, 1rem + .8vw, 1.8rem); text-align: center; }
table p { font-size: clamp(.95rem, .85rem + .35vw, 1.2rem) !important; text-align: left; color: #fff; }
table img, table video {
	width: 100%; height: auto; border: 0; border-radius: var(--am-radius);
	background: var(--am-surface); box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}
table img#image, #image { width: 3.25rem; height: auto; margin: 0 auto; border: 0; box-shadow: none; background: transparent; display: block; }

@media screen and (max-width: 736px) {
	table, tbody, tr, td { display: block; width: 100%; box-sizing: border-box; }
	tr { display: flex; flex-direction: column; margin-bottom: 2rem; padding: 1.25rem; border-radius: var(--am-radius); background: var(--am-surface); }
	td { padding: .25rem 0; }
	td:not([align="center"]) { order: -1; }           /* media first, copy second */
	table img { box-shadow: none; }
}

/* ---------- "Made with Animation Sketchpad" strip ---------- */
.scroll-container { max-width: 100%; margin: 2rem 0; }
.scroll-container h2 { text-align: center; margin-bottom: 1rem; }
.scroll-container-t, .scroll-container-b { gap: .75rem; padding: 0 var(--am-gutter); }
.scroll-container img { width: min(360px, 70vw) !important; height: auto; flex: none; border-radius: var(--am-radius); }

/* ---------- Embeds / media ---------- */
iframe { max-width: 100%; }
#video { width: 100%; height: 100%; }

/* ---------- Back-to-top ---------- */
.cd-top { z-index: 9000; }
@media screen and (max-width: 736px) { .cd-top { right: 1rem; bottom: 1rem; width: 44px; height: 44px; } }

body:has(.demo_hero) { padding-top: 0; }

/* ---------- Footer sits on the same navy, no absolute overlay ---------- */
#footer { position: static !important; width: auto !important; height: auto !important; background: var(--am-bg) !important; }
#footer .inner { width: min(55em, 100%); margin: 0 auto; padding: 4rem var(--am-gutter) 2rem; display: block; text-align: left; }
#footer .inner h2 { font-size: 1.2rem; padding-bottom: .5em; border-bottom: 2px solid var(--am-border); margin-bottom: 1rem; }
#footer .inner p { font-size: 1rem; }
#footer .copyright { margin: 2rem 0 0; padding: 1.5rem 0 0; border-top: 2px solid var(--am-border); list-style: none; }
#footer .copyright li {
	display: inline-block; margin: 0 0 0 1rem; padding: 0 0 0 1rem; border-left: 2px solid var(--am-border);
	font-size: .9rem; line-height: 1; color: var(--am-text-muted);
}
#footer .copyright li:first-child { margin-left: 0; padding-left: 0; border-left: 0; }
#footer .copyright a { color: inherit; }
@media screen and (max-width: 480px) {
	#footer .copyright li { display: block; margin: 1rem 0 0; padding-left: 0; border-left: 0; }
	#footer .copyright li:first-child { margin-top: 0; }
}

/* legacy #social (footer image icons) collides with the header social tab id */
#header #social { width: auto !important; margin: 0 !important; padding: .35rem .75rem .4rem !important; }

/* ---------- Inner-page type scale + links ---------- */
h1 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem) !important; }
h2 { font-size: clamp(1.1rem, 1rem + .6vw, 1.6rem) !important; }
h3 { font-size: clamp(1rem, .95rem + .3vw, 1.25rem) !important; }
td h2 { font-size: clamp(1.15rem, 1rem + .8vw, 1.8rem) !important; }
p a, li a, td a, .content a { color: #fff; text-decoration: underline; overflow-wrap: anywhere; }
p, li { overflow-wrap: break-word; }

/* legacy pages ship fixed-px bits that cause sideways scroll on phones */
html, body { overflow-x: hidden; }
.owl-nav-button { font-size: clamp(2.5rem, 8vw, 6rem) !important; }
.content { max-width: 100%; box-sizing: border-box; }


/* samples page: fluid 16:9 video grid */
.sample { width: min(72rem, 100% - 2 * var(--am-gutter)); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: 1.25rem; }
.sample iframe, iframe#samples { width: 100% !important; height: auto !important; aspect-ratio: 16 / 9; border: 0 !important; border-radius: var(--am-radius); background: #000; }

/* tutorial page: fluid embeds */
.tutorials { width: 100%; max-width: 100%; }
object#video, .tutorials object, .owl-carousel .item object { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
.owl-carousel .item div { text-align: center; margin-bottom: .5rem; color: #fff !important; }

/* feature rows now sit on slanted bands: no card background needed */
.slant-band tr { background: none; padding: 0; }
.slant-band table { margin: 0; }
.slant-band td img, .slant-band td video { box-shadow: none; background: transparent; }

/* free-online-demo page: match EasySketchPose (28px heading, bordered frame, border-box sizing like Solid State) */
.demo_hero h2 { font-size: 28px !important; }
.wrapper, .wrapper *, .wrapper *:before, .wrapper *:after { box-sizing: border-box; }

/* Bootstrap 3 (loaded on tutorial.html) sets html{font-size:10px}, which shrinks every rem-based
   size (navbar, footer, buttons). Keep the root at the browser default so all pages match. */
html { font-size: 100% !important; }