/*
Theme Name:   UldSjæl Child
Theme URI:    https://uldsjael.dk
Description:  Child theme for UldSjæl webshop, based on Kadence
Author:       UldSjæl
Author URI:   https://uldsjael.dk
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:  uldsjael-child
*/

/* ============================================================
   IMPORT GOOGLE FONTS
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Jost:wght@300;400;500&display=swap');

/* ============================================================
   CSS VARIABLES
   ============================================================ */
:root {
  --cream:        #f1e9da;
  --cream-dark:   #e8dcc8;
  --cream-deeper: #ddd0b8;
  --ink:          #2c2416;
  --ink-soft:     #5a4f3e;
  --ink-muted:    #9a8e7e;
  --accent:       #7a6248;
  --accent-light: #b8966e;
  --white:        #fdfaf6;
  --serif:        'Cormorant Garamond', Georgia, serif;
  --sans:         'Jost', sans-serif;
}

/* ============================================================
   GLOBAL
   ============================================================ */
body {
  background-color: var(--cream) !important;
  font-family: var(--sans) !important;
  font-weight: 300;
  color: var(--ink);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--serif) !important;
  font-weight: 300;
  color: var(--ink);
}

a {
  color: var(--accent);
}

a:hover {
  color: var(--ink);
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header,
#masthead,
.kadence-sticky-header {
  background-color: var(--ink) !important;
  border-bottom: none !important;
}

/* Logo sizing */
.site-branding img,
.custom-logo {
  max-height: 80px !important;
  width: auto !important;
}

/* Nav links */
.main-navigation a,
.kadence-navigation a,
#site-navigation a {
  font-family: var(--sans) !important;
  font-size: 0.78rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--cream-dark) !important;
}

.main-navigation a:hover,
.kadence-navigation a:hover,
#site-navigation a:hover {
  color: var(--accent-light) !important;
}

/* Cart icon in header */
.header-cart-wrap a,
.kadence-header-cart a {
  color: var(--cream-dark) !important;
}

/* ============================================================
   SVG WAVE — injected via functions.php
   The .header-wave-wrap div is added after the header
   ============================================================ */
.header-wave-wrap {
  display: block;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  margin-top: -1px;
  background: transparent;
  pointer-events: none;
}

.header-wave-wrap svg {
  display: block;
  width: 100%;
  height: clamp(60px, 8vw, 110px);
}

/* ============================================================
   KADENCE HERO / PAGE TITLE BANNER — remove white bg, use cream
   ============================================================ */
.kadence-inner-column-inner,
.wp-block-kadence-column,
.hero-section,
.page-hero-section,
.kadence-page-title,
.entry-hero,
.entry-hero-container-inner,
.site-above-entry-header,
.entry-header-wrap {
  background-color: var(--cream) !important;
  background-image: none !important;
}

/* Hide the default page title "UldSjæl" text if showing site name */
.entry-hero .entry-title,
.page-hero-section .entry-title,
.site-above-entry-header .entry-title {
  display: none !important;
}

/* Make sure the hero area padding doesn't leave a white gap */
.entry-hero {
  padding: 0 !important;
  min-height: 0 !important;
}


.site-content,
.content-area,
main#primary,
.wp-site-blocks,
.entry-content,
#page,
.site {
  background-color: var(--cream) !important;
}

/* Override any Kadence default pale blue/grey */
body,
body.uldsjael-theme {
  background-color: var(--cream) !important;
}

/* ============================================================
   WOOCOMMERCE — PRODUCT CARDS
   ============================================================ */
ul.products li.product,
.woocommerce ul.products li.product {
  background: var(--white) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

ul.products li.product:hover,
.woocommerce ul.products li.product:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 40px rgba(44,36,22,0.1) !important;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--serif) !important;
  font-size: 1.2rem !important;
  font-weight: 400 !important;
  color: var(--ink) !important;
}

.woocommerce ul.products li.product .price {
  font-family: var(--serif) !important;
  font-size: 1.1rem !important;
  color: var(--ink) !important;
}

/* ============================================================
   WOOCOMMERCE — BUTTONS
   ============================================================ */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
  background-color: var(--ink) !important;
  color: var(--cream) !important;
  font-family: var(--sans) !important;
  font-size: 0.78rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  padding: 0.9rem 2rem !important;
  border: none !important;
  transition: background-color 0.25s !important;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce button.button.alt:hover {
  background-color: var(--accent) !important;
  color: var(--white) !important;
}

/* ============================================================
   WOOCOMMERCE — SINGLE PRODUCT
   ============================================================ */
.woocommerce div.product .product_title {
  font-family: var(--serif) !important;
  font-weight: 300 !important;
  font-size: clamp(1.8rem, 3vw, 2.8rem) !important;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: var(--serif) !important;
  font-size: 1.5rem !important;
  color: var(--ink) !important;
}

/* ============================================================
   WOOCOMMERCE — CART & CHECKOUT
   ============================================================ */
.woocommerce-cart table.cart,
.woocommerce-checkout .woocommerce {
  background: var(--white) !important;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
  border-color: var(--cream-deeper) !important;
  background: var(--white) !important;
  border-radius: 0 !important;
  font-family: var(--sans) !important;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
  border-color: var(--accent) !important;
  outline: none !important;
  box-shadow: none !important;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer,
#colophon {
  background-color: var(--ink) !important;
  color: var(--cream-dark) !important;
}

.site-footer a,
#colophon a {
  color: var(--cream-dark) !important;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.site-footer a:hover,
#colophon a:hover {
  opacity: 1;
  color: var(--accent-light) !important;
}

.site-footer h2,
.site-footer h3,
.site-footer h4,
#colophon h2,
#colophon h3,
#colophon h4 {
  color: var(--accent-light) !important;
  font-family: var(--sans) !important;
  font-size: 0.68rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
}

/* ============================================================
   PAGES & POSTS — GENERAL
   ============================================================ */
.entry-content p,
.page-content p {
  font-family: var(--sans) !important;
  font-weight: 300 !important;
  font-size: 0.95rem !important;
  line-height: 1.85 !important;
  color: var(--ink-soft) !important;
}

.entry-title,
.page-title {
  font-family: var(--serif) !important;
  font-weight: 300 !important;
  font-style: italic !important;
}

/* ============================================================
   MISC
   ============================================================ */

/* Remove default Kadence button radius everywhere */
button, .button, input[type="submit"] {
  border-radius: 0 !important;
}

/* Subtle grain texture overlay */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
  opacity: 0.02;
  pointer-events: none;
  z-index: 9999;
}