/*
Theme Name: Puhetehdas
Theme URI: https://puhetehdas.com
Author: Puhetehdas
Author URI: https://puhetehdas.com
Description: Räätälöity WordPress-teema Puhetehdas.com -sivustolle. Suunniteltu kuvaus-, juonto- ja äänimainospalveluiden esittelyyn – tyylikäs, nopea ja mobiiliystävällinen.
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: puhetehdas
Tags: one-column, two-columns, custom-menu, custom-logo, featured-images, threaded-comments, translation-ready
*/

/* -----------------------------------------
   1. MUUTTUJAT
----------------------------------------- */
:root{
  --pt-dark: #14161c;
  --pt-dark-2: #1d2029;
  --pt-gold-light: #f4e0a3;
  --pt-gold: #cda349;
  --pt-gold-dark: #a67c27;
  --pt-gold-gradient: linear-gradient(135deg, #f4e0a3 0%, #cda349 45%, #8c6a1f 100%);
  --pt-gold-gradient-hover: linear-gradient(135deg, #e9cf85 0%, #a67c27 55%, #6b4f16 100%);
  --pt-cream: #faf6f0;
  --pt-gray: #6b7280;
  --pt-line: #e7e2da;
  --pt-radius: 14px;
  --pt-max: 1180px;
  --pt-font: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* -----------------------------------------
   2. RESET / PERUSTEET
----------------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  font-family: var(--pt-font);
  color: #232530;
  background: var(--pt-cream);
  line-height: 1.65;
  font-size: 17px;
}
img{ max-width: 100%; height: auto; display: block; }
a{ color: var(--pt-gold-dark); text-decoration: none; transition: color .15s ease; }
a:hover{ color: var(--pt-gold); }
ul{ margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4{
  font-family: var(--pt-font);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 .5em;
  color: var(--pt-dark);
  letter-spacing: -0.01em;
}
h1{ font-size: clamp(2.2rem, 5vw, 3.4rem); }
h2{ font-size: clamp(1.7rem, 3.5vw, 2.3rem); }
h3{ font-size: 1.25rem; }
p{ margin: 0 0 1.1em; }
.container{ max-width: var(--pt-max); margin: 0 auto; padding: 0 24px; }
.screen-reader-text{
  position: absolute !important;
  clip: rect(1px,1px,1px,1px);
  width: 1px; height: 1px; overflow: hidden;
}
section{ padding: 84px 0; }
.section-tight{ padding: 48px 0; }
.eyebrow{
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .75rem;
  font-weight: 700;
  color: var(--pt-gold-dark);
  margin-bottom: 14px;
}
.lead{ font-size: 1.15rem; color: var(--pt-gray); max-width: 640px; }
.center{ text-align: center; margin-left: auto; margin-right: auto; }

/* -----------------------------------------
   3. NAPIT
----------------------------------------- */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 30px;
  border-radius: 999px;
  font-weight: 600;
  font-size: .95rem;
  background: var(--pt-gold-gradient);
  color: #2a2005;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all .18s ease;
}
.btn:hover{ background: var(--pt-gold-gradient-hover); color:#fff; }
.btn-outline{
  background: transparent;
  color: var(--pt-cream);
  border: 2px solid rgba(255,255,255,.55);
}
.btn-outline:hover{ background: rgba(255,255,255,.1); color: #fff; border-color: #fff; }
.btn-dark{
  background: var(--pt-dark);
  border-color: var(--pt-dark);
  color: #fff;
}
.btn-dark:hover{ background: #000; border-color:#000; color:#fff; }

/* -----------------------------------------
   4. HEADER
----------------------------------------- */
.site-header{
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250,246,240,.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--pt-line);
}
.site-header .container{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 84px;
}
.site-branding{ display:flex; align-items:center; gap:12px; }
.site-branding img{ max-height: 46px; width:auto; }
.site-title{
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--pt-dark);
  letter-spacing: -0.02em;
}
.site-title a{ color: inherit; }
.site-description{ font-size: .72rem; color: var(--pt-gray); text-transform: uppercase; letter-spacing: .08em; }

.primary-menu{ display: flex; align-items: center; gap: 30px; }
.primary-menu li{ position: relative; }
.primary-menu a{
  color: var(--pt-dark);
  font-weight: 600;
  font-size: .95rem;
}
.primary-menu a:hover{ color: var(--pt-gold-dark); }
.primary-menu .current-menu-item > a{ color: var(--pt-gold-dark); }
.primary-menu li.menu-item-has-children > a::after{ content:" ▾"; font-size:.65em; vertical-align:middle; }

.primary-menu ul.sub-menu{
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 10px;
  background: #fff;
  border: 1px solid var(--pt-line);
  border-radius: 10px;
  padding: 8px;
  min-width: 220px;
  box-shadow: 0 20px 40px -20px rgba(20,22,28,.25);
  flex-direction: column;
  gap: 0;
  z-index: 200;
}
.primary-menu li.menu-item-has-children:hover > ul.sub-menu,
.primary-menu li.menu-item-has-children:focus-within > ul.sub-menu{ display: flex; }
.primary-menu .sub-menu li{ width: 100%; }
.primary-menu .sub-menu a{
  padding: 10px 14px;
  display: block;
  white-space: nowrap;
  border-radius: 6px;
  font-weight: 500;
}
.primary-menu .sub-menu a:hover{ background: #faf1da; }

.menu-toggle{
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
}
.menu-toggle span{ width: 26px; height: 2px; background: var(--pt-dark); border-radius: 2px; }

@media (max-width: 860px){
  .menu-toggle{ display: flex; }
  .primary-menu{
    position: absolute;
    top: 84px; left: 0; right: 0;
    background: var(--pt-cream);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    border-bottom: 1px solid var(--pt-line);
    max-height: 0;
    overflow: hidden;
    transition: max-height .25s ease;
  }
  .primary-menu.is-open{ max-height: 700px; overflow-y: auto; }
  .primary-menu li{ width: 100%; }
  .primary-menu a{ display: block; padding: 16px 24px; width: 100%; border-bottom: 1px solid var(--pt-line); }
  .primary-menu ul.sub-menu{
    display: block;
    position: static;
    box-shadow: none;
    border: none;
    border-radius: 0;
    margin: 0;
    padding: 0;
    background: rgba(0,0,0,.02);
  }
  .primary-menu .sub-menu a{ padding-left: 40px; border-radius: 0; }
}

/* -----------------------------------------
   5. HERO
----------------------------------------- */
.hero{
  background: radial-gradient(circle at 20% 20%, #24273080, transparent 60%), var(--pt-dark);
  color: var(--pt-cream);
  padding: 110px 0 100px;
  position: relative;
  overflow: hidden;
}
.hero::after{
  content: "";
  position: absolute;
  right: -120px; top: -120px;
  width: 420px; height: 420px;
  background: radial-gradient(circle, var(--pt-gold) 0%, transparent 70%);
  opacity: .3;
  pointer-events: none;
}
.hero .container{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 50px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.hero h1{ color: #fff; }
.hero h1 span{
  background: var(--pt-gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero p.lead{ color: #c9cad4; }
.hero-actions{ display:flex; gap: 16px; margin-top: 28px; flex-wrap: wrap; }
.hero-media{
  border-radius: var(--pt-radius);
  overflow: hidden;
  aspect-ratio: 4/5;
  background: #000;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.5);
}
.hero-media img{ width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 860px){
  .hero .container{ grid-template-columns: 1fr; }
  .hero-media{ aspect-ratio: 16/10; order: -1; }
}

/* -----------------------------------------
   6. PALVELUKORTIT
----------------------------------------- */
.services{ background: var(--pt-cream); }
.service-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-top: 50px;
}
.service-card{
  background: #fff;
  border: 1px solid var(--pt-line);
  border-radius: var(--pt-radius);
  padding: 34px 30px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.service-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 20px 40px -18px rgba(20,22,28,.18);
}
.service-icon{
  width: 52px; height: 52px;
  border-radius: 12px;
  background: var(--pt-gold-gradient);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
  color: #2a2005;
  font-size: 1.4rem;
}
.service-card h3{ margin-bottom: 10px; }
.service-card p{ color: var(--pt-gray); margin-bottom: 0; font-size: .96rem; }

@media (max-width: 860px){
  .service-grid{ grid-template-columns: 1fr; }
}

/* -----------------------------------------
   7. TIETOJA / SPLIT
----------------------------------------- */
.split{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.split img{ border-radius: var(--pt-radius); box-shadow: 0 20px 50px -25px rgba(20,22,28,.35); }
.stat-row{ display:flex; gap: 40px; margin-top: 28px; flex-wrap: wrap; }
.stat-row .stat b{ display:block; font-size: 2rem; color: var(--pt-gold-dark); font-weight: 800; }
.stat-row .stat span{ color: var(--pt-gray); font-size: .85rem; }

@media (max-width: 860px){
  .split{ grid-template-columns: 1fr; }
}

/* -----------------------------------------
   8. CTA -osio
----------------------------------------- */
.cta{
  background: var(--pt-dark);
  color: var(--pt-cream);
  border-radius: var(--pt-radius);
  padding: 60px;
  text-align: center;
  margin: 0 24px;
  max-width: calc(var(--pt-max) - 48px);
  margin-left: auto; margin-right: auto;
}
.cta h2{ color: #fff; }
.cta p{ color: #c9cad4; max-width: 560px; margin-left:auto; margin-right:auto; }

/* -----------------------------------------
   9. YHTEYSTIEDOT / LOMAKE
----------------------------------------- */
.contact-wrap{
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 50px;
}
.contact-info-item{ display:flex; gap: 14px; margin-bottom: 22px; }
.contact-info-item .ico{
  width: 40px; height: 40px; border-radius: 10px;
  background: #faf1da; color: var(--pt-gold-dark);
  display:flex; align-items:center; justify-content:center;
  flex-shrink: 0; font-weight: 700;
}
.wpcf7 label, form label{ display:block; font-weight: 600; margin-bottom: 6px; font-size:.9rem; }
input[type=text], input[type=email], input[type=tel], textarea, select{
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--pt-line);
  border-radius: 10px;
  font-family: inherit;
  font-size: .95rem;
  margin-bottom: 18px;
  background: #fff;
}
input:focus, textarea:focus{ outline: 2px solid var(--pt-gold); outline-offset: 1px; }
textarea{ min-height: 130px; resize: vertical; }

@media (max-width: 860px){
  .contact-wrap{ grid-template-columns: 1fr; }
}

/* -----------------------------------------
   10. ARTIKKELIT (yksittäiset sivut/postaukset)
----------------------------------------- */
.post-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 30px; margin-top: 40px; }
.post-card{ background:#fff; border:1px solid var(--pt-line); border-radius: var(--pt-radius); overflow:hidden; }
.post-card img{ aspect-ratio: 16/10; object-fit: cover; }
.post-card-body{ padding: 24px; }
.post-card .post-meta{ font-size:.78rem; color: var(--pt-gray); text-transform: uppercase; letter-spacing:.06em; margin-bottom: 8px; }
.post-card h3 a{ color: var(--pt-dark); }
.post-card h3 a:hover{ color: var(--pt-gold-dark); }

@media (max-width: 860px){ .post-grid{ grid-template-columns: 1fr; } }

article.single-post{ max-width: 780px; margin: 0 auto; }
.entry-header{ margin-bottom: 30px; }
.entry-header .post-meta{ color: var(--pt-gray); font-size:.9rem; }
.entry-content h2{ margin-top: 1.4em; }
.entry-content img{ border-radius: var(--pt-radius); margin: 20px 0; }
.entry-content blockquote{
  border-left: 4px solid var(--pt-gold);
  margin: 24px 0;
  padding: 4px 24px;
  color: var(--pt-gray);
  font-style: italic;
}

.pagination{ display:flex; gap:10px; justify-content:center; margin-top: 50px; }
.pagination a, .pagination span{
  padding: 10px 16px; border-radius: 8px; border: 1px solid var(--pt-line); color: var(--pt-dark);
}
.pagination .current{ background: var(--pt-gold-gradient); color:#2a2005; border-color: transparent; }

/* -----------------------------------------
   11. SIVUPALKKI
----------------------------------------- */
.with-sidebar{ display:grid; grid-template-columns: 2fr 1fr; gap: 50px; }
.widget{ background:#fff; border:1px solid var(--pt-line); border-radius: var(--pt-radius); padding: 26px; margin-bottom: 24px; }
.widget h2, .widget h3{ font-size: 1.05rem; margin-bottom: 14px; }
.widget ul li{ padding: 8px 0; border-bottom: 1px solid var(--pt-line); }
.widget ul li:last-child{ border-bottom: none; }

@media (max-width: 860px){ .with-sidebar{ grid-template-columns: 1fr; } }

/* -----------------------------------------
   12. KOMMENTIT
----------------------------------------- */
.comment-list{ margin-top: 30px; }
.comment-body{ background:#fff; border:1px solid var(--pt-line); border-radius: var(--pt-radius); padding: 20px 24px; margin-bottom: 18px; }
.comment-author{ font-weight: 700; }
.comment-metadata{ font-size:.8rem; color: var(--pt-gray); margin-bottom: 10px; }

/* -----------------------------------------
   13. FOOTER
----------------------------------------- */
.site-footer{
  background: var(--pt-dark);
  color: #c9cad4;
  padding: 70px 0 30px;
  margin-top: 60px;
}
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.site-footer h4{ color:#fff; font-size:1rem; margin-bottom: 18px; }
.site-footer a{ color: #c9cad4; }
.site-footer a:hover{ color: var(--pt-gold); }
.footer-logo{ font-weight: 800; font-size: 1.3rem; color:#fff; margin-bottom: 12px; }
.footer-social{ display:flex; gap: 12px; margin-top: 18px; }
.footer-social a{
  width: 38px; height:38px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25);
  display:flex; align-items:center; justify-content:center;
  font-size: .85rem;
}
.footer-social a:hover{ border-color: var(--pt-gold); background: rgba(205,163,73,.15); }
.footer-bottom{
  border-top: 1px solid rgba(255,255,255,.12);
  margin-top: 50px;
  padding-top: 24px;
  display:flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: .82rem;
  color: #8a8d99;
}

@media (max-width: 860px){ .footer-grid{ grid-template-columns: 1fr; } }

/* -----------------------------------------
   14. PALVELUSIVUJEN OSIOT (kuvaus / juonto / äänimainos)
----------------------------------------- */
.service-hero{
  background: var(--pt-dark);
  color: var(--pt-cream);
  padding: 90px 0 70px;
  text-align: center;
}
.service-hero h1{ color:#fff; }
.feature-list{ margin-top: 20px; }
.feature-list li{
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--pt-line);
  align-items: flex-start;
}
.feature-list li:last-child{ border-bottom: none; }
.feature-list .check{
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--pt-gold-gradient);
  color: #2a2005;
  display:flex; align-items:center; justify-content:center;
  flex-shrink: 0;
  font-size: .8rem;
  font-weight: 800;
}
.price-box{
  background: #fff;
  border: 1px solid var(--pt-line);
  border-radius: var(--pt-radius);
  padding: 28px 30px;
  margin-top: 20px;
}
.price-box .amount{
  font-size: 2rem;
  font-weight: 800;
  color: var(--pt-gold-dark);
}

/* -----------------------------------------
   15. UTILS
----------------------------------------- */
.bg-white{ background:#fff; }
.mt-0{ margin-top:0; }
.alignwide{ max-width: 1100px; margin-left:auto; margin-right:auto; }
.alignfull{ width: 100%; }