/*
Theme Name: Rochowski 2026
Theme URI: https://rochowski.org
Author: Dorian Rochowski
Author URI: https://rochowski.org
Description: Personal block theme for rochowski.org — hipsterski outdoor magazine 2026, FSE-only, self-hosted Fraunces + Newsreader + JetBrains Mono. Cream paper + charcoal + forest green + rust orange.
Version: 1.0.0
Requires at least: 6.6
Tested up to: 6.9
Requires PHP: 8.0
License: GPLv2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rochowski-2026
Tags: blog, one-column, custom-colors, custom-menu, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, threaded-comments, translation-ready
*/

/* Minimalna baza — większość styli przez theme.json + bloki */

/* fonty self-hosted — patrz assets/fonts/fonts.css (enqueued w functions.php) */

/* paper grain overlay */
body::before{
  content:""; position: fixed; inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: .22;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.1  0 0 0 0 0.09  0 0 0 0 0.08  0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* sticky header backdrop blur */
.r26-sticky-header{
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(6px);
  background: rgba(244,240,232,.92);
  border-bottom: 1px solid rgba(26,24,23,.14);
}

/* meta caps utility */
.r26-meta-caps{
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--wp--preset--color--ink-soft);
}
.r26-meta-caps.is-mid{ color: var(--wp--preset--color--ink-mid); }
.r26-meta-caps.is-rust{ color: var(--wp--preset--color--rust); }

