/*
Theme Name: Kadence Child - Dytryn
Theme URI: https://dytryn.com/
Description: Dytryn lifestyle brand child theme built on Kadence. Covers fishing, Jeeping, scuba diving, ham radio, overlanding, and boating. Connected to the Dytryn Base Camp destination concept.
Author: Dytryn
Author URI: https://dytryn.com/
Template: kadence
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kadence-child-dytryn
*/

/* =============================================================================
   DYTRYN BRAND — GLOBAL PALETTE
   Overrides Kadence's --global-palette* variables.

   Slot mapping:
     1  Accent          — Ember Orange   (buttons, links, highlights)
     2  Accent Alt      — Forest Green   (hover states, secondary elements)
     3  Strongest Text  — Deep Timber    (headings, dark body text)
     4  Strong Text     — Timber Mid     (subheadings, bold body)
     5  Medium Text     — Field Stone    (meta, captions)
     6  Subtle Text     — Stone Light    (placeholders, disabled)
     7  Subtle BG       — Canvas Dark    (borders, dividers, tags)
     8  Lighter BG      — Canvas Mid     (card backgrounds, inputs)
     9  White/Offwhite  — Canvas         (page background, text on dark)
============================================================================= */
:root {
	--global-palette1: #C45C1A;   /* Ember Orange   */
	--global-palette2: #2C5A28;   /* Forest Green   */
	--global-palette3: #1A2B1C;   /* Deep Timber    */
	--global-palette4: #2D3D2F;   /* Timber Mid     */
	--global-palette5: #7A7A6A;   /* Field Stone    */
	--global-palette6: #9A9A8A;   /* Stone Light    */
	--global-palette7: #D5CEBC;   /* Canvas Dark    */
	--global-palette8: #EDE7D6;   /* Canvas Mid     */
	--global-palette9: #F0EAD6;   /* Canvas         */

	/* Content width constraints — controls alignwide and default block widths */
	--wp--style--global--content-size: 1200px;
	--wp--style--global--wide-size: 1400px;
}

/* =============================================================================
   TYPOGRAPHY — Oswald (headings) + Lato (body)
============================================================================= */
body,
p,
li,
td,
input,
textarea,
select,
button {
	font-family: 'Lato', sans-serif;
	font-weight: 400;
}

