/**
 * Theme Name:     GeneratePress Child
 * Author:         Tom Usborne
 * Template:       generatepress
 * Text Domain:	   generatepress-child
 * Description:    GeneratePress is a lightweight WordPress theme built with a focus on speed and usability. Performance is important to us, which is why a fresh GeneratePress install adds less than 10kb (gzipped) to your page size. We take full advantage of the block editor (Gutenberg), which gives you more control over creating your content. If you use page builders, GeneratePress is the right theme for you. It is completely compatible with all major page builders, including Beaver Builder and Elementor. Thanks to our emphasis on WordPress coding standards, we can boast full compatibility with all well-coded plugins, including WooCommerce. GeneratePress is fully responsive, uses valid HTML/CSS, and is translated into over 25 languages by our amazing community of users. A few of our many features include 60+ color controls, powerful dynamic typography, 5 navigation locations, 5 sidebar layouts, dropdown menus (click or hover), and 9 widget areas. Learn more and check out our powerful premium version at https://generatepress.com
 */

/**
 * Theme Name:     GeneratePress Child
 * Template:       generatepress
 * Version:        1.0
 */

/* ----------------------- */
/* GLOBAL COLOR PALETTE    */
/* ----------------------- */
:root {
	--color-primary: #35333c;
	--color-secondary: #3b3e3c;
	--color-tertiary: #a2a6b8;

	--color-bg-light: #f5f6f7;

	--color-text-main: #1b1b1d;
	--color-text-muted: #5a5c64;

	--radius-pill: 50px;
	--radius-soft: 10px;

	--transition-default: 0.25s ease;
}


/* ----------------------- */
/* GLOBAL LAYOUT FIXES     */
/* ----------------------- */
#primary,
.inside-article {
	max-width: 1200px;
	width: 100%;
}

.body {
	color: var(--color-primary);
}


/* ----------------------- */
/* HOME PAGE STYLES        */
/* ----------------------- */
.home-panel {
  background: #ffffff;
  border: 1px solid var(--color-tertiary);
  border-radius: var(--radius-soft);
  padding: 24px;
  margin: 0 auto;
  justify-content: center;
  margin-bottom: 24px;
}

.home-title {
  font-size: 28px;
  margin-bottom: 8px;
}

.home-subtitle {
  color: #6b7280;
  margin-bottom: 16px;
}

.home-search-input {
  background: #ffffff;
  border: 1px solid var(--color-tertiary);
  border-radius: var(--radius-soft);
  padding: 12px 14px;
  font-family: monospace;
  color: var(--color-text-main);
}

.home-table-wrapper {
  display: flex;
  justify-content: center;
}

.home-index-table {
  margin-left: auto;
  margin-right: auto;
}

.panel-title {
  margin-bottom: 12px;
  font-size: 18px;
}

.home-quick-links {
  list-style: none;
  padding-left: 0;
}

.home-quick-links li {
  margin-bottom: 8px;
}

/* ----------------------- */
/* SEARCH PAGE UI          */
/* ----------------------- */

.search-wrapper {
	max-width: 900px;
	margin: 0 auto;
	padding: 80px 20px;
}

.search-title {
	font-size: 1.8rem;
	text-align: center;
	margin-bottom: 40px;
	font-weight: 600;
	color: var(--color-primary);
}

.search-title span {
	font-weight: 700;
	color: var(--color-primary);
}

/* Container for pills: wrap them in multiple rows */
.search-results-list {
	display: flex;
	flex-wrap: wrap;
	/* allow pills to wrap to next line */
	gap: 12px;
	/* spacing between pills */
	justify-content: flex-start;
	/* align left, or use center for centered layout */
}

/* Pills styling */
.search-results-list .search-pill,
.search-results-list .search-pill:hover,
.search-results-list .search-pill:focus,
.search-results-list .search-pill:active {
	color: #ffffff !important;
	/* keep text white */
	text-decoration: none !important;
	/* remove underline */
}

