/* ╔══════════════════════════════════════════════════════════════╗
   ║  🌸 SAKURA DIARY — Design System CSS                       ║
   ║  Codename: Hanami · Version 1.0.0                          ║
   ║  A premium design system inspired by cherry blossoms        ║
   ║  and serene skies for a personal diary blog.               ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   § 1. DESIGN TOKENS — Custom Properties
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

:root {
  /* ── Sakura Pink Scale ── */
  --sakura-50:  #FFE4F0;  /* pastello rosa visibile (era #FFF5F7 troppo bianco) */
  --sakura-100: #FDDDE6;
  --sakura-200: #F9C4D2;
  --sakura-300: #F4A7B9;
  --sakura-400: #E8829E;
  --sakura-500: #D4567C;
  --sakura-600: #B0436A;

  /* ── Blush / Rose Scale (deep pinks) ── */
  --rose-50:  #FFD9E6;  /* era #FFF0F4 */
  --rose-100: #FDD5DC;
  --rose-200: #F0B0C0;
  --rose-300: #E87090;
  --rose-400: #C8A0B8;

  /* ── Mauve / Lavender-Pink Scale ── */
  --mauve-50:  #F5E0F5;  /* era #FAF5FA */
  --mauve-100: #F0DCED;
  --mauve-200: #D4B0D0;
  --mauve-300: #C9A0DC;

  /* ── Warm Neutrals ── */
  --warm-white: #FFFBFD;  /* bianco-panna leggermente tintato, per le card */
  --warm-cream: #FFE8F3;  /* era #FFF9F5 */
  --warm-rose:  #FFD9E8;  /* era #FFF5F7 */

  /* ── Ink (Text) ── */
  --ink-50:  #F5F3F4;
  --ink-100: #D4D0D2;
  --ink-200: #8B8589;
  --ink-300: #5C545A;
  --ink-400: #3D2B3A;
  --ink-500: #2A1A28;

  /* ── Sub-theme Accent (overridden per page) ── */
  --sub-accent:       var(--sakura-300);
  --sub-accent-light:  var(--sakura-100);
  --sub-accent-bg:     var(--sakura-50);

  /* ── Typography ── */
  --font-serif:  'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans:   'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-script: 'Dancing Script', cursive;

  /* ── Shadows ── */
  --shadow-xs:   0 1px 2px rgba(61, 43, 58, 0.03);
  --shadow-sm:   0 1px 3px rgba(61, 43, 58, 0.04), 0 1px 2px rgba(61, 43, 58, 0.02);
  --shadow-md:   0 4px 16px rgba(61, 43, 58, 0.06), 0 2px 4px rgba(61, 43, 58, 0.03);
  --shadow-lg:   0 8px 32px rgba(61, 43, 58, 0.08), 0 4px 8px rgba(61, 43, 58, 0.04);
  --shadow-xl:   0 16px 48px rgba(61, 43, 58, 0.10), 0 8px 16px rgba(61, 43, 58, 0.05);
  --shadow-glow: 0 0 40px rgba(244, 167, 185, 0.15);
  --shadow-card: 0 2px 20px rgba(61, 43, 58, 0.05), 0 0 0 1px rgba(244, 167, 185, 0.08);

  /* ── Border Radius ── */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-pill: 9999px;

  /* ── Transitions ── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:    200ms;
  --dur-normal:  350ms;
  --dur-slow:    600ms;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   § 1b. WP-DARK-MODE OVERRIDE
   Force light mode when sakura-diary-theme is active.
   The theme has its own dark mode via prefers-color-scheme.
   The plugin applies dark mode on <html> element — override there.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Override dark mode on HTML level */
html.wp-dark-mode-active:has(body.sakura-diary-theme),
html[data-wp-dark-mode-active]:has(body.sakura-diary-theme),
html[data-wp-dark-mode-scheme="dark"]:has(body.sakura-diary-theme) {
  background-color: transparent !important;
  filter: none !important;
  color-scheme: light !important;
  --wpdm-body-filter: none !important;
  --wpdm-grayscale: 0% !important;
  --wpdm-img-brightness: 100% !important;
}

/* Fallback for browsers without :has() support */
html.wp-dark-mode-active,
html[data-wp-dark-mode-active],
html[data-wp-dark-mode-scheme="dark"] {
  background-color: #FFD9E8 !important;
  filter: none !important;
  color-scheme: light !important;
  --wpdm-body-filter: none !important;
  --wpdm-grayscale: 0% !important;
  --wpdm-img-brightness: 100% !important;
}

