/*
Theme Name: Doggie Loungers Classic
Theme URI: https://doggieloungers.com/
Description: Restoration of the original Doggie Loungers website design (Web Savvy Design, 2000-2015), rebuilt as a Twenty Twenty-Five child theme. Recreates the 650px two-column table layout, image-button navigation, Arial typography and the cream "shade" price tables, with responsive and accessibility fixes.
Author: Doggie Loungers restoration
Template: twentytwentyfive
Version: 1.0.3
Requires at least: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: doggieloungers
*/

/* Values below are taken from the archived css/dlstyle.css (2006-2019). */
:root {
	--dl-text: #000000;
	--dl-bg: #ffffff;
	--dl-hover: #009933;
	--dl-shade: #f8efd8;
	--dl-page: 650px;
	--dl-nav: 150px;
	--dl-content: 475px;
}

body {
	background: var(--dl-bg);
	color: var(--dl-text);
	font-family: arial, helvetica, sans-serif;
	font-size: 13px;
	line-height: 1.45;
	margin: 0;
}

.wp-site-blocks { padding: 0; }

/* Page frame: the original was a centered 650px table. */
.dl-page {
	max-width: var(--dl-page);
	margin: 0 auto;
	padding: 0 8px;
	box-sizing: border-box;
}

.dl-row {
	display: grid;
	grid-template-columns: var(--dl-nav) minmax(0, 1fr);
	gap: 0;
	align-items: start;
}

.dl-header .dl-logo { grid-column: 2; text-align: center; padding-top: 4px; }
.dl-header .dl-logo img { display: inline-block; width: 309px; max-width: 100%; height: auto; }
.dl-header .dl-logo a { background: none; }

/* Left navigation column with the original rollover image buttons. */
.dl-nav { padding-top: 2px; }
.dl-nav ul { list-style: none; margin: 0; padding: 0; }
.dl-nav li { margin: 0; padding: 0; line-height: 0; }
.dl-nav a { display: inline-block; position: relative; background: none; }
.dl-nav img { display: block; height: auto; max-width: 100%; }
.dl-nav .dl-on { position: absolute; inset: 0; opacity: 0; }
.dl-nav a:hover .dl-on,
.dl-nav a:focus-visible .dl-on,
.dl-nav a[aria-current="page"] .dl-on { opacity: 1; }
.dl-nav a:focus-visible { outline: 2px solid var(--dl-hover); outline-offset: 2px; }
.dl-nav .dl-side-art { margin-top: 10px; text-align: center; }
.dl-nav .dl-side-art img { display: inline-block; width: auto; max-width: 130px; height: auto; }

/* Content column: the original nested 475px table. */
.dl-main { min-width: 0; }
.dl-main > .wp-block-group, .dl-content {
	max-width: var(--dl-content);
	margin: 0 auto;
}

.dl-content h1, .dl-main h1 {
	font-family: arial, verdana, sans-serif;
	font-weight: bold;
	font-style: italic;
	text-align: center;
	font-size: 18px;
	margin: 14px 0 8px;
	color: var(--dl-text);
}
.dl-content h2 {
	font-size: 14px; font-weight: bold; text-align: left; margin: 14px 0 4px;
}
.dl-content h3 {
	font-size: 13px; font-weight: bold; margin: 12px 0 4px;
}
.dl-content p, .dl-content li, .dl-content td, .dl-content th {
	font-family: arial, verdana, sans-serif;
	font-size: 13px;
}
.dl-content p { margin: 0 0 12px; text-align: left; }
.dl-content ul { list-style-type: square; padding: 0; margin: 0 0 12px 1.2em; }

strong, b { font-weight: 700; }

a { color: var(--dl-text); text-decoration: none; }
a:hover, a:focus { color: var(--dl-hover); }
/* Accessibility fix: in-text links are underlined so they are not identified by color alone. */
.dl-content p a, .dl-content li a, .dl-content td a { text-decoration: underline; text-underline-offset: 2px; }
a:focus-visible { outline: 2px solid var(--dl-hover); outline-offset: 2px; }

.dl-title { font-size: 14px; font-weight: bold; }
.dl-small, .dl-bottom { font-size: 11px; }
.dl-center { text-align: center; }
.dl-bold { font-weight: bold; }

/* Product blurbs with left floated thumbnails, as on otherprod.html. */
.dl-product { overflow: hidden; margin: 0 0 14px; }
.dl-product .wp-block-image { float: left; margin: 2px 8px 4px 0; }
.dl-product .wp-block-image img { height: auto; }
.dl-product h2 { margin-top: 0; }
.dl-clear { clear: both; }

