/*
Theme Name: Portfolio
Theme URI: https://example.com
Author: Etunimi Sukunimi
Description: Moderni suomenkielinen portfolioteema: palvelut, työt (oma sisältötyyppi) ja blogi.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: portfolio
*/

:root {
  --bg: #ffffff;
  --soft: #eef2fb;
  --ink: #0b1b3a;
  --muted: #51607d;
  --line: #d8e0f0;
  --blue: #3a5bff;
  --sun: #ffcf4a;
  --hero: #0b1b3a;
  --on-hero: #f4f7ff;
  --card: #ffffff;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #08122a;
    --soft: #0f1d3d;
    --ink: #eaf0ff;
    --muted: #9aabcc;
    --line: #223259;
    --blue: #7d95ff;
    --hero: #0f1d3d;
    --card: #0f1d3d;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #08122a;
  --soft: #0f1d3d;
  --ink: #eaf0ff;
  --muted: #9aabcc;
  --line: #223259;
  --blue: #7d95ff;
  --hero: #0f1d3d;
  --card: #0f1d3d;
  color-scheme: dark;
}

* {
  box-sizing: border-box
}

html {
  scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 72px);
  scroll-behavior: smooth
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.6 "DM Sans", system-ui, sans-serif
}

h1,
h2,
h3 {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  margin: 0;
  letter-spacing: -.025em;
  line-height: 1.05
}

a {
  color: inherit
}

:focus-visible {
  outline: 3px solid var(--sun);
  outline-offset: 3px
}

.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 22px
}

header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 10;
  background: var(--hero);
  color: var(--on-hero)
}

header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
  gap: 10px
}

.brand {
  font: 800 20px "Bricolage Grotesque", sans-serif;
  text-decoration: none;
  letter-spacing: -.02em
}

nav {
  display: flex;
  align-items: center;
  gap: 2px
}

nav a {
  padding: 9px 13px;
  border-radius: 99px;
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
  opacity: .8
}

nav a[aria-current="page"],
nav .current-menu-item>a,
nav .current_page_item>a {
  opacity: 1;
  background: rgba(255, 255, 255, .14)
}

nav ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 2px
}

nav a.cta {
  background: var(--sun);
  color: #0b1b3a;
  opacity: 1;
  font-weight: 700;
  margin-left: 6px
}

.hero {
  background: var(--hero);
  color: var(--on-hero);
  padding: 64px 0 120px;
  border-radius: 0 0 50% 50% / 0 0 64px 64px
}

.hero .wrap {
  display: grid;
  grid-template-columns: 1.3fr .8fr;
  gap: 40px;
  align-items: center
}

.hero h1 {
  font-size: clamp(40px, 7.4vw, 84px);
  font-weight: 800
}

.hero p {
  font-size: clamp(18px, 2.2vw, 21px);
  max-width: 32em;
  margin: 22px 0 30px;
  opacity: .82
}

.btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px
}

.btn {
  display: inline-block;
  padding: 15px 26px;
  border-radius: 99px;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid currentColor
}

.btn.sun {
  background: var(--sun);
  color: #0b1b3a;
  border-color: var(--sun)
}

.win {
  background: #fff;
  color: #0b1b3a;
  border-radius: 16px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .35);
  overflow: hidden;
  transform: rotate(2deg)
}

.win .bar {
  display: flex;
  gap: 6px;
  padding: 12px 14px;
  background: #e4e9f5
}

.win .bar i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #b4bfd8
}

.win .body {
  padding: 22px
}

.win .l {
  height: 12px;
  border-radius: 6px;
  background: #dfe6f5;
  margin: 10px 0
}

.win .l.big {
  height: 26px;
  width: 80%;
  background: #0b1b3a
}

.win .tag {
  display: inline-block;
  margin-top: 14px;
  padding: 8px 16px;
  border-radius: 99px;
  background: var(--sun);
  font: 800 22px "Bricolage Grotesque", sans-serif
}