body.sakura-diary-theme .wp-dark-mode-floating-switch,
body.sakura-diary-theme .wp-dark-mode-switch,
body.sakura-diary-theme [class*="wp-dark-mode"] {
  display: none !important;
}

/* Undo any inline filter applied by the plugin */
html[data-wp-dark-mode-active] body.sakura-diary-theme,
html[data-wp-dark-mode-active] body.sakura-diary-theme *,
html.wp-dark-mode-active body.sakura-diary-theme img {
  filter: none !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   § 2. GLOBAL RESETS & BASE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

body.sakura-diary-theme {
  background: linear-gradient(
    180deg,
    #FFD9E8 0%,
    #FFE4F0 30%,
    #FFDCE9 60%,
    #FFD9E8 100%
  );
  background-attachment: fixed;
  color: var(--ink-300);
  font-family: var(--font-sans);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Selection color */
body.sakura-diary-theme ::selection {
  background: var(--sakura-200);
  color: var(--ink-500);
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   § 3. TYPOGRAPHY
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Headings */
body.sakura-diary-theme h1,
body.sakura-diary-theme h2,
body.sakura-diary-theme h3,
body.sakura-diary-theme h4,
body.sakura-diary-theme h5,
body.sakura-diary-theme h6,
body.sakura-diary-theme .wp-block-post-title,
body.sakura-diary-theme .wp-block-query-title {
  font-family: var(--font-serif);
  color: var(--ink-400);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

body.sakura-diary-theme h1,
body.sakura-diary-theme .wp-block-post-title {
  font-size: clamp(2rem, 5vw, 3.25rem);
  position: relative;
}

body.sakura-diary-theme h2 {
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  margin-top: 2.5em;
}

body.sakura-diary-theme h3 {
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
}

body.sakura-diary-theme h4 {
  font-size: clamp(1.125rem, 2vw, 1.375rem);
}

/* First letter drop cap on first paragraph after title */
body.sakura-diary-theme .entry-content > p:first-of-type::first-letter,
body.sakura-diary-theme .wp-block-post-content > p:first-of-type::first-letter {
  font-family: var(--font-serif);
  font-size: 3.5em;
  float: left;
  line-height: 0.8;
  margin-right: 0.08em;
  margin-top: 0.1em;
  color: var(--sub-accent, var(--sakura-400));
  font-weight: 600;
}

/* Paragraphs */
body.sakura-diary-theme p {
  text-wrap: pretty;
  max-width: 70ch;
}

/* Links */
body.sakura-diary-theme a {
  color: var(--sakura-500);
  text-decoration: none;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 0.15em;
  transition: color var(--dur-fast) var(--ease-out);
  position: relative;
}

body.sakura-diary-theme .wp-block-post-content a,
body.sakura-diary-theme .entry-content a {
  background-image: linear-gradient(var(--sakura-200), var(--sakura-200));
  background-size: 0% 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--dur-normal) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
  padding-bottom: 1px;
}

body.sakura-diary-theme .wp-block-post-content a:hover,
body.sakura-diary-theme .entry-content a:hover {
  color: var(--sakura-600);
  background-size: 100% 2px;
}

/* Strong/Bold */
body.sakura-diary-theme strong,
body.sakura-diary-theme b {
  font-weight: 600;
  color: var(--ink-400);
}

/* Italic/Emphasis */
body.sakura-diary-theme em,
body.sakura-diary-theme i {
  font-style: italic;
  color: var(--ink-300);
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   § 4. HEADER — Glassmorphism
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Main header wrapper */
body.sakura-diary-theme header,
body.sakura-diary-theme .wp-block-template-part:first-child {
  position: sticky !important;
  top: 0;
  z-index: 100;
  background: rgba(255, 220, 236, 0.85) !important;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid rgba(244, 167, 185, 0.25);
  box-shadow: 0 1px 20px rgba(61, 43, 58, 0.04);
  transition: background var(--dur-normal) var(--ease-out),
              box-shadow var(--dur-normal) var(--ease-out);
}

/* When scrolled, slightly more opaque */
body.sakura-diary-theme.scrolled header,
body.sakura-diary-theme.scrolled .wp-block-template-part:first-child {
  background: rgba(255, 220, 236, 0.96) !important;
  box-shadow: 0 2px 24px rgba(61, 43, 58, 0.06);
}

/* Site title in header */
body.sakura-diary-theme .wp-block-site-title {
  font-family: var(--font-serif) !important;
  font-weight: 600 !important;
  font-size: 1.5rem !important;
  letter-spacing: 0.02em;
}

body.sakura-diary-theme .wp-block-site-title a {
  color: var(--ink-400) !important;
  text-decoration: none !important;
  position: relative;
  padding-left: 1.8em;
}

/* Sakura flower icon before site title */
body.sakura-diary-theme .wp-block-site-title a::before {
  content: '🌸';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.1em;
  filter: drop-shadow(0 1px 2px rgba(244, 167, 185, 0.3));
}

body.sakura-diary-theme .wp-block-site-title a:hover {
  color: var(--sakura-500) !important;
}

/* Navigation links */
body.sakura-diary-theme .wp-block-navigation {
  font-family: var(--font-sans) !important;
  font-size: 0.8125rem !important;
  font-weight: 500;
  gap: 0.15rem !important;
}

body.sakura-diary-theme .wp-block-navigation a,
body.sakura-diary-theme .wp-block-navigation .wp-block-navigation-item__content {
  color: var(--ink-300) !important;
  text-decoration: none !important;
  padding: 0.4em 0.85em !important;
  border-radius: var(--radius-pill);
  transition: all var(--dur-fast) var(--ease-out);
  background: none !important;
  /* Truncate overly long page titles in nav */
  max-width: 22ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  vertical-align: middle;
}

body.sakura-diary-theme .wp-block-navigation a:hover,
body.sakura-diary-theme .wp-block-navigation .wp-block-navigation-item__content:hover {
  color: var(--sakura-600) !important;
  background: var(--sakura-50) !important;
}

/* Navigation mobile overlay */
body.sakura-diary-theme .wp-block-navigation__responsive-container.is-menu-open {
  background: rgba(255, 220, 236, 0.98) !important;
  backdrop-filter: blur(24px);
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   § 5. MAIN CONTENT AREA
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

body.sakura-diary-theme main {
  position: relative;
  margin-top: 1.5rem !important;
}

/* Content wrapper — max width for readability */
body.sakura-diary-theme .wp-block-post-content,
body.sakura-diary-theme .entry-content {
  max-width: 780px;
  margin-inline: auto;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   § 6. BLOG LISTING (Home)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Blog heading / "Blog" title */
body.sakura-diary-theme .wp-block-query-title,
body.sakura-diary-theme .home h1.wp-block-heading,
body.sakura-diary-theme .blog h1.wp-block-heading {
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 6vw, 4rem);
  text-align: center;
  color: var(--ink-400);
  position: relative;
  padding-bottom: 1em;
}

/* Decorative sakura line under blog title */
body.sakura-diary-theme .wp-block-query-title::after,
body.sakura-diary-theme .home h1.wp-block-heading::after,
body.sakura-diary-theme .blog h1.wp-block-heading::after {
  content: '✿  ─────  ✿';
  display: block;
  text-align: center;
  color: var(--sakura-300);
  font-size: 0.4em;
  letter-spacing: 0.3em;
  margin-top: 0.8em;
  font-family: var(--font-sans);
}

/* Post list — individual post items */
body.sakura-diary-theme .wp-block-post {
  background: var(--warm-white);
  border-radius: var(--radius-xl);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  margin-bottom: 2rem;
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(244, 167, 185, 0.08);
  transition: transform var(--dur-normal) var(--ease-out),
              box-shadow var(--dur-normal) var(--ease-out);
  position: relative;
  overflow: hidden;
}

body.sakura-diary-theme .wp-block-post::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--sakura-200) 0%,
    var(--sakura-300) 50%,
    var(--sakura-200) 100%
  );
  opacity: 0;
  transition: opacity var(--dur-normal) var(--ease-out);
}

body.sakura-diary-theme .wp-block-post:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg), var(--shadow-glow);
}