/* badge inline */
.r26-badge{
  display: inline-block;
  padding: .22rem .5rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.r26-badge.is-forest{ background: var(--wp--preset--color--forest); color: var(--wp--preset--color--bg); }
.r26-badge.is-rust{ background: var(--wp--preset--color--rust); color: var(--wp--preset--color--bg); }
.r26-badge.is-dark{ background: var(--wp--preset--color--bg-ink); color: var(--wp--preset--color--bg); }
.r26-badge.is-light{ background: var(--wp--preset--color--bg); color: var(--wp--preset--color--ink); border: 1px solid rgba(26,24,23,.14); }

/* content drop cap on single first paragraph */
.r26-single-content > p:first-of-type::first-letter{
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "opsz" 144, "SOFT" 20, "wght" 700;
  font-size: 4.2em;
  float: left;
  line-height: .85;
  margin: .1em .15em -.1em 0;
  color: var(--wp--preset--color--rust);
}

/* hover highlight on card titles */
.r26-card-title a{
  background-image: linear-gradient(transparent 60%, rgba(184,85,42,0) 60%);
  transition: background .25s cubic-bezier(.2,.7,.2,1);
}
.r26-card:hover .r26-card-title a{
  background-image: linear-gradient(transparent 60%, rgba(184,85,42,.25) 60%);
}

/* —— ARCHIVE LIST — wiersze z mocną kolumnową strukturą ——
   Markup: <div class="r26-archive-row">
             <div class="r26-archive-row-inner">[date][title][cat]</div>
           </div>
   Każdy wiersz: GRID 80px+1fr+140px (rok | tytuł | kategoria), hover slide + strzałka. */
.r26-archive-row{
  border-bottom: 1px solid rgba(26,24,23,.14);
  position: relative;
  transition: background .25s ease;
}
.r26-archive-row:first-child{
  border-top: 1px solid rgba(26,24,23,.14);
}
.r26-archive-row:hover{
  background: var(--wp--preset--color--bg-deep);
}
/* indicator strzałki po prawej, pojawia się on hover */
.r26-archive-row::after{
  content: "→";
  position: absolute;
  right: 1.2rem; top: 50%;
  transform: translateY(-50%);
  font-family: 'JetBrains Mono', monospace;
  font-size: 1rem;
  color: var(--wp--preset--color--ink-soft);
  opacity: 0;
  transition: opacity .25s, right .25s, color .25s;
  pointer-events: none;
}
.r26-archive-row:hover::after{
  opacity: 1; right: .8rem;
  color: var(--wp--preset--color--rust);
}

/* override flex z block markup → grid */
.r26-archive-row .r26-archive-row-inner{
  display: grid !important;
  grid-template-columns: 80px 1fr 140px !important;
  gap: 1.4rem !important;
  align-items: baseline !important;
  padding: 1.4rem 2.2rem 1.4rem 0.4rem;
  flex-wrap: nowrap !important;
  justify-content: initial !important;
}
@media (max-width: 760px){
  .r26-archive-row .r26-archive-row-inner{
    grid-template-columns: 60px 1fr !important;
    padding-right: 2rem;
    gap: 1rem !important;
    row-gap: .3rem !important;
  }
  .r26-archive-row .cat-tag{
    grid-column: 2 / 3;
    text-align: left !important;
    margin-top: -.2rem;
  }
}

/* tytuł — Fraunces, hover underline rust */
.r26-archive-row .wp-block-post-title{
  margin: 0;
}
.r26-archive-row .wp-block-post-title a{
  color: var(--wp--preset--color--ink);
  text-decoration: none;
  background-image: linear-gradient(transparent 92%, rgba(184,85,42,0) 92%);
  transition: background .25s;
}
.r26-archive-row:hover .wp-block-post-title a{
  background-image: linear-gradient(transparent 92%, rgba(184,85,42,.55) 92%);
}

/* kategoria w prawej kolumnie — mono caps forest, prawostronnie */
.r26-archive-row .cat-tag,
.r26-archive-row .wp-block-post-terms{
  text-align: right;
  white-space: nowrap;
  align-self: center;
}
.r26-archive-row .wp-block-post-terms a{
  color: var(--wp--preset--color--forest);
  text-decoration: none;
}

/* data — rok mono, wycentrowane w pionie */
.r26-archive-row .wp-block-post-date{
  align-self: center;
}

/* dark category tile */
.r26-dark-tile{
  background: var(--wp--preset--color--bg-ink);
  color: var(--wp--preset--color--bg);
  padding: 1.6rem 1.4rem;
  display: flex; flex-direction: column; gap: .4rem;
  text-decoration: none;
  min-height: 130px;
  transition: background .2s;
}
.r26-dark-tile:hover{ background: #2A2624; }
.r26-dark-tile .cat-name{
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "opsz" 60, "SOFT" 20, "wght" 600;
  font-size: 1.55rem;
  letter-spacing: -.02em;
  line-height: 1;
}
.r26-dark-tile .cat-count{
  margin-top: auto;
  color: rgba(244,240,232,.55);
}
.r26-dark-tile .cat-count strong{ color: var(--wp--preset--color--rust); font-weight: 500; }

/* contact form (page-kontakt) */
.r26-contact-form{
  display: grid; gap: 1.2rem;
  max-width: 560px;
}
.r26-contact-form label{
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--wp--preset--color--ink-mid);
  margin-bottom: .35rem;
}
.r26-contact-form input[type=text],
.r26-contact-form input[type=email],
.r26-contact-form textarea{
  width: 100%;
  padding: .9rem 1rem;
  background: var(--wp--preset--color--bg);
  border: 1px solid rgba(26,24,23,.2);
  font-family: 'Newsreader', Georgia, serif;
  font-size: 1rem;
  color: var(--wp--preset--color--ink);
  border-radius: 0;
}
.r26-contact-form textarea{ min-height: 180px; resize: vertical; }
.r26-contact-form input:focus,
.r26-contact-form textarea:focus{
  outline: none;
  border-color: var(--wp--preset--color--rust);
  box-shadow: 0 0 0 3px rgba(184,85,42,.15);
}
.r26-contact-form .r26-honey{
  position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important;
}
.r26-contact-form button{
  justify-self: start;
  background: var(--wp--preset--color--bg-ink);
  color: var(--wp--preset--color--bg);
  border: none;
  padding: 1rem 2rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s;
}
.r26-contact-form button:hover{ background: var(--wp--preset--color--rust); }
.r26-contact-msg{
  padding: 1rem 1.2rem;
  margin-bottom: 1.5rem;
  border-left: 3px solid var(--wp--preset--color--forest);
  background: var(--wp--preset--color--bg-deep);
}
.r26-contact-msg.is-error{ border-left-color: var(--wp--preset--color--rust); }

/* fade-in on load */
@keyframes r26-rise{ from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }
.r26-rise{ animation: r26-rise .8s cubic-bezier(.2,.7,.2,1) both; }
.r26-rise-d1{ animation-delay: .08s; }
.r26-rise-d2{ animation-delay: .16s; }
.r26-rise-d3{ animation-delay: .24s; }

/* —— MAGAZINE POSTS GRID — wspólne reguły dla front-page i archive ——
   wp:query renderuje:
     <div class="wp-block-query r26-...-grid">
       <div class="wp-block-post-template">  ← rzeczywiste dzieci to <wp-block-post>
         <div class="wp-block-post">…</div>
         <div class="wp-block-post">…</div>
       </div>
     </div>
   Dlatego grid musi być na .wp-block-post-template, nie na .wp-block-query. */
/* !important żeby przebić ewentualne late-injected WP block-supports CSS */
.r26-posts-grid > .wp-block-post-template,
.r26-archive-grid > .wp-block-post-template,
ul.wp-block-post-template.is-layout-flow:where(.r26-posts-grid *, .r26-archive-grid *){
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: clamp(2rem, 3vw, 3rem) clamp(1.8rem, 2.5vw, 2.5rem);
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (min-width: 640px){
  .r26-posts-grid > .wp-block-post-template,
  .r26-archive-grid > .wp-block-post-template{ grid-template-columns: repeat(2, 1fr) !important; }
}
@media (min-width: 960px){
  .r26-posts-grid > .wp-block-post-template,
  .r26-archive-grid > .wp-block-post-template{ grid-template-columns: repeat(3, 1fr) !important; }
}
/* dla każdego li w grid resetuj marżę */
.r26-posts-grid .wp-block-post-template > li,
.r26-archive-grid .wp-block-post-template > li{
  margin: 0 !important; width: auto !important;
}
.r26-posts-grid .wp-block-post,
.r26-archive-grid .wp-block-post{ display: flex; flex-direction: column; gap: 1rem; }

.r26-posts-grid .wp-block-post-featured-image,
.r26-archive-grid .wp-block-post-featured-image,
.r26-posts-grid .r26-card-media,
.r26-archive-grid .r26-card-media{
  position: relative;
  background: var(--wp--preset--color--bg-deep);
  aspect-ratio: 4/3;
  overflow: hidden;
  border: 1px solid rgba(26,24,23,.08);
  display: block;
  margin: 0;
}
.r26-posts-grid .wp-block-post-featured-image img,
.r26-archive-grid .wp-block-post-featured-image img{
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* placeholder gdy brak featured image */
.r26-posts-grid .wp-block-post-featured-image:empty,
.r26-archive-grid .wp-block-post-featured-image:empty{
  background:
    linear-gradient(135deg, var(--wp--preset--color--bg-deep) 0%, rgba(63,87,51,.25) 100%),
    repeating-linear-gradient(45deg, transparent 0 16px, rgba(26,24,23,.04) 16px 17px);
}
.r26-posts-grid .wp-block-post-featured-image:empty::after,
.r26-archive-grid .wp-block-post-featured-image:empty::after{
  content: "";
  position: absolute; inset: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 150' preserveAspectRatio='xMidYMid slice'><path d='M0,110 L40,80 L70,95 L110,65 L150,90 L180,75 L200,85 L200,150 L0,150 Z' fill='%231A1817' opacity='0.55'/><circle cx='150' cy='40' r='14' fill='%23B8552A' opacity='0.85'/></svg>") center/cover no-repeat;
}

/* —— SINGLE POST: TOC po lewej + content (z marginesem) —— */
.r26-single-layout{
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--wp--preset--spacing--md);
}
@media (min-width: 960px){
  .r26-single-layout{ grid-template-columns: 220px minmax(0, 1fr); }
}
.r26-single-content{
  max-width: 720px;
  /* margines po lewej na desktop dla oddychu — content nie klei się do TOC ani lewej krawędzi */
  padding-left: 0;
}
@media (min-width: 960px){
  .r26-single-content{ padding-left: 1.5rem; }
}
.r26-single-content h2{ margin-top: 2.4rem; margin-bottom: 1rem; scroll-margin-top: 90px; }
.r26-single-content h3{ margin-top: 1.8rem; margin-bottom: .8rem; scroll-margin-top: 90px; }
.r26-single-content p{ margin: 0 0 1.2rem; }
.r26-single-content img{ max-width: 100%; height: auto; }
.r26-single-content blockquote{
  border-left: 3px solid var(--wp--preset--color--rust);
  padding-left: 1.2rem;
  font-style: italic;
  color: var(--wp--preset--color--ink-mid);
  margin: 1.5rem 0;
}

/* —— TOC sticky po lewej w single —— */
.r26-toc{
  position: sticky;
  top: 90px;
  align-self: start;
  font-family: 'JetBrains Mono', monospace;
  font-size: .8rem;
  line-height: 1.5;
  border-left: 1px solid rgba(26,24,23,.14);
  padding-left: 1rem;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
}
.r26-toc-label{
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--wp--preset--color--ink-soft);
  margin-bottom: 1rem;
  display: block;
}
.r26-toc ol{
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: toc-counter;
}
.r26-toc li{
  counter-increment: toc-counter;
  margin: .5rem 0;
}
.r26-toc li.is-h3{
  margin-left: 1rem;
  font-size: .72rem;
}
.r26-toc a{
  color: var(--wp--preset--color--ink-mid);
  text-decoration: none;
  transition: color .2s, padding-left .2s;
  display: block;
  padding: .15rem 0 .15rem .15rem;
  border-left: 2px solid transparent;
  margin-left: -.4rem;
  padding-left: .4rem;
}
.r26-toc a:hover,
.r26-toc a.is-active{
  color: var(--wp--preset--color--rust);
  border-left-color: var(--wp--preset--color--rust);
}
@media (max-width: 960px){
  .r26-toc{
    position: static;
    max-height: none;
    margin-bottom: 2rem;
    padding: 1.2rem;
    border-left: none;
    background: var(--wp--preset--color--bg-deep);
  }
}

/* —— RELATED GRID w single —— */
.r26-related-grid > .wp-block-post-template{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.5rem;
  list-style: none;
  padding: 0;
}
.r26-related-grid .wp-block-post{ display: flex; flex-direction: column; gap: .6rem; }
.r26-related-grid .wp-block-post-featured-image{
  background: var(--wp--preset--color--bg-deep);
  aspect-ratio: 4/3;
  overflow: hidden;
  border: 1px solid rgba(26,24,23,.08);
}
.r26-related-grid .wp-block-post-featured-image img{ width: 100%; height: 100%; object-fit: cover; }

/* —— DARK CATEGORIES BAND —— */
.r26-dark-band{
  background: var(--wp--preset--color--bg-ink);
  color: var(--wp--preset--color--bg);
  padding: clamp(3rem, 5vw, 5rem) 0;
  position: relative;
  overflow: hidden;
}
.r26-dark-band::before{
  content:""; position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(244,240,232,.02) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(90deg, rgba(244,240,232,.02) 0 1px, transparent 1px 96px);
  pointer-events: none;
}
.r26-dark-band-inner{
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--wp--preset--spacing--md);
  position: relative;
}
.r26-cats-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: rgba(244,240,232,.12);
  border: 1px solid rgba(244,240,232,.12);
  margin-top: 2rem;
}
@media (min-width: 760px){ .r26-cats-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1080px){ .r26-cats-grid{ grid-template-columns: repeat(6, 1fr); } }