/* Sizes and prices tables use the cream "shade" cells. */
.dl-content .wp-block-table table { border-collapse: separate; border-spacing: 2px; width: 100%; }
.dl-content .wp-block-table td, .dl-content .wp-block-table th {
	background: var(--dl-shade); border: 0; padding: 2px 4px; text-align: left; vertical-align: top;
}
.dl-content .wp-block-table thead th { font-weight: normal; border: 0; }
.dl-content .wp-block-table figcaption { text-align: center; font-size: 13px; margin: 8px 0 2px; color: var(--dl-text); }
.dl-content .wp-block-table thead { border: 0; }
.dl-price-group { margin: 0 0 6px; }
.dl-price-group h2 { text-align: center; font-size: 13px; font-weight: normal; margin: 10px 0 2px; }

/* Homepage slideshow (gallery block enhanced by assets/js/doggieloungers.js). */
.dl-slideshow { position: relative; max-width: 250px; margin: 0 auto 12px !important; }
.dl-slideshow.is-running { display: block !important; aspect-ratio: 5 / 4; }
.dl-slideshow.is-running figure.wp-block-image {
	position: absolute !important; inset: 0; width: 100% !important; margin: 0 !important;
	opacity: 0; transition: opacity 1.5s ease-in-out;
}
.dl-slideshow.is-running figure.wp-block-image.is-active { opacity: 1; }
.dl-slideshow.is-running img { width: 100%; height: 100% !important; object-fit: contain; }

/* Lounger page: picture swapper (mouse over / focus a view or fabric button). */
.dl-swap { display: grid; grid-template-columns: minmax(0, 295px) 1fr; gap: 10px; align-items: start; }
.dl-swap .dl-swap-target img { width: 100%; height: auto; display: block; }
.dl-swap .dl-swap-buttons p { margin: 0 0 6px; }
.dl-swap .dl-swap-buttons button {
	display: block; background: none; border: 0; padding: 0; margin: 0 0 2px; cursor: pointer; line-height: 0;
}
.dl-swap .dl-swap-buttons button:focus-visible { outline: 2px solid var(--dl-hover); outline-offset: 2px; }

/* Shop catalog listing (restored Zen Cart catalog, ordering disabled). */
.dl-catalog-note { border: 1px solid #d9c9a3; background: var(--dl-shade); padding: 6px 8px; font-size: 12px; }
.dl-catalog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin: 0 0 14px; }
.dl-catalog-grid .wp-block-image, .dl-catalog-grid figure { margin: 0; }
.dl-catalog-item { border: 1px solid #e6dcc4; padding: 6px; text-align: center; }
.dl-catalog-item img { max-width: 100%; height: auto; }
.dl-catalog-item p { text-align: center !important; margin: 4px 0 !important; font-size: 12px !important; }

/* Footer: centered contact block and text navigation, 11px like .bottom. */
.dl-footer { margin-top: 10px; padding-bottom: 20px; }
.dl-footer .dl-footer-inner { grid-column: 2; text-align: center; font-size: 11px; }
.dl-footer p { margin: 0 0 8px; text-align: center; font-size: 11px; }
.dl-footer nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; }
.dl-footer nav li { font-size: 11px; }
.dl-footer nav li + li::before { content: "|"; padding: 0 5px; }

/* Checkers game page. */
.dl-checkers { text-align: center; }
.dl-checkers table { margin: 0 auto; background: none; }
.dl-checkers table td { line-height: 0; font-size: 0; padding: 0; }
.dl-checkers table td a { display: inline-block; vertical-align: top; }
.dl-checkers img { display: inline-block; vertical-align: top; }
.dl-checkers textarea { font-family: arial, sans-serif; font-size: 12px; max-width: 100%; }

/* Responsive: stack the two columns on narrow screens. */
@media (max-width: 680px) {
	body { font-size: 15px; }
	.dl-content p, .dl-content li, .dl-content td, .dl-content th { font-size: 15px; }
	.dl-row { grid-template-columns: minmax(0, 1fr); }
	.dl-header .dl-logo, .dl-footer .dl-footer-inner { grid-column: 1; }
	.dl-nav ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 4px; }
	.dl-nav img { max-height: 46px; width: auto; }
	.dl-nav .dl-side-art { display: none; }
	.dl-swap { grid-template-columns: minmax(0, 1fr); }
	.dl-swap .dl-swap-buttons { display: flex; flex-wrap: wrap; gap: 4px; }
	.dl-footer p, .dl-footer nav li { font-size: 13px; }
	.dl-footer nav li { padding: 4px 0; }
	.dl-product .wp-block-image { max-width: 40%; }
}

@media (prefers-reduced-motion: reduce) {
	.dl-slideshow.is-running figure.wp-block-image { transition: none; }
}

@media print {
	.dl-nav, .dl-footer nav, .dl-skip { display: none; }
	.dl-row { grid-template-columns: 1fr; }
}

/* Visible to screen readers only (used where an original image heading replaces the h1). */
.dl-visually-hidden {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}