/*
Theme Name: Snafen
Theme URI: https://snafen.wpress.se/
Author: Consilex AB
Author URI: https://consilex.se/
Description: Thème portfolio vidéo — panneau latéral fixe en rose poudré, fond plein écran et bloc de contenu blanc. Conçu pour Snafen.
Version: 0.2.1
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: snafen
Tags: portfolio, video, one-column, custom-menu, custom-logo, featured-images, translation-ready
*/

:root{
  --panel-1:#4a2a35; --panel-2:#2c161e;
  --accent:#d98ca3; --accent-strong:#c2607f;
  --hero-1:#6d4350; --hero-2:#2a171f; --hero-3:#8f6470;
  --page-1:#5b3b46; --page-2:#241419;

  --paper:#ffffff;
  --ink:#241a1e;
  --ink-soft:#5d4d53;
  --rule:#e6dadd;
  --mist:#f7f2f3;

  --sidebar-w:22rem;
  --shell:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--page-2);
  color:var(--ink);
  font-family:"Karla","Helvetica Neue",Arial,sans-serif;
  font-size:1.0625rem;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.screen-reader-text{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);white-space:nowrap;
}
.skip-link:focus{
  position:fixed;left:1rem;top:1rem;z-index:50;background:#fff;color:var(--ink);
  padding:.75rem 1rem;width:auto;height:auto;clip:auto;
}

/* ---------- Bakgrundsskikt ---------- */
.backdrop{position:fixed;inset:0;z-index:0}
.backdrop--hero{
  background:
    radial-gradient(120% 90% at 72% 18%, rgba(255,255,255,.22), transparent 55%),
    radial-gradient(90% 70% at 20% 90%, var(--hero-3), transparent 60%),
    linear-gradient(168deg, var(--hero-1) 0%, var(--hero-2) 78%);
}
.backdrop--page{
  background:
    radial-gradient(100% 80% at 85% 10%, rgba(255,255,255,.16), transparent 60%),
    linear-gradient(190deg, var(--page-1) 0%, var(--page-2) 85%);
}
.grain{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.35;
  background-image:radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px);
  background-size:3px 3px;mix-blend-mode:soft-light;
}