.search-pill {
	display: inline-block;
	padding: 14px 22px;
	background: var(--color-primary);
	border-radius: var(--radius-pill);
	font-size: clamp(0.9rem, 1vw + 0.5rem, 1.1rem);
	font-weight: 500;
	color: #ffffff !important;
	text-decoration: none !important;

	/* Floating shadows for dark pill */
	box-shadow:
		0 4px 6px rgba(0, 0, 0, 0.25),
		0 8px 20px rgba(0, 0, 0, 0.15);

	/* 3D metallic highlight */
	background-image: linear-gradient(rgba(255, 255, 255, 0.15) 0%,
			rgba(255, 255, 255, 0) 50%);

	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.search-pill:hover {
	transform: translateY(-6px) scale(1.05);
	box-shadow:
		0 8px 12px rgba(0, 0, 0, 0.35),
		0 12px 28px rgba(0, 0, 0, 0.25);

	/* Optional: slightly stronger highlight on hover */
	background-image: linear-gradient(rgba(255, 255, 255, 0.2) 0%,
			rgba(255, 255, 255, 0) 50%);
}

.search-pagination {
	margin-top: 40px;
	text-align: center;
}

/* wrap the button and the no results message */
.search-no-results-wrapper {
	max-width: 300px;
	text-align: center;
	margin-top: 40px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.search-no-results {
	text-align: center;
	font-size: 1.1rem;
	color: var(--color-primary);
	margin-bottom: 40px;
}

/* ---------------------------
   Post Page Readability Layout
---------------------------- */
/* 3-column page wrapper */

.post-wrapper {
	max-width: 769px;
	padding: 60px 20px;
	margin: 0 auto;
	text-align: center;
	justify-content: center;
}

/* Title styling – clean, not pill yet */
.post-title {
	font-weight: 700;
	margin-bottom: 20px;
	line-height: 1.2;
	color: var(--color-primary);
}

/* Body typography spacing */
.post-body {
	font-size: 1.05rem;
	line-height: 1.75;
	color: var(color-primary);
}

/* Washer image */
.single-image-container img {
  width: 100%;
  height: auto;
  display: block;
}

.diagram {
    display: none !important;
}

.diagram.active {
    display: block !important;
}

/* Two-column layout */
.spec-layout {
	width: 75%;
	display: flex;
	margin: 0 auto;
	gap: 12px !important;
}

/* Left column (table) */
.spec-layout-left {
	flex: 1 1 50%;
	display: flex;
	flex-direction: column;
	gap: 12px !important;
}

/* Right column (cards) */
.spec-layout-right {
	flex: 1 1 50%;
	display: flex;
	flex-direction: column;
	gap: 12px !important;
}

.description-disclaimer {
	width: 500px;
	font-size: 12px;
	opacity: 0.75;
	margin: 8px 0 auto;
	line-height: 1.4;
	font-style: italic;
	display: block;
}

.dimension-legend {
	font-size: 12px;
	opacity: 0.75;
	margin: 8px 0 auto;
	line-height: 1.4;
	font-style: italic;
	display: block;
}

.dimension-legend h4 {
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.dimension-legend ul {
    padding-left: 1.1rem;
}

.dimension-legend li {
    margin-bottom: 0.4rem;
    line-height: 1.5;
}

.spec-description {
    width: 500px;
    margin: 0 auto;
}

.faq-section {
    margin: 0 auto;
}

/* Paragraph spacing */
.post-body p {
	margin-bottom: 1.3em;
}

/* Headings inside post */
.post-body h2,
.post-body h3,
.post-body h4 {
	margin-top: 2.2em;
	margin-bottom: 0.8em;
	line-height: 1.25;
}

/* Blockquotes */
.post-body blockquote {
	padding: 18px 24px;
	border-left: 4px solid var(--color-primary);
	background: rgba(0, 0, 0, 0.04);
	border-radius: 8px;
	margin: 32px 0;
	font-style: italic;
}

/* Unordered list spacing */
.post-body ul {
	margin: 16px 0 24px 24px;
	line-height: 1.6;
}

.post-body li {
	margin-bottom: 8px;
}

.no-posts {
	text-align: center;
	color: var(--color-primary);
	margin-top: 40px;
}

/* Category Layout */
.category-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
}

img {
    background-color: #f5f6f7;
    display: block;
}

.category-header {
  margin-bottom: 24px;
}

.category-title {
  font-size: 2rem;
  margin-bottom: 8px;
}

/* Sub-categories */
.subcategory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.subcategory-card {
  display: block;
  padding: 16px;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  text-decoration: none;
}

.subcategory-card:hover {
  border-color: #000;
}

.subcategory-title {
  font-size: 1.1rem;
  margin-bottom: 4px;
}

.subcategory-count {
  font-size: 0.85rem;
  color: #666;
}

/* Post grid (M-sizes) */
.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}

.category-item {
  padding: 16px;
  border: 1px solid #eee;
}

.category-item-title {
  font-size: 1rem;
}

.dimension-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.converter-table-wrapper {
	width: 100%;
	overflow-x: auto;
	border: 1px solid var(--color-primary);
	border-radius: 8px;
}

.converter-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--color-bg-light);
	border: 1px solid var(--color-tertiary);
	border-radius: 8px;
	font-size: 16px;
}

