/*
Theme Name:   Het Goois Jachthuis
Theme URI:    https://gooisjachthuis.nl
Description:  Child theme van Kadence met de huisstijl van Het Goois Jachthuis: jachtgroen, messing en ivoor, Cinzel/Cormorant Garamond/Lato (lokaal gehost) en opmaak voor WooCommerce.
Author:       Het Goois Jachthuis
Template:     kadence
Version:      1.0.0
Requires at least: 6.4
Requires PHP: 7.4
Text Domain:  gooisjachthuis
*/

/* ==========================================================================
   1. Huisstijl-variabelen
   ========================================================================== */

:root {
	--gjh-groen:        #18211B; /* jachtgroen: header, footer, knoppen */
	--gjh-groen-2:      #2B3A2F; /* iets lichter groen: vlakken, hover */
	--gjh-groen-diep:   #0F1611; /* topbalk */
	--gjh-messing:      #C2A26B; /* accent op groen */
	--gjh-brons:        #7A5F33; /* accent op licht */
	--gjh-ivoor:        #F3EEE3; /* paginagrond */
	--gjh-ivoor-licht:  #FBF8F2; /* kaarten, invoervelden */
	--gjh-ivoor-tekst:  #EDE6D6; /* tekst op groen */
	--gjh-zand:         #E2D9C6; /* foto-achtergrond, subtiele vlakken */
	--gjh-lijn:         #D8CDB6; /* scheidingslijnen */
	--gjh-tekst:        #1C2620;
	--gjh-tekst-zacht:  #5C5243;
	--gjh-tekst-op-groen-zacht: #C9BFA8;

	--gjh-font-kop:     "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--gjh-font-caps:    "Cinzel", "Times New Roman", serif;
	--gjh-font-tekst:   "Lato", "Helvetica Neue", Arial, sans-serif;
}

/* Kadence globaal palet overschrijven (:root:root wint van Kadence' eigen :root). */
:root:root {
	--global-palette1: #18211B; /* accent: knoppen, links */
	--global-palette2: #7A5F33; /* accent hover */
	--global-palette3: #1C2620; /* sterkste tekst / koppen */
	--global-palette4: #2B3A2F;
	--global-palette5: #3D3A33; /* broodtekst */
	--global-palette6: #5C5243; /* subtiele tekst */
	--global-palette7: #E2D9C6; /* subtiele achtergrond */
	--global-palette8: #F3EEE3; /* lichte achtergrond */
	--global-palette9: #FBF8F2; /* basis / wit */

	--global-palette-btn-bg:        #18211B;
	--global-palette-btn-bg-hover:  #7A5F33;
	--global-palette-btn:           #EDE6D6;
	--global-palette-btn-hover:     #FBF8F2;
}

/* ==========================================================================
   2. Basis en typografie
   ========================================================================== */

body {
	background: var(--gjh-ivoor);
	color: var(--gjh-tekst);
	font-family: var(--gjh-font-tekst);
	font-size: 16px;
	line-height: 1.6;
}

h1, h2, h3, h4,
.entry-title,
.wp-block-heading {
	font-family: var(--gjh-font-kop);
	font-weight: 500;
	color: var(--gjh-tekst);
	letter-spacing: 0;
	line-height: 1.1;
}

h1 { font-size: clamp(2.4rem, 4vw, 4rem); }
h2 { font-size: clamp(2rem, 3vw, 2.75rem); }
h3 { font-size: 1.6rem; }

