/*
Theme Name:   Donovan Child – Fulvio Bodda
Theme URI:    https://www.fulviobodda.com/
Description:  Tema child di Donovan per fulviobodda.com: stile scuro "tech", homepage vetrina, video YouTube e guide IT.
Author:       Fulvio Bodda
Template:     donovan
Version:      1.0.9
License:      GPL-2.0-or-later
Text Domain:  donovan-child
*/

/* ==========================================================
   1. Variabili (sovrascrivono quelle di Donovan)
   ========================================================== */
:root {
	--fb-bg: #0E1116;
	--fb-surface: #151A21;
	--fb-surface-2: #1A1F27;
	--fb-line: #232A33;
	--fb-line-strong: #3A434F;
	--fb-text: #E8EAED;
	--fb-text-soft: #C3C9D1;
	--fb-muted: #9AA3AF;
	--fb-accent: #FF4436;
	--fb-accent-hover: #FF6A5E;
	--fb-font-display: "Space Grotesk", system-ui, sans-serif;
	--fb-font-text: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--fb-font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

	--primary-color: var(--fb-accent);
	--secondary-color: var(--fb-accent-hover);
	--tertiary-color: var(--fb-accent-hover);
	--accent-color: var(--fb-accent);
	--light-gray-color: var(--fb-surface);
	--gray-color: var(--fb-muted);
	--dark-gray-color: var(--fb-surface-2);
	--text-color: var(--fb-text);
	--medium-text-color: var(--fb-muted);
	--light-text-color: var(--fb-muted);
	--dark-border-color: var(--fb-line-strong);
	--medium-border-color: var(--fb-line-strong);
	--light-border-color: var(--fb-line);
	--page-background-color: var(--fb-bg);
	--page-border-color: var(--fb-line);
	--link-color: var(--fb-accent);
	--button-color: var(--fb-accent);
	--button-text-color: #0E1116;
	--button-hover-color: var(--fb-accent-hover);
	--button-hover-text-color: #0E1116;
	--navi-color: var(--fb-bg);
	--navi-text-color: var(--fb-text-soft);
	--navi-hover-text-color: #FFFFFF;
	--navi-border-color: var(--fb-line);
	--submenu-color: var(--fb-surface);
	--submenu-text-color: var(--fb-text-soft);
	--submenu-hover-text-color: #FFFFFF;
	--submenu-border-color: var(--fb-line);
	--title-color: var(--fb-text);
	--widget-title-color: var(--fb-text);
	--footer-color: var(--fb-bg);
	--footer-text-color: var(--fb-muted);
	--footer-hover-text-color: #FFFFFF;
	--footer-border-color: var(--fb-line);
	--text-font: var(--fb-font-text);
	--title-font: var(--fb-font-display);
	--navi-font: var(--fb-font-text);
	--widget-title-font: var(--fb-font-mono);
	--title-font-weight: 700;
	--navi-font-weight: 500;
	--widget-title-font-weight: 600;
	--text-line-height: 1.7;
	--title-line-height: 1.2;
}

/* ==========================================================
   2. Base
   ========================================================== */
html,
body,
.site,
#page {
	background: var(--fb-bg);
	color: var(--fb-text);
}

body {
	font-family: var(--fb-font-text);
	-webkit-font-smoothing: antialiased;
}

a { color: var(--fb-accent); }
a:hover, a:focus { color: var(--fb-accent-hover); }

::selection { background: var(--fb-accent); color: #0E1116; }

:focus-visible {
	outline: 2px solid var(--fb-accent);
	outline-offset: 3px;
}

.site {
	max-width: none;
	margin: 0;
	box-shadow: none;
	border: 0;
}

.container { max-width: 1200px; }

/* ==========================================================
   3. Header e menu
   ========================================================== */
.site-header {
	background: var(--fb-bg);
	border-bottom: 0;
}

.header-main {
	padding-top: 1.5rem;
	padding-bottom: 1rem;
}

/* Header: nome del sito a sinistra, logo verde tutto a destra */
.site-header .site-branding {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas: "title logo" "desc logo";
	align-items: center;
	column-gap: 1.5rem;
	row-gap: 0.25rem;
	width: 100%;
	max-width: none;
	float: none;
	margin: 0;
	text-align: left;
}

/* Donovan nasconde titolo e descrizione quando c'è il logo: li rendiamo visibili */
.site-header .site-title,
.site-header .site-description {
	position: static !important;
	clip: auto !important;
	clip-path: none !important;
	width: auto !important;
	height: auto !important;
	overflow: visible !important;
	white-space: normal !important;
}

.site-header .site-title { grid-area: title; align-self: end; }
.site-header .site-description { grid-area: desc; align-self: start; margin: 0 !important; }

.site-header .custom-logo-link,
.fb-nav-logo {
	display: block;
	margin: 0;
	line-height: 0;
	border-radius: 6px;
	overflow: hidden;
	transition: transform .2s;
}

.site-header .custom-logo-link { grid-area: logo; justify-self: end; }

.site-header .custom-logo-link:hover,
.fb-nav-logo:hover { transform: translateY(-1px); }

.site-header .custom-logo,
.site-header .custom-logo-link svg,
.fb-nav-logo img,
.fb-nav-logo svg {
	display: block;
	width: auto;
	height: 56px;
	max-width: none;
	margin: 0 !important; /* Donovan aggiunge un margine sotto al logo che tagliava gli angoli */
	border-radius: 6px;
}

/* Mobile (quando compare il pulsante "Menu"): il logo passa nella barra del menu, a destra */
.fb-nav-logo { display: none; }

html.fb-mobile-nav .site-header .custom-logo-link { display: none; }

html.fb-mobile-nav .site-header .site-branding {
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "title" "desc";
}

html.fb-mobile-nav .primary-navigation-container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
}

