/*
Theme Name: Teija Rusila Art
Theme URI: https://teijarusilaart.fi
Author: Iiron IT-apu
Description: Muokattava WordPress-teema Teija Rusila Artille. Hero-teksti, taiteilijaosio ja "Enemmän kuin kuvia" -osio muokattavissa Ulkoasu → Mukauta -näkymästä. Teokset lisätään omana sisältötyyppinä (Teokset-valikko).
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: teija-rusila
*/

:root{
  --cream:#F7F3EC;
  --ink:#211E1A;
  --ink-soft:#68635A;
  --gold:#A8863F;
  --line:rgba(33,30,26,0.14);
}
*{box-sizing:border-box;}
body{margin:0; background:var(--cream); color:var(--ink); font-family:'Jost',sans-serif; font-weight:400; line-height:1.65;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px;}
.serif{font-family:'Cormorant Garamond', serif;}
.wrap{max-width:1200px; margin:0 auto; padding:0 40px;}
@media (max-width:600px){ .wrap{padding:0 24px;} }

.topbar{background:var(--ink); color:var(--cream); text-align:center; padding:9px 0; font-size:0.76rem; letter-spacing:0.04em;}

/* Sticky site header (replaces the transparent overlay nav from the mockup,
   so the same header works on every template, not just the front page) */
.site-header{position:sticky; top:0; left:0; right:0; z-index:50; background:var(--ink); padding:18px 0;}
.site-header .wrap{display:flex; justify-content:space-between; align-items:center; gap:20px;}
.brand{font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:500; font-size:1.5rem; color:var(--cream);}
.navlinks{display:flex; gap:26px; font-size:0.82rem; letter-spacing:0.03em; text-transform:uppercase; list-style:none; margin:0; padding:0;}
.navlinks li{list-style:none;}
.navlinks a{color:var(--cream); opacity:0.86; position:relative; padding-bottom:4px;}
.navlinks a:hover{opacity:1;}
.cart{color:var(--cream); font-size:0.8rem; border:1px solid rgba(247,243,236,0.4); padding:8px 14px; border-radius:20px; white-space:nowrap;}

/* Hampurilaisnappi — piilossa työpöytäkoossa, näkyy vain kapealla näytöllä */
.nav-toggle{
  display:none !important; flex-direction:column !important; align-items:stretch !important; justify-content:center !important; gap:6px !important;
  width:32px !important; height:26px !important; background:transparent !important; background-color:transparent !important;
  border:none !important; border-radius:0 !important; box-shadow:none !important; padding:0 !important; margin:0 !important;
  cursor:pointer !important; -webkit-appearance:none !important; appearance:none !important; flex-shrink:0 !important;
}
.nav-toggle span{
  display:block !important; width:100% !important; height:2px !important; min-height:2px !important;
  background:var(--cream) !important; background-color:var(--cream) !important; border-radius:0 !important;
  transition:transform .2s ease, opacity .2s ease; flex-shrink:0 !important;
}
.nav-toggle.is-active span:nth-child(1){transform:translateY(8px) rotate(45deg);}
.nav-toggle.is-active span:nth-child(2){opacity:0;}
.nav-toggle.is-active span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

@media (max-width:900px){
  .nav-toggle{display:flex !important;}
  .primary-menu-wrap{
    display:none; position:absolute; top:100%; left:0; right:0; background:var(--ink);
    padding:20px 24px 26px; border-top:1px solid rgba(247,243,236,0.12);
  }
  .primary-menu-wrap.is-open{display:block;}
  .navlinks{flex-direction:column; gap:18px; font-size:0.9rem;}
  .site-header .wrap{position:relative;}
}