.win small {
  display: block;
  margin-top: 8px;
  color: #51607d;
  font-size: 13px
}

section.blk {
  padding: 84px 0 0
}

h2 {
  font-size: clamp(30px, 5vw, 52px);
  font-weight: 800;
  margin-bottom: 14px
}

.sub {
  color: var(--muted);
  max-width: 36em;
  margin: 0 0 36px
}

.grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px
}

.card {
  background: var(--soft);
  border-radius: 24px;
  padding: 34px
}

.card h3 {
  font-size: 30px;
  margin-bottom: 6px
}

.price {
  display: inline-block;
  font-weight: 700;
  background: var(--sun);
  color: #0b1b3a;
  padding: 3px 14px;
  border-radius: 99px;
  margin: 6px 0 16px
}

.card ul {
  margin: 0;
  padding: 0;
  list-style: none
}

.card li {
  padding: 10px 0;
  border-top: 1px solid var(--line)
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 84px;
  text-align: left
}


.why {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 48px
}

.why .wp-block-group {
  padding: 22px 0;
  border-top: 2px solid var(--ink)
}

.why h3 {
  font-size: 24px;
  margin-bottom: 6px
}

.why p {
  margin: 0;
  color: var(--muted)
}

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: s
}

.steps li {
  counter-increment: s;
  background: var(--soft);
  border-radius: 20px;
  padding: 22px
}

.steps li::before {
  content: counter(s);
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-weight: 700;
  margin-bottom: 14px
}

.steps strong {
  display: block;
  font: 700 19px "Bricolage Grotesque", sans-serif;
  margin-bottom: 4px
}


.page {
  /* padding: 64px 0 24px */
}

.page h1 {
  font-size: clamp(40px, 7vw, 76px);
  font-weight: 800;
  margin-bottom: 14px
}

.projects {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  margin-top: 36px
}

.proj {
  display: block;
  border-radius: 24px;
  overflow: hidden;
  background: var(--soft)
}

.shot {
  aspect-ratio: 16/10;
  padding: 22px;
  background: var(--c1);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: padding .25s
}

.proj:hover .shot {
  padding: 30px 22px 14px
}

.shot i {
  display: block;
  border-radius: 8px;
  background: var(--c2)
}

.shot i:nth-child(1) {
  height: 16px;
  width: 36%
}

.shot i:nth-child(2) {
  flex: 1;
  width: 80%
}

.shot i:nth-child(3) {
  height: 14px;
  width: 58%;
  opacity: .6
}

.proj .info {
  padding: 22px 26px 28px
}

.proj h3 {
  font-size: 26px
}

.proj p {
  margin: 8px 0 14px;
  color: var(--muted)
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px
}

.tags span {
  font-size: 13px;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 99px;
  background: var(--bg);
  border: 1px solid var(--line)
}

.posts {
  margin-top: 36px;
  max-width: 780px
}

details {
  border-top: 2px solid var(--ink);
  padding: 24px 0
}

details:last-child {
  border-bottom: 2px solid var(--ink)
}

summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: baseline
}

summary::-webkit-details-marker {
  display: none
}

summary h3 {
  font-size: clamp(22px, 3.4vw, 30px)
}

summary time {
  color: var(--muted);
  font-size: 14px;
  white-space: nowrap
}

details p {
  margin: 14px 0 0;
  color: var(--muted);
  max-width: 60ch
}

details[open] summary h3 {
  color: var(--blue)
}

.contact {
  margin-top: 96px;
  background: var(--hero);
  color: var(--on-hero);
  padding: 96px 0 72px;
  border-radius: 50% 50% 0 0 / 64px 64px 0 0;
  text-align: center
}

.contact h2 {
  margin-bottom: 12px
}

.contact p {
  max-width: 30em;
  margin: 0 auto 28px;
  opacity: .82
}

footer {
  background: var(--hero);
  color: var(--on-hero);
  padding: 0 0 28px;
  font-size: 14px;
  opacity: 1
}

