/* ==========================================================================
   Infatisarea site-ului.

   Doua lumi, atat: HARTIE pentru tot ce se citeste, NOAPTE pentru tot ce se
   priveste. Fara a treia culoare. Culoarea o dau fotografiile.

   Albastrul implicit al temei (#2872fa) nu mai apare nicaieri — el era motivul
   principal pentru care pagina arata a sablon.
   ========================================================================== */

:root {
	--cl-hartie:        #FAF9F7;  /* fundalul paginii, alb cald, nu #fff */
	--cl-hartie-umbra:  #F1EEE9;  /* casete, citate, randuri alternate */
	--cl-cerneala:      #1F1D1B;  /* titluri, butoane, linkuri */
	--cl-text:          #35312D;  /* corpul textului, cu un pic de aer */
	--cl-sters:         #7A736A;  /* legende, date, secundar */
	--cl-linie:         #E3DED6;  /* chenare, despartitoare */

	--cl-noapte:        #111110;  /* fundalul sectiunilor cu fotografii */
	--cl-noapte-text:   #D9D5CF;
	--cl-noapte-sters:  #8C8780;

	--cl-serif:  "Instrument Serif", Georgia, "Times New Roman", serif;
	--cl-sans:   "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	--cl-citit:  min(680px, 90vw);   /* latimea coloanei de text */
	--cl-larg:   min(1180px, 94vw);  /* latimea fotografiilor */
}

/* --- paleta temei, rescrisa ---------------------------------------------- */
:root,
body {
	--theme-palette-color-1: #1F1D1B;  /* era albastru: link si buton */
	--theme-palette-color-2: #7A736A;  /* era albastru inchis: hover */
	--theme-palette-color-3: #35312D;  /* text */
	--theme-palette-color-4: #1F1D1B;  /* titluri */
	--theme-palette-color-5: #E3DED6;  /* chenare */
	--theme-palette-color-6: #F1EEE9;
	--theme-palette-color-7: #F6F4F0;
	--theme-palette-color-8: #FAF9F7;

	--theme-font-family:        var(--cl-sans);
	--theme-font-stack-default: var(--cl-sans);
	--theme-text-color:         var(--cl-text);
	--theme-headings-color:     var(--cl-cerneala);
	--theme-link-initial-color: var(--cl-cerneala);
	--theme-link-hover-color:   var(--cl-sters);
	/* --theme-content-spacing NU se atinge: el e si distanta dintre paragrafe,
	   si spatiul (gap) din toate randurile flex, inclusiv galeriile. WordPress
	   calculeaza latimea imaginilor cu 16px presupusi; daca spatiul creste,
	   trei imagini de 33% nu mai incap pe rand si galeria se rupe in 2+1.
	   Distanta dintre paragrafe se pune direct pe <p>, mai jos. */
}

body {
	background-color: var(--cl-hartie);
	font-family: var(--cl-sans);
	color: var(--cl-text);
	font-size: 17px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Titlul paginii sta in afara .entry-content — il aducem pe aceeasi coloana,
   altfel H1 incepe cu un centimetru mai la stanga decat primul paragraf. */
.hero-section > .entry-header,
.hero-section.is-width-constrained > .entry-header {
	max-width: var(--cl-citit);
	margin-left: auto;
	margin-right: auto;
	padding-top: 1.5rem;
}
h1.page-title {
	font-size: clamp(2.2rem, 5vw, 3.1rem) !important;
	line-height: 1.12 !important;
	margin-bottom: .6em;
}

/* --- scrisul ------------------------------------------------------------- */
h1, h2, h3, .site-title,
.entry-title, .ct-portfolio-item .entry-title {
	font-family: var(--cl-serif);
	font-weight: 400;
	color: var(--cl-cerneala);
	letter-spacing: -0.01em;
	line-height: 1.15;
}
h4, h5, h6 {
	font-family: var(--cl-sans);
	font-weight: 600;
	letter-spacing: -0.005em;
	color: var(--cl-cerneala);
}

.entry-content h1, h1.entry-title { font-size: clamp(2.3rem, 5.5vw, 3.4rem); margin-bottom: .5em; }
.entry-content h2 { font-size: clamp(1.75rem, 3.6vw, 2.35rem); margin-top: 2.2em; margin-bottom: .55em; }
.entry-content h3 { font-size: clamp(1.35rem, 2.6vw, 1.6rem);  margin-top: 1.9em; margin-bottom: .5em; }
.entry-content h4 { font-size: 1.05rem; text-transform: uppercase; letter-spacing: .08em; color: var(--cl-sters); margin-top: 1.8em; }

.entry-content p  { margin-bottom: 1.35em; }
.entry-content strong { font-weight: 600; color: var(--cl-cerneala); }
.entry-content li { margin-bottom: .6em; }

/* --- linkuri: fara culoare, doar linie ----------------------------------- */
.entry-content a {
	color: var(--cl-cerneala);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .18em;
	text-decoration-color: var(--cl-linie);
	transition: text-decoration-color .15s ease;
}
.entry-content a:hover { text-decoration-color: var(--cl-cerneala); }

/* --- coloana de citit ---------------------------------------------------- */
.entry-content > *,
.entry-content.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	max-width: var(--cl-citit);
	margin-left: auto;
	margin-right: auto;
}
/* caruselul lucrarilor isi face singur latimea (100vw, din plugin) — tot ce
   trebuie e sa nu-l strang eu in coloana de text */