.converter-table th {
	background: var(--color-primary);
	color: var(--color-bg-light);
	font-weight: 600;
	text-align: center;
	padding: 12px 16px;
	white-space: nowrap;
	border-bottom: 1px solid var(--color-tertiary);
}

.converter-table td {
	padding: 12px 16px;
	text-align: center;
	border-bottom: 1px solid var(--color-tertiary);
	color: var(--color-primary);
}

.converter-table tr:last-child td {
	border-bottom: none;
}

.converter-table input {
	width: 100%;
	padding: 6px 10px;
	border: 1px solid var(--color-tertiary);
	border-radius: 6px;
	font-size: 0.95rem;
	background: #fff;
}

.converter-result-row {
	background: rgba(0, 0, 0, 0.03);
	text-align: center;
	font-weight: 600;
	color: var(--color-primary);
}


.converter-disclaimer {
	text-align: center;
	font-size: 12px;
	opacity: 0.75;
	margin-top: 8px;
	line-height: 1.4;
	font-style: italic;
}

.back-to-hub {
  color: var(--color-primary);
  text-align: center !important;
  align-items: center !important;
  margin: 0 auto;
}

.back-to-hub a {
  color: var(--color-primary) !important;
}

.back-to-hub .arrow {
  text-decoration: none !important;
  font-size: 1.1em;
}

/*===============*/
/* TABLE STYLING */
/*===============*/

.specs-table-wrapper {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--color-primary);
	border-radius: 8px;
	margin: 0 auto;
}

.caption {
    background: var(--color-primary);
	color: var(--color-bg-light);
	font-weight: 600;
	padding: 9px 12px;
	white-space: nowrap;
}
/* Table */
.specs-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--color-bg-light);
	border-radius: 8px;
	border: 1px solid var(--color-tertiary);
	font-size: 16px;
}
/* Header */
.specs-table thead th {
	background: var(--color-primary);
	color: var(--color-bg-light);
	font-weight: 600;
	text-align: center;
	padding: 9px 12px;
	white-space: nowrap;
}

/* Body cells */
.specs-table td {
	padding: 9px 12px;
	text-align: left;
	border-bottom: 1px solid var(--color-tertiary);
	color: var(--color-primary);
}

/*Zebra stripes */
.specs-table tbody tr:nth-child(even) {
	background: #eceef0;
	/* subtle light gray stripe for even rows */
}

.specs-table tbody tr:nth-child(odd) {
	background: var(--color-bg-light);
	/* keeps odd rows same as page background */
}

/* Row hover */
.specs-table tbody tr:hover {
	background: #f5f6f7;
}

/* Force header borders */
.specs-table thead th {
    border: 1px solid #25232b !important;
    text-align: center;
    vertical-align: middle;
}

.specs-table thead th,
.specs-table thead tr th {
    text-align: center !important;
}

.thread-table { display: none; }
.thread-table.active { display: block; }

.series-toggle.active,
.class-switcher button.active {
    background: #111;
    color: #fff;
}

.specs-table--hub {
    width: max-content;
}

.specs-table-wrapper--hub {
    width: max-content;
}

.desc-table {
    width: 100%;
}

.internal-links-table-wrapper {
	width: 100%;
	overflow-x: auto;
	border: 1px solid var(--color-primary);
	border-radius: 8px;
}