h5, h6 {
	font-family: var(--gjh-font-caps);
	font-weight: 400;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

a { color: var(--gjh-brons); }
a:hover, a:focus { color: #4F3D20; }

::selection { background: var(--gjh-messing); color: var(--gjh-groen); }

:focus-visible {
	outline: 2px solid var(--gjh-messing);
	outline-offset: 2px;
}

/* Hulpklassen voor blokken (Geavanceerd → Extra CSS-klasse) */
.gjh-eyebrow {
	font-family: var(--gjh-font-caps);
	font-size: 13px;
	letter-spacing: 0.4em;
	text-transform: uppercase;
	color: var(--gjh-brons);
}
.gjh-op-groen .gjh-eyebrow { color: var(--gjh-messing); }

.gjh-cursief-accent {
	font-family: var(--gjh-font-kop);
	font-style: italic;
	color: var(--gjh-brons);
}
.gjh-op-groen .gjh-cursief-accent { color: var(--gjh-messing); }

.gjh-op-groen {
	background: var(--gjh-groen);
	color: var(--gjh-ivoor-tekst);
}
.gjh-op-groen h1, .gjh-op-groen h2, .gjh-op-groen h3 { color: var(--gjh-ivoor-tekst); }
.gjh-op-groen p { color: var(--gjh-tekst-op-groen-zacht); }
.gjh-op-groen a:not(.wp-block-button__link) { color: var(--gjh-messing); }

/* ==========================================================================
   3. Knoppen
   ========================================================================== */

button,
.button,
.wp-block-button__link,
.wp-element-button,
input[type="submit"],
input[type="button"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.wc-block-components-button:not(.is-link),
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	background: var(--gjh-groen);
	color: var(--gjh-ivoor-tekst);
	border: 1px solid var(--gjh-groen);
	border-radius: 0;
	font-family: var(--gjh-font-caps);
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 0.95em 1.8em;
	box-shadow: none;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

button:hover,
.button:hover,
.wp-block-button__link:hover,
.wp-element-button:hover,
input[type="submit"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.wc-block-components-button:not(.is-link):hover {
	background: var(--gjh-brons);
	border-color: var(--gjh-brons);
	color: var(--gjh-ivoor-licht);
}

/* Messing knop op groene vlakken, of met klasse .gjh-knop-messing */
.gjh-op-groen .wp-block-button__link,
.gjh-knop-messing .wp-block-button__link,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
	background: var(--gjh-messing);
	border-color: var(--gjh-messing);
	color: var(--gjh-groen);
}
.gjh-op-groen .wp-block-button__link:hover,
.gjh-knop-messing .wp-block-button__link:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
	background: #D4B97A;
	border-color: #D4B97A;
	color: var(--gjh-groen);
}

/* "In winkelwagen" op de productpagina: altijd groen, vol breed op mobiel */
.woocommerce div.product form.cart .button.single_add_to_cart_button {
	background: var(--gjh-groen);
	border-color: var(--gjh-groen);
	color: var(--gjh-ivoor-tekst);
	min-height: 56px;
	padding-left: 2.4em;
	padding-right: 2.4em;
}
.woocommerce div.product form.cart .button.single_add_to_cart_button:hover {
	background: var(--gjh-brons);
	border-color: var(--gjh-brons);
}

/* Omlijnde knop: blok-stijl "Outline" */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--gjh-groen);
	border: 1px solid var(--gjh-groen);
}
.gjh-op-groen .wp-block-button.is-style-outline > .wp-block-button__link {
	color: var(--gjh-ivoor-tekst);
	border-color: var(--gjh-messing);
}

/* ==========================================================================
   4. Formulieren
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
select,
textarea,
.wc-block-components-text-input input,
.wc-block-components-combobox .wc-block-components-combobox-control input {
	background: var(--gjh-ivoor-licht);
	border: 1px solid #A89B82;
	border-radius: 0;
	color: var(--gjh-tekst);
	font-family: var(--gjh-font-tekst);
	font-size: 16px;
}
input:focus, select:focus, textarea:focus {
	border-color: var(--gjh-groen);
	box-shadow: 0 0 0 1px var(--gjh-groen);
}

/* ==========================================================================
   5. Header (Kadence header builder)
   Tip: stel in de Customizer ook Header → Main Row → Background in op #18211B.
   ========================================================================== */

#masthead,
#masthead .site-main-header-wrap .site-header-row-container-inner,
#masthead .site-bottom-header-wrap .site-header-row-container-inner,
#mobile-header .site-main-header-wrap .site-header-row-container-inner {
	background: var(--gjh-groen);
}

