/*
Theme Name: Loki Research
Description: Recreates the look of the original lokiresearch.com ASP site and store.
Version: 1.0
Requires PHP: 8.0
*/

/* the old site: black starfield, white Arial, yellow links that go red on hover, NASALIZA nav */
@font-face { font-family: Nasa; src: url('NASALIZA.TTF') format('truetype'); font-display: swap; }
:root { --loki-yellow: #ffff00; --loki-red: #ff0000; }
html { background: #000; }
body { margin: 0; background: #000 url('img/stars.gif'); color: #fff; font: 14pt Arial, Helvetica, sans-serif; }
a, a:visited { color: var(--loki-yellow); text-decoration: none; }
a:hover { color: var(--loki-red); text-decoration: underline; }
h3 { color: red; }
td { font-family: Arial, Helvetica, sans-serif; }
img { max-width: 100%; }
hr { border: 0; border-top: 1px solid #ccc; border-bottom: 1px solid #555; margin: 6px 0 10px; }

.loki-page { width: 95%; padding: 5px; box-sizing: border-box; }
.loki-logo { padding: 5px; }
.loki-logo img { display: block; width: 640px; height: auto; max-width: 100%; }
.loki-row { display: flex; align-items: flex-start; }

/* left column: page links 14pt, store groups 10pt indented under PRODUCTS */
.loki-nav { flex: 0 0 150px; padding: 2.4em 5px 5px; box-sizing: border-box; }
.loki-nav a { display: block; font-family: Nasa, Arial, sans-serif; font-weight: bold; line-height: 1.15; }
.loki-nav .loki-nav-page { font-size: 14pt; padding-left: 2.2em; }
.loki-nav .loki-nav-group { font-size: 10pt; padding-left: 4.4em; }
.loki-nav a:hover { color: var(--loki-red); }

.loki-main { flex: 1 1 auto; min-width: 0; padding: 5px; }
.loki-content { overflow-wrap: anywhere; }
.loki-content iframe, .DescTable iframe { max-width: 100%; }
.loki-foot { text-align: center; margin: 4.5em 0 1em; font: bold 7.5pt Arial, sans-serif; }

/* the secure/ store pages were 10pt (secure/Style.css) */
.loki-store-page, .loki-wc { font-size: 10pt; }
.loki-store-page a, .loki-wc a { font-size: inherit; }
.loki-banner img { display: block; height: 43px; width: auto; }
.loki-center { text-align: center; padding: 10px; }
.DescTable { margin: 0 auto 1em; }

/* the old product table: grey header, alternating #666/#888 rows, Qty boxes, one Add to cart */
table.loki-store { width: 100%; border-collapse: collapse; text-align: left; margin: 1em 0 0; }
table.loki-store td { padding: 3px; vertical-align: top; font-size: 10pt; }
table.loki-store tr.loki-head td { background: #ddd; color: #000; font-weight: bold; }
table.loki-store tr.r1 { background: #666; }
table.loki-store tr.r2 { background: #888; }
table.loki-store td.loki-f { text-align: center; }
table.loki-store td.loki-qty, table.loki-store td.loki-qtyh { text-align: right; white-space: nowrap; }
table.loki-store td.loki-cost { white-space: nowrap; }
table.loki-store .loki-item p { margin: 0; }
table.loki-store input[name^="Q_"] { width: 2.2em; font-size: 10pt; }
.loki-oos { font-size: 7pt; }
.loki-buttons { text-align: center; margin: 10px 0; }
.loki-buttons input { font-size: 10pt; }

/* product page (old storeDetail.asp) */
.loki-detail { padding: 10px; }
.loki-detail h1 { font: bold 18pt Arial, sans-serif; margin: 0 0 .6em; }
.loki-detail .DescTable { width: 70%; margin: 0 0 1em; text-align: left; }
table.loki-one td.loki-cost { text-align: right; }

/* WooCommerce cart / checkout / notices on the dark page */
.woocommerce-notices-wrapper, .woocommerce-message, .woocommerce-info, .woocommerce-error, .wc-block-components-notice-banner { text-align: left; }
.woocommerce-message, .woocommerce-info, .woocommerce-error { border: 1px solid var(--loki-yellow); padding: 8px 10px; margin: 0 0 12px; list-style: none; color: #fff; background: #222; }
.woocommerce-error { border-color: red; }
.loki-wc { max-width: 1100px; }
.loki-wc .wc-block-components-text-input input, .loki-wc .wc-block-components-textarea, .loki-wc select,
.loki-wc .wc-block-components-combobox .wc-block-components-combobox-control input, .loki-wc .wc-blocks-components-select__select { background: #fff !important; color: #000 !important; }
.loki-wc .wc-block-components-text-input label, .loki-wc .wc-block-components-combobox label, .loki-wc .wc-blocks-components-select__label { color: #555 !important; }
.loki-wc .wc-block-components-button:not(.is-link), .loki-wc .wp-element-button { background: #ddd; color: #000; border: 2px outset #eee; border-radius: 2px; font: 11pt Arial, sans-serif; }
.loki-wc .wc-block-components-button:not(.is-link):hover { background: #fff; color: #000; }
.loki-wc .wc-block-components-panel__button, .loki-wc .wc-block-components-totals-coupon-link { color: var(--loki-yellow); }
.loki-wc .wc-block-cart-items__header, .loki-wc .wc-block-components-product-metadata { color: #ccc; }
.screen-reader-text { position: absolute !important; clip: rect(1px,1px,1px,1px); width: 1px; height: 1px; overflow: hidden; }

/* phones: nav goes on top, the wide old content scrolls inside its column */
@media (max-width: 760px) {
	body { font-size: 12pt; }
	img { height: auto; }
	.loki-page { width: 100%; padding: 0 16px; }
	.loki-logo { padding: 10px 0; }
	.loki-row { flex-direction: column; }
	.loki-nav { flex: none; width: 100%; padding: 0 0 10px; display: flex; flex-wrap: wrap; gap: 4px 14px; }
	.loki-nav .loki-nav-page { padding-left: 0; font-size: 12pt; }
	.loki-nav .loki-nav-group { padding-left: 0; font-size: 10pt; align-self: center; }
	.loki-main { width: 100%; padding: 0; }
	.loki-center { padding: 0; overflow-x: auto; }
	.loki-detail { padding: 0; }
	.loki-detail .DescTable { width: auto; }
	.loki-content { overflow-x: auto; }
}

/* shipping is billed after packing (loki_invoice, $0): don't let Woo call it "FREE" */
.loki-wc .wc-block-components-totals-shipping .wc-block-components-totals-item__value,
.loki-wc .wc-block-components-shipping-rates-control .wc-block-components-radio-control__secondary-label { display: none; }