/* —— SECTION HEAD —— */
.r26-section-head{
  max-width: 1400px;
  margin: 0 auto;
  padding: clamp(3rem, 6vw, 5rem) var(--wp--preset--spacing--md) 1.5rem;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap;
}
.r26-section-head h2{
  margin: 0;
  font-variation-settings: "opsz" 80, "SOFT" 30, "wght" 500;
}
.r26-section-head h2 em{
  font-style: normal; font-weight: 600;
  color: var(--wp--preset--color--rust);
}
.r26-section-head .arch-link{
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--wp--preset--color--ink-mid);
  border-bottom: 1px solid var(--wp--preset--color--rust);
  padding-bottom: .15rem;
  text-decoration: none;
}

/* —— HERO —— */
.r26-hero{
  max-width: 1400px;
  margin: 0 auto;
  padding: clamp(2rem,6vw,5rem) var(--wp--preset--spacing--md) clamp(3rem, 7vw, 6rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}
@media (min-width: 960px){
  .r26-hero{ grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 4vw, 4.5rem); align-items: end; }
}
.r26-hero h1{
  font-size: clamp(2.6rem, 7.2vw, 6.4rem);
  font-variation-settings: "opsz" 144, "SOFT" 70, "wght" 600;
  margin: 0 0 1.6rem;
  line-height: 1.04;
  letter-spacing: -.015em;
}
.r26-hero h1 em{
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 500;
  color: var(--wp--preset--color--rust);
}
.r26-hero .dek{
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.55;
  color: var(--wp--preset--color--ink-mid);
  max-width: 38em;
}
.r26-hero-media{
  position: relative;
  aspect-ratio: 4/5;
  background: var(--wp--preset--color--bg-ink);
  overflow: hidden;
}
.r26-hero-media img{ width: 100%; height: 100%; object-fit: cover; display: block; }

.r26-divider{
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--wp--preset--spacing--md);
  position: relative;
}
.r26-divider .label{
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: var(--wp--preset--color--bg);
  padding: .5rem 1.2rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--wp--preset--color--ink-mid);
  border: 1px solid rgba(26,24,23,.14);
}

/* —— ABOUT BAND —— */
.r26-about{
  background: var(--wp--preset--color--bg-deep);
  border-top: 1px solid rgba(26,24,23,.14);
  border-bottom: 1px solid rgba(26,24,23,.14);
  padding: clamp(3rem, 5vw, 5rem) 0;
  margin-top: 3rem;
}
.r26-about-inner{
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--wp--preset--spacing--md);
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}
@media (min-width: 960px){
  .r26-about-inner{ grid-template-columns: 380px 1fr; gap: 4rem; }
}
.r26-about p:first-of-type::first-letter{
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "opsz" 144, "SOFT" 20, "wght" 700;
  font-size: 4.2em;
  float: left;
  line-height: .85;
  margin: .1em .15em -.1em 0;
  color: var(--wp--preset--color--rust);
}