footer .wrap {
  border-top: 1px solid rgba(255, 255, 255, .18);
  padding-top: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  opacity: .75
}

@media (max-width:820px) {
  .hero {
    padding: 44px 0 96px
  }

  .hero .wrap,
  .grid2,
  .projects,
  .why {
    grid-template-columns: 1fr
  }

  .win {
    max-width: 360px
  }

  .steps {
    grid-template-columns: 1fr 1fr
  }

  .stats {
    grid-template-columns: 1fr 1fr
  }

  nav a {
    padding: 8px 9px;
    font-size: 14px
  }

  .brand {
    font-size: 17px
  }

  nav a.cta {
    display: none
  }

  nav ul {
    flex-wrap: wrap;
    justify-content: flex-end
  }
}

@media (prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto
  }

  .shot {
    transition: none
  }
}

.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px
}

.more {
  display: inline-block;
  margin-top: 14px;
  color: var(--blue);
  font-weight: 700;
  text-decoration: none
}

.entry {
  max-width: 100%;
  margin-top: 28px
}

.entry p,
.entry li {
  color: var(--muted)
}

.entry h2,
.entry h3 {
  margin: 36px 0 12px
}

.entry a {
  color: var(--blue)
}

.entry img {
  max-width: 100%;
  height: auto;
  border-radius: 16px
}

.meta {
  color: var(--muted);
  font-size: 14px
}

.pagination {
  margin-top: 36px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap
}

.pagination a,
.pagination span {
  padding: 8px 16px;
  border-radius: 99px;
  background: var(--soft);
  text-decoration: none;
  font-weight: 500
}

.pagination .current {
  background: var(--blue);
  color: #fff
}

.screen-reader-text {
  position: absolute;
  left: -9999px
}

.alignwide,
.alignfull {
  max-width: 100%
}



/* custom styles*/
/* Traphound: editable header additions */
.site-header .brand .custom-logo-link { display: inline-flex; align-items: center; }
.site-header .brand .custom-logo { display: block; width: auto; height: auto; max-width: 180px; max-height: 56px; }
.site-header .primary-menu { list-style: none; margin: 0; padding: 0; }
.site-header .primary-menu li { position: relative; }
.site-header .primary-menu .sub-menu { list-style: none; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); white-space: nowrap; border: 0; }
.screen-reader-text:focus { position: fixed; top: 10px; left: 10px; width: auto; height: auto; padding: 12px; clip: auto; clip-path: none; background: #fff; color: #000; z-index: 9999; }


.blk-first{padding-top:72px}
.btns .wp-block-button__link{display:inline-block;padding:15px 26px;border-radius:99px;font-weight:700;font-size:inherit;line-height:inherit;text-decoration:none;border:2px solid currentColor;background:transparent;color:inherit}
.btns .sun .wp-block-button__link{background:var(--sun);color:#0b1b3a;border-color:var(--sun)}
.stat .stat-num{margin:0;font:800 clamp(44px,8vw,84px)/1 "Bricolage Grotesque",sans-serif;color:var(--blue);letter-spacing:-.03em}
.stat p:not(.stat-num){margin:0;color:var(--muted);font-size:15px}
.steps li{color:var(--muted);font-size:15px}
.steps strong{display:block;color:var(--ink);font:700 19px "Bricolage Grotesque",sans-serif;margin-bottom:4px}
.card ul.wp-block-list{padding:0;list-style:none}
.wp-block-group.card h3,.why h3{margin-top:0}

/* Gutenberg: убрать лишнюю обёртку групп, чтобы grid/flex снова работали */
.wp-block-group__inner-container{display:contents;--wp--style--block-gap:0px}

.contact-email {
  cursor: pointer;
  font: inherit;
}

.contact-hint {
  font-size: 0.875rem;
  opacity: 0.7;
  margin-top: 12px;
}


/* ====================================
   TRAPHOUND — BLOG ARCHIVE
   ==================================== */

.th-blog {
    --blog-bg: #f7f7f4;
    --blog-text: #1d282e;
    --blog-muted: #737b7d;
    --blog-border: #dfe2df;
    --blog-accent: #d46e42;

    background: var(--blog-bg);
    color: var(--blog-text);
}

.th-blog *,
.th-blog *::before,
.th-blog *::after {
    box-sizing: border-box;
}

.th-blog__container {
    width: min(100% - 48px, 1240px);
    margin-inline: auto;
}

/* HERO */

.th-blog__hero {
    padding: 100px 0 30px;
}

.th-blog__eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .15em;
}

.th-blog__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--blog-accent);
}

