/*
Theme Name: AMarantowe Studio
Theme URI:
Author: Gogler
Description: Motyw strony pracowni projektowania wnętrz AMarantowe Studio z Białegostoku.
Version: 0.3.0
Requires at least: 6.3
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: amarantowestudio-theme
*/

/* ═══════════════════════════════════════════════════════════════════════════
   1. TOKENY - docs/design.md (v2, 2026-10-06) + inspiracje: POLYVA (hero, przejścia), ELORIA (stopka)
   ═══════════════════════════════════════════════════════════════════════════ */
@font-face { font-family: "Alegreya Sans"; src: url("assets/fonts/alegreya-sans-500.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("assets/fonts/figtree.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }

:root {
	/* Tła sekcji (pole „Tło sekcji” w panelu) */
	--biel: #FFFFFF;
	--tynk: #F4F4F2;
	--mgla: #E9E9E6;
	--beton: #D9D8D3;
	--puder: #F8EEF3;
	--grafit: #2A2B2D;
	--grafit-gleboki: #212224;

	/* Tekst i linie */
	--tekst: #2A2B2D;
	--popiol: #55565A;
	--kamien: #6F6F6E;
	--linia: #D9D8D3;          /* cienkie linie siatki na jasnym tle */
	--linia-ciemna: #3E3F43;   /* linie na graficie */
	--na-grafit: #D6D6D3;
	--na-grafit-2: #BDBDBA;

	/* Amarant z logo: logo, łuk, wyróżnienia, przyciski */
	--amarant: #DD338C;
	--amarant-ciemny: #C0247A;   /* tło przycisków - biały tekst 5,6:1 */
	--amarant-hover: #A81E6B;
	--amarant-jasny: #E58BB8;    /* wyróżnienia na graficie */

	--font-naglowki: "Alegreya Sans", "Trebuchet MS", sans-serif;
	--font-tekst: "Figtree", "Segoe UI", system-ui, sans-serif;

	--kontener: 1320px;
	--kontener-tekst: 46rem;
	--margines: clamp(16px, 4vw, 48px);
	--odstep-sekcji: clamp(4rem, 2.8rem + 5vw, 8.5rem);
	--odstep-kolumn: clamp(16px, 2vw, 32px);
	--promien-panelu: clamp(18px, 2vw, 28px);
	--luk: clamp(56px, 10vw, 180px);       /* sygnatura: jeden zaokrąglony róg (zasięg skrzydła drzwi) */
	--ruch: cubic-bezier(.6, 0, .2, 1);
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. BAZA
   ═══════════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--biel); color: var(--tekst); font: 400 1.0625rem/1.7 var(--font-tekst); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--amarant-ciemny); outline-offset: 3px; }
.tlo-grafit :focus-visible, .stopka :focus-visible { outline-color: var(--amarant-jasny); }

.kontener { width: min(100% - 2 * var(--margines), var(--kontener)); margin-inline: auto; }
.kontener--tekst { max-width: var(--kontener-tekst); margin-inline: 0; }
.kontener.kontener--tekst { width: min(100% - 2 * var(--margines), var(--kontener)); max-width: none; margin-inline: auto; }
.kontener.kontener--tekst > * { max-width: var(--kontener-tekst); }

.tylko-dla-czytnikow { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pomin-do-tresci { position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: .75rem 1rem; background: var(--grafit); color: #fff; }
.pomin-do-tresci:focus { top: 1rem; }

/* Typografia */
h1, h2, h3, h4 { font-family: var(--font-naglowki); font-weight: 500; letter-spacing: -.005em; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.3rem, 1.6rem + 2.8vw, 4rem); line-height: 1.04; }
h2 { font-size: clamp(1.8rem, 1.3rem + 1.9vw, 2.9rem); line-height: 1.08; }
h3 { font-size: 1.4rem; line-height: 1.2; }
h1 em, h2 em, h3 em, .hero-haslo__tekst em, .stopka__haslo em { font-style: normal; color: var(--amarant); }
.tlo-beton h2 em { color: var(--amarant-ciemny); }
.tlo-grafit h2 em, .tlo-grafit h3 em, .stopka__haslo em { color: var(--amarant-jasny); }
p { margin: 0 0 1em; }
.etykieta { margin: 0 0 1rem; font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--popiol); }
.lead-sekcji { font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); line-height: 1.6; margin: 1rem 0 0; }

