/*
Theme Name:     Chaosium Theme - Pendragon
Theme URI:      https://web321.co/chaosium-pen
Description:    A custom Genesis child theme for Chaosium for Pendragon, with the Pendragon Web Stylekit integrated.
Author:         Shawn DeWolfe (dewolfe001)
Author URI:     https://web321.co/
Template:       genesis-block-theme
Version:        1.1.0
License:        GPL-2.0+
License URI:    http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:    genesis-child
*/

/* =============================================================================
   PENDRAGON STYLEKIT INTEGRATION NOTES
   -----------------------------------------------------------------------------
   The Pendragon Web Stylekit is loaded via functions.php (namespaced build).
   All --pdg-* CSS custom properties and @font-face declarations are available
   globally.  Component styles (headings, body, tables, buttons, etc.) are
   scoped to .pdg — add that class to any Genesis section or Breakdance wrapper
   to opt that block into full Pendragon styling.

   Pendragon fonts available via CSS variable:
     --pdg-h1        Gothicus Roman (display)
     --pdg-h2        Herb (structured heading)
     --pdg-heading   Adobe Garamond Pro Bold (subheadings)
     --pdg-text      IM FELL Great Primer (body)
     --pdg-text-sc   IM FELL Great Primer SC (small-caps body)

   Pendragon colours:
     --pdg-color-brand      blue  rgb(68,102,125)
     --pdg-color-accent-a   red   rgb(171,16,20)
     --pdg-color-accent-b   green rgb(98,126,80)
     --pdg-paper            parchment background
     --pdg-ink              foreground text
============================================================================= */

/* =============================================================================
   BASE — html / body
============================================================================= */

html {
	font-size: 16px;
	background: #fffffc url('images/pen_bkgd.jpg') repeat;
	background-position: 50% 50%;
	background-size: 100vw auto-flow !important;
	background-repeat: no-repeat;
	padding-top: 8px;
	padding-bottom: 8px;
	margin-top: -4px;
	margin-bottom: -4px;
}

@import url('../genesis-block-theme/style.css');

body {
	font-family: var(--pdg-text), "Open Sans", sans-serif;
	background: #fffffc url('images/aov_bkgd.jpg') repeat;
	background-position: 50% 50%;
	background-size: 100vw auto-flow !important;
}

/* =============================================================================
   GENESIS / BREAKDANCE LAYOUT
============================================================================= */

.breakdance:not(.footer),
section.bde-section-19-100 {
	background-color: #fff0 !important;
}

#primary {
	min-height: 90vh;
}

header.entry-header {
	display: none !important;
}

/* =============================================================================
   HEADINGS
   Pendragon fonts via CSS variables — falls back gracefully if stylekit
   hasn't loaded yet.
============================================================================= */

.bde-h1, .bde-h2, .bde-h3, .bde-h4, .bde-h5, .bde-h6,
.breakdance h1, .breakdance h2, .breakdance h3,
.breakdance h4, .breakdance h5, .breakdance h6,
h1, h2, h3, h4,
.site-title,
.entry-title,
.widget-title {
	font-family: var(--pdg-h1), "charcuterie-contrast", "Federo", sans-serif;
	color: #446F5E;
}

h2 {
	font-family: var(--pdg-h2), "charcuterie-contrast", "Federo", sans-serif;
}

h3, h4, h5, h6 {
	font-family: var(--pdg-heading), "charcuterie-contrast", "Federo", sans-serif;
}

/* =============================================================================
   BLOCK COLUMNS — second-column decorative treatment
============================================================================= */

.wp-block-columns .wp-block-column:nth-child(2) {
	position: relative;
	padding: 18px;
	min-height: 120px;
	background: url('images/greybg.png');
	background-size: 100% 100%;
	margin-top: 16px;
	margin-bottom: 32px;
	z-index: 10;
}

.wp-block-columns .wp-block-column:nth-child(1) {
	margin-top: 32px;
}

.wp-block-columns .wp-block-column:nth-child(2)::before {
	content: "";
	position: absolute;
	top: -2rem;
	left: 0;
	width: 100%;
	height: 60px;
	background-image: url('images/tbd.png');
	background-size: 100% auto;
	background-position: center;
	background-repeat: no-repeat;
	z-index: -1;
}

.wp-block-columns .wp-block-column:nth-child(2)::after {
	content: "";
	position: absolute;
	bottom: calc(-1rem - 12px);
	left: 0;
	width: 100%;
	height: 60px;
	background-image: url('images/tbd.png');
	background-size: 100% auto;
	background-position: center;
	background-repeat: no-repeat;
	z-index: -1;
}

/* =============================================================================
   NAV — hide item on specific page
============================================================================= */

.page-id-21 li#menu-item-34 {
	display: none;
}

/* =============================================================================
   TABLE STYLING — .section-container context
   (Global table resets are handled by .pdg scope in the stylekit)
============================================================================= */

.section-container tr {
	border: 0;
}

.section-container td {
	border: 0;
	padding: 4px;
}

.section-container tr:nth-child(even) {
	background-color: white;
}

