/*
Theme Name: Jukka & Johannes
Theme URI: https://jukkajohannes.fi
Description: Elegant custom WordPress block theme with gold and green color scheme
Author: Jukka & Johannes
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jukkajohannes
*/

/* ========================================
   CUSTOM COLOR PALETTE & CSS VARIABLES
   ======================================== */

:root {
	/* Primary Colors */
	--color-deep-green: #143A14;
	--color-dark-green-text: #121F0C;
	--color-light-paper: #FDF4CF;
	--color-secondary-light: #F5EBC6;
	
	/* Gold & Metallic Shades */
	--color-main-gold: #F0D57C;
	--color-antique-gold: #8D8544;
	--color-warm-neutral-1: #D8D0B0;
	--color-warm-neutral-2: #AEAA89;
	
	/* Fresh Accent (Optional) */
	--color-green-accent: #C9E3D4;
	
	/* Typography */
	--font-nav: 'Cinzel', serif;
	--font-hero: 'Great Vibes', cursive;
	--font-heading: 'Cinzel', serif;
	--font-body: 'Lora', serif;
}

/* ========================================
   GOOGLE FONTS IMPORT
   ======================================== */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Great+Vibes&family=Lora:ital,wght@0,400;0,500;0,600;1,400&display=swap');

/* ========================================
   GLOBAL STYLES
   ======================================== */

body {
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.7;
	color: var(--color-dark-green-text);
	background-color: var(--color-light-paper);
}

/* ========================================
   HEADER STYLES
   ======================================== */

.site-header,
header.wp-block-template-part,
.wp-block-template-part header {
	background-color: var(--color-light-paper);
	padding: 80px 0 20px;
	text-align: center;
}

/* Logo Container */
.site-logo,
.custom-logo-link,
.wp-block-site-logo {
	display: block;
	margin: 0 auto 30px;
	max-width: 300px;
}

.site-logo img,
.custom-logo,
.wp-block-site-logo img {
	max-width: 100%;
	height: auto;
}

/* Main Content Background */
body {
	background-color: #e8e8e8;
}

/* Transparent header to show background through */
.site-header {
	background-color: transparent !important;
}

main.wp-block-group {
	max-width: 1100px;
	margin: 0 auto;
	background-color: var(--color-light-paper);
}

/* Navigation Bar - Gold Band - Sticky */
.navigation-bar,
.wp-block-navigation,
nav.wp-block-navigation {
	background-color: var(--color-main-gold);
	padding: 15px 0;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	border-top: 2px solid var(--color-antique-gold);
	border-bottom: 2px solid var(--color-antique-gold);
	position: sticky;
	top: 0;
	z-index: 1000;
}

/* Blog Post List - Left Aligned */
.post-item,
.post-item .wp-block-post-title,
.post-item .wp-block-post-date,
.post-item .wp-block-post-excerpt {
	text-align: left !important;
}

.post-item h2,
.post-item h2 a {
	text-align: left !important;
}

/* Fix content wrapper to be vertical */
.content-wrapper {
	display: block !important;
}

.content-wrapper > * {
	display: block !important;
	width: 100% !important;
}

/* Fix post template to display vertically */
.wp-block-post-template,
ul.wp-block-post-template {
	display: block !important;
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

.wp-block-post-template > li,
ul.wp-block-post-template > li {
	width: 100% !important;
	display: block !important;
	margin-bottom: 0 !important;
}

.wp-block-query {
	display: block !important;
	width: 100% !important;
}

/* Navigation Links */
.wp-block-navigation__container,
.wp-block-navigation-item {
	list-style: none;
	margin: 0;
	padding: 0;
}

.wp-block-navigation-item a,
.wp-block-navigation__container a,
nav a {
	font-family: var(--font-nav);
	font-size: 16px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #ffffff;
	text-decoration: none;
	padding: 12px 24px;
	transition: all 0.3s ease;
	display: inline-block;
	font-weight: 600;
}

/* Additional navigation link selectors for white text */
.wp-block-navigation-item__content,
.wp-block-pages-list__item__link,
.navigation-bar a,
.wp-block-navigation a {
	color: #ffffff !important;
	background-color: var(--color-deep-green) !important;
	padding: 12px 24px !important;
	border-radius: 4px !important;
}

/* Home icon for first navigation item */
.wp-block-navigation__container > .wp-block-navigation-item:first-child a::before,
.wp-block-navigation-item:first-child .wp-block-navigation-item__content::before {
	content: "⌂ ";
	margin-right: 8px;
	font-size: 20px;
}
	background-color: var(--color-deep-green);
	border-radius: 4px;
	margin: 0 4px;
}