.th-blog__title {
    margin: 20px 0 24px;
    font-size: clamp(72px, 12vw, 176px);
    line-height: .92;
    letter-spacing: -.075em;
    font-weight: 750;
}

.th-blog__title-dot {
    color: var(--blog-accent);
}

.th-blog__intro {
    max-width: 560px;
    margin: 0 0 65px;
    color: var(--blog-muted);
    font-size: clamp(17px, 1.6vw, 21px);
    line-height: 1.6;
}

.th-blog__hero-line {
    height: 1px;
    background: var(--blog-border);
}

/* SECTION HEADING */

.th-blog__section {
    padding: 28px 0 100px;
}

.th-blog__section-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 32px;
}

.th-blog__section-heading h2 {
    margin: 0;
    font-size: clamp(23px, 2.5vw, 32px);
    letter-spacing: -.035em;
    line-height: 1.2;
}

.th-blog__section-heading span {
    font-size: 11px;
    letter-spacing: .14em;
    color: var(--blog-muted);
    font-weight: 700;
}

/* POST GRID */

.th-blog__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 48px 24px;
}

.th-blog .th-post {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

/* IMAGE */

.th-post__media {
    position: relative;
    display: block;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #e6e9e5;
    border-radius: 6px;
}

.th-post__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.th-post:hover .th-post__image {
    transform: scale(1.045);
}

/* FALLBACK IMAGE */

.th-post__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px;
    background: #1d2a31;
    color: #fff;
}

.th-post__placeholder > span:first-child {
    font-size: clamp(14px, 2vw, 24px);
    font-weight: 800;
    letter-spacing: -.06em;
}

.th-post__placeholder-symbol {
    font-size: 44px;
    font-weight: 300;
    color: #f0ab87;
}

/* POST CONTENT */

.th-post__body {
    padding-top: 20px;
}

.th-post__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
    font-size: 11px;
    color: var(--blog-muted);
}

.th-post__category {
    color: var(--blog-accent);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .09em;
}

.th-post__separator {
    color: #b8bdbb;
}

.th-post__title {
    margin: 0 0 14px;
    font-size: clamp(21px, 2vw, 27px);
    line-height: 1.22;
    letter-spacing: -.045em;
    font-weight: 750;
}

.th-post__title a {
    color: inherit;
    text-decoration: none;
}

.th-post__title a:hover {
    color: var(--blog-accent);
}

.th-post__excerpt {
    margin: 0 0 22px;
    font-size: 14px;
    line-height: 1.75;
    color: var(--blog-muted);
}

.th-post__read {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding-bottom: 5px;
    border-bottom: 1px solid currentColor;
    color: var(--blog-text);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: color .2s ease;
}

.th-post__read:hover {
    color: var(--blog-accent);
}

.th-post__read span {
    font-size: 18px;
}

/* PAGINATION */

.th-blog__pagination {
    margin-top: 80px;
}

.th-blog__pagination .nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
}

.th-blog__pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 43px;
    min-height: 43px;
    padding: 10px 14px;
    border: 1px solid var(--blog-border);
    border-radius: 4px;
    color: var(--blog-text);
    text-decoration: none;
    font-size: 13px;
    transition: .2s ease;
}

.th-blog__pagination .page-numbers.current,
.th-blog__pagination a.page-numbers:hover {
    background: var(--blog-text);
    border-color: var(--blog-text);
    color: #fff;
}

/* EMPTY STATE */