/* ---------- Sidopanel ---------- */
.sidebar{
  position:fixed;top:0;left:0;z-index:5;
  width:var(--sidebar-w);
  min-height:min(42rem,100vh);
  padding:3.25rem 2.75rem 2.5rem;
  display:flex;flex-direction:column;gap:2.75rem;
  background:linear-gradient(160deg,color-mix(in srgb,var(--panel-1) 92%,transparent),color-mix(in srgb,var(--panel-2) 94%,transparent));
  color:#fbeef1;
  box-shadow:0 30px 80px rgba(20,8,14,.35);
}
.wordmark{display:block;text-decoration:none;line-height:1}
.wordmark b{
  display:block;font-family:"Archivo",sans-serif;font-weight:800;
  font-size:2.1rem;letter-spacing:.16em;text-transform:uppercase;color:#fff;
}
.wordmark span{
  display:block;margin-top:.45rem;font-family:"Archivo",sans-serif;font-weight:400;
  font-size:.72rem;letter-spacing:.62em;text-transform:uppercase;color:var(--accent);
}
.wordmark img{max-width:100%;height:auto}
.nav{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1.25rem}
.nav li{margin:0}
.nav a{
  font-family:"Archivo",sans-serif;font-size:.86rem;font-weight:500;
  letter-spacing:.3em;text-transform:uppercase;text-decoration:none;
  color:#f6e6ea;display:flex;align-items:center;gap:.7rem;
  transition:color .2s ease;
}
.nav a .arrow{color:var(--accent);transform:translateX(-.25rem);opacity:.75;transition:transform .2s ease}
.nav a:hover,.nav a:focus-visible,
.nav .current-menu-item > a,.nav .current_page_item > a{color:var(--accent)}
.nav a:hover .arrow,.nav a:focus-visible .arrow{transform:translateX(.15rem);opacity:1}
.social{list-style:none;margin:auto 0 0;padding:0;display:flex;gap:1.15rem}
.social li{margin:0}
.social a{color:#e8cfd6;opacity:.85;display:block;transition:color .2s ease,opacity .2s ease}
.social a:hover,.social a:focus-visible{color:var(--accent);opacity:1}
.social svg{width:17px;height:17px;display:block;fill:currentColor}
.colophon{font-size:.78rem;line-height:1.55;color:#cba9b4;margin:0}

/* ---------- Ytor ---------- */
.stage{position:relative;z-index:2;margin-left:var(--sidebar-w);min-height:100vh}

/* Startsida */
.hero{
  min-height:min(94vh,860px);
  display:flex;align-items:flex-end;justify-content:flex-end;
  padding:6rem 4.5rem 5rem 3rem;
}
.hero-copy{max-width:46rem;text-align:right}
.hero-copy h1{
  margin:0;
  font-family:"Archivo",sans-serif;font-weight:800;text-transform:uppercase;
  font-size:clamp(2.6rem,7vw,5.6rem);line-height:.95;letter-spacing:-.015em;
  color:#fff;text-wrap:balance;text-shadow:0 2px 40px rgba(30,10,20,.35);
}
.hero-copy h1 .small{display:block;font-size:.42em;letter-spacing:.06em;font-weight:600;color:var(--accent)}
.hero-copy .intro{
  margin:1.6rem 0 0;font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(1.15rem,2vw,1.6rem);font-weight:300;line-height:1.5;color:#f7e9ed;
}
.hero-copy .reel{
  display:inline-flex;align-items:center;gap:.8rem;margin-top:2.2rem;
  padding:.85rem 1.6rem;border:1px solid rgba(255,255,255,.45);
  font-family:"Archivo",sans-serif;font-size:.78rem;letter-spacing:.28em;
  text-transform:uppercase;color:#fff;text-decoration:none;
  transition:background .25s ease,border-color .25s ease;
}
.hero-copy .reel:hover,.hero-copy .reel:focus-visible{background:var(--accent-strong);border-color:var(--accent-strong)}
.hero-copy .reel svg{width:12px;height:12px;fill:currentColor}

/* Vitt innehållsblock */
.sheet{
  background:var(--paper);
  max-width:var(--shell);
  margin:2.5rem 4.5rem 5rem 0;
  padding:4.25rem clamp(1.75rem,4vw,4rem) 4.5rem;
  box-shadow:0 40px 90px rgba(25,10,18,.28);
}
.sheet .page-title,.sheet .entry-title{
  margin:0;font-family:"Archivo",sans-serif;font-weight:400;text-transform:uppercase;
  font-size:clamp(2rem,4.4vw,3.1rem);letter-spacing:.01em;line-height:1.05;color:var(--ink);
}
.rule{display:block;width:3.5rem;height:2px;background:var(--accent-strong);margin:1.6rem 0 2.6rem}
.entry-content p,.archive-description p{max-width:65ch}
.entry-content > *{margin-top:0;margin-bottom:1.4rem}
.entry-content h2{font-family:"Archivo",sans-serif;font-weight:600;font-size:1.6rem;letter-spacing:.01em;margin-top:2.6rem}
.entry-content h3{font-family:"Archivo",sans-serif;font-weight:600;font-size:1.25rem;margin-top:2rem}
.entry-content a{color:var(--accent-strong);text-underline-offset:3px}
.entry-content ul,.entry-content ol{max-width:65ch;padding-left:1.3rem}
.entry-content blockquote,.wp-block-quote{
  margin:2.6rem 0;padding:1.6rem 1.9rem;background:var(--mist);
  border-left:3px solid var(--accent-strong);max-width:65ch;
  font-family:"Cormorant Garamond",Georgia,serif;font-size:1.35rem;line-height:1.5;color:var(--ink);
}
.entry-content blockquote p{margin:0}
.entry-content table{width:100%;border-collapse:collapse}
.entry-content th,.entry-content td{border-bottom:1px solid var(--rule);padding:.6rem .4rem;text-align:left}
.table-scroll{overflow-x:auto}
.entry-meta{
  font-family:"Archivo",sans-serif;font-size:.74rem;letter-spacing:.26em;
  text-transform:uppercase;color:var(--accent-strong);margin:0 0 1.4rem;
}

/* Portfolio-rutnät */
.filters{display:flex;flex-wrap:wrap;gap:.6rem;margin:0 0 2.5rem;padding:0;list-style:none}
.filters a{
  display:inline-block;font-family:"Archivo",sans-serif;font-size:.72rem;letter-spacing:.2em;
  text-transform:uppercase;padding:.55rem 1rem;border:1px solid var(--rule);
  color:var(--ink-soft);text-decoration:none;
  transition:border-color .2s ease,color .2s ease,background .2s ease;
}
.filters a:hover,.filters a:focus-visible{border-color:var(--accent-strong);color:var(--accent-strong)}
.filters .is-current a{background:var(--ink);border-color:var(--ink);color:#fff}
.grid{columns:2;column-gap:1.5rem}
.work{break-inside:avoid;margin:0 0 1.5rem;display:block;text-decoration:none;color:inherit}
.work .frame{
  position:relative;display:flex;align-items:center;justify-content:center;
  min-height:14rem;overflow:hidden;background-size:cover;background-position:center;
}
.work .frame::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(60% 60% at 50% 45%,rgba(255,255,255,.16),rgba(20,8,14,.35) 85%);
}
.work .play{
  position:relative;z-index:1;width:58px;height:58px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.8);display:grid;place-items:center;
  transition:background .25s ease,border-color .25s ease,transform .25s ease;
}
.work .play svg{width:14px;height:14px;fill:#fff;margin-left:2px}
.work:hover .play,.work:focus-visible .play{background:var(--accent-strong);border-color:var(--accent-strong);transform:scale(1.08)}
.work .dur{
  position:absolute;z-index:1;right:.8rem;bottom:.8rem;
  font-family:"Archivo",sans-serif;font-size:.7rem;letter-spacing:.12em;
  color:#fff;background:rgba(20,8,14,.55);padding:.25rem .55rem;font-variant-numeric:tabular-nums;
}
.work h2,.work h3{
  margin:1rem 0 .3rem;font-family:"Archivo",sans-serif;font-weight:600;
  font-size:1.05rem;letter-spacing:.01em;color:var(--ink);
}
.work .meta{margin:0;font-size:.82rem;letter-spacing:.06em;color:var(--ink-soft);display:flex;gap:.5rem;flex-wrap:wrap}
.work .meta span::after{content:"·";margin-left:.5rem;color:var(--rule)}
.work .meta span:last-child::after{content:""}

.player{margin:0 0 2.5rem;aspect-ratio:16/9;max-width:100%}
.player iframe{width:100%;height:100%;border:0;display:block}
.player--vertical{aspect-ratio:auto;max-width:420px}
.player--vertical iframe{height:720px;width:100%;background:var(--mist)}
.work .frame--vertical{min-height:22rem}
.credit{font-size:.86rem;color:var(--ink-soft);margin:0 0 2rem}
.credit a{color:var(--accent-strong)}
.services{list-style:none;margin:2.2rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1.2rem 2rem}
.services li{display:flex;gap:.75rem;align-items:flex-start;font-size:.98rem}
.services li::before{content:"";flex:0 0 auto;width:.5rem;height:.5rem;margin-top:.62rem;background:var(--accent-strong)}

.pagination{margin-top:3rem;display:flex;gap:.5rem;flex-wrap:wrap;font-family:"Archivo",sans-serif;font-size:.8rem;letter-spacing:.12em}
.pagination .page-numbers{padding:.5rem .85rem;border:1px solid var(--rule);text-decoration:none;color:var(--ink-soft)}
.pagination .current{background:var(--ink);border-color:var(--ink);color:#fff}

.facts{margin:3rem 0 0;padding:2rem 0 0;border-top:1px solid var(--rule);display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:1.6rem 2rem}
.facts div{display:flex;flex-direction:column;gap:.3rem}
.facts dt{font-family:"Archivo",sans-serif;font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;color:var(--accent-strong)}
.facts dd{margin:0;font-size:.98rem;color:var(--ink)}

@media (max-width:760px){.grid{columns:1}}
@media (max-width:1000px){
  :root{--sidebar-w:0px}
  .sidebar{position:static;width:100%;min-height:0;padding:2rem 1.5rem;gap:1.75rem}
  .nav{flex-direction:row;flex-wrap:wrap;gap:.9rem 1.4rem}
  .social{margin:1rem 0 0}
  .stage{margin-left:0}
  .hero{padding:4rem 1.5rem 3.5rem;min-height:auto;justify-content:flex-start}
  .hero-copy{text-align:left}
  .sheet{margin:1.5rem 1rem 3rem;padding:2.5rem 1.5rem 3rem}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
}