/* HERO full bleed */
.hero{
  position:relative; min-height:560px; display:flex; align-items:center; overflow:hidden;
  background:linear-gradient(180deg, rgba(33,30,26,0.15), rgba(33,30,26,0.55)),
    radial-gradient(ellipse at 28% 28%, #6B4A32 0%, transparent 55%),
    radial-gradient(ellipse at 75% 68%, #3D5A76 0%, transparent 62%),
    linear-gradient(135deg, #2E2A24, #1B1815);
}
.hero-content{position:relative; z-index:5; text-align:center; margin:0 auto; padding:50px 0;}
.hero .kicker{color:#C7B49B; font-size:0.8rem; letter-spacing:0.16em; text-transform:uppercase; margin-bottom:22px; display:block;}
.hero h1{
  font-family:'Cormorant Garamond',serif; font-weight:500; color:var(--cream);
  font-size:clamp(2.6rem,7vw,5rem); margin:0 0 18px; line-height:1.06;
}
.hero p.sub{
  font-family:'Cormorant Garamond',serif; font-style:italic; color:rgba(247,243,236,0.85);
  font-size:clamp(1.1rem,2vw,1.5rem); margin:0 0 34px;
}
.btn{
  display:inline-block; border:1px solid var(--cream); color:var(--cream); padding:14px 30px;
  font-size:0.8rem; letter-spacing:0.06em; text-transform:uppercase; border-radius:2px; transition:all .2s;
}
.btn:hover{background:var(--cream); color:var(--ink);}
.scroll-cue{position:absolute; bottom:28px; left:50%; transform:translateX(-50%); color:rgba(247,243,236,0.6); font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase;}
.scroll-cue::after{content:""; display:block; width:1px; height:34px; background:rgba(247,243,236,0.5); margin:10px auto 0;}

/* SECTION */
section{padding:100px 0;}
.eyebrow{color:var(--gold); font-size:0.78rem; letter-spacing:0.14em; text-transform:uppercase; margin-bottom:16px; display:block;}
h2{font-family:'Cormorant Garamond',serif; font-weight:500; font-size:clamp(2rem,3.6vw,2.9rem); margin:0 0 16px;}
.section-lede{color:var(--ink-soft); max-width:56ch; font-size:1rem;}

/* TEOKSET */
.works-head{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:52px; flex-wrap:wrap; gap:20px;}
.works-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:30px;}
@media (max-width:860px){ .works-grid{grid-template-columns:1fr;} }
.work{display:flex; flex-direction:column;}
.work-art{aspect-ratio:1/1; position:relative; overflow:hidden; background:#E4D9C1;}
.work-art img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease;}
.work:hover .work-art img{transform:scale(1.05);}
.work figcaption{margin-top:16px;}
.work .wtitle{font-family:'Cormorant Garamond',serif; font-style:italic; font-size:1.3rem; margin:0 0 4px;}
.work .wmed{font-size:0.8rem; color:var(--ink-soft); letter-spacing:0.02em;}

/* ARTIST section — dark, quote-forward */
.artist{background:var(--ink); color:var(--cream);}
.artist-grid{display:grid; grid-template-columns:0.85fr 1.15fr; gap:60px; align-items:center;}
@media (max-width:860px){ .artist-grid{grid-template-columns:1fr;} }
.artist-portrait{aspect-ratio:4/5; position:relative; overflow:hidden; background:#2E2A24;}
.artist-portrait img{width:100%; height:100%; object-fit:cover; display:block;}
.quote{
  font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:500;
  font-size:clamp(1.5rem,3vw,2.2rem); line-height:1.35; margin:0 0 26px; color:var(--cream);
}
.artist p.body{color:rgba(247,243,236,0.72); font-size:1rem; max-width:52ch;}
.artist .eyebrow{color:var(--gold);}

/* "Enemmän kuin kuvia" band */
.meaning{background:#2D4356; color:var(--cream); text-align:center;}
.meaning .wrap{max-width:760px;}
.meaning h2{color:var(--cream);}
.meaning p{color:rgba(247,243,236,0.85); font-size:1.05rem;}

/* Muut osiot -kortit */
.pages-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:2px; background:var(--line);}
@media (max-width:820px){ .pages-grid{grid-template-columns:repeat(2,1fr);} }
.page-card{background:var(--cream); padding:36px 28px; min-height:150px; display:flex; flex-direction:column; justify-content:space-between;}
.page-card h3{font-family:'Cormorant Garamond',serif; font-style:italic; font-size:1.2rem; margin:0 0 8px;}
.page-card p{font-size:0.84rem; color:var(--ink-soft); margin:0;}
.page-card .arrow{color:var(--gold); font-size:0.9rem; margin-top:14px;}

/* Perussisältö (page.php / single.php / index.php) */
.basic-content{padding:80px 0; max-width:760px;}
.basic-content h1{font-family:'Cormorant Garamond',serif; font-weight:500; font-size:clamp(2rem,4vw,2.8rem); margin:0 0 24px;}
.basic-content .entry-content{font-size:1rem; color:var(--ink-soft);}
.basic-content .entry-content p{margin:0 0 18px;}

footer{background:var(--ink); color:rgba(247,243,236,0.6); padding:56px 0 30px;}
footer .wrap{display:flex; flex-direction:column; align-items:center; text-align:center; gap:18px;}
footer .fbrand{font-family:'Cormorant Garamond',serif; font-style:italic; font-size:1.4rem; color:var(--cream);}
footer .flinks{display:flex; gap:22px; flex-wrap:wrap; justify-content:center; font-size:0.78rem; letter-spacing:0.02em; list-style:none; margin:0; padding:0;}
footer .flinks li{list-style:none;}
footer .flinks a:hover{color:var(--gold);}
footer .flinks-legal{font-size:0.72rem; opacity:0.75; margin-top:-4px;}
footer .copyright{font-size:0.72rem; margin-top:10px;}

/* ————— WooCommerce-peruskosmetiikka ————— */
/* Perusleveys ja marginaalit kaupan sivuille tulevat .basic-content/.wrap -kääreestä (ks. functions.php). */
.woocommerce-page-wrap{padding-top:70px;}
ul.products{
  display:flex !important; flex-wrap:wrap !important; justify-content:center !important;
  gap:34px 26px !important; list-style:none; margin:0; padding:0; width:100% !important;
}
ul.products li.product{
  list-style:none; display:flex; flex-direction:column;
  flex:0 1 300px !important; max-width:340px !important; margin:0 !important; float:none !important;
}
.woocommerce ul.products li.product .work-art{aspect-ratio:1/1; overflow:hidden; background:var(--cream); width:100%;}
.woocommerce ul.products li.product .work-art img{width:100%; height:100%; object-fit:cover; display:block;}
.woocommerce ul.products li.product .work-info{margin-top:16px;}
.woocommerce ul.products li.product .wtitle{
  font-family:'Cormorant Garamond',serif; font-style:normal; font-weight:600; font-size:1.25rem; line-height:1.35; margin:0 0 6px; color:var(--ink);
}
.woocommerce ul.products li.product .wmed,
.woocommerce ul.products li.product .wmed .woocommerce-Price-amount,
.woocommerce ul.products li.product .wmed .woocommerce-Price-amount bdi,
.woocommerce ul.products li.product .wmed .woocommerce-price-suffix{
  color:var(--ink-soft) !important; font-family:'Jost',sans-serif; font-size:0.82rem; line-height:1.5; margin:0 0 12px;
}
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit{
  background:var(--ink) !important; color:var(--cream) !important; border:none !important; border-radius:2px !important;
  padding:14px 20px !important; font-family:'Jost',sans-serif; font-size:0.82rem; letter-spacing:0.03em; text-transform:uppercase;
  display:inline-block; text-align:center; height:auto !important; min-height:0 !important; max-height:none !important;
  overflow:visible !important; white-space:normal !important; line-height:1.35 !important; width:auto !important;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover{background:var(--gold);}
.woocommerce div.product p.price, .woocommerce div.product span.price{color:var(--ink); font-size:1.4rem; font-family:'Cormorant Garamond',serif;}
.woocommerce div.product .product_title{
  font-family:'Cormorant Garamond',serif !important; font-style:normal !important; font-weight:600 !important;
  font-size:2rem !important; line-height:1.25 !important; margin:0 0 16px !important; color:var(--ink) !important;
}
.woocommerce div.product p.price, .woocommerce div.product span.price,
.woocommerce div.product p.price .woocommerce-Price-amount,
.woocommerce div.product p.price .woocommerce-Price-amount bdi,
.woocommerce div.product p.price .woocommerce-price-suffix{
  color:var(--ink) !important; font-size:1.3rem !important; font-family:'Cormorant Garamond',serif !important; font-style:normal !important;
}
.woocommerce div.product div.images{ max-width:560px; margin:0 auto 20px; }
.woocommerce div.product div.images img{ width:100%; height:auto; display:block; }
.woocommerce div.product .woocommerce-product-details__short-description,
.woocommerce div.product .woocommerce-Tabs-panel,
.woocommerce div.product .product_meta{
  font-family:'Jost',sans-serif !important; font-size:0.95rem !important; color:var(--ink-soft) !important; line-height:1.7 !important;
}
.related.products, .upsells.products{
  position:static !important; float:none !important; clear:both !important; display:block !important; margin-top:40px !important;
}
.related.products > h2, .upsells.products > h2{
  font-family:'Cormorant Garamond',serif !important; font-style:normal !important; font-weight:600 !important;
  font-size:1.8rem !important; margin:0 0 30px !important; color:var(--ink) !important; text-align:center !important;
  position:static !important; float:none !important; display:block !important; width:auto !important; top:auto !important; left:auto !important;
}
.related.products > ul.products, .upsells.products > ul.products{
  position:static !important; float:none !important;
}
.woocommerce nav.woocommerce-breadcrumb{font-family:'Jost',sans-serif; font-size:0.82rem; color:var(--ink-soft); margin-bottom:24px;}
.woocommerce nav.woocommerce-breadcrumb a{color:var(--ink-soft); text-decoration:underline;}
.woocommerce table.shop_table{border-collapse:collapse; width:100%; font-family:'Jost',sans-serif; font-size:0.92rem;}
.woocommerce table.shop_table th, .woocommerce table.shop_table td{border:1px solid var(--line); padding:12px 14px;}
.woocommerce .woocommerce-message, .woocommerce .woocommerce-info, .woocommerce .woocommerce-error{
  background:var(--cream); border-left:3px solid var(--gold); padding:14px 18px; list-style:none; font-family:'Jost',sans-serif;
}
.woocommerce #payment div.payment_box, .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea{
  border:1px solid var(--line); border-radius:2px; font-family:'Jost',sans-serif;
}
/* Huom: kassa/maksutapa-lisäosien omat elementit (esim. korttikentät) voivat
   tarvita lisäsäätöä nähtyään oikean maksutavan tyylin päällekkäisyydet. */