/*
Theme Name: NTN Journal
Theme URI: https://github.com/Blackstar90210/ntn-journal
Author: Luca Maiolini & Antigravity IDE AI
Author URI: https://github.com/Blackstar90210
Description: Un tema WordPress moderno e brutalista ispirato fedelmente al design language di Nothing OS. Creato con l'ausilio dell'Intelligenza Artificiale (AI). Caratterizzato da tipografia monospazio (JetBrains Mono), indicatori LED pulsanti, animazioni fluide e una griglia rigorosa.
Version: 1.31.00
Requires at least: 6.0
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: ntn-journal
Tags: black, white, dark, light, two-columns, custom-colors, custom-menu, featured-images, post-formats, theme-options, translation-ready, accessibility-ready, blog
*/

/* ============================================================
 * CSS generato in locale con Tailwind CSS CLI v4.
 * Include Inter (Body e Titoli) e JetBrains Mono (Monospace tech).
 * ============================================================ */



/* Regole Custom NTN Journal */



/* Gutenberg Blocks Overrides */
.wp-block-quote {
  border-left: 4px solid #dc2626 !important;
  /* red-600 */
  padding: 1rem 1.5rem !important;
  background: #fafafa;
  margin-top: 2rem !important;
  margin-bottom: 2rem !important;
  font-family: "JetBrains Mono", monospace !important;
  font-style: normal !important;
  font-size: 0.95rem !important;
  color: #3f3f46 !important;
  /* zinc-700 */
}

.dark .wp-block-quote {
  background: rgba(39, 39, 42, 0.3) !important;
  color: #a1a1aa !important;
  /* zinc-400 */
}

.wp-block-quote p {
  margin-bottom: 0.5rem !important;
}

.wp-block-quote cite {
  font-size: 0.75rem !important;
  text-transform: uppercase;
  color: #71717a !important;
  /* zinc-500 */
  font-style: normal !important;
  letter-spacing: 0.05em;
}

/* WP Core Images */
.wp-block-image img {
  border: 1px solid #e4e4e7;
  /* zinc-200 */
}

.dark .wp-block-image img {
  border: 1px solid #27272a;
  /* zinc-800 */
}

.wp-block-image figcaption {
  font-family: "JetBrains Mono", monospace !important;
  font-size: 0.75rem !important;
  text-align: right !important;
  color: #71717a !important;
  text-transform: uppercase;
  margin-top: 0.5rem !important;
}

/* --- CUSTOM MOBILE OVERRIDES --- */
@media (max-width: 767px) {

  /* Mobile Typography Overrides */
  .dynamic-content-body,
  #primary article>header>h2,
  #review-summary-card p {
    font-size: 22px !important;
    line-height: 1.6 !important;
  }

  .dynamic-content-body h2 {
    font-size: 28px !important;
    line-height: 1.3 !important;
  }

  .dynamic-content-body h3 {
    font-size: 25px !important;
    line-height: 1.4 !important;
  }

  .dynamic-content-body h4 {
    font-size: 23px !important;
  }

  /* Fix header vertical spacing */
  .main-bar-wrapper {
    padding-top: 1.25rem !important;
    /* 20px */
    padding-bottom: 0.75rem !important;
    /* 12px */
  }

  .sub-header-wrapper {
    padding-top: 0.75rem !important;
    /* 12px */
    padding-bottom: 0.75rem !important;
    /* 12px */
  }

  /* Fix main content spacing and horizontal symmetry */
  #primary {
    padding: 1.5rem 0.5rem 1.5rem 0.5rem !important;
    /* Top 24px, L/R 8px, Bottom 24px */
    overflow-x: hidden !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #primary article {
    padding: 1.25rem 1rem !important;
    /* Top/Bottom 20px, L/R 16px */
    overflow-x: hidden !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  nav[aria-label="Breadcrumb"] {
    margin-bottom: 1.5rem !important;
    /* 24px */
  }
}

@media (min-width: 768px) {

  /* Fix PC vertical spacing symmetry */
  nav[aria-label="Breadcrumb"] {
    margin-bottom: 2.5rem !important;
    /* 40px to match #primary py-10 */
  }
}

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  background-color: #eee;
  clip: auto !important;
  clip-path: none;
  color: #444;
  display: block;
  font-size: 1em;
  height: auto;
  left: 5px;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}

/* Inserisci qui il resto del codice minificato generato da npx @tailwindcss/cli */
/* Esempio: .group{display:block} .bg-white{background-color:#fff} ... */

/* ==========================================================================
   NTN Horizontal Scrollbar (Nothing OS Style)
   ========================================================================== */

.ntn-horizontal-scrollbar {
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: #dc2626 #f4f4f5;
}

.dark .ntn-horizontal-scrollbar {
  /* Firefox Dark Mode */
  scrollbar-color: #dc2626 #09090b;
}

.ntn-horizontal-scrollbar::-webkit-scrollbar {
  height: 6px;
}

.ntn-horizontal-scrollbar::-webkit-scrollbar-track {
  background-color: #e4e4e7;
  /* zinc-200 */
  border-radius: 0px;
}

.dark .ntn-horizontal-scrollbar::-webkit-scrollbar-track {
  background-color: #18181b;
  /* zinc-900 */
}

.ntn-horizontal-scrollbar::-webkit-scrollbar-thumb {
  background-color: #dc2626;
  /* red-600 */
  border-radius: 0px;
}

.ntn-horizontal-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: #b91c1c;
  /* red-700 */
}

/* ==========================================================================
   NTN Bug Fixes (Elenchi puntati e X embeds) - Aggiornato
   ========================================================================== */