#masthead .site-top-header-wrap .site-header-row-container-inner {
	background: var(--gjh-groen-diep);
	color: var(--gjh-tekst-op-groen-zacht);
	font-size: 13px;
	letter-spacing: 0.06em;
}

#masthead .site-main-header-wrap {
	border-bottom: 1px solid #2E3B32;
}

/* Menu */
.main-navigation .primary-menu-container > ul > li.menu-item > a,
.header-navigation .header-menu-container > ul > li.menu-item > a {
	font-family: var(--gjh-font-caps);
	font-size: 14px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gjh-ivoor-tekst);
}
.main-navigation .primary-menu-container > ul > li.menu-item > a:hover,
.main-navigation .primary-menu-container > ul > li.current-menu-item > a,
.header-navigation .header-menu-container > ul > li.menu-item > a:hover,
.header-navigation .header-menu-container > ul > li.current-menu-item > a {
	color: var(--gjh-messing);
}

/* Menu-item met klasse .gjh-menu-accent (bijv. "Wapens & munitie") */
.header-navigation li.gjh-menu-accent > a,
.main-navigation li.gjh-menu-accent > a {
	color: var(--gjh-messing) !important;
}

/* Submenu */
.header-navigation .header-menu-container ul ul.sub-menu,
.main-navigation ul ul.sub-menu {
	background: var(--gjh-groen);
	border-top: 2px solid var(--gjh-messing);
}
.header-navigation .header-menu-container ul ul li.menu-item > a {
	color: var(--gjh-ivoor-tekst);
	font-family: var(--gjh-font-tekst);
	letter-spacing: 0.02em;
	text-transform: none;
}
.header-navigation .header-menu-container ul ul li.menu-item > a:hover {
	color: var(--gjh-messing);
	background: var(--gjh-groen-2);
}

/* Iconen in de header: zoeken, account, winkelwagen, mobiel menu */
#masthead .search-toggle-open,
#masthead .header-account-button,
#masthead .header-cart-button,
#mobile-header .menu-toggle-open,
#mobile-header .header-cart-button,
#mobile-header .search-toggle-open {
	color: var(--gjh-ivoor-tekst);
	background: transparent;
	border: 0;
	padding: 0.5em;
	letter-spacing: 0;
}
#masthead .search-toggle-open:hover,
#masthead .header-account-button:hover,
#masthead .header-cart-button:hover,
#mobile-header .menu-toggle-open:hover {
	color: var(--gjh-messing);
	background: transparent;
}
.header-cart-wrap .header-cart-button .header-cart-total {
	background: var(--gjh-messing);
	color: var(--gjh-groen);
	font-weight: 700;
}

/* Mobiel uitklapmenu */
#mobile-drawer .drawer-inner {
	background: var(--gjh-groen);
	color: var(--gjh-ivoor-tekst);
}
#mobile-drawer .mobile-navigation ul li a {
	font-family: var(--gjh-font-caps);
	letter-spacing: 0.12em;
	color: var(--gjh-ivoor-tekst);
}
#mobile-drawer .mobile-navigation ul li a:hover { color: var(--gjh-messing); }

/* Logo-hoogte */
.site-branding a.brand img,
.site-branding a.brand img.svg-logo-image {
	max-height: 56px;
	width: auto;
}
@media (max-width: 767px) {
	.site-branding a.brand img { max-height: 44px; }
}

/* ==========================================================================
   6. Footer
   ========================================================================== */

#colophon,
#colophon .site-footer-row-container-inner {
	background: var(--gjh-groen);
	color: var(--gjh-tekst-op-groen-zacht);
}
#colophon .site-bottom-footer-wrap .site-footer-row-container-inner {
	border-top: 1px solid #2E3B32;
	font-size: 13px;
}
#colophon a { color: var(--gjh-tekst-op-groen-zacht); text-decoration: none; }
#colophon a:hover { color: var(--gjh-messing); }
#colophon h2, #colophon h3, #colophon .widget-title {
	font-family: var(--gjh-font-caps);
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gjh-ivoor-tekst);
}

/* ==========================================================================
   7. WooCommerce: productoverzichten
   ========================================================================== */