html.fb-mobile-nav .primary-menu-toggle { order: 1; }

html.fb-mobile-nav .fb-nav-logo { display: block; order: 2; }

html.fb-mobile-nav .fb-nav-logo img,
html.fb-mobile-nav .fb-nav-logo svg { height: 40px; }

html.fb-mobile-nav .primary-navigation { order: 3; flex: 0 0 100%; }

.site-title {
	margin: 0;
	font-family: var(--fb-font-mono);
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	text-transform: none;
}

.site-title a,
.site-title a:link,
.site-title a:visited { color: var(--fb-text); }
.site-title a:hover { color: #FFFFFF; }

.site-description {
	margin: 0.25rem 0 0;
	font-family: var(--fb-font-mono);
	font-size: 0.8rem;
	color: var(--fb-accent);
}

.site-description::before { content: "> "; }

.primary-navigation-wrap {
	background: var(--fb-bg);
	border-top: 1px solid var(--fb-line);
	border-bottom: 1px solid var(--fb-line);
}

.main-navigation ul a,
.main-navigation .menu a {
	color: var(--fb-text-soft);
	font-family: var(--fb-font-text);
	font-weight: 500;
	font-size: 0.95rem;
}

.main-navigation ul a:hover,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a { color: #FFFFFF; }

.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a {
	box-shadow: inset 0 -2px 0 var(--fb-accent);
}

.main-navigation .menu-item-fb-subscribe { margin-left: auto; }

.main-navigation .menu-item-fb-subscribe > a,
.main-navigation .menu-item-fb-subscribe > a:link,
.main-navigation .menu-item-fb-subscribe > a:visited {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0.5rem 0;
	padding: 0.55rem 1.1rem;
	border-radius: 999px;
	background: var(--fb-accent);
	color: #0E1116;
	font-weight: 600;
	line-height: 1.2;
}

.main-navigation .menu-item-fb-subscribe > a:hover { background: var(--fb-accent-hover); color: #0E1116; }
.main-navigation .menu-item-fb-subscribe svg { width: 14px; height: 14px; }

.primary-menu-toggle,
.primary-menu-toggle:hover,
.primary-menu-toggle:focus {
	color: var(--fb-text);
	background: transparent;
}

/* ==========================================================
   4. Contenuti, articoli, archivi
   ========================================================== */
.site-content { padding-top: 2.5rem; }

.archive-header,
.blog-header {
	margin-bottom: 2rem;
	padding: 0 0 1.5rem;
	border: 0;
	border-bottom: 1px solid var(--fb-line);
	background: transparent;
}

.archive-title,
.blog-title,
.page-title {
	font-family: var(--fb-font-display);
	font-weight: 700;
	font-size: 2.5rem;
	letter-spacing: -0.02em;
	color: var(--fb-text);
}

.archive-description,
.blog-description { color: var(--fb-muted); }

.post-wrapper .post,
.post-wrapper .type-post,
.type-post,
.type-page,
.comments-area,
.post-navigation,
.page-header {
	background: var(--fb-surface);
	border: 1px solid var(--fb-line);
	border-radius: 14px;
	box-shadow: none;
	color: var(--fb-text);
}

.post-wrapper .type-post { overflow: hidden; transition: border-color .2s; }
.post-wrapper .type-post:hover { border-color: var(--fb-line-strong); }

.post-image img,
.wp-post-image { border-radius: 0; }

.entry-title,
.entry-title a,
.entry-title a:link,
.entry-title a:visited {
	font-family: var(--fb-font-display);
	color: var(--fb-text);
	letter-spacing: -0.01em;
}

.entry-title a:hover { color: #FFFFFF; }

.entry-meta,
.entry-meta a,
.post-details,
.post-details a,
.entry-footer,
.entry-footer a {
	font-family: var(--fb-font-mono);
	font-size: 0.78rem;
	color: var(--fb-muted);
}

.entry-footer { border-top: 1px solid var(--fb-line); }
.entry-footer .icon { fill: var(--fb-muted); }

.entry-content { color: var(--fb-text-soft); }
.entry-content h2,
.entry-content h3,
.entry-content h4 { color: var(--fb-text); font-family: var(--fb-font-display); }

.entry-content a { text-decoration: underline; text-underline-offset: 3px; }

.more-link,
.more-link:link,
.more-link:visited,
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.pagination .current,
.pagination a:hover {
	background: var(--fb-accent);
	color: #0E1116;
	border-radius: 10px;
	font-weight: 600;
	text-decoration: none;
}

.more-link:hover,
button:hover,
input[type="submit"]:hover { background: var(--fb-accent-hover); color: #0E1116; }

.pagination a,
.pagination .dots {
	background: var(--fb-surface);
	color: var(--fb-text-soft);
	border-radius: 10px;
}

/* Codice nelle guide */
code, kbd, pre, samp { font-family: var(--fb-font-mono); }

.entry-content code {
	padding: 0.15em 0.4em;
	border-radius: 6px;
	background: var(--fb-surface-2);
	color: var(--fb-text);
	font-size: 0.9em;
}

.entry-content pre,
.wp-block-code {
	padding: 1.25rem;
	border: 1px solid var(--fb-line);
	border-radius: 10px;
	background: #0A0D11;
	color: var(--fb-text);
	font-size: 0.9rem;
	line-height: 1.6;
}

.entry-content pre code { padding: 0; background: none; }

blockquote {
	border-left-color: var(--fb-accent);
	color: var(--fb-text-soft);
}

table, th, td { border-color: var(--fb-line); }

/* Form */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
textarea {
	background: var(--fb-surface);
	border: 1px solid var(--fb-line-strong);
	border-radius: 10px;
	color: var(--fb-text);
}

input:focus,
textarea:focus { border-color: var(--fb-accent); }

/* ==========================================================
   5. Sidebar e widget
   ========================================================== */
.widget {
	background: var(--fb-surface);
	border: 1px solid var(--fb-line);
	border-radius: 14px;
	color: var(--fb-text-soft);
}

.widget-title,
.widget-header {
	font-family: var(--fb-font-mono);
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--fb-accent);
	border: 0;
	background: transparent;
}

.widget a { color: var(--fb-text); }
.widget a:hover { color: #FFFFFF; }
.widget ul li { border-color: var(--fb-line); }

/* ==========================================================
   6. Footer
   ========================================================== */
.footer-wrap,
.site-footer {
	background: var(--fb-bg);
	border-top: 1px solid var(--fb-line);
	color: var(--fb-muted);
}

.site-info { font-family: var(--fb-font-mono); font-size: 0.8rem; }
.site-info .credit-link { display: none; }
.site-info::before { content: "fulviobodda.com — tech youtuber"; }

/* ==========================================================
   7. Template "Vetrina" (homepage e pagina Video)
   ========================================================== */
.fb-vetrina-page .site-content { padding-top: 0; display: block; grid-template-columns: 1fr; }
.fb-vetrina-page .content-area,
.fb-vetrina-page .site-main { width: 100%; max-width: 100%; float: none; }

.fb-vetrina {
	color: var(--fb-text);
	padding-bottom: 4rem;
}

.fb-vetrina > * + * { margin-top: 0; }

.fb-section {
	padding: 4.5rem 0 1rem;
}

.fb-kicker {
	margin: 0 0 0.75rem;
	font-family: var(--fb-font-mono);
	font-size: 0.82rem;
	letter-spacing: 0.04em;
	color: var(--fb-accent);
}

.fb-section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 2rem;
}

.fb-section-head h2 {
	margin: 0;
	font-family: var(--fb-font-display);
	font-size: clamp(1.9rem, 3.5vw, 2.5rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--fb-text);
}

.fb-section-head a,
.fb-section-head a:link,
.fb-section-head a:visited { color: var(--fb-text); font-weight: 600; text-decoration: none; }
.fb-section-head a:hover { color: var(--fb-accent); }

/* Hero */
.fb-hero {
	padding: clamp(3.5rem, 8vw, 6.5rem) 0 3rem;
	max-width: 760px;
}

.fb-hero h1 {
	margin: 0 0 1.25rem;
	font-family: var(--fb-font-display);
	font-size: clamp(2.5rem, 6vw, 4.25rem);
	font-weight: 700;
	line-height: 1.03;
	letter-spacing: -0.03em;
	color: var(--fb-text);
}

.fb-hero p.fb-lead {
	margin: 0 0 2rem;
	font-size: 1.2rem;
	line-height: 1.6;
	color: var(--fb-muted);
	max-width: 560px;
}

.fb-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.fb-btn,
.fb-btn:link,
.fb-btn:visited {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: 0 1.5rem;
	border-radius: 10px;
	background: var(--fb-accent);
	color: #0E1116;
	font-weight: 600;
	text-decoration: none;
}

.fb-btn:hover { background: var(--fb-accent-hover); color: #0E1116; }

.fb-btn-ghost,
.fb-btn-ghost:link,
.fb-btn-ghost:visited {
	background: transparent;
	color: var(--fb-text);
	border: 1px solid var(--fb-line-strong);
}

.fb-btn-ghost:hover { background: var(--fb-surface); color: #FFFFFF; border-color: var(--fb-muted); }

/* Lista guide (shortcode [fb_guide]) */
.fb-guide-list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--fb-line);
}

.fb-guide-list li { margin: 0; border-bottom: 1px solid var(--fb-line); }

.fb-guide-list a,
.fb-guide-list a:link,
.fb-guide-list a:visited {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1.5rem;
	padding: 1.3rem 0.25rem;
	color: var(--fb-text);
	text-decoration: none;
}

.fb-guide-list a:hover .fb-guide-title { color: var(--fb-accent); }

.fb-guide-date {
	flex: 0 0 120px;
	font-family: var(--fb-font-mono);
	font-size: 0.8rem;
	color: var(--fb-muted);
}

.fb-guide-title {
	flex: 1 1 320px;
	min-width: 0;
	font-size: 1.15rem;
	font-weight: 600;
	transition: color .15s;
}

.fb-guide-tag {
	padding: 0.3rem 0.75rem;
	border: 1px solid var(--fb-line-strong);
	border-radius: 999px;
	font-family: var(--fb-font-mono);
	font-size: 0.75rem;
	color: var(--fb-text-soft);
}

/* Chi sono */
.fb-about {
	display: flex;
	flex-wrap: wrap;
	gap: 2.5rem;
	align-items: center;
	padding: 2.5rem;
	border: 1px solid var(--fb-line);
	border-radius: 20px;
	background: var(--fb-surface);
}

.fb-about-body { flex: 1 1 420px; min-width: 0; }
.fb-about h2 { margin: 0 0 1rem; font-family: var(--fb-font-display); font-size: 2rem; color: var(--fb-text); }
.fb-about p { margin: 0 0 1.5rem; color: var(--fb-muted); font-size: 1.05rem; line-height: 1.7; }

.fb-about-photo {
	flex: 0 0 200px;
	width: 200px;
	height: 200px;
	border-radius: 16px;
	object-fit: cover;
}

/* Plugin YouTube Feed: integrazione */
.fbyt { --fbyt-accent: var(--fb-accent); color: var(--fb-text); }
.fbyt-featured h2 { font-family: var(--fb-font-display); color: var(--fb-text); }
.fbyt-title,
.fbyt-title:link,
.fbyt-title:visited { color: var(--fb-text); text-decoration: none; }
.fbyt-title:hover { color: var(--fb-accent); }
.fbyt-meta { font-family: var(--fb-font-mono); }
.fbyt-btn,
.fbyt-btn:link,
.fbyt-btn:visited { color: var(--fb-text); text-decoration: none; }
.fbyt-btn:hover { background: var(--fb-surface-2); color: #FFFFFF; }

/* Nasconde il titolo della pagina sulla homepage statica */
.fb-vetrina-page .entry-header,
.fb-vetrina-page .page-header { display: none; }

/* ==========================================================
   8. Mobile
   ========================================================== */
@media (max-width: 60em) {
	.main-navigation .menu-item-fb-subscribe { margin-left: 0; }
	.main-navigation .menu-item-fb-subscribe > a { margin: 0.75rem 1rem; }
	.main-navigation ul { background: var(--fb-bg); }
}

@media (max-width: 1240px) {
	.fb-vetrina { padding-left: 1rem; padding-right: 1rem; }
	.header-main,
	.primary-navigation-container,
	.site-footer { padding-left: 1rem; padding-right: 1rem; box-sizing: border-box; }
}

@media (max-width: 600px) {
	.fb-section { padding-top: 3rem; }
	.fb-about { padding: 1.5rem; }
	.fb-guide-date { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; }
}


/* Donovan nasconde la descrizione quando c'è il logo: la rendiamo visibile */
.site-header .site-description {
	margin: 0 !important;
	position: static !important;
	clip: auto !important;
	clip-path: none !important;
	width: auto !important;
	height: auto !important;
	overflow: visible !important;
}

.post-details .icon,
.entry-footer .icon,
.entry-meta .icon { fill: var(--fb-muted) !important; }