body.sakura-diary-theme .wp-block-post:hover::before {
  opacity: 1;
}

/* Post title in listing */
body.sakura-diary-theme .wp-block-post .wp-block-post-title {
  font-size: clamp(1.375rem, 3vw, 1.875rem);
  margin-bottom: 0.5em;
}

body.sakura-diary-theme .wp-block-post .wp-block-post-title a {
  color: var(--ink-400);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

body.sakura-diary-theme .wp-block-post .wp-block-post-title a:hover {
  color: var(--sakura-500);
}

/* Post date in listing */
body.sakura-diary-theme .wp-block-post .wp-block-post-date {
  font-family: var(--font-script);
  color: var(--ink-200);
  font-size: 1rem;
  order: -1;
  margin-bottom: 0.3em;
}

/* Post excerpt */
body.sakura-diary-theme .wp-block-post .wp-block-post-excerpt {
  color: var(--ink-200);
  line-height: 1.7;
}

body.sakura-diary-theme .wp-block-post-excerpt__more-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--sakura-500);
  padding: 0.5em 1.2em;
  border-radius: var(--radius-pill);
  background: var(--sakura-50);
  margin-top: 1em;
  transition: all var(--dur-fast) var(--ease-out);
}

body.sakura-diary-theme .wp-block-post-excerpt__more-link:hover {
  background: var(--sakura-100);
  color: var(--sakura-600);
  transform: translateX(3px);
}