.woocommerce ul.products li.product,
.wc-block-grid__product,
.wc-block-product {
	background: var(--gjh-ivoor-licht);
	padding-bottom: 20px;
	text-align: left;
}

.woocommerce ul.products li.product a img,
.wc-block-grid__product-image img {
	background: var(--gjh-zand);
	margin-bottom: 14px;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	width: 100%;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.wc-block-grid__product-title,
.wc-block-components-product-name {
	font-family: var(--gjh-font-kop);
	font-weight: 500;
	font-size: 1.45rem;
	line-height: 1.2;
	color: var(--gjh-tekst);
	padding: 0 18px;
}

.woocommerce ul.products li.product .price,
.wc-block-grid__product-price {
	font-family: var(--gjh-font-tekst);
	font-weight: 700;
	font-size: 17px;
	color: var(--gjh-tekst);
	padding: 0 18px;
}
.woocommerce ul.products li.product .price del { color: var(--gjh-tekst-zacht); font-weight: 400; }
.woocommerce ul.products li.product .price ins { color: var(--gjh-brons); text-decoration: none; }

.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .product-action-wrap {
	margin-left: 18px;
	margin-right: 18px;
}

/* Merknaam boven titel (plugin "Perfect Brands"/WooCommerce Brands) */
.woocommerce ul.products li.product .pwb-brands-in-loop,
.woocommerce ul.products li.product .wc-brands-in-loop {
	font-family: var(--gjh-font-caps);
	font-size: 12px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--gjh-brons);
	padding: 0 18px;
}

/* Aanbieding-label */
.woocommerce span.onsale,
.wc-block-components-product-sale-badge {
	background: var(--gjh-messing);
	color: var(--gjh-groen);
	border-radius: 0;
	min-height: 0;
	min-width: 0;
	padding: 6px 10px;
	line-height: 1.2;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Sterren */
.woocommerce .star-rating span::before,
.woocommerce .star-rating::before,
.wc-block-components-product-rating__stars span::before {
	color: var(--gjh-messing);
}

/* Paginanummering en sortering */
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	border-radius: 0;
	color: var(--gjh-tekst);
}
.woocommerce nav.woocommerce-pagination ul li span.current {
	background: var(--gjh-groen);
	color: var(--gjh-ivoor-tekst);
}
.woocommerce .woocommerce-ordering select { border-radius: 0; }

/* Categorie-titels */
.woocommerce ul.products li.product-category h2.woocommerce-loop-category__title {
	font-family: var(--gjh-font-caps);
	font-size: 17px;
	font-weight: 400;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.woocommerce ul.products li.product-category mark.count { background: none; color: var(--gjh-tekst-zacht); }

/* ==========================================================================
   8. WooCommerce: productpagina
   ========================================================================== */

.woocommerce div.product .product_title {
	font-family: var(--gjh-font-kop);
	font-weight: 500;
	font-size: clamp(2.2rem, 3.5vw, 2.9rem);
	line-height: 1.08;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-family: var(--gjh-font-tekst);
	font-weight: 700;
	font-size: 24px;
	color: var(--gjh-tekst);
}

.woocommerce .woocommerce-breadcrumb,
.kadence-breadcrumbs {
	font-size: 14px;
	color: var(--gjh-tekst-zacht);
}
.woocommerce .woocommerce-breadcrumb a,
.kadence-breadcrumbs a { color: var(--gjh-tekst-zacht); text-decoration: none; }

.woocommerce div.product div.images .flex-control-thumbs li img {
	opacity: 0.7;
	border: 2px solid transparent;
}
.woocommerce div.product div.images .flex-control-thumbs li img.flex-active,
.woocommerce div.product div.images .flex-control-thumbs li img:hover {
	opacity: 1;
	border-color: var(--gjh-groen);
}

/* Variaties (maat/kleur) */
.woocommerce div.product form.cart .variations th.label label {
	font-family: var(--gjh-font-caps);
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}
.woocommerce div.product form.cart .variations select {
	min-height: 48px;
	border-radius: 0;
}
.woocommerce div.product form.cart .quantity .qty {
	min-height: 56px;
	border-radius: 0;
}

/* Tabbladen */
.woocommerce div.product .woocommerce-tabs ul.tabs {
	padding: 0;
	border-bottom: 1px solid var(--gjh-lijn);
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: transparent;
	border: 0;
	border-radius: 0;
	margin: 0 32px -1px 0;
	padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	font-family: var(--gjh-font-caps);
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gjh-tekst-zacht);
	padding: 14px 0;
	border-bottom: 2px solid transparent;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--gjh-tekst);
	border-bottom-color: var(--gjh-brons);
}
.woocommerce div.product .woocommerce-tabs .panel {
	font-size: 17px;
	max-width: 760px;
}
.woocommerce div.product .woocommerce-tabs .panel h2:first-of-type { display: none; }

