/*
Theme Name:   Metcoat Divi Child
Description:  Child theme for metcoat.com. Holds custom templates
              (single-coating.php, archive-coating.php) so they survive
              Divi's own updates -- Divi replaces its entire parent theme
              folder on update, which wipes any files added directly to
              it. All coating-page styling lives directly in this file
              (below), not in the coating-catalog plugin, per client
              preference -- this stylesheet is just as update-proof as
              the plugin, since a Divi update never touches a child
              theme's own folder.
Author:       January Spring
Template:     Divi
Version:      1.0.0
*/

/* League Spartan isn't a standard system font -- loading it here via
   @import so the FAQ titles below actually render in it. If Divi/your
   theme already loads this font elsewhere (Theme Options > Typography),
   this import is redundant and you can delete it to save a request. */
@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@400;600;700&family=Inter:wght@400;700&display=swap');

/* Coating catalog page — dark blue theme.
 * Covers every flexible-content block, not just the table. The template
 * (single-coating.php) renders inside Divi's own
 * #main-content > .container > #content-area > #left-area wrapper, so
 * these rules only need to handle spacing/layout/theme WITHIN that column. */

.coating-page {
	--coating-bg:          #011741; /* page background */
	--coating-heading:     #b3d1f5; /* heading text */
	--coating-text:        #fff;    /* body text */
	--accordion-bg:        #023677; /* FAQ box background */
	--plus-color:          var(--coating-heading); /* FAQ +/- icon */
	--cell-border:         #0154ae; /* table cell borders */
	--table-bg:            #023778; /* table cell background, all cells incl. header */
	--cell-alt-light:      #0864c9; /* row-header / lighter cell shade */
	--cell-alt-dark:       #013d82; /* zebra-stripe / darker cell shade */

	background: var(--coating-bg);
	box-sizing: border-box;
	margin: 0;
	padding-top: 75px;
	padding-right: 2em;
	padding-bottom: 2em;
	padding-left: 2em;

	/* Content column: 85% wide, no cap, centered within the full-width
	   color band below. */
	width: 85%;
	margin-left: auto;
	margin-right: auto;

	/* Bleed the background to the viewport edges even though this div
	   itself is now a fixed, centered width -- the box-shadow's huge
	   spread paints color outside the box without changing the box's
	   actual width, so the 80%/1080px content column above is
	   unaffected. clip-path stops it from creating horizontal scroll. */
	box-shadow: 0 0 0 100vmax var(--coating-bg);
	clip-path: inset(0 -100vmax);
}

/* Best-effort: reset Divi's own ancestor wrappers (named in this
   plugin's own comments) so THEIR width/padding/top-spacing don't add
   an extra box or gap around the fixed-width column above. Requires
   :has() support (all current major browsers) -- if the real
   container/gap-causing selector differs, tell me the actual selector
   (browser inspector -> right-click the boxed edge or the top gap ->
   Inspect) and I'll target it directly. */
/* Scoped to #main-content so the header/footer's own .container (a
   generic, reused class) is left alone -- only the .container nested
   inside the main content area gets widened. */
body:has(.coating-page) #main-content,
body:has(.coating-page) #main-content .container,
body:has(.coating-page) #content-area,
body:has(.coating-page) #left-area {
	max-width: 100% !important;
	width: 100% !important;
	padding: 0 !important;
	margin-top: 0 !important;
}

/* Body text: white throughout. */
.coating-page,
.coating-page p,
.coating-page li,
.coating-page span,
.coating-page div,
.coating-page figcaption,
.coating-page .faq-answer {
	color: var(--coating-text) !important;
}

/* Headings: light blue, League Spartan. */
.coating-page h1 {
	color: var(--coating-heading) !important;
	font-family: "League Spartan", sans-serif;
	font-weight: 400;
	font-size: 65px;
	line-height: 1.3;
	overflow: visible !important;
}

.coating-page h2 {
	color: var(--coating-heading) !important;
	font-family: "League Spartan", sans-serif;
	font-weight: 400;
	font-size: 45px;
	line-height: 1.3;
	overflow: visible !important;
}

.coating-page h3,
.coating-page h4 {
	color: var(--coating-heading) !important;
	font-weight: 700;
}

.coating-page img {
	max-width: 100%;
	height: auto;
	display: block;
}

.coating-page .block {
	margin: 2em 0;
}

/* -- Icon callouts -- */

.coating-page .icon-callouts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1.5em;
	list-style: none;
	margin: 2em 0;
	padding: 0;
}

.coating-page .icon-callouts li {
	text-align: center;
	padding: 1.5em 1em;
	background: var(--accordion-bg);
}

.coating-page .icon-callouts img {
	margin: 0 auto 0.75em;
	max-width: 60px;
}

.coating-page .icon-callouts h3 {
	margin: 0 0 0.4em;
	font-size: 1.05em;
}

/* -- Sub-page cards -> pill buttons linking to child pages -- */