h1, h2, h3, h4, h5, h6,
.site-title,
.entry-title,
.wp-block-heading {
	font-family: 'Oswald', sans-serif;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

/* Subheadings and widget titles — slightly lighter weight */
h4, h5, h6 {
	font-weight: 500;
}

/* Nav links — Oswald caps for that badge/stamp feel */
.main-navigation a,
.header-navigation a,
.kadence-navigation a {
	font-family: 'Oswald', sans-serif;
	font-weight: 400;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* =============================================================================
   HEADER — Hide site title text (logo image is sufficient)
============================================================================= */
.site-title,
.site-branding .site-title {
	display: none !important;
}

/* =============================================================================
   BASE — Page background and body text
============================================================================= */
body {
	background-color: #F0EAD6 !important;
	color: var(--global-palette3);
}

.content-area,
.site-main,
.entry-content,
.entry-header,
.page-content {
	padding-left: 2rem;
	padding-right: 2rem;
}

/* =============================================================================
   ACTIVITY ICON BUTTONS
============================================================================= */
.dytryn-activities {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2.5rem 2rem;
	max-width: 780px;
	margin: 2.5rem auto 0;
	padding: 0 1rem;
}

.dytryn-activity-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	text-decoration: none;
	color: var(--global-palette3);
}

.dytryn-activity-icon {
	width: 130px;
	height: 130px;
	border-radius: 50%;
	background: var(--global-palette3);
	border: 4px solid var(--global-palette1);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.dytryn-activity-btn:hover .dytryn-activity-icon {
	background: var(--global-palette1);
	border-color: var(--global-palette3);
	transform: translateY(-5px);
}

.dytryn-activity-icon svg {
	width: 65px;
	height: 65px;
	fill: var(--global-palette9);
	color: var(--global-palette9);
}


.dytryn-activity-label {
	font-family: 'Oswald', sans-serif;
	font-weight: 600;
	font-size: 1rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--global-palette3);
}

@media (max-width: 600px) {
	.dytryn-activities {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* =============================================================================
   HERO PAGES — Remove content wrapper corner artifacts above full-bleed cover
   Applies to Home (front page) and About
============================================================================= */
.page-id-1292 .content-bg,
.home .content-bg {
	border-radius: 0 !important;
	padding-top: 0 !important;
	margin-top: 0 !important;
}
.page-id-1292 .entry-content-wrap,
.home .entry-content-wrap {
	padding-top: 0 !important;
	margin-top: 0 !important;
}

/* =============================================================================
   CONTENT WIDTH — Keep text readable on wide monitors
   Full-bleed backgrounds extend to edges; inner content stays ≤ 1200px
============================================================================= */
.entry-content .wp-block-group.alignfull > *:not(.wp-block-query):not(.dytryn-activities) {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

.entry-content .wp-block-query.alignwide {
	max-width: 1200px;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* =============================================================================
   SINGLE POST — Layout, typography, featured image, and spacing
============================================================================= */

/* Content width for single posts — narrow for readability */
.single-post .entry-content {
	max-width: 780px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}

/* Post title */
.single-post .entry-header .entry-title {
	font-size: clamp(1.8rem, 4vw, 2.8rem);
	line-height: 1.1;
	color: var(--global-palette3);
	margin-bottom: 0.5rem;
}

/* Post meta (date, author) */
.single-post .entry-meta,
.single-post .entry-footer {
	font-family: 'Lato', sans-serif;
	font-size: 0.875rem;
	color: var(--global-palette5);
	letter-spacing: 0.03em;
	text-transform: uppercase;
	margin-bottom: 2rem;
}

.single-post .entry-meta a {
	color: var(--global-palette5);
	text-decoration: none;
}

.single-post .entry-meta a:hover {
	color: var(--global-palette1);
}

/* Featured image — full width above content */
.single-post .post-thumbnail {
	max-width: 780px;
	margin: 0 auto 2rem;
}

.single-post .post-thumbnail img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 4px;
}

/* Body text */
.single-post .entry-content p {
	font-size: 1.0625rem;
	line-height: 1.8;
	color: var(--global-palette4);
	margin-bottom: 1.5rem;
}

/* Links in post content */
.single-post .entry-content a {
	color: var(--global-palette1);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.single-post .entry-content a:hover {
	color: var(--global-palette2);
}

/* Headings within post content */
.single-post .entry-content h2,
.single-post .entry-content h3 {
	margin-top: 2.5rem;
	margin-bottom: 0.75rem;
	color: var(--global-palette3);
	font-size: clamp(1.2rem, 2.5vw, 1.6rem);
}

/* Inline images */
.single-post .entry-content .wp-block-image {
	margin: 2rem 0;
}

.single-post .entry-content .wp-block-image img {
	width: 100%;
	height: auto;
	border-radius: 4px;
	display: block;
}

.single-post .entry-content .wp-block-image figcaption {
	font-size: 0.8125rem;
	color: var(--global-palette5);
	text-align: center;
	margin-top: 0.4rem;
	font-style: italic;
}

/* Divider between post and comments/nav */
.single-post .entry-content + * {
	border-top: 1px solid var(--global-palette7);
	margin-top: 3rem;
	padding-top: 2rem;
}

/* Post navigation (prev/next) */
.single-post .post-navigation {
	max-width: 780px;
	margin: 2rem auto;
	padding: 0 1.5rem;
	display: flex;
	justify-content: space-between;
	gap: 1rem;
}

.single-post .nav-previous a,
.single-post .nav-next a {
	font-family: 'Oswald', sans-serif;
	font-weight: 500;
	font-size: 0.875rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--global-palette1);
	text-decoration: none;
}

.single-post .nav-previous a:hover,
.single-post .nav-next a:hover {
	color: var(--global-palette2);
}

/* =============================================================================
   BLOG ARCHIVE / POST LOOP — Card grid layout
============================================================================= */

/* Make sure archive doesn't look cramped */
.archive .entry-title,
.blog .entry-title,
.category .entry-title {
	font-size: clamp(1.1rem, 2vw, 1.4rem);
}

.archive .entry-summary p,
.blog .entry-summary p,
.category .entry-summary p {
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--global-palette4);
}

/* Category / tag labels on archive */
.archive .cat-links a,
.blog .cat-links a {
	font-family: 'Oswald', sans-serif;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	background: var(--global-palette1);
	color: var(--global-palette9);
	padding: 2px 8px;
	border-radius: 3px;
	text-decoration: none;
}

.archive .cat-links a:hover,
.blog .cat-links a:hover {
	background: var(--global-palette2);
}