/*
	cats.css — page-specific accent palette for cats.html
	Loaded after main.css and custom.css, so it only needs to touch
	what's different about this page: the #main content area.
	The header, nav, and footer are left alone so they stay
	consistent with the rest of the site.

	Palette (from colors.pdf):
	--cat-maroon : #5E0B15  (darkest — headings, primary text)
	--cat-crimson: #90323D  (secondary accent — hover states)
	--cat-cream  : #D9CAB3  (page/section background)
	--cat-gold   : #BC8034  (primary buttons, highlights)
	--cat-taupe  : #8C7A6B  (secondary buttons, muted text)
*/

:root {
	--cat-maroon: #5E0B15;
	--cat-crimson: #90323D;
	--cat-cream: #D9CAB3;
	--cat-gold: #BC8034;
	--cat-taupe: #8C7A6B;
}

/* ==========================================================
   Header & footer — swap the site's dark navy bars for the
   cat palette too, only on this page. Header keeps the same
   layout/search/hamburger from main.css + custom.css; only
   colors change.
   ========================================================== */

body.cats-page #header,
body.cats-page #header.alt {
	background-color: var(--cat-maroon);
	border-bottom-color: var(--cat-gold);
}

body.cats-page #header .logo strong {
	background-color: var(--cat-gold);
	color: var(--cat-maroon);
}

body.cats-page #header .logo span {
	color: var(--cat-cream);
}

body.cats-page #header nav a {
	color: var(--cat-cream);
}

body.cats-page #search-form {
	background-color: var(--cat-crimson);
	border-color: var(--cat-gold);
}

body.cats-page #search-form .icon,
body.cats-page #search-input {
	color: var(--cat-cream) !important;
}

body.cats-page #search-input::placeholder {
	color: var(--cat-cream);
	opacity: 0.65;
}

body.cats-page #search-results {
	background-color: var(--cat-crimson);
	border-color: var(--cat-gold);
}

body.cats-page #search-results li a,
body.cats-page #search-results li.no-results {
	color: var(--cat-cream);
}

body.cats-page #search-results li a:hover {
	background-color: var(--cat-gold);
	color: var(--cat-maroon);
}

body.cats-page .menu-toggle-line {
	background-color: var(--cat-cream);
}

body.cats-page #header nav a.menu-toggle:hover .menu-toggle-line {
	background-color: var(--cat-gold);
}

body.cats-page #footer {
	background-color: var(--cat-maroon);
}

body.cats-page #footer .copyright,
body.cats-page #footer .copyright a,
body.cats-page #footer .icons a {
	color: var(--cat-taupe);
}

body.cats-page #footer .icons a:hover {
	color: var(--cat-gold);
}

/* ==========================================================
   Off-canvas menu panel — cat palette when opened from this
   page, matching the header/footer treatment above.
   ========================================================== */

body.cats-page #menu .inner {
	background-color: var(--cat-maroon);
	border-left-color: var(--cat-gold);
}

body.cats-page #menu ul.links > li > a:not(.button) {
	border-bottom-color: var(--cat-crimson);
	color: var(--cat-cream);
}

body.cats-page #menu ul.links > li:first-child > a:not(.button) {
	border-top-color: var(--cat-crimson) !important;
}

body.cats-page #menu ul.links > li > a:not(.button):before {
	background-color: var(--cat-gold);
}

body.cats-page #menu ul.links > li > a:not(.button):hover {
	color: var(--cat-gold);
}

body.cats-page #menu ul.actions.stacked .button {
	background-color: var(--cat-taupe);
	color: var(--cat-cream) !important;
}

body.cats-page #menu ul.actions.stacked .button:hover {
	background-color: var(--cat-crimson);
}

body.cats-page #menu ul.actions.stacked .button.primary {
	background-color: var(--cat-gold);
	color: var(--cat-maroon) !important;
}

body.cats-page #menu ul.actions.stacked .button.primary:hover {
	background-color: var(--cat-cream);
}

body.cats-page #menu .close:before,
body.cats-page #menu .close:after {
	background-color: var(--cat-cream);
}

body.cats-page #menu .close:hover:before,
body.cats-page #menu .close:hover:after {
	background-color: var(--cat-gold);
}

/* ==========================================================
   Content area background — swaps the site's dark theme for
   the warm palette, only on this page.
   ========================================================== */

body.cats-page #main.alt {
	background-color: var(--cat-cream);
}

body.cats-page #main.alt #one {
	background-color: var(--cat-cream);
}

/* ==========================================================
   Scale & hierarchy — 3 distinct text sizes:
   h1 (page title) > h2 (fact-card heading) > body text.
   ========================================================== */

body.cats-page #main .major h1 {
	color: var(--cat-maroon);
	font-size: 2.75em;
}

body.cats-page #main .cat-intro {
	color: var(--cat-taupe);
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
	font-size: 1.05em;
}

body.cats-page #main .cat-fact-card h2 {
	color: var(--cat-maroon);
	font-size: 1.4em;
	margin-bottom: 0.5em;
}

/* ==========================================================
   Cat photo — rounded corners + shadow give it a bit of
   depth against the flat cream background (contrast).
   ========================================================== */

body.cats-page #main .cat-photo img {
	border-radius: 18px;
	box-shadow: 0 10px 24px rgba(94, 11, 21, 0.25);
	border: 3px solid var(--cat-gold);
}

/* ==========================================================
   Buttons — gold primary (Meow button) vs. taupe secondary
   (More facts / Back home), so contrast signals which action
   matters most on the page.
   ========================================================== */

body.cats-page #main .button {
	background-color: var(--cat-taupe);
	color: var(--cat-cream) !important;
	border: none;
}

body.cats-page #main .button:hover {
	background-color: var(--cat-maroon);
}

body.cats-page #main .button.primary {
	background-color: var(--cat-gold);
	color: var(--cat-maroon) !important;
	font-weight: 600;
}

body.cats-page #main .button.primary:hover {
	background-color: var(--cat-crimson);
	color: var(--cat-cream) !important;
}

/* ==========================================================
   Cat Fact card — a bordered "common region" so the fact
   text and its generator button read as one grouped unit
   (Gestalt: proximity + common region), instead of floating
   loose in the page.
   ========================================================== */

body.cats-page .cat-fact-card {
	background-color: #fff8ef;
	border: 2px solid var(--cat-gold);
	border-radius: 16px;
	padding: 1.75em 2em;
	max-width: 700px;
	margin: 2.5em auto 2em auto;
	box-shadow: inset 0 0 18px rgba(94, 11, 21, 0.08);
}

body.cats-page #catFact {
	color: var(--cat-maroon);
	font-style: italic;
	line-height: 1.6;
	margin-bottom: 1.25em;
}

body.cats-page .cat-fact-card .actions {
	margin-bottom: 0;
	justify-content: center;
}

/* ==========================================================
   Balance — center the whole column so weight is distributed
   evenly on either side of the vertical axis, matching the
   symmetrical layout the rest of the site uses.
   ========================================================== */

body.cats-page #one .inner {
	text-align: center;
}

body.cats-page .cat-actions {
	justify-content: center;
	margin-top: 1.5em;
}

/* ==========================================================
   Home / fun-cat-site row — Back to Home stays in its
   original left spot, the cat-site button sits at the
   opposite end of the same row.
   ========================================================== */

body.cats-page .fun-cat-row {
	justify-content: space-between;
	align-items: center;
	width: 100%;
	margin-top: 1.5em;
}