.coating-page .sub-page-cards {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
	list-style: none;
	margin: 2em 0;
	padding: 0;
}

.coating-page .sub-page-cards li {
	list-style: none !important;
}

.coating-page .sub-page-cards li a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #0154ae;
	color: var(--coating-heading) !important;
	border: none;
	border-radius: 40px;
	font-family: "Inter", sans-serif;
	font-weight: 700;
	font-size: 14px;
	text-transform: uppercase;
	padding: 18px 40px;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease;
}

.coating-page .sub-page-cards li a:hover {
	background: var(--coating-heading);
	color: #023677 !important;
}

/* -- Image block caption -- */

.coating-page .block-image figcaption {
	margin-top: 0.5em;
	font-size: 0.9em;
	font-style: italic;
}

/* -- FAQ accordion -- */

.coating-page .block-faq .faq-item {
	background: var(--accordion-bg);
	margin-bottom: 0.75em;
	padding: 0; /* padding now lives on summary/answer so the box edge is flush */
	border: none; /* resets Firefox's default <details> outline -- dividers removed */
}

.coating-page .block-faq summary {
	cursor: pointer;
	font-weight: 600;
	font-family: "League Spartan", sans-serif;
	font-size: 22px;
	text-align: left !important;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1em 1.25em;
}

/* Kill every browser's native disclosure marker (the triangle/arrow --
   or in some browsers, a default "+"/"-" glyph -- that shows on the
   LEFT of a <summary> by default) so the ONLY indicator is our custom
   + on the right, below. Belt-and-suspenders across engines: */
.coating-page .block-faq summary {
	list-style: none !important;
	-webkit-appearance: none;
	appearance: none;
}
.coating-page .block-faq summary::before {
	content: none !important;
	display: none !important;
}
.coating-page .block-faq summary::-webkit-details-marker {
	display: none !important;
}
.coating-page .block-faq summary::marker {
	content: "" !important;
}

.coating-page .block-faq summary::after {
	content: "+";
	color: var(--plus-color);
	background: none;
	font-weight: 700;
	font-size: 1.8em;
	line-height: 1;
	margin-left: 1em;
	flex-shrink: 0;
}

.coating-page .block-faq details[open] summary::after {
	content: "–";
}

.coating-page .block-faq .faq-answer {
	margin: 0;
	padding: 0 1.25em 1em;
	text-align: left !important;
}

/* -- Downloads list -- */

.coating-page .block-downloads ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.coating-page .block-downloads li {
	margin-bottom: 0.5em;
}

.coating-page .block-downloads a {
	color: var(--coating-heading) !important;
	text-decoration: none;
	font-weight: 600;
}

.coating-page .block-downloads a:hover {
	text-decoration: underline;
}

/* -- Data table (e.g. coating comparisons) -- */

.coating-table-wrap {
	overflow-x: auto;
	overflow-y: visible; /* without this, setting overflow-x alone makes
	   the browser silently treat overflow-y as "auto" too, turning this
	   into a vertical clip box -- that's what was chopping the caption */
	margin: 1.5em 0;
}

.coating-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}

.coating-table caption {
	text-align: left;
	font-family: "League Spartan", sans-serif;
	font-weight: 600;
	font-size: 32px;
	line-height: 1.3;
	overflow: visible !important;
	margin-bottom: 0.5em;
	color: var(--coating-heading) !important;
}

/* Every cell: 2px border, white text, solid uniform background.
   !important on background is intentional -- some theme/plugin table
   style was setting alternating white/light row backgrounds with
   higher specificity than a plain "transparent" here, which is what
   caused the zebra effect. .coating-table.coating-table doubles the
   class on purpose -- a specificity boost so this reliably beats
   whatever theme table rule was overriding the plain single-class
   version before. */
.coating-page .coating-table.coating-table th,
.coating-page .coating-table.coating-table td {
	border: 2px solid var(--cell-border);
	padding: 0.75em 1em;
	text-align: left;
	vertical-align: top;
	color: #fff !important;
	background: var(--table-bg) !important;
}

/* Title boxes -- column headers -- dark navy bg, white text, a few px
   bigger than the regular cell text. */
.coating-page .coating-table.coating-table thead th {
	background: var(--cell-border) !important;
	color: #fff !important;
	font-family: "League Spartan", sans-serif;
	font-weight: 400;
	font-size: 25px;
}

.coating-page .coating-table.coating-table tbody th[scope="row"] {
	background: var(--table-bg) !important;
	color: #fff !important;
	font-weight: 600;
	white-space: nowrap;
}

/* No zebra striping, no hover fill -- every cell stays the same
   uniform background. */
.coating-page .coating-table.coating-table tbody tr:nth-child(even) td {
	background: var(--table-bg) !important;
	color: #fff !important;
}

.coating-page .coating-table.coating-table tbody tr:hover td {
	background: var(--table-bg) !important;
	color: #fff !important;
}