.th-blog__empty {
    padding: 90px 20px;
    text-align: center;
    border: 1px solid var(--blog-border);
    border-radius: 8px;
}

.th-blog__empty-icon {
    display: block;
    font-size: 55px;
    color: var(--blog-accent);
}

.th-blog__empty h2 {
    margin: 18px 0 10px;
    font-size: 30px;
}

.th-blog__empty p {
    color: var(--blog-muted);
    margin-bottom: 24px;
}

.th-blog__empty a {
    color: var(--blog-text);
    font-weight: 700;
}

/* BOTTOM CTA */

.th-blog__bottom {
    background: #1d282e;
    color: #fff;
    padding: 75px 0;
}

.th-blog__bottom-inner {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 40px;
}

.th-blog__bottom-label {
    font-size: 11px;
    letter-spacing: .16em;
    color: #a3afb3;
    font-weight: 700;
}

.th-blog__bottom h2 {
    margin: 18px 0 0;
    font-size: clamp(40px, 5.5vw, 76px);
    line-height: 1.04;
    letter-spacing: -.065em;
}

.th-blog__bottom h2 em {
    color: #e7a88a;
    font-style: normal;
}

.th-blog__contact {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 30px;
    padding: 16px 21px;
    background: #fff;
    color: #1d282e;
    border-radius: 4px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
}

.th-blog__contact:hover {
    background: #e7a88a;
    color: #1d282e;
}

/* ACCESSIBILITY */

.th-blog a:focus-visible {
    outline: 2px solid var(--blog-accent);
    outline-offset: 4px;
}

/* TABLET */

@media (max-width: 1024px) {
    .th-blog__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 42px 22px;
    }

    .th-blog__hero {
        padding-top: 80px;
    }
}

/* MOBILE */

@media (max-width: 640px) {
    .th-blog__container {
        width: min(100% - 36px, 1240px);
    }

    .th-blog__hero {
        padding: 65px 0 25px;
    }

    .th-blog__title {
        font-size: clamp(64px, 17vw, 96px);
    }

    .th-blog__intro {
        margin-bottom: 40px;
    }

    .th-blog__section {
        padding-bottom: 65px;
    }

    .th-blog__section-heading span {
        display: none;
    }

    .th-blog__grid {
        grid-template-columns: 1fr;
        gap: 46px;
    }

    .th-post__title {
        font-size: 25px;
    }

    .th-blog__pagination {
        margin-top: 55px;
    }

    .th-blog__bottom {
        padding: 55px 0;
    }

    .th-blog__bottom-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .th-post__image,
    .th-post__read,
    .th-blog__pagination .page-numbers {
        transition: none;
    }
}


.slider-sec{padding:84px 0 0}
.slider-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:24px}
.slider-head h2{margin:0}
.slider-btns{display:flex;gap:8px}
.slider-btn{width:48px;height:48px;border-radius:50%;border:2px solid var(--ink);background:transparent;color:var(--ink);font-size:20px;line-height:1;cursor:pointer}
.slider-btn:hover{background:var(--ink);color:var(--bg)}
.slider{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:16px;scrollbar-width:thin}
.slide{flex:0 0 min(82%,420px);scroll-snap-align:start;text-decoration:none}
.slide-img{aspect-ratio:16/10;border-radius:20px;overflow:hidden;background:var(--c1);padding:20px;display:flex;flex-direction:column;gap:10px}
.slide-img.has-img{padding:0}
.slide-img img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.slide:hover .slide-img img{transform:scale(1.05)}
.slide-img i{display:block;border-radius:8px;background:var(--c2)}
.slide-img i:nth-child(1){height:16px;width:36%}
.slide-img i:nth-child(2){flex:1;width:80%}
.slide-img i:nth-child(3){height:14px;width:58%;opacity:.6}
.slide-title{display:block;margin:14px 4px 0;font:700 22px "Bricolage Grotesque",sans-serif}
@media (prefers-reduced-motion:reduce){.slide-img img{transition:none}}