body.sakura-diary-theme .wp-block-post-excerpt__more-link::after {
  content: '→';
  transition: transform var(--dur-fast) var(--ease-spring);
}

body.sakura-diary-theme .wp-block-post-excerpt__more-link:hover::after {
  transform: translateX(4px);
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   § 7. SINGLE POST
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Post title — hero style */
body.sakura-diary-theme.single .wp-block-post-title,
body.sakura-diary-theme.page .wp-block-post-title {
  text-align: center;
  font-size: clamp(2rem, 5.5vw, 3.5rem);
  line-height: 1.15;
  max-width: 900px;
  margin-inline: auto;
  padding-bottom: 0.3em;
  position: relative;
  color: var(--ink-500);
}

/* Decorative element under single post title */
body.sakura-diary-theme.single .wp-block-post-title::after,
body.sakura-diary-theme.page .wp-block-post-title::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--sub-accent, var(--sakura-300)), transparent);
  margin: 0.7em auto 0;
  border-radius: 3px;
}

/* Author / Meta line */
body.sakura-diary-theme .wp-block-post-author-name,
body.sakura-diary-theme .is-style-post-terms-1 {
  text-align: center;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: var(--ink-200);
  margin-bottom: 2em;
}

/* Post date on single */
body.sakura-diary-theme.single .wp-block-post-date,
body.sakura-diary-theme.page .wp-block-post-date {
  text-align: center;
  font-family: var(--font-script);
  font-size: 1.1rem;
  color: var(--ink-200);
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   § 8. IMAGES
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

body.sakura-diary-theme .wp-block-image img,
body.sakura-diary-theme .wp-block-post-featured-image img,
body.sakura-diary-theme .wp-block-gallery img,
body.sakura-diary-theme .wp-block-post-content img {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-md);
  transition: transform var(--dur-normal) var(--ease-out),
              box-shadow var(--dur-normal) var(--ease-out);
}

body.sakura-diary-theme .wp-block-image:hover img,
body.sakura-diary-theme .wp-block-gallery figure:hover img,
body.sakura-diary-theme .wp-block-post-content img:hover {
  transform: scale(1.01);
  box-shadow: var(--shadow-lg);
}

/* Image captions */
body.sakura-diary-theme .wp-block-image figcaption,
body.sakura-diary-theme .wp-element-caption {
  font-family: var(--font-script);
  font-size: 0.9rem;
  color: var(--ink-200);
  text-align: center;
  margin-top: 0.6em;
}

/* Gallery grid */
body.sakura-diary-theme .wp-block-gallery {
  gap: 1rem !important;
}

body.sakura-diary-theme .wp-block-gallery .wp-block-image {
  border-radius: var(--radius-lg);
  overflow: hidden;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   § 9. BLOCKQUOTES & PULLQUOTES
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

body.sakura-diary-theme blockquote,
body.sakura-diary-theme .wp-block-quote {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--ink-300);
  border-left: 3px solid var(--sub-accent, var(--sakura-300)) !important;
  background: var(--sub-accent-bg, var(--sakura-50));
  padding: 1.5em 2em !important;
  margin: 2em 0;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  position: relative;
}

body.sakura-diary-theme blockquote::before {
  content: '"';
  position: absolute;
  top: -0.15em;
  left: 0.3em;
  font-family: var(--font-serif);
  font-size: 4em;
  color: var(--sub-accent, var(--sakura-200));
  opacity: 0.3;
  line-height: 1;
}

body.sakura-diary-theme .wp-block-pullquote {
  border-top: 2px solid var(--sakura-200);
  border-bottom: 2px solid var(--sakura-200);
  padding: 2em 0;
  text-align: center;
}