/* Treść z edytora (sekcje tekstowe, wpisy, realizacje) */
.tresc > :first-child { margin-top: 0; }
.tresc > :last-child { margin-bottom: 0; }
.tresc h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin: 2.2em 0 .7em; }
.tresc h3 { margin: 1.8em 0 .5em; }
.tresc h4 { font-size: 1.15rem; margin: 1.5em 0 .4em; }
.tresc ul, .tresc ol { padding-left: 1.2em; margin: 0 0 1.2em; }
.tresc li { margin-bottom: .4em; }
.tresc li::marker { color: var(--amarant-ciemny); }
.tresc a { text-decoration: underline; text-decoration-color: var(--amarant); text-decoration-thickness: 1.5px; text-underline-offset: .2em; }
.tresc a:hover { color: var(--amarant-ciemny); }
.tresc img { margin: 1.5em 0; border-radius: 0 var(--promien-panelu) 0 0; }
.tresc table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: .97rem; }
.tresc th, .tresc td { padding: .7em .8em; border-bottom: 1px solid var(--linia); text-align: left; vertical-align: top; }
.tresc blockquote { margin: 1.5em 0; padding-left: 1.2em; border-left: 2px solid var(--amarant); font-family: var(--font-naglowki); font-size: 1.25rem; line-height: 1.4; }
.tlo-grafit .tresc a { text-decoration-color: var(--amarant-jasny); }