.section-container tr:nth-child(odd) td {
	background-image: url('images/greybg.png');
	background-size: 100% auto;
	background-repeat: repeat;
	background-position: center;
	color: #333;
	text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
}

/* =============================================================================
   DECORATIVE ACCENTS
============================================================================= */

.crowcorner {
	background: url('/wp-content/uploads/2025/06/tbd.png') no-repeat;
	background-position: right bottom;
	background-size: 20%;
	padding-right: 20%;
	padding-bottom: 16%;
}

/* Pendragon decorative rules — use .pdg-rule01, .pdg-rule02, .pdg-rule03
   as convenience aliases pointing to the stylekit SVGs */

.pdg-rule01,
.pdg-rule02,
.pdg-rule03 {
	margin: 3rem auto;
	height: 24px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: auto;
}

.pdg-rule01 { background-image: url('stylekit/decoratives/rule01.svg'); }
.pdg-rule02 { background-image: url('stylekit/decoratives/rule02.svg'); }
.pdg-rule03 { background-image: url('stylekit/decoratives/rule03.svg'); }

/* Pendragon decorative edges */
.pdg-edge--blue  { background-image: url('stylekit/decoratives/edge01-blue.svg');  background-repeat: repeat-y; }
.pdg-edge--green { background-image: url('stylekit/decoratives/edge01-green.svg'); background-repeat: repeat-y; }
.pdg-edge--red   { background-image: url('stylekit/decoratives/edge01-red.svg');   background-repeat: repeat-y; }

/* =============================================================================
   SHORTCODES ULTIMATE — PRODUCT GRID
============================================================================= */

.su-posts-product {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2rem;
	margin: 1rem 0;
}

.su-product-item {
	border: 1px solid #e0e0e0;
	border-radius: 4px;
	padding: 1.5rem;
	background: #fff;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	transition: box-shadow 0.3s ease;
	position: relative;
	overflow: hidden;
}

.su-product-item:hover {
	box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.su-product-image {
	float: right;
	margin: 0 0 1rem 1rem;
	max-width: 40%;
}

.su-product-image img {
	width: 100%;
	height: auto;
	border-radius: 4px;
}

.su-product-content {
	position: relative;
}

.su-product-title {
	margin: 0 0 1rem 0;
	line-height: 1.3;
}

.su-product-title a {
	text-decoration: none;
	transition: color 0.3s ease;
}

.su-product-title a:hover {
	color: #000000;
}

.su-product-excerpt {
	margin-bottom: 1rem;
	color: #666;
	line-height: 1.5;
}

span.product-accent {
	background: #ffffff00 url('images/title_subbg.png') no-repeat;
	background-size: 100% auto;
	width: 50%;
	min-height: 4px;
	padding-bottom: 5%;
	display: inline-block;
}

.su-product-details {
	margin-top: 1rem;
}

.su-product-sku {
	margin-bottom: 0.5rem;
	font-size: 0.9rem;
	color: #888;
}

.su-product-price {
	margin-bottom: 1rem;
	font-size: 1.2rem;
	font-weight: bold;
	color: #2c5aa0;
}

.su-product-purchase {
	margin-top: 1rem;
	float: right;
}

/* =============================================================================
   BUTTONS (Breakdance + Pendragon hybrid)
   These extend rather than replace Breakdance's .bde-button classes.
============================================================================= */

.bde-button {
	display: inline-block;
	padding: 12px 24px;
	font-size: 1rem;
	font-weight: 600;
	font-family: var(--pdg-h2), "Herb", sans-serif;
	text-decoration: none;
	border-radius: 4px;
	transition: all 0.3s ease;
	cursor: pointer;
	border: none;
	text-align: center;
	line-height: 1;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.bde-button--primary {
	background-color: var(--pdg-color-brand, #007cba);
	color: #fff;
	border: 2px solid var(--pdg-color-brand, #007cba);
}

.bde-button--primary:hover {
	background-color: var(--pdg-btn-primary-hover, #005a87);
	border-color: var(--pdg-btn-primary-hover, #005a87);
	color: #fff;
	text-decoration: none;
}

.su-clear {
	clear: both;
}

/* =============================================================================
   RESPONSIVE
============================================================================= */

@media (max-width: 768px) {
	.su-posts-product {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	.su-product-image {
		float: none;
		margin: 0 0 1rem 0;
		max-width: 100%;
		text-align: center;
	}

	.su-product-item {
		padding: 1rem;
	}
}

@media (max-width: 480px) {
	.su-posts-product {
		gap: 1rem;
	}

	.su-product-item {
		padding: 0.75rem;
	}

	.su-product-title {
		font-size: 1.3rem;
	}

	.bde-button {
		width: 100%;
		padding: 14px 20px;
	}

	.pdg-rule01,
	.pdg-rule02,
	.pdg-rule03 {
		height: 16px;
	}
}

@media (max-width: 768px) {
	html {
		margin-top: -4px;
		margin-bottom: -4px;
	}

	html, body {
		padding-left: 4px;
		padding-right: 4px;
	}
}