.wp-block-navigation-item a:hover,
nav a:hover {
	background-color: var(--color-dark-green-text);
	color: var(--color-main-gold);
	border-bottom: none;
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(20, 58, 20, 0.3);
}

/* ========================================
   HERO SECTION
   ======================================== */

.hero-section,
.wp-block-group.hero,
.entry-header {
	background: linear-gradient(rgba(253, 244, 207, 0.85), rgba(253, 244, 207, 0.9)),
		url('http://localhost:8000/wp-content/uploads/2025/12/jukkajohannesheromini-1.png') center/cover no-repeat;
	padding: 120px 20px;
	text-align: center;
	position: relative;
	min-height: 500px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.hero-section::before,
.wp-block-group.hero::before,
.entry-header::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(to bottom, rgba(20, 58, 20, 0.1), rgba(253, 244, 207, 0.3));
	z-index: 1;
}

.hero-section > *,
.wp-block-group.hero > *,
.entry-header > * {
	position: relative;
	z-index: 2;
}

/* Hero Headline */
.hero-headline,
.hero-section h1,
.entry-title {
	font-family: var(--font-hero);
	font-size: 56px;
	line-height: 1.2;
	color: var(--color-deep-green);
	margin-bottom: 30px;
	font-weight: 400;
	text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.8);
}

@media (min-width: 768px) {
	.hero-headline,
	.hero-section h1 {
		font-size: 72px;
	}
	
	.hero-section,
	.wp-block-group.hero,
	.entry-header {
		padding: 150px 20px;
		min-height: 600px;
	}
}

/* Decorative Line */
.hero-divider,
.decorative-line {
	width: 200px;
	height: 3px;
	background-color: var(--color-main-gold);
	margin: 0 auto 40px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* ========================================
   CONTENT LAYOUT - TWO COLUMNS
   ======================================== */

.content-wrapper,
.wp-block-columns {
	max-width: 1200px;
	margin: 0 auto;
	padding: 40px 20px;
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
}

@media (min-width: 768px) {
	.content-wrapper,
	.wp-block-columns {
		grid-template-columns: 2fr 1fr;
	}
}

/* Main Content Area */
.main-content,
.wp-block-column:first-child {
	background-color: var(--color-light-paper);
	padding: 30px;
}

/* Section Headings - "WELCOME" etc. */
.section-heading,
h2.wp-block-heading {
	font-family: var(--font-heading);
	font-size: 32px;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--color-antique-gold);
	margin-bottom: 25px;
}

@media (min-width: 768px) {
	.section-heading,
	h2.wp-block-heading {
		font-size: 36px;
	}
}

/* Body Text */
.content-text,
.entry-content p,
.wp-block-paragraph {
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.7;
	color: var(--color-dark-green-text);
	margin-bottom: 20px;
}

@media (min-width: 768px) {
	.content-text,
	.entry-content p {
		font-size: 18px;
		line-height: 1.8;
	}
}

/* ========================================
   SIDEBAR / PROFILE CARD
   ======================================== */

.sidebar-card,
.profile-card,
.wp-block-column:last-child {
	background-color: var(--color-secondary-light);
	border: 2px solid var(--color-deep-green);
	border-radius: 8px;
	padding: 30px;
	text-align: center;
}