/* Przyciski: róż jako główne wezwanie, jeden zaokrąglony róg (echo sygnatury) */
.przycisk { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 48px; padding: .75rem 1.5rem; border: 0; border-radius: 0 20px 0 0; background: var(--amarant-ciemny); color: #fff; font: 600 .95rem/1.1 var(--font-tekst); text-decoration: none; cursor: pointer; transition: background-color .25s, color .25s, box-shadow .25s; }
.przycisk:hover { background: var(--amarant-hover); color: #fff; }
.przycisk--obrys { background: transparent; color: var(--tekst); box-shadow: inset 0 0 0 1.5px var(--tekst); }
.przycisk--obrys:hover { background: var(--tekst); color: #fff; }
.tlo-grafit .przycisk--obrys, .stopka .przycisk--obrys { color: #fff; box-shadow: inset 0 0 0 1.5px var(--na-grafit-2); }
.tlo-grafit .przycisk--obrys:hover { background: #fff; color: var(--tekst); }
.przycisk__strzalka { transition: transform .3s var(--ruch); }
.przycisk:hover .przycisk__strzalka { transform: translateX(3px); }
.przyciski { display: flex; flex-wrap: wrap; gap: .75rem; }
.link-strzalka { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; text-decoration: underline; text-decoration-color: var(--amarant); text-decoration-thickness: 2px; text-underline-offset: .35em; }
.link-strzalka:hover { color: var(--amarant-ciemny); }
.tlo-grafit .link-strzalka:hover { color: var(--amarant-jasny); }

/* Sygnatura: łuk drzwi */
.luk { border-top-right-radius: var(--luk); overflow: hidden; }
.luk-rama { position: relative; }
.luk-sierp { --odsuw: clamp(10px, 1.1vw, 16px); position: absolute; top: calc(-1 * var(--odsuw)); right: calc(-1 * var(--odsuw)); width: calc(var(--luk) + var(--odsuw)); height: calc(var(--luk) + var(--odsuw)); overflow: visible; pointer-events: none; z-index: 2; }
.luk-sierp path { fill: var(--amarant); }

/* ═══════════════════════════════════════════════════════════════════════════
   3. NAGŁÓWEK - siatka z cienkimi liniami (POLYVA), logo | menu | przycisk
   ═══════════════════════════════════════════════════════════════════════════ */
.naglowek { position: relative; z-index: 50; background: var(--biel); }
.naglowek__siatka { display: grid; grid-template-columns: 5fr 3fr 4fr; align-items: stretch; min-height: 84px; border-bottom: 1px solid var(--linia); }
.naglowek__komorka { display: flex; align-items: center; padding: 0 clamp(14px, 2vw, 28px); }
.naglowek__komorka--marka { padding-left: 0; }
.naglowek__komorka--menu { border-left: 1px solid var(--linia); border-right: 1px solid var(--linia); justify-content: center; }
.naglowek__komorka--akcja { justify-content: flex-end; gap: 1rem; padding-right: 0; }
.marka { display: inline-flex; align-items: center; text-decoration: none; }
.marka__logo { width: clamp(160px, 14vw, 205px); height: auto; }
.marka__wordmark { font: 500 1.4rem/1 var(--font-naglowki); }

/* Na stronie głównej nagłówek leży na panelu hero: przezroczysty, linie siatki przechodzą w kolumny panelu */
.naglowek--na-panelu { background: transparent; position: absolute; left: 0; right: 0; top: 0; }

.nawigacja__lista { display: flex; gap: clamp(.9rem, 1.6vw, 1.8rem); margin: 0; padding: 0; list-style: none; font: 500 .95rem/1 var(--font-tekst); }
.nawigacja__lista > li { position: relative; }
.nawigacja__lista a { display: block; padding: .7rem 0; text-decoration: none; white-space: nowrap; }
.nawigacja__lista a:hover, .nawigacja__lista .current-menu-item > a, .nawigacja__lista .current-menu-ancestor > a { text-decoration: underline; text-decoration-color: var(--amarant); text-decoration-thickness: 2px; text-underline-offset: .55em; }
.nawigacja__lista .sub-menu { position: absolute; top: 100%; left: -1rem; min-width: 15rem; margin: 0; padding: .6rem 1rem; list-style: none; background: var(--biel); border: 1px solid var(--linia); border-radius: 0 16px 0 0; box-shadow: 0 18px 40px -24px rgba(20, 21, 23, .35); opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s .2s; }
.nawigacja__lista .sub-menu .sub-menu { position: static; border: 0; box-shadow: none; padding: 0 0 0 .9rem; opacity: 1; visibility: inherit; min-width: 0; }
.nawigacja__lista li:hover > .sub-menu, .nawigacja__lista li:focus-within > .sub-menu { opacity: 1; visibility: visible; transition: opacity .2s; }
.nawigacja__lista .sub-menu a { padding: .5rem 0; font-weight: 400; }
.podmenu-przelacznik { display: none; }
.nawigacja__cta { display: none; }
.menu-przycisk { display: none; width: 48px; height: 48px; border: 1.5px solid var(--tekst); border-radius: 0 16px 0 0; background: transparent; cursor: pointer; }
.menu-przycisk__kreski, .menu-przycisk__kreski::before, .menu-przycisk__kreski::after { display: block; width: 20px; height: 1.5px; margin: auto; background: currentColor; transition: transform .3s var(--ruch), opacity .2s; }
.menu-przycisk__kreski { position: relative; }
.menu-przycisk__kreski::before, .menu-przycisk__kreski::after { content: ""; position: absolute; left: 0; }
.menu-przycisk__kreski::before { top: -6px; }
.menu-przycisk__kreski::after { top: 6px; }
.menu-przycisk[aria-expanded="true"] .menu-przycisk__kreski { background: transparent; }
.menu-przycisk[aria-expanded="true"] .menu-przycisk__kreski::before { transform: translateY(6px) rotate(45deg); }
.menu-przycisk[aria-expanded="true"] .menu-przycisk__kreski::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1180px) {
	.naglowek__siatka { grid-template-columns: auto 1fr auto; }
	.nawigacja__lista { gap: .9rem; font-size: .9rem; }
}
@media (max-width: 960px) {
	.naglowek__siatka { grid-template-columns: 1fr auto; min-height: 72px; }
	.naglowek__komorka--menu { border: 0; padding: 0; }
	.naglowek__komorka--akcja { padding-left: 0; }
	.naglowek__cta { display: none; }
	.menu-przycisk { display: inline-flex; align-items: center; justify-content: center; }
	.nawigacja { position: fixed; inset: 0 0 0 auto; width: min(100%, 420px); z-index: 60; overflow-y: auto; padding: 6rem var(--margines) 2rem; background: var(--biel); border-left: 1px solid var(--linia); transform: translateX(100%); visibility: hidden; transition: transform .45s var(--ruch), visibility 0s .45s; }
	.nawigacja.jest-otwarte { transform: none; visibility: visible; transition: transform .45s var(--ruch); }
	.nawigacja__lista { flex-direction: column; gap: 0; font-size: 1.15rem; }
	.nawigacja__lista > li { display: flex; flex-wrap: wrap; align-items: center; border-bottom: 1px solid var(--linia); }
	.nawigacja__lista > li > a { flex: 1; padding: 1rem 0; min-height: 48px; }
	.nawigacja__lista .sub-menu { position: static; flex-basis: 100%; display: none; opacity: 1; visibility: visible; border: 0; box-shadow: none; padding: 0 0 1rem 1rem; }
	.nawigacja__lista .is-otwarte > .sub-menu { display: block; }
	.nawigacja__lista .sub-menu a { padding: .6rem 0; min-height: 44px; }
	.podmenu-przelacznik { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 0; background: none; cursor: pointer; }
	.podmenu-przelacznik span { width: 9px; height: 9px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .25s; }
	.is-otwarte > .podmenu-przelacznik span { transform: rotate(-135deg); }
	.nawigacja__cta { display: inline-flex; margin-top: 2rem; width: 100%; }
	.menu-przycisk { position: relative; z-index: 70; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   4. STOPKA - zdjęcie realizacji na całą szerokość ekranu, hasło + przycisk, wpuszczona jasna karta
      (inspiracja Furnivo). Sekcja bez zaokrągleń; róg z łukiem ma tylko karta (blok).
   ═══════════════════════════════════════════════════════════════════════════ */
.stopka { background: var(--grafit-gleboki); }
.stopka__panel { position: relative; isolation: isolate; padding: clamp(4rem, 3rem + 5vw, 8rem) max(var(--margines), (100% - var(--kontener)) / 2) clamp(16px, 2.4vw, 36px); color: #fff; }
.stopka__tlo { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--grafit-gleboki); }
.stopka__tlo img { width: 100%; height: 100%; object-fit: cover; }
.stopka__tlo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 21, 23, .62) 0%, rgba(20, 21, 23, .38) 45%, rgba(20, 21, 23, .55) 100%); }
.stopka__gora { display: flex; flex-direction: column; align-items: flex-start; gap: 1.8rem; padding: 0 clamp(1.25rem, 1rem + 2.5vw, 3.2rem) clamp(3rem, 2rem + 4vw, 6rem); }
.stopka__haslo { max-width: 18ch; margin: 0; font: 500 clamp(2.1rem, 1.4rem + 3vw, 4.2rem)/1.02 var(--font-naglowki); color: #fff; text-wrap: balance; }
.stopka__karta { position: relative; background: var(--biel); color: var(--tekst); border-top-right-radius: var(--luk); padding: clamp(1.5rem, 1rem + 2.5vw, 3.2rem) clamp(1.25rem, 1rem + 2.5vw, 3.2rem) 1.25rem; font-size: .96rem; }
.stopka__karta a { text-decoration: none; }
.stopka__karta a:hover { color: var(--amarant-ciemny); }
.stopka__siatka { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 2.5rem var(--odstep-kolumn); padding-bottom: clamp(2rem, 3vw, 3rem); }
.stopka__logo { width: clamp(170px, 15vw, 220px); }
.stopka__opis { max-width: 36ch; margin: 1.1rem 0 1.4rem; color: var(--popiol); }
.stopka__profile { display: flex; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.stopka__profile a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--linia); border-radius: 50%; transition: background-color .25s, border-color .25s, color .25s; }
.stopka__profile a:hover { background: var(--tekst); border-color: var(--tekst); color: #fff; }
.stopka__profile .ikona { width: 18px; height: 18px; }
.stopka__tytul-kolumny { margin: .35rem 0 1.1rem; font: 500 1.1rem/1.2 var(--font-naglowki); color: var(--tekst); }
.stopka__kolumna ul { list-style: none; margin: 0; padding: 0; }
.stopka__kolumna li { margin-bottom: .55rem; }
.stopka__kolumna a, .stopka__kontakt { color: var(--popiol); }
.stopka__kontakt address { font-style: normal; margin-bottom: .8rem; }
.stopka__kontakt p { margin: 0 0 .35rem; }
.stopka__godziny { margin-top: .8rem !important; }
.stopka__dol { display: flex; justify-content: space-between; align-items: center; gap: .75rem 2rem; flex-wrap: wrap; padding-top: 1.25rem; border-top: 1px solid var(--linia); font-size: .85rem; color: var(--popiol); }
.stopka__dol p { margin: 0; }
.stopka__prawne { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.stopka .luk-sierp { --odsuw: clamp(8px, 1vw, 14px); }
.stopka__karta .stopka__siatka { padding-right: clamp(0px, 4vw, 3rem); }
@media (max-width: 1080px) {
	.stopka__siatka { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.stopka__marka { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
	.stopka__siatka { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.stopka__kontakt { grid-column: 1 / -1; }
	.stopka__cta { width: 100%; }
}