/*
Theme Name:   XStore Child – Ferloa
Template:     xstore
Description:  Childtheme voor ferloa.com. Bevat alleen huisstijl (letters, kleurvariabelen) en kleine correcties; alle winkellogica zit in de plugin Ferloa Core.
Version:      0.3.0
Text Domain:  ferloa
*/

/* Lettertypen lokaal (AVG-vriendelijk). Bestanden ophalen met scripts/fonts-ophalen.sh. */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 500; font-display: swap; src: url("assets/fonts/cormorant-garamond-latin-500-italic.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/jost-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/fonts/jost-latin-500-normal.woff2") format("woff2"); }

:root {
	--f-papier: #FAF8F4;
	--f-wit: #FFFFFF;
	--f-inkt: #2A2A2E;
	--f-grijs: #5C5A57;
	--f-goud: #B39A63;
	--f-goud-licht: #C8B07A;
	--f-donker: #1E1A22;
	--f-lila: #411E63;
	--f-lijn: #E4DED3;
}

/*
 * Basis. XStore Theme Options blijft leidend voor header, footer en layout;
 * zet daar dezelfde waarden (zie docs/ONTWERP.md). Deze regels vangen alleen restjes op.
 */
body { background-color: var(--f-papier); color: var(--f-inkt); }
body, button, input, select, textarea { font-family: "Jost", "Helvetica Neue", Arial, sans-serif; }
h1, h2, h3, .product_title, .page-heading .title {
	font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	font-weight: 500;
	letter-spacing: 0;
}
h1 { line-height: 1.02; }
h1 em, h2 em, h3 em { font-style: italic; }

/* Donkere footer (XStore footer-builder: achtergrond #1E1A22 instellen; dit vangt tekstkleuren op). */
.ferloa-footer-donker, .ferloa-footer-donker a { color: #E9E5DD; }
.ferloa-footer-donker h4, .ferloa-footer-donker .widget-title { color: var(--f-goud-licht); }
p, li { max-width: 72ch; }
a { color: var(--f-inkt); text-underline-offset: .18em; }
a:hover { color: var(--f-lila); }
:focus-visible { outline: 2px solid var(--f-lila); outline-offset: 2px; }

/* Prijzen in WooCommerce rustig en goed leesbaar. */
.woocommerce-Price-amount { font-variant-numeric: lining-nums tabular-nums; }
.woocommerce-price-suffix { font-size: .8em; color: var(--f-grijs); }

/* Zichtbare TODO-markering in conceptpagina's. Verwijder de alinea zodra het punt is ingevuld. */
.ferloa-todo { border: 1px dashed #B39A63; background: #FFFBEF; padding: .6rem .9rem; font-size: .9rem; }

/* Footer (ontwerp v2) */
.ferloa-footer { background: var(--f-donker); color: #E9E5DD; font-size: .95rem; padding: 4.5rem clamp(20px, 5vw, 64px) 2.5rem; }
.ferloa-footer__binnen { max-width: 1312px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.5rem; }
.ferloa-footer__logo img { width: 130px; height: auto; display: block; margin-bottom: 1.4rem; }
.ferloa-footer p { margin: 0; line-height: 1.8; }
.ferloa-footer a { color: #E9E5DD; text-decoration: none; }
.ferloa-footer a:hover { color: var(--f-goud-licht); }
.ferloa-footer__merk a[href^="mailto"] { text-decoration: underline; }
.ferloa-footer__kop { font-family: "Jost", "Helvetica Neue", Arial, sans-serif; font-size: .95rem; font-weight: 500; color: var(--f-goud-licht); margin: 0 0 1.1rem; letter-spacing: 0; text-transform: none; }
.ferloa-footer__lijst { list-style: none; margin: 0; padding: 0; }
.ferloa-footer__lijst li { margin: 0 0 .7rem; }
.ferloa-footer__regel { max-width: 1312px; margin: 3.5rem auto 0 !important; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.14); font-size: .8rem; color: #BDB7AC; }
@media (max-width: 64rem) { .ferloa-footer__binnen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 30rem) { .ferloa-footer__binnen { grid-template-columns: 1fr 1fr; gap: 2rem 1.25rem; } .ferloa-footer__merk { grid-column: 1 / -1; } }

/* Knoppen in WooCommerce en XStore: pilvorm, inkt, hover lila (ontwerp v2). */
.woocommerce .button, .woocommerce button.button, .woocommerce a.button, .btn, .single_add_to_cart_button, .checkout-button, #place_order, .wp-element-button {
	border-radius: 999px !important; background-color: var(--f-inkt) !important; border-color: var(--f-inkt) !important; color: #fff !important; text-transform: none !important; letter-spacing: 0 !important;
}
.woocommerce .button:hover, .btn:hover, .single_add_to_cart_button:hover, .checkout-button:hover, #place_order:hover, .wp-element-button:hover { background-color: var(--f-lila) !important; border-color: var(--f-lila) !important; }

/* Volle-breedtesecties zonder horizontale scrollbalk. */
.template-container, .template-content, .page-wrapper { overflow-x: clip; }
.content-page > div > .row > .content { width: 100%; }

/* Header: XStore zet border-style:solid zonder breedte (= 3px); in het ontwerp zijn er geen randen. */
.header-wrapper .header-main-menu .menu > li > a,
.header-wrapper .et_b_header-account > a,
.header-wrapper .et_b_header-cart > a,
.header-wrapper .et_b_header-mobile-menu > a,
.header-wrapper .et_element > a.et-toggle { border-width: 0 !important; }
.header-wrapper .header-main { border-width: 0; }
.header-wrapper .header-main-menu .menu > li > a { padding: 10px 18px; font-size: 15px; }
.header-wrapper .header-main-menu .menu > li > a:hover, .header-wrapper .header-main-menu .menu > li.current-menu-item > a { color: var(--f-goud-licht); }

/* Gewone pagina's (contact, FAQ, voorwaarden): rustige kop en witruimte zoals in het ontwerp. */
.back-history { display: none !important; }
.page .content-page { padding-top: 1.5rem; padding-bottom: clamp(3rem, 6vw, 6rem); }
.content-page h1.wp-block-heading { font-size: clamp(2.4rem, 4vw, 3.6rem); margin: 1.25rem 0 1.5rem; }
.content-page h2.wp-block-heading:not(.ferloa-kop) { font-size: clamp(1.6rem, 2.4vw, 2.1rem); margin: 2.5rem 0 1rem; }
.content-page .wp-block-details { border-bottom: 1px solid var(--f-lijn); padding: 1rem 0; max-width: 760px; }
.content-page .wp-block-details summary { cursor: pointer; font-weight: 500; }
button.ferloa-knop, .ferloa-formulier button { text-transform: none !important; letter-spacing: 0 !important; }
.ferloa-formulier :is(input:not([type=checkbox]):not([type=radio]), textarea, select) {
	width: 100%; max-width: 560px; border: 1px solid var(--f-lijn); border-radius: 10px; background: #fff; padding: .75rem 1rem; font: inherit; color: var(--f-inkt);
}
.page .content-page:has(.ferloa-hero) { padding-top: 0; padding-bottom: 0; }
.et_b_header-cart > a, .et_b_header-account > a, .et_b_header-mobile-menu > a, .et_b_header-wishlist > a { border-width: 0 !important; }