.internal-links-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--color-bg-light);
	border: 1px solid var(--color-tertiary);
	border-radius: 8px;
	font-size: 0.95rem;
}

.internal-links-table td {
    color: var(--color-primary) !important;
	text-align: center;
}

.internal-links-table thead th {
  text-align: center !important;
}

.internal-link {
  text-align: center;
}

.internal-link a {
  color: var(--color-primary) !important;
  text-decoration: none !important; /* kill default underline */
}

.internal-link .link-text {
  text-decoration: underline !important;
}

.internal-link .arrow {
  margin-right: 6px;
  color: var(--color-primary) !important;
  font-size: 1.1em;
  vertical-align: middle;
}

.faq-title {
	font-size: 1.3rem;
	font-weight: 700;
	color: var(--color-primary);
}

.faq-item:last-child {
	border-bottom: none;
}

/* Question heading */
.faq-item h4 {
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--color-primary);
}

/* Answer paragraph */
.faq-item {
	display: block;
	margin: 0 auto;
	text-align: center;
	width: 400px;
	font-size: 1rem;
	line-height: 1.7;
	color: var(--color-primary);
}

.site-info {
	display: flex;
	justify-content: space-between;
	/* keeps copyright on the left, clean */
	align-items: center;
}

.hub-explanation {
    margin-top: 30px;
}

/* Disabled / Not specified cells */
.specs-table td.spec-na {
    color: #6f6d78;        /* muted version of #35333c */
    font-style: italic;
    background-color: rgba(53, 51, 60, 0.04);
}

/* Prevent hover from overriding intent */
.specs-table tbody tr:hover td.spec-na {
    color: #6f6d78;
    background-color: rgba(53, 51, 60, 0.04);
}

.dimension-switcher {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 12px;
}

.dimension-group {
    display: none;
}

.dimension-group.active {
    display: block;
}

.toggle-group-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.toggle-group {
    display: inline-flex;
    flex-wrap: nowrap;
    white-space: nowrap;
    gap: 4px;
    padding: 4px;
    background: var(--color-bg-light);
    border: 1px solid var(--color-tertiary);
    border-radius: 0;
}

.toggle-group button {
    appearance: none;
    border: none;
    background: transparent;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-muted);
    cursor: pointer;
}

.toggle-group button:hover {
    color: var(--color-text-main);
}

.toggle-group button.active {
    background: var(--color-primary);
    color: #fff;
}

.toggle-group button:last-child {
    border-right: none;
}

/* Head type toggle → force 2 columns */
.head-type-switcher {
    display: grid;
    margin: 0 auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: max-content;
}

.head-type-switcher button {
    text-align: center;
}

/* Mobile improvements */
@media (max-width: 600px) {
	.page-wrapper {
		flex-direction: column;
		padding: 0 15px;
	}

	.sidebar-area {
		display: none;
		/* hide both sidebars on mobile */
	}

	.content-area {
		max-width: 100%;
	}

	.description-disclaimer {
		width: 100%;
	}
	
	.spec-description {
	    width: 100%;
	}
	
	.faq-section {
	    width: 100%;
	}
	
	.faq-item {
	    width: 100%;
	}
	
  .spec-layout {
    flex-direction: column;
    width: 100%;
  }

  .spec-layout-left,
  .spec-layout-right {
    width: 100%;
    flex: 1 1 100%;
  }


	.faq-item p {
		width: 100%;
	}

	.spec-image-wrapper {
		width: 100%;
	}

	.spec-image-row img {
		width: 100%;
	}
    
    .spec-image-full {
        width: 100%;
    }
    
    .spec-image-row {
        width: 100%;
    }

	.spec-image-full img {
		width: 100%;
		height: auto;
	}

	.spec-image-row img {
		width: 100%;
		height: auto;
	}

	.post-wrapper {
		width: 100%;
	}

	.specs-table-wrapper {
		width: 100%;
	}

	.specs-table {
		width: 100%;
	}
	
	.toggle-group {
        flex-wrap: wrap;
    }
    
    .toggle-group button {
    white-space: nowrap;
    flex-shrink: 0;
}
}