.entry-content > .wp-block-gallery.is-style-cl-carusel {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

/* fotografiile si galeriile ies din coloana */
.entry-content > .wp-block-gallery:not(.is-style-cl-carusel),
.entry-content > .wp-block-image,
.entry-content > .alignwide,
.entry-content.is-layout-constrained > .wp-block-gallery:not(.is-style-cl-carusel),
.entry-content.is-layout-constrained > .wp-block-image {
	max-width: var(--cl-larg);
}

/* --- butoane: negru plin, fara colturi rotunde --------------------------- */
.wp-block-button__link,
.ct-button, .ct-button-ghost, button, input[type="submit"] {
	background-color: var(--cl-cerneala) !important;
	color: var(--cl-hartie) !important;
	border: 1px solid var(--cl-cerneala) !important;
	border-radius: 2px !important;
	font-family: var(--cl-sans);
	font-weight: 500;
	font-size: 15px;
	letter-spacing: .01em;
	padding: .8em 1.7em !important;
	text-decoration: none !important;
	transition: background-color .15s ease, color .15s ease;
}
.wp-block-button__link:hover,
.ct-button:hover, button:hover, input[type="submit"]:hover {
	background-color: transparent !important;
	color: var(--cl-cerneala) !important;
}

/* --- despartitoare: o linie subtire, nu trei puncte ---------------------- */
.wp-block-separator {
	border: 0;
	border-top: 1px solid var(--cl-linie);
	max-width: var(--cl-citit);
	margin: 3.5em auto;
	opacity: 1;
}

/* ==========================================================================
   NOAPTE — fundalul negru pe care stau fotografiile
   ========================================================================== */

.entry-content > .wp-block-gallery:not(.is-style-cl-carusel) {
	position: relative;
	padding: 3.5rem 0;
	margin-top: 3rem;
	margin-bottom: 3rem;
	/* cele doua valori trebuie sa fie egale, altfel galeria se rupe (vezi sus) */
	--wp--style--unstable-gallery-gap: 20px;
	gap: 20px !important;
}
/* banda neagra care iese pe toata latimea ecranului, de sub galerie */
.entry-content > .wp-block-gallery:not(.is-style-cl-carusel)::before {
	content: "";
	position: absolute;
	inset: 0 calc(50% - 50vw);
	background: var(--cl-noapte);
	z-index: -1;
}
/* legenda sta sub fotografie, nu peste ea: WordPress o pune, din cutie,
   absolut, peste coltul de jos al imaginii, cu un degrade negru deasupra —
   adica exact peste chipul din poza, cand chipul e jos in cadru */
.entry-content > .wp-block-gallery:not(.is-style-cl-carusel) figcaption,
.entry-content > .wp-block-gallery:not(.is-style-cl-carusel) .blocks-gallery-item__caption {
	position: static !important;
	color: var(--cl-noapte-sters) !important;
	background: none !important;
	font-family: var(--cl-sans);
	font-size: 13px;
	line-height: 1.5;
	letter-spacing: .02em;
	text-align: center;
	padding: .8em 0 0 !important;
	margin: 0 !important;
	max-width: none !important;
}
.entry-content > .wp-block-gallery:not(.is-style-cl-carusel) figure.wp-block-image { display: block; }
.entry-content > .wp-block-gallery:not(.is-style-cl-carusel) figcaption a { color: var(--cl-noapte-text) !important; }
.entry-content > .wp-block-gallery:not(.is-style-cl-carusel) img { border-radius: 0; }

/* grila de lucrari de pe prima pagina si de pe /portofoliu/ — nu e o galerie,
   e un Query Loop, deci are nevoie de propriul tratament */
.entry-content > .wp-block-query {
	position: relative;
	max-width: var(--cl-larg);
	padding: 4rem 0 3.2rem;
	margin: 3rem auto;
}
.entry-content > .wp-block-query::before {
	content: "";
	position: absolute;
	inset: 0 calc(50% - 50vw);
	background: var(--cl-noapte);
	z-index: 0;
}
.entry-content > .wp-block-query > * { position: relative; z-index: 1; }

.wp-block-post-template { gap: 2.2rem 1.8rem !important; }
.wp-block-post-featured-image { margin-bottom: .9rem; }
.wp-block-post-featured-image img {
	border-radius: 0;
	display: block;
	width: 100%;
	transition: opacity .25s ease;
}
.wp-block-post-featured-image a:hover img { opacity: .78; }

.entry-content > .wp-block-query .wp-block-post-title {
	font-family: var(--cl-sans) !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	line-height: 1.5;
	letter-spacing: .02em;
	margin: 0;
	text-align: center;
}
.entry-content > .wp-block-query .wp-block-post-title a {
	color: var(--cl-noapte-sters) !important;
	text-decoration: none !important;
}
.entry-content > .wp-block-query .wp-block-post-title a:hover {
	color: var(--cl-noapte-text) !important;
}

/* despartitorul de dinaintea benzii negre ar face o linie lipita de negru */
.entry-content > .wp-block-query + .wp-block-separator,
.entry-content > .wp-block-separator:has(+ .wp-block-query) { display: none; }

/* lucrarile (portofoliul) stau pe negru cap-coada */
body.single-portfolio,
body.post-type-archive-portfolio,
body.tax-portfolio_categories {
	background-color: var(--cl-noapte);
	color: var(--cl-noapte-text);
}
body.single-portfolio h1, body.single-portfolio h2, body.single-portfolio h3,
body.post-type-archive-portfolio h1, body.post-type-archive-portfolio h2,
body.tax-portfolio_categories h1, body.tax-portfolio_categories h2 {
	color: #F2EFEA;
}
body.single-portfolio .entry-content,
body.post-type-archive-portfolio .entry-content { color: var(--cl-noapte-text); }
body.single-portfolio .entry-content a,
body.post-type-archive-portfolio .entry-content a {
	color: #F2EFEA;
	text-decoration-color: rgba(242,239,234,.35);
}
body.single-portfolio .entry-content a:hover { text-decoration-color: #F2EFEA; }
body.single-portfolio .wp-block-separator { border-top-color: rgba(255,255,255,.14); }

/* pe pagina neagra, descrierea lucrarii era scrisa cu cerneala pe negru */
body.single-portfolio .page-description,
body.single-portfolio .page-description p,
body.single-portfolio .entry-excerpt {
	color: var(--cl-noapte-text) !important;
	font-size: 1.05rem;
	max-width: var(--cl-citit);
	margin-left: auto;
	margin-right: auto;
}
body.single-portfolio .entry-meta,
body.single-portfolio .entry-meta a,
body.single-portfolio .entry-meta time { color: var(--cl-noapte-sters) !important; }
/* numele de utilizator („frolicone") si poza lui n-au ce cauta pe pagina unei
   lucrari: site-ul are un singur autor si el scrie in antet si in subsol */
body.single-portfolio li.meta-author { display: none !important; }

/* bara de derulare a caruselului, pe negru — implicit era alba, lata cat pagina */
.wp-block-gallery.is-style-cl-carusel { scrollbar-color: #3A3733 transparent; scrollbar-width: thin; }
.wp-block-gallery.is-style-cl-carusel::-webkit-scrollbar { height: 6px; }
.wp-block-gallery.is-style-cl-carusel::-webkit-scrollbar-track { background: transparent; }
.wp-block-gallery.is-style-cl-carusel::-webkit-scrollbar-thumb { background: #3A3733; border-radius: 3px; }

/* Lupa caruselului (.cl-lupa, din plugin) e deja pe negru .97 — n-o atingem.
   Asta e pentru lupa temei, folosita la imaginile din afara caruselului. */
.ct-lightbox, .pswp__bg { background: rgba(10,10,9,.97) !important; }

/* ==========================================================================
   ANTET SI SUBSOL
   ========================================================================== */

header [data-id="logo"] .site-title,
header [data-id="logo"] .site-title a {
	font-family: var(--cl-serif) !important;
	font-weight: 400 !important;
	font-size: 28px !important;
	letter-spacing: -0.015em;
	color: var(--cl-cerneala) !important;
	text-decoration: none !important;
	line-height: 1.1;
}
header [data-id="logo"] .site-description {
	font-family: var(--cl-sans) !important;
	font-size: 12px !important;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--cl-sters) !important;
	margin-top: .35em;
}
.ct-header [data-row] { background-color: var(--cl-hartie) !important; }
.ct-header [data-row="middle"] { border-bottom: 1px solid var(--cl-linie); }

.ct-menu-link {
	font-family: var(--cl-sans) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	letter-spacing: .03em;
	text-transform: none !important;
	color: var(--cl-text) !important;
}
.ct-menu-link:hover,
.current-menu-item > .ct-menu-link,
.current-page-ancestor > .ct-menu-link { color: var(--cl-cerneala) !important; }
.current-menu-item > .ct-menu-link { text-decoration: underline; text-underline-offset: .35em; text-decoration-thickness: 1px; }

/* --- submeniul -----------------------------------------------------------
   Blocksy desenează caseta de submeniu pe negru, cu text aproape alb
   (`--dropdown-background-color` cade pe paleta 4, iar textul pe paleta 8).
   Regula de mai sus pune însă `color` cu `!important` pe TOATE `.ct-menu-link`,
   deci prindea și rândurile din submeniu: cerneală pe negru, adică nimic.

   Nu repunem albul înapoi, fiindcă o casetă neagră atârnată sub un antet de
   hârtie arată a accident. O aducem pe hârtie, ca antetul, și o despărțim de
   pagină cu un chenar — nu cu o a doua culoare. Umbra rămâne a temei.

   Se scriu numai variabilele pe care Blocksy NU le declară el însuși: alea
   le pune într-un `<style>` din <head>, cu exact același selector, deci la
   specificitate egală câștigă ele. Despărțitorul lui (`--dropdown-divider`,
   alb cu 10% opacitate) rămâne invizibil pe hârtie, și e bine așa: patru
   rânduri scurte se citesc mai curat fără linii între ele. */
[data-id="menu"] .sub-menu {
	--dropdown-background-color:       var(--cl-hartie);
	--dropdown-background-hover-color: var(--cl-hartie-umbra);
	border: 1px solid var(--cl-linie);
}
[data-id="menu"] .sub-menu .ct-menu-link { color: var(--cl-text) !important; }
[data-id="menu"] .sub-menu li:hover > .ct-menu-link,
[data-id="menu"] .sub-menu .current-menu-item > .ct-menu-link { color: var(--cl-cerneala) !important; }

/* --- meniul de pe telefon ------------------------------------------------
   Aceeași poveste, dar pe tot ecranul: panoul care alunecă peste pagină vine
   din temă pe `rgba(18, 21, 25, .98)`, iar linkurile rămâneau pe cerneală.
   Negru pe negru — nu se vedea decât X-ul de închidere, care e alb.
   Îl trecem pe hârtie, ca antetul și ca submeniul, și întoarcem X-ul pe
   cerneală, altfel el rămâne cel invizibil.
   `!important` fiindcă tema scrie panoul din `[data-header*="type-1"] #offcanvas
   .ct-panel-inner`, adică peste specificitatea unui simplu `#offcanvas`.
   Modalul de căutare NU se atinge: acolo tema scrie singură pe alb, deci
   negrul lui e în regulă. */
#offcanvas .ct-panel-inner { background-color: var(--cl-hartie) !important; }
#offcanvas .ct-toggle-close { color: var(--cl-cerneala) !important; }
#offcanvas .current-menu-item > .ct-menu-link,
#offcanvas .current-page-ancestor > .ct-menu-link { color: var(--cl-cerneala) !important; }

.ct-footer { background-color: var(--cl-hartie) !important; border-top: 1px solid var(--cl-linie); }
.ct-footer, .ct-footer a { font-family: var(--cl-sans); font-size: 14px; color: var(--cl-sters) !important; }
.ct-footer a:hover { color: var(--cl-cerneala) !important; }
/* subsolul pe aceeasi coloana ca textul, nu lipit de marginea ecranului */
.ct-footer [data-id="copyright"] { max-width: var(--cl-citit); margin: 0 auto; }
.ct-footer [data-id="copyright"] p { margin: 0 0 .5em; }
.ct-footer [data-id="copyright"] strong { color: var(--cl-cerneala); font-weight: 600; }

/* ==========================================================================
   TELEFON
   ========================================================================== */
@media (max-width: 690px) {
	body { font-size: 16px; }
	header [data-id="logo"] .site-title, header [data-id="logo"] .site-title a { font-size: 23px !important; }

	/* o fotografie pe rand, pe toata latimea. WordPress trece singur la doua
	   coloane sub 600px, ceea ce inseamna doua portrete inguste si al treilea
	   lat cat pagina — pe telefon, o fotografie mare bate trei mici. */
	.entry-content > .wp-block-gallery:not(.is-style-cl-carusel) {
		padding: 2rem 0;
		gap: 1.6rem !important;
	}
	.entry-content > .wp-block-gallery:not(.is-style-cl-carusel) figure.wp-block-image {
		width: 100% !important;
	}
	.entry-content > .wp-block-gallery:not(.is-style-cl-carusel) figcaption { padding-bottom: .4em !important; }

	/* si la grila de lucrari de pe prima pagina */
	.wp-block-post-template.columns-3 { grid-template-columns: 1fr !important; }
	.entry-content > .wp-block-query { padding: 2.5rem 0; }
}