.profile-image,
.sidebar-card img {
	border-radius: 50%;
	width: 150px;
	height: 150px;
	object-fit: cover;
	margin: 0 auto 20px;
	display: block;
	border: 3px solid var(--color-main-gold);
}

.profile-name {
	font-family: var(--font-heading);
	font-size: 22px;
	color: var(--color-deep-green);
	margin-bottom: 10px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.profile-description {
	font-family: var(--font-body);
	font-size: 15px;
	color: var(--color-dark-green-text);
	line-height: 1.6;
}

/* ========================================
   FOOTER
   ======================================== */

.site-footer,
footer.wp-block-template-part,
.wp-block-template-part footer {
	background-color: var(--color-deep-green);
	color: var(--color-main-gold);
	padding: 60px 20px 30px;
	text-align: center;
	margin-top: 60px;
}

.site-footer p,
footer p {
	font-family: var(--font-body);
	font-size: 15px;
	color: var(--color-main-gold);
	margin-bottom: 15px;
}

.site-footer a,
footer a {
	color: var(--color-main-gold);
	text-decoration: underline;
	transition: color 0.3s ease;
}

.site-footer a:hover,
footer a:hover {
	color: var(--color-secondary-light);
}

/* ========================================
   BUTTONS
   ======================================== */

.wp-block-button__link,
.wp-element-button,
button,
input[type="submit"] {
	background-color: var(--color-deep-green);
	color: var(--color-main-gold);
	font-family: var(--font-nav);
	font-size: 16px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 15px 35px;
	border: 2px solid var(--color-antique-gold);
	border-radius: 4px;
	transition: all 0.3s ease;
	cursor: pointer;
	text-decoration: none;
	display: inline-block;
}

.wp-block-button__link:hover,
.wp-element-button:hover,
button:hover,
input[type="submit"]:hover {
	background-color: var(--color-antique-gold);
	color: var(--color-light-paper);
	border-color: var(--color-deep-green);
}

/* ========================================
   LINKS
   ======================================== */

a {
	color: var(--color-deep-green);
	text-decoration: underline;
	transition: color 0.3s ease;
}

a:hover {
	color: var(--color-antique-gold);
}

/* Optional: Fresh accent for special links */
a.accent-link:hover {
	color: var(--color-green-accent);
}

/* ========================================
   IMAGE CAPTIONS & META
   ======================================== */

figcaption,
.wp-block-image figcaption,
.wp-caption-text,
.post-meta {
	font-family: var(--font-body);
	font-size: 14px;
	color: var(--color-warm-neutral-2);
	line-height: 1.5;
	font-style: italic;
	margin-top: 10px;
}

/* ========================================
   BORDERS & DIVIDERS
   ======================================== */

hr,
.wp-block-separator {
	border: none;
	border-top: 1px solid var(--color-warm-neutral-1);
	margin: 40px 0;
}

hr.decorative,
.wp-block-separator.is-style-wide {
	border-top: 2px solid var(--color-main-gold);
	width: 80%;
	margin: 40px auto;
}

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

@media (max-width: 767px) {
	.hero-headline,
	.hero-section h1 {
		font-size: 42px;
	}
	
	.section-heading,
	h2.wp-block-heading {
		font-size: 26px;
	}
	
	.navigation-bar,
	.wp-block-navigation {
		flex-direction: column;
	}
	
	.wp-block-navigation-item a,
	nav a {
		padding: 10px 0;
		display: block;
	}
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

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

.text-gold {
	color: var(--color-main-gold);
}

.text-antique-gold {
	color: var(--color-antique-gold);
}

.bg-light-paper {
	background-color: var(--color-light-paper);
}

.bg-secondary-light {
	background-color: var(--color-secondary-light);
}

.bg-deep-green {
	background-color: var(--color-deep-green);
}

.border-gold {
	border: 2px solid var(--color-main-gold);
}

.rounded {
	border-radius: 8px;
}