/*
Theme Name: Studio Portfolio & Shop
Theme URI: https://example.com
Author: Jurre
Description: Quiet luxury portfolio & shop theme. Warme crème, diepe navy en antiek goud. Cormorant Garamond + DM Sans. WooCommerce-ready.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: studio-portfolio
*/

:root{
  --color-cream: #F5F0E8;
  --color-cream-dark: #EDE8DC;
  --color-navy: #0D1B2A;
  --color-gold: #C9A96E;
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'DM Sans', system-ui, sans-serif;
}

*{box-sizing:border-box;}

body{
  background: var(--color-cream);
  color: var(--color-navy);
  font-family: var(--font-sans);
  font-weight: 300;
  margin:0;
  line-height:1.6;
}

h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight:300;
  margin:0 0 .5em;
  color: var(--color-navy);
}

a{ color: inherit; text-decoration:none; }
a:hover{ color: var(--color-gold); }

.section-number{
  font-size:.7rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color: var(--color-gold);
}

.container{
  max-width:1200px;
  margin:0 auto;
  padding:0 32px;
}

/* Header */
.site-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:28px 32px;
  position:sticky;
  top:0;
  background: rgba(245,240,232,.9);
  backdrop-filter: blur(8px);
  z-index:100;
  border-bottom:1px solid rgba(13,27,42,.08);
}
.site-header .logo{
  font-family: var(--font-display);
  font-size:1.4rem;
}
.site-header nav ul{
  display:flex;
  gap:32px;
  list-style:none;
  margin:0; padding:0;
  font-size:.85rem;
  text-transform:uppercase;
  letter-spacing:.1em;
}

/* Hero */
.hero{
  background: var(--color-navy);
  color: var(--color-cream);
  padding:140px 32px;
  text-align:left;
}
.hero h1{
  color: var(--color-cream);
  font-size: clamp(3rem,8vw,7rem);
  line-height:.95;
  margin-bottom:.4em;
}
.hero p{
  color: rgba(245,240,232,.6);
  max-width:32em;
  font-weight:300;
}
.btn{
  display:inline-block;
  padding:14px 32px;
  border:1px solid var(--color-gold);
  color:inherit;
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.15em;
  margin-top:24px;
  transition:.2s;
}
.btn:hover{ background:var(--color-gold); color:var(--color-navy); }

/* Grids */
.grid{
  display:grid;
  gap:40px;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  margin:48px 0;
}
.card img{ width:100%; aspect-ratio:4/5; object-fit:cover; }
.card h3{ margin-top:16px; font-size:1.3rem; }
.card .price{ font-family:var(--font-display); font-size:1.1rem; }
.card .cat{
  font-size:.65rem; text-transform:uppercase; letter-spacing:.15em; color:var(--color-gold);
}

section{ padding:80px 0; }
section.dark{ background:var(--color-navy); color:var(--color-cream); }
section.dark h2{ color:var(--color-cream); }

footer.site-footer{
  background:var(--color-navy);
  color:rgba(245,240,232,.5);
  padding:60px 32px;
  text-align:center;
  font-size:.85rem;
}

/* WooCommerce tweaks */
.woocommerce ul.products li.product .price{ color:var(--color-navy); font-family:var(--font-display); }
.woocommerce a.button, .woocommerce button.button, .woocommerce #respond input#submit{
  background:var(--color-navy) !important;
  color:var(--color-cream) !important;
  border-radius:0 !important;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:.8rem !important;
  padding:12px 24px !important;
}
.woocommerce a.button:hover, .woocommerce button.button:hover{
  background:var(--color-gold) !important;
  color:var(--color-navy) !important;
}