body.sakura-diary-theme .wp-block-pullquote blockquote {
  border-left: none !important;
  background: none;
  padding: 0 !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   § 10. SEPARATORS — Sakura Petal Dividers
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* WordPress separator blocks */
body.sakura-diary-theme hr,
body.sakura-diary-theme .wp-block-separator {
  border: none !important;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--sakura-200) 20%,
    var(--sub-accent, var(--sakura-300)) 50%,
    var(--sakura-200) 80%,
    transparent 100%
  ) !important;
  max-width: 300px;
  margin: 3em auto !important;
  position: relative;
  overflow: visible;
}

body.sakura-diary-theme hr::after,
body.sakura-diary-theme .wp-block-separator::after {
  content: '✿';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--warm-cream);
  padding: 0 0.8em;
  color: var(--sub-accent, var(--sakura-300));
  font-size: 1rem;
}

/* Text-based separators (underscores) — restyle */
body.sakura-diary-theme .sakura-divider {
  text-indent: -9999px;
  overflow: hidden;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--sakura-200) 20%,
    var(--sub-accent, var(--sakura-300)) 50%,
    var(--sakura-200) 80%,
    transparent 100%
  );
  max-width: 300px;
  margin: 3em auto;
  position: relative;
}

body.sakura-diary-theme .sakura-divider::after {
  content: '✿';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-indent: 0;
  background: var(--warm-cream);
  padding: 0 0.8em;
  color: var(--sub-accent, var(--sakura-300));
  font-size: 1rem;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   § 11. FOOTER
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

body.sakura-diary-theme footer,
body.sakura-diary-theme .wp-block-template-part:last-child {
  background: linear-gradient(180deg, transparent 0%, var(--sakura-50) 100%) !important;
  border-top: 1px solid rgba(244, 167, 185, 0.12);
  position: relative;
  margin-top: 4em;
}

/* Decorative top border pattern */
body.sakura-diary-theme footer::before {
  content: '✿ · · ✿ · · ✿ · · ✿ · · ✿';
  display: block;
  text-align: center;
  color: var(--sakura-200);
  font-size: 0.7rem;
  letter-spacing: 0.5em;
  padding: 1.5em 0 0;
  opacity: 0.7;
}

body.sakura-diary-theme footer a {
  color: var(--ink-200) !important;
  transition: color var(--dur-fast) var(--ease-out);
}

body.sakura-diary-theme footer a:hover {
  color: var(--sakura-500) !important;
}

/* Footer text */
body.sakura-diary-theme footer p,
body.sakura-diary-theme footer .wp-block-site-title {
  font-size: 0.85rem;
  color: var(--ink-200);
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   § 12. SUB-THEMES — Per-Page Color Accents
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* 🐹 Big Boss Neve — Petal rose, delicate */
body.subtheme-neve {
  --sub-accent: #F0C0D0;
  --sub-accent-light: #F9D4E2;
  --sub-accent-bg: #FFE4EE;
}
body.subtheme-neve { background: linear-gradient(180deg, #FFE0EC 0%, #FFE8F2 30%, #FFD8E8 60%, #FFE0EC 100%) !important; background-attachment: fixed !important; }

/* 🌱 Esperienza di vita — Dusty rose, tender */
body.subtheme-vita {
  --sub-accent: #E8A0B8;
  --sub-accent-light: #F0C8D8;
  --sub-accent-bg: #F9D4E4;
}
body.subtheme-vita { background: linear-gradient(180deg, #F5CEDE 0%, #F9D4E4 30%, #F0C8DC 60%, #F5CEDE 100%) !important; background-attachment: fixed !important; }

/* 🏥 Ospedale — Mauve pink, calming */
body.subtheme-ospedale {
  --sub-accent: #D4A0C4;
  --sub-accent-light: #E8C8DC;
  --sub-accent-bg: #F0D4EA;
}
body.subtheme-ospedale { background: linear-gradient(180deg, #EDD0E8 0%, #F0D4EA 30%, #E8CCE4 60%, #EDD0E8 100%) !important; background-attachment: fixed !important; }

/* 🔥 Passioni — Deep vibrant rose */
body.subtheme-passioni {
  --sub-accent: #E87090;
  --sub-accent-light: #F5B4C4;
  --sub-accent-bg: #FFD0DC;
}
body.subtheme-passioni { background: linear-gradient(180deg, #FFCCD8 0%, #FFD4E0 30%, #FFC8D4 60%, #FFCCD8 100%) !important; background-attachment: fixed !important; }

/* 😎 Nuance Audio — Dusky muted rose */
body.subtheme-audio {
  --sub-accent: #C8A0B8;
  --sub-accent-light: #DCC8D4;
  --sub-accent-bg: #EDD4E4;
}
body.subtheme-audio { background: linear-gradient(180deg, #E8D0E0 0%, #EDD4E4 30%, #E4CCE0 60%, #E8D0E0 100%) !important; background-attachment: fixed !important; }

/* 🏛️ Roma — Warm blush rose */
body.subtheme-roma {
  --sub-accent: #EDB0C0;
  --sub-accent-light: #F5C8D4;
  --sub-accent-bg: #FFD8E4;
}
body.subtheme-roma { background: linear-gradient(180deg, #FFD4E0 0%, #FFDCE8 30%, #FFD0DC 60%, #FFD4E0 100%) !important; background-attachment: fixed !important; }

/* ✈️ Londra — Grey-mauve, sophisticated */
body.subtheme-londra {
  --sub-accent: #C4A0B8;
  --sub-accent-light: #D8C0D0;
  --sub-accent-bg: #ECD0E0;
}
body.subtheme-londra { background: linear-gradient(180deg, #E4CCE0 0%, #ECDCE8 30%, #E0C8D8 60%, #E4CCE0 100%) !important; background-attachment: fixed !important; }

/* 🇨🇭 Svizzera — Pink lavender, dreamy */
body.subtheme-svizzera {
  --sub-accent: #D4B0D0;
  --sub-accent-light: #E4CCE8;
  --sub-accent-bg: #F0D8F0;
}
body.subtheme-svizzera { background: linear-gradient(180deg, #ECD4EC 0%, #F0D8F0 30%, #E8D0E8 60%, #ECD4EC 100%) !important; background-attachment: fixed !important; }

/* ✨ Liceo Artistico — Lavender pink, creative */
body.subtheme-arte {
  --sub-accent: #C9A0DC;
  --sub-accent-light: #DCC4EC;
  --sub-accent-bg: #ECDCF4;
}
body.subtheme-arte { background: linear-gradient(180deg, #E8D4F0 0%, #ECD8F4 30%, #E4CCE8 60%, #E8D4F0 100%) !important; background-attachment: fixed !important; }

/* 🎭 Comicon — Bright cheerful rose */
body.subtheme-comicon {
  --sub-accent: #F0909C;
  --sub-accent-light: #F9BCC8;
  --sub-accent-bg: #FFD4DC;
}
body.subtheme-comicon { background: linear-gradient(180deg, #FFD0D8 0%, #FFD8E0 30%, #FFCCD4 60%, #FFD0D8 100%) !important; background-attachment: fixed !important; }

/* Sub-theme accent application to elements */
body[class*="subtheme-"] h1,
body[class*="subtheme-"] h2,
body[class*="subtheme-"] .wp-block-post-title {
  color: var(--ink-400);
}

body[class*="subtheme-"] h2::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 0.8em;
  background: var(--sub-accent);
  border-radius: 2px;
  margin-right: 0.5em;
  vertical-align: middle;
  position: relative;
  top: -0.05em;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   § 13. ANIMATIONS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── Floating Sakura Petals ── */
@keyframes sakura-fall {
  0% {
    transform: translateY(-10vh) translateX(0) rotate(0deg) scale(1);
    opacity: 0;
  }
  10% {
    opacity: 0.8;
  }
  50% {
    transform: translateY(45vh) translateX(80px) rotate(180deg) scale(0.9);
    opacity: 0.6;
  }
  90% {
    opacity: 0.3;
  }
  100% {
    transform: translateY(105vh) translateX(-30px) rotate(360deg) scale(0.7);
    opacity: 0;
  }
}

@keyframes sakura-fall-reverse {
  0% {
    transform: translateY(-10vh) translateX(0) rotate(0deg) scale(1);
    opacity: 0;
  }
  10% {
    opacity: 0.7;
  }
  50% {
    transform: translateY(45vh) translateX(-70px) rotate(-150deg) scale(0.85);
    opacity: 0.5;
  }
  90% {
    opacity: 0.2;
  }
  100% {
    transform: translateY(105vh) translateX(40px) rotate(-300deg) scale(0.65);
    opacity: 0;
  }
}

@keyframes sakura-sway {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  25% { transform: translateX(15px) rotate(5deg); }
  75% { transform: translateX(-15px) rotate(-5deg); }
}

/* Petal elements (generated by JS) */
.sakura-petal {
  position: fixed;
  top: -40px;
  pointer-events: none;
  z-index: 99;
  width: 12px;
  height: 16px;
  background: radial-gradient(ellipse at 30% 30%, var(--sakura-200), var(--sakura-300));
  border-radius: 50% 50% 50% 0;
  opacity: 0;
  will-change: transform, opacity;
  filter: blur(0.3px);
}

.sakura-petal:nth-child(odd) {
  animation: sakura-fall var(--petal-duration, 12s) var(--petal-delay, 0s) infinite linear;
  width: 10px;
  height: 14px;
}

.sakura-petal:nth-child(even) {
  animation: sakura-fall-reverse var(--petal-duration, 14s) var(--petal-delay, 2s) infinite linear;
  width: 14px;
  height: 18px;
  background: radial-gradient(ellipse at 30% 30%, var(--sakura-100), var(--sakura-200));
}

/* ── Scroll Reveal ── */
.sakura-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}

.sakura-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ── Page Load Fade ── */
@keyframes page-fade-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

body.sakura-diary-theme main {
  animation: page-fade-in 0.8s var(--ease-out) both;
  animation-delay: 0.15s;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   § 14. FOCUS & ACCESSIBILITY
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

body.sakura-diary-theme :focus-visible {
  outline: 2px solid var(--sakura-400);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Skip to content */
body.sakura-diary-theme .skip-link,
body.sakura-diary-theme a[href="#wp--skip-link--target"] {
  background: var(--sakura-500);
  color: white;
  padding: 0.5em 1.5em;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  font-family: var(--font-sans);
  font-weight: 500;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .sakura-petal {
    display: none !important;
  }

  .sakura-reveal {
    opacity: 1;
    transform: none;
  }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   § 15. POST NAVIGATION
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

body.sakura-diary-theme .wp-block-post-navigation-link {
  font-family: var(--font-sans);
  padding: 1.2em 1.8em;
  background: var(--warm-white);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(244, 167, 185, 0.12);
  box-shadow: var(--shadow-sm);
  transition: all var(--dur-normal) var(--ease-out);
}

body.sakura-diary-theme .wp-block-post-navigation-link:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--sakura-200);
  transform: translateY(-2px);
}

body.sakura-diary-theme .wp-block-post-navigation-link .post-navigation-link__label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-200);
  font-weight: 500;
}

body.sakura-diary-theme .wp-block-post-navigation-link a {
  color: var(--ink-400);
  font-weight: 500;
  text-decoration: none;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   § 16. COMMENTS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

body.sakura-diary-theme .wp-block-comments {
  background: var(--warm-white);
  border-radius: var(--radius-xl);
  padding: 2em;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(244, 167, 185, 0.08);
}

body.sakura-diary-theme .wp-block-comment-template li {
  border-bottom: 1px solid var(--ink-50);
  padding-bottom: 1.5em;
  margin-bottom: 1.5em;
}

body.sakura-diary-theme .wp-block-comment-template li:last-child {
  border-bottom: none;
}

/* Comment form */
body.sakura-diary-theme .comment-form input[type="text"],
body.sakura-diary-theme .comment-form input[type="email"],
body.sakura-diary-theme .comment-form input[type="url"],
body.sakura-diary-theme .comment-form textarea {
  border: 1px solid var(--ink-50);
  border-radius: var(--radius-md);
  padding: 0.8em 1em;
  font-family: var(--font-sans);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
  background: var(--warm-white);
}

body.sakura-diary-theme .comment-form input:focus,
body.sakura-diary-theme .comment-form textarea:focus {
  border-color: var(--sakura-300);
  box-shadow: 0 0 0 3px rgba(244, 167, 185, 0.15);
  outline: none;
}

body.sakura-diary-theme .comment-form [type="submit"] {
  background: var(--sakura-300);
  color: white;
  border: none;
  border-radius: var(--radius-pill);
  padding: 0.8em 2em;
  font-family: var(--font-sans);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}

body.sakura-diary-theme .comment-form [type="submit"]:hover {
  background: var(--sakura-500);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   § 17. SPECIAL CONTENT BLOCKS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Lists */
body.sakura-diary-theme .wp-block-post-content ul,
body.sakura-diary-theme .wp-block-post-content ol {
  padding-left: 1.5em;
}

body.sakura-diary-theme .wp-block-post-content ul li::marker {
  color: var(--sub-accent, var(--sakura-300));
}

body.sakura-diary-theme .wp-block-post-content ol li::marker {
  color: var(--sub-accent, var(--sakura-400));
  font-weight: 600;
}

/* Code blocks */
body.sakura-diary-theme pre,
body.sakura-diary-theme .wp-block-code {
  background: var(--ink-500) !important;
  color: var(--sakura-100);
  border-radius: var(--radius-md);
  padding: 1.5em;
  font-size: 0.875rem;
  overflow-x: auto;
}

body.sakura-diary-theme code {
  font-size: 0.9em;
  background: var(--sakura-50);
  color: var(--sakura-600);
  padding: 0.15em 0.4em;
  border-radius: var(--radius-sm);
}

/* Tables */
body.sakura-diary-theme .wp-block-table {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

body.sakura-diary-theme .wp-block-table table {
  border-collapse: collapse;
}

body.sakura-diary-theme .wp-block-table th {
  background: var(--sakura-50);
  color: var(--ink-400);
  font-weight: 600;
  padding: 1em;
  text-align: left;
  border-bottom: 2px solid var(--sakura-200);
}

body.sakura-diary-theme .wp-block-table td {
  padding: 0.8em 1em;
  border-bottom: 1px solid var(--ink-50);
}

body.sakura-diary-theme .wp-block-table tr:hover td {
  background: var(--sakura-50);
}

/* Columns */
body.sakura-diary-theme .wp-block-columns {
  gap: 2rem;
}

/* Cover block */
body.sakura-diary-theme .wp-block-cover {
  border-radius: var(--radius-xl);
  overflow: hidden;
}

/* Group block with background */
body.sakura-diary-theme .wp-block-group.has-background {
  border-radius: var(--radius-lg);
  padding: 2em;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   § 18. RESPONSIVE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Mobile (< 640px) */
@media (max-width: 640px) {
  body.sakura-diary-theme .wp-block-post {
    padding: 1.2rem;
    border-radius: var(--radius-lg);
    margin-bottom: 1.2rem;
  }

  body.sakura-diary-theme .wp-block-post-title {
    font-size: clamp(1.5rem, 6vw, 2rem) !important;
  }

  body.sakura-diary-theme h2 {
    font-size: clamp(1.25rem, 5vw, 1.75rem);
  }

  body.sakura-diary-theme .wp-block-navigation a {
    padding: 0.3em 0.6em !important;
    font-size: 0.8rem;
  }

  body.sakura-diary-theme .wp-block-gallery {
    gap: 0.5rem !important;
  }

  body.sakura-diary-theme blockquote,
  body.sakura-diary-theme .wp-block-quote {
    padding: 1em 1.2em !important;
  }

  /* Reduce petals on mobile */
  .sakura-petal:nth-child(n+4) {
    display: none;
  }
}

/* Tablet (641–1024px) */
@media (min-width: 641px) and (max-width: 1024px) {
  body.sakura-diary-theme .wp-block-post {
    padding: 1.8rem;
  }

  /* Reduce petals on tablet */
  .sakura-petal:nth-child(n+6) {
    display: none;
  }
}

/* Large screens */
@media (min-width: 1200px) {
  body.sakura-diary-theme .wp-block-post-content,
  body.sakura-diary-theme .entry-content {
    font-size: 1.0625rem;
  }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   § 19. SCROLLBAR
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

body.sakura-diary-theme::-webkit-scrollbar {
  width: 8px;
}

body.sakura-diary-theme::-webkit-scrollbar-track {
  background: var(--warm-cream);
}

body.sakura-diary-theme::-webkit-scrollbar-thumb {
  background: var(--sakura-200);
  border-radius: var(--radius-pill);
  border: 2px solid var(--warm-cream);
}

body.sakura-diary-theme::-webkit-scrollbar-thumb:hover {
  background: var(--sakura-300);
}

/* Firefox */
body.sakura-diary-theme {
  scrollbar-width: thin;
  scrollbar-color: var(--sakura-200) var(--warm-cream);
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   § 20. PRINT STYLES
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media print {
  body.sakura-diary-theme {
    background: white !important;
    color: #333 !important;
  }

  .sakura-petal,
  body.sakura-diary-theme header,
  body.sakura-diary-theme footer {
    display: none !important;
  }

  body.sakura-diary-theme .wp-block-post-content {
    max-width: 100%;
  }

  body.sakura-diary-theme a {
    color: #333 !important;
    text-decoration: underline;
  }

  body.sakura-diary-theme a[href]::after {
    content: ' (' attr(href) ')';
    font-size: 0.8em;
    color: #666;
  }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   § 21. FORCE LIGHT MODE
   The Sakura Diary theme is designed as a light-only experience.
   The pastel palette, sakura blossoms, and serene sky aesthetic
   require a light background. We force color-scheme: light to
   prevent OS dark mode from affecting the design.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

:root,
html,
body.sakura-diary-theme {
  color-scheme: light !important;
}