/* Fix elenchi puntati mancanti nei post (override Tailwind) */
.prose ul,
.entry-content ul {
  list-style-type: disc !important;
  list-style-position: outside !important;
  padding-left: 2rem !important;
  margin-bottom: 1.5rem !important;
}

.prose ol,
.entry-content ol {
  list-style-type: decimal !important;
  list-style-position: outside !important;
  padding-left: 2rem !important;
  margin-bottom: 1.5rem !important;
}

.prose li,
.entry-content li {
  margin-bottom: 0.75rem !important;
  display: list-item !important;
}

/* Fix TOC vertical symmetry */
.ntn-toc ul {
  margin-bottom: 0 !important;
}

.ntn-toc li {
  margin-bottom: 0 !important;
}

/* Fix post di X (Twitter) tagliati su mobile/desktop */
.wp-block-embed-twitter,
.twitter-tweet,
.wp-block-embed-twitter iframe {
  max-width: 100% !important;
  width: 100% !important;
  overflow: visible !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Breaking News Marquee */
.ntn-marquee-container {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}

.ntn-marquee-content {
  display: inline-block;
  padding-left: 100%;
  animation: ntn-marquee 25s linear infinite;
}

@keyframes ntn-marquee {
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(-100%, 0, 0);
  }
}

.ntn-marquee-container:hover .ntn-marquee-content {
  animation-play-state: paused;
}

/* ==========================================================================
   Gallerie Mosaico & Lightbox (Sub-Piano 3)
   ========================================================================== */
.wp-block-gallery {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
  align-items: stretch;
}

.wp-block-gallery .wp-block-image {
  width: 100% !important;
  margin: 0 !important;
  height: 100%;
}

.wp-block-gallery .wp-block-image img {
  height: 100%;
  object-fit: cover;
}

.glightbox {
  cursor: zoom-in;
}

.wp-block-gallery figcaption {
  display: none;
}

/* ==========================================================================
   NTN Single Post Prose Styling (Spostato da single.php per Performance)
   ========================================================================== */

/* Custom Nothing-style prose headings */
.prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
	position: relative;
	font-family: inherit;
	font-weight: 700;
	color: #09090b !important;
	margin-top: 2rem;
	margin-bottom: 1rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid #e4e4e7;
	display: block;
}
.prose h2 {
	font-size: 1.5rem;
	line-height: 2rem;
}
.prose h3 {
	font-size: 1.25rem;
	line-height: 1.75rem;
}
.prose h4 {
	font-size: 1.125rem;
	line-height: 1.625rem;
}
.prose h5, .prose h6 {
	font-size: 1rem;
	line-height: 1.5rem;
}
.dark .prose h2, .dark .prose h3, .dark .prose h4, .dark .prose h5, .dark .prose h6 {
	color: #f4f4f5 !important;
	border-bottom-color: #27272a;
}

/* Link styling inside article text */
.prose p a, .prose li a {
	color: #18181b; /* zinc-900 */
	font-family: 'JetBrains Mono', monospace;
	font-weight: 800;
	text-transform: uppercase;
	font-size: 0.75rem; /* text-xs */
	letter-spacing: 0.05em;
	text-decoration: none;
	transition: color 0.2s ease-in-out;
}
.prose p a:hover, .prose li a:hover {
	color: #dc2626;
}
.dark .prose p a, .dark .prose li a {
	color: #f4f4f5; /* zinc-100 */
}
.dark .prose p a:hover, .dark .prose li a:hover {
	color: #ef4444;
}

/* Responsive and full-width styling for video content iframes (YouTube, Vimeo, Twitch) */
.wp-block-embed-youtube iframe,
.wp-block-embed-vimeo iframe,
.prose iframe[src*="youtube.com"],
.prose iframe[src*="youtu.be"],
.prose iframe[src*="vimeo.com"],
.prose iframe[src*="twitch.tv"] {
	width: 100% !important;
	max-width: 100% !important;
	aspect-ratio: 16 / 9 !important;
	height: auto !important;
	border: none !important;
	border-radius: 0 !important;
	margin-top: 1.5rem !important;
	margin-bottom: 1.5rem !important;
}

/* Generic styling for ALL other iframes/embeds to adapt dynamically to their injected scripts (X, Instagram, TikTok) */
.prose iframe:not([src*="youtube.com"]):not([src*="youtu.be"]):not([src*="vimeo.com"]):not([src*="twitch.tv"]):not([src*="store.steampowered.com"]),
.prose embed,
.prose object,
.prose video,
.wp-block-embed iframe:not([src*="youtube.com"]):not([src*="youtu.be"]):not([src*="vimeo.com"]):not([src*="twitch.tv"]):not([src*="store.steampowered.com"]) {
	max-width: 100% !important;
	border: none !important;
	border-radius: 0 !important;
	margin-top: 1.5rem !important;
	margin-bottom: 1.5rem !important;
}

/* Styling specifically for Steam widgets to make them full width without breaking height */
.prose iframe[src*="store.steampowered.com"] {
	width: 100% !important;
	max-width: 100% !important;
	border: none !important;
	margin-top: 1.5rem !important;
	margin-bottom: 1.5rem !important;
}

.wp-block-embed,
.wp-block-embed-youtube,
.embed-youtube,
.wp-block-embed__wrapper {
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Fix lists missing bullets/numbers in prose */
.prose ul {
	list-style-type: disc;
	padding-left: 1.5rem;
}
.prose ol {
	list-style-type: decimal;
	padding-left: 1.5rem;
}
.prose li {
	margin-bottom: 0.5rem;
}

/* Ensures that any iframe dropped into the custom widget area automatically fills the Nothing OS container */
.ntn-video-widget iframe,
.ntn-video-widget embed,
.ntn-video-widget object {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
}