/* Gerelateerde producten */
.woocommerce .related > h2,
.woocommerce .upsells > h2 {
	font-family: var(--gjh-font-kop);
	font-size: 2.2rem;
}

/* ==========================================================================
   9. WooCommerce: winkelwagen, afrekenen, account, meldingen
   ========================================================================== */

.woocommerce-message,
.woocommerce-info,
.wc-block-components-notice-banner.is-success,
.wc-block-components-notice-banner.is-info {
	background: var(--gjh-ivoor-licht);
	border-top-color: var(--gjh-brons);
	border-color: var(--gjh-lijn);
	border-radius: 0;
	color: var(--gjh-tekst);
}
.woocommerce-message::before,
.woocommerce-info::before { color: var(--gjh-brons); }
.wc-block-components-notice-banner.is-success > svg,
.wc-block-components-notice-banner.is-info > svg { background: var(--gjh-brons); }

.woocommerce-error,
.wc-block-components-notice-banner.is-error { border-radius: 0; }

.woocommerce table.shop_table,
.wc-block-cart-items {
	border-radius: 0;
	border-color: var(--gjh-lijn);
	background: var(--gjh-ivoor-licht);
}
.woocommerce table.shop_table th {
	font-family: var(--gjh-font-caps);
	font-weight: 400;
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.wc-block-components-sidebar .wc-block-components-panel,
.wc-block-components-totals-wrapper { border-color: var(--gjh-lijn); }
.wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	font-family: var(--gjh-font-tekst);
}
.wc-block-components-title.wc-block-components-title,
.wc-block-cart__totals-title,
.wc-block-components-checkout-step__title {
	font-family: var(--gjh-font-caps);
	font-weight: 400;
	font-size: 15px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.wc-block-components-radio-control__option--checked-option-highlighted,
.wc-block-components-radio-control-accordion-option--checked-option-highlighted {
	box-shadow: inset 0 0 0 2px var(--gjh-groen);
	border-radius: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
	font-family: var(--gjh-font-caps);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-size: 13px;
	color: var(--gjh-tekst);
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a { color: var(--gjh-brons); }

/* Mini-winkelwagen (Kadence zijpaneel) */
#cart-drawer .drawer-inner {
	background: var(--gjh-ivoor);
}
#cart-drawer .drawer-header {
	background: var(--gjh-groen);
	color: var(--gjh-ivoor-tekst);
}
#cart-drawer .drawer-header .side-cart-header {
	font-family: var(--gjh-font-caps);
	letter-spacing: 0.14em;
}
#cart-drawer .drawer-header .drawer-toggle { color: var(--gjh-ivoor-tekst); }

/* ==========================================================================
   10. Product dat alleen gereserveerd/afgehaald kan worden
   (producttag "alleen-afhalen" of categorie "wapens-munitie")
   ========================================================================== */

.gjh-afhaal-melding {
	display: block;
	margin: 0 0 20px;
	padding: 12px 16px;
	background: var(--gjh-ivoor-licht);
	border: 1px solid var(--gjh-messing);
	font-size: 15px;
	color: var(--gjh-tekst);
}
.gjh-afhaal-badge {
	display: inline-block;
	margin: 0 18px 8px;
	padding: 5px 9px;
	background: var(--gjh-messing);
	color: var(--gjh-groen);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}