/*
Theme Name: Durant Cars (Kadence)
Description: Child theme of Kadence styled to match the original Durant Cars look (Cars Lite), with breadcrumbs above each page title.
Author: Durant Motors Automobile Club
Template: kadence
Version: 1.5.2
Requires at least: 6.8
Requires PHP: 8.0
License: GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: durant-kadence
*/

/* Menu: bold, small, uppercase, as in Cars Lite. */
.main-navigation .primary-menu-container > ul > li.menu-item > a,
.header-navigation .header-menu-container > ul > li.menu-item > a {
	text-transform: uppercase;
	letter-spacing: 0;
}
.header-navigation .header-menu-container ul ul li.menu-item > a {
	text-transform: uppercase;
	font-weight: 700;
}

/* Header: thin grey line under it, like Cars Lite. */
.site-main-header-wrap .site-header-row-container-inner {
	border-bottom: 1px solid #f1f1f1;
}

/* Page titles: condensed, regular weight, as in Cars Lite. */
.entry-hero .entry-title,
.entry-header .entry-title {
	font-weight: 400;
}

/* Breadcrumbs above the title. */
.kadence-breadcrumbs {
	font-size: 14px;
	margin: 0 0 0.6em;
}
.kadence-breadcrumbs .bc-delimiter {
	padding: 0 0.45em;
	color: #999;
}
.kadence-breadcrumbs .kadence-bread-current {
	color: #666;
}

/* Tables in page content: plain ruled tables like the original site. */
.entry-content table th,
.entry-content table td {
	border: 1px solid #ccc;
}

/* Less space above page titles than Kadence's default, closer to Cars Lite. */
.content-area {
	margin-top: 2.5rem;
	margin-bottom: 3rem;
}

/*
 * Page width follows the window: 92% of it, up to 2400px, so large and 4K screens are
 * used well. (This replaces the fixed "Content Max Width" in Appearance > Customize.)
 */
:root {
	--global-content-width: min(92vw, 2400px);
}

/* Literature galleries: whole covers, captions underneath rather than over the picture. */
.wp-block-gallery.dcr-lit-gallery .wp-block-image { align-items: flex-start; }
.wp-block-gallery.dcr-lit-gallery .wp-block-image img { width: 100% !important; height: auto !important; object-fit: contain !important; border: 1px solid #ddd; background: #fff; }
.wp-block-gallery.dcr-lit-gallery .wp-block-image figcaption {
	position: static !important; background: none !important; color: #4d4d4d !important;
	text-shadow: none !important; padding: 4px 0 0 !important; margin: 0 !important;
	font-size: 13px; text-align: center; max-height: none !important; overflow: visible !important;
}
.wp-block-gallery.dcr-lit-gallery .wp-block-image a { display: block; }
.entry-content details.wp-block-details { background: #f7f7f7; border: 1px solid #e5e5e5; padding: 10px 14px; margin: 0 0 1.5em; }
.entry-content details.wp-block-details summary { cursor: pointer; font-weight: 600; }

/* ---- Readability and consistency (1.4.0) ------------------------------------------------ */
/* Body text: regular weight, dark grey, 17px (16px on phones). Kadence's default was light grey Roboto 300. */
:root body { font-weight: 400; color: #2b2b2b; font-size: 17px; line-height: 1.65; }
.entry-content strong, .entry-content b, .entry-content th { font-weight: 700; }
@media (max-width: 600px) { :root body { font-size: 16px; } }

/* One heading scale everywhere: page title, section (h2), sub-section (h3). */
.entry-header .entry-title { font-size: 34px; line-height: 1.2; }
.entry-content h2 { font-size: 26px; margin: 1.8em 0 0.5em; }
.entry-content h3 { font-size: 21px; margin: 1.5em 0 0.4em; }
.entry-content h4 { font-size: 18px; margin: 1.3em 0 0.4em; }
.entry-content > :first-child { margin-top: 0; }
.entry-content h2, .entry-content h3 { clear: both; }
@media (max-width: 600px) { .entry-header .entry-title { font-size: 28px; } .entry-content h2 { font-size: 23px; } .entry-content h3 { font-size: 19px; } }

/* Running text keeps a comfortable line length on wide screens; pictures, galleries and tables use the full width. */
.entry-content > p, .entry-content > ul, .entry-content > ol, .entry-content > h2, .entry-content > h3, .entry-content > h4,
.entry-content > .wp-block-details, .entry-content > .wp-block-buttons, .entry-content > .wp-block-quote { max-width: 80ch; }
.entry-content p { margin: 0 0 1em; }
.entry-content li { margin-bottom: 0.3em; }
.entry-content li > ul { margin-top: 0.3em; }

/* Links: the logo's red (#ff0000) darkened to #cc0000 so running text is easy to read (5.9:1 on white; #ff0000 is 4.0:1). */
.entry-content a { color: #cc0000; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.entry-content a:hover { color: #990000; }

/* Small print, notes and "Models:" style link rows. */
.entry-content .dcr-note { color: #5f5f5f; font-size: 15px; }
.entry-content .dcr-model-index { line-height: 2; }
.entry-content .dcr-model-names { font-weight: 400; font-size: 0.72em; color: #666; margin-left: 0.5em; }
.entry-content .wp-block-quote { border-left: 3px solid #d0d0d0; padding: 0.2em 0 0.2em 1.2em; margin: 1.2em 0; color: #3a3a3a; font-style: normal; }
.entry-content .wp-block-quote cite { display: block; font-size: 14px; color: #666; margin-top: 0.4em; }

/* Tables: one style everywhere. Header row, light row shading, comfortable padding, 15px text. */
.entry-content .wp-block-table { margin: 0 0 1.5em; }
.entry-content .wp-block-table table { border-collapse: collapse; font-size: 15px; }
.entry-content table th, .entry-content table td { border: 1px solid #d6d6d6; }
.entry-content .wp-block-table th, .entry-content .wp-block-table td { padding: 7px 12px; vertical-align: top; text-align: left; }
.entry-content .wp-block-table thead th { background: #f0f0f0; border-bottom: 2px solid #c8c8c8; }
.entry-content .wp-block-table tbody tr:nth-child(even) { background: #fafafa; }
.entry-content .wp-block-table.dcr-spec-table th[scope="row"] { width: 26%; background: #f6f6f6; white-space: normal; }
/* Compact tables shrink to their content, with the caption above, left-aligned, attached to the table. */
.entry-content figure.wp-block-table.dcr-table-clean,
.entry-content figure.wp-block-table.dcr-spec-table:has(thead) { display: table; }
.entry-content .wp-block-table.dcr-table-clean table,
.entry-content .wp-block-table.dcr-spec-table:has(thead) table { width: auto; min-width: 320px; }
.entry-content .wp-block-table figcaption { display: table-caption; caption-side: top; text-align: left; font-size: 15px; font-weight: 700; color: #2b2b2b; margin: 0 0 0.4em; }
/* Phones: wide tables scroll sideways instead of being cut off. */
@media (max-width: 700px) {
	.entry-content figure.wp-block-table, .entry-content figure.wp-block-table.dcr-table-clean,
	.entry-content figure.wp-block-table.dcr-spec-table:has(thead) { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.entry-content .wp-block-table table, .entry-content .wp-block-table.dcr-table-clean table { min-width: 0; width: 100%; }
	.entry-content .wp-block-table td { overflow-wrap: anywhere; }
	.entry-content figure.wp-block-table { display: flex !important; flex-direction: column; }
	.entry-content .wp-block-table figcaption { display: block; order: -1; }
	.entry-content .wp-block-table th, .entry-content .wp-block-table td { padding: 6px 8px; }
}

/* Model pictures on catalog and identification pages: to the left of the text, never wider than 40%. */
.entry-content .dcr-model-pic { float: left; margin: 0.35em 1.5em 1em 0; max-width: 40%; }
.entry-content .dcr-model-pic img { display: block; }
.entry-content .dcr-model-pic figcaption { font-size: 14px; color: #5f5f5f; }
@media (max-width: 600px) { .entry-content .dcr-model-pic { float: none; margin: 0 0 1em; max-width: 100%; } }

/* Gallery captions: readable size, under the picture. */
.wp-block-gallery.dcr-lit-gallery .wp-block-image figcaption { font-size: 14px !important; color: #555 !important; }
.entry-content .dcr-signs figcaption { font-size: 14px; }

/* Radiator badge chart: keep the small badge images at their own size. */
.entry-content .wp-block-gallery.has-nested-images.dcr-badges figure.wp-block-image:not(#individual-image) { width: 130px !important; flex: 0 0 130px !important; }
.entry-content .wp-block-gallery.has-nested-images.dcr-badges figure.wp-block-image img { width: auto !important; max-width: 100px; height: auto !important; margin: 0 auto; border: 0; }
.entry-content .wp-block-gallery.has-nested-images.dcr-badges figure.wp-block-image figcaption { position: static; background: none; color: inherit; font-size: 13px; text-align: center; padding: 4px 0 0; }
/* Buttons keep white text (the link colour above must not apply to them). */
.entry-content .wp-block-button__link, .entry-content .wp-block-button__link:hover,
.entry-content a.dcr-button, .entry-content a.dcr-button:hover { color: #fff; text-decoration: none; }
/* Buttons: the logo's red with bold white 19px text (large text, so 4:1 contrast is enough). */
.entry-content .wp-block-button__link { background-color: #ff0000; border-radius: 2px; font-weight: 700; font-size: 19px; }
.entry-content .wp-block-button__link:hover { background-color: #cc0000; }
/* Source notes after a statement, e.g. [Star 1932-01-26], linking to the Bibliography entry. */
.entry-content a.dcr-cite { font-size: 0.8em; white-space: nowrap; text-decoration: none; color: #5f5f5f; border-bottom: 1px dotted #999; }
.entry-content a.dcr-cite:hover { color: #cc0000; border-bottom-color: #cc0000; }
/* Bibliography: highlight the entry a source note links to. */
.entry-content tr:has(> td > a[id]:target) { background: #fff6d6 !important; }
/* A gallery with a single picture stays half width instead of spreading across the page (full width on phones). */
.entry-content .wp-block-gallery.has-nested-images.dcr-lit-gallery > figure.wp-block-image:only-child { flex: 0 0 calc(50% - 0.5em) !important; max-width: calc(50% - 0.5em); }
@media (max-width: 600px) { .entry-content .wp-block-gallery.has-nested-images.dcr-lit-gallery > figure.wp-block-image:only-child { flex-basis: 100% !important; max-width: 100%; } }
/* Small photo galleries (e.g. Wheel Types): pictures 300px wide, the size of the catalog drawings on Body Styles. */
.entry-content .wp-block-gallery.has-nested-images.dcr-small-gallery > figure.wp-block-image:nth-child(n) { flex: 0 0 300px !important; max-width: 300px !important; }