:root{
    /* Palette mapped from color_schemes.dart */
    --primary: #2E7D32;         /* main brand verde (primary) */
    --primary-dark: #1B5E20;    /* darker primary */
    --primary-container: #4CAF50; /* secondary green */
    --secondary: #1976D2;       /* blu istituzionale */
    --secondary-100: #BBDEFB;
    --tertiary: #66BB6A;        /* green light accents */
    --background: #F1F8E9;      /* sfondo leggermente verdastro */
    --surface: #FFFFFF;
    --muted: #5B6B58;           /* soft muted (verde-grigio) */
    --radius: 14px;
    /* On-surface text color for elements placed on light surfaces inside hero */
    --on-surface: #1B1F1B; /* dark text used on white cards */

    /* Hero specific stops (derived from color_schemes.dart)
       primary: #2E7D32 -> rgb(46,125,50)
       primary-container: #4CAF50 -> rgb(76,175,80)
    */
    --hero-start-r: 46; --hero-start-g: 125; --hero-start-b: 50;
    --hero-end-r: 76; --hero-end-g: 175; --hero-end-b: 80;
    /* Brand dark-blue used for image panels and footer-like accents */
    --brand-blue-dark: #03254c; /* deep navy-blue used in footer gradient */
}

/* --- GLOBAL MOBILE OPTIMIZATION --- */
@media (max-width: 576px) {
  main.container.py-4 {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
  .display-5 {
    font-size: 2rem !important;
    line-height: 1.2;
  }
  .lead {
    font-size: 1.08rem !important;
  }
  .wp-block-image.size-large img {
    max-width: 100vw !important;
    height: auto !important;
    border-radius: 0.5rem;
    margin-top: 1rem;
  }
  .btn-lg, .btn-primary.btn-lg, .btn-outline-primary.btn-lg {
    font-size: 1.08rem !important;
    padding: 0.75rem 1.2rem !important;
    width: 100%;
    margin-bottom: 0.5rem;
  }
  .flex-md-row {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }
  .entry-content {
    font-size: 1.02rem !important;
  }

  .footer-brand img[alt="ISO 27001"] {
    height:28px !important;
    margin-top: 0.5rem;
  }
}

/* Base layout */
body{
    color:#222;
    /* soft gradient using background + white to keep airy look */
    background:linear-gradient(180deg,var(--background) 0%, #ffffff 100%);
}

/* Navbar */
.navbar{
    backdrop-filter: blur(6px);
    background: rgba(255,255,255,0.85);
    border-bottom: 1px solid rgba(0,0,0,0.04);
}

/* Brand token */
.brand{color:var(--primary);font-weight:700;}


/* Cards */
.card-ghost{
    background: rgba(255,255,255,0.88);
    border-radius:var(--radius);
    box-shadow:0 10px 30px rgba(15,23,42,0.06);
}

/* Feature icon */
.feature-icon{
    width:64px;height:64px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;font-size:28px;
}

/* Buttons */
.btn-primary-ghost{
    background:transparent;
    border:2px solid var(--primary);
    color:var(--primary);
}
.btn-primary-ghost:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary-dark);
}
/* Base layout */

/* Make bootstrap .btn-success match tertiary (green accents) */
.btn-success{
    background:var(--tertiary) !important;
    border-color:var(--tertiary) !important;
    color:#fff !important;
}
.btn-success:hover{
    background:var(--primary-container) !important;
    border-color:var(--primary-container) !important;

/* Glass effect helper */
    background:linear-gradient(180deg,var(--background) 0%, #ffffff 100%);

/* Section titles and text */
}


/* Floating CTA */
/* Navbar */

/* Footer */
.navbar{

/* Responsive */
    backdrop-filter: blur(6px);
    background: rgba(255,255,255,0.85);
    border-bottom: 1px solid rgba(0,0,0,0.04);
}

/* Brand token */
/* Override/bootstrap utility color mapping to match brand palette */
.text-primary{ color: var(--primary) !important; }
.bg-primary{ background-color: var(--primary) !important; color: #fff !important; }
.bg-success{ background-color: var(--tertiary) !important; color: #fff !important; }
.text-success{ color: var(--tertiary) !important; }

/* Secondary utilities */
.bg-info{ background-color: var(--secondary-100) !important; color: var(--secondary) !important; }
.text-info{ color: var(--secondary) !important; }

/* Danger (used for Scuole chip) */
.bg-danger{ background-color: #d9534f !important; color: #fff !important; }
.text-danger{ color: #d9534f !important; }

/* Badges small adjustments */
.badge-custom{ font-weight:600; padding:.45rem .7rem; }

/* Video preview play overlay uses brand color */
.video-preview .play-overlay svg{ color: var(--primary); transition: transform .18s ease; }
.video-preview .play-overlay svg circle{ fill: currentColor; }

/* Pricing component: video sizing and layout (moved from component-local styles)
   Increased max-width by ~27% as requested (360 -> 458, 420 -> 534).
   Uses Bootstrap .ratio wrapper for consistent 9:16 behavior across browsers.
*/
.pricing-video-wrap { display:flex; justify-content:center; }
.video-vertical{ display:block; width:100%; height:100%; object-fit:cover; }
.video-wrap .ratio{ max-width:458px; border-radius:.5rem; overflow:hidden; }
/* Fallback for environments where Bootstrap's .ratio utilities or a custom
   .ratio-9x16 are not available: create a 9:16 vertical ratio container.
   The padding-top technique ensures the wrapper has intrinsic height so the
   poster is visible even before sources are injected. The inner video is
   absolutely positioned to fill the container.
*/
.video-wrap .ratio.ratio-9x16, .video-wrap .ratio-9x16 { position: relative; width: 100%; padding-top: calc(100% * 16 / 9); }
.video-wrap .ratio.ratio-9x16 > *{ position:absolute; top:0; left:0; width:100%; height:100%; }
@media(min-width:768px){ .video-wrap .ratio{ max-width:534px; } }

/* Ensure a sensible minimum height so the container is visible on very narrow viewports */
.video-wrap .ratio { min-height: 240px; }

/* Ensure the .video-wrap clips the background/poster to rounded corners */
.video-wrap{ display:inline-block; position:relative; border-radius:.5rem; overflow:hidden; }

/* Overlay play button: centered, semi-transparent, larger tap target and accessible */
.video-load-btn.video-play-center{
  position:absolute; inset:0; margin:auto; z-index:6;
  width:72px; height:72px; display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,0.88); border: none; box-shadow: 0 8px 20px rgba(3,37,76,0.12);
  transition: transform .14s ease, background .12s ease, box-shadow .12s ease;
}
.video-load-btn.video-play-center i{ font-size:1.25rem; color: var(--primary); }
.video-load-btn.video-play-center:hover{ transform: scale(1.06); }
.video-load-btn.video-play-center:focus{ outline: 3px solid rgba(46,125,50,0.16); outline-offset:4px; }

/* Mobile: slightly larger hit area */
@media (max-width:576px){ .video-load-btn.video-play-center{ width:84px; height:84px; } }

/* Dark mode variant: darker translucent circle, keep icon contrast */
.theme-dark .video-load-btn.video-play-center{ background: rgba(8,12,16,0.64); box-shadow: 0 8px 20px rgba(0,0,0,0.6); }
.theme-dark .video-load-btn.video-play-center i{ color: #e6f4ea; }

/* Utility: visually-hidden for accessible labels */
.visually-hidden{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* Video debug panel styles */
.video-debug{ max-width:534px; }
.video-debug.collapsed #vd-lines{ display:none; }
.video-debug .btn{ font-size:.8rem; padding:.28rem .5rem; }
.video-debug ul{ padding-left:1rem; margin-bottom:0; }

/* Dark-mode: make section titles inside light background sections readable
   e.g. 'Piani e adozione' uses .section-title; when a section has .bg-light
   and the page is in .theme-dark, ensure the title uses a dark on-surface color
   so it remains visible against the light background.
*/
.theme-dark .bg-light .section-title { color: #1b1f1b; }

/* ===== Pricing carousel (mobile) styling ===== */
.pricing-carousel .carousel-inner { padding: .5rem 0; }
.pricing-carousel .carousel-item { display: flex; justify-content: center; }
.pricing-carousel .card-category { max-width: 520px; width: 94%; border-radius: .75rem; overflow: hidden; box-shadow: 0 12px 34px rgba(15,23,42,0.08); }
.pricing-carousel .category-media { flex: 0 0 auto; }
.pricing-carousel .category-content { padding: 12px 16px; }
.pricing-carousel .img-vertical-916{ width:100%; height:auto; aspect-ratio: 9/16; object-fit: cover; border-radius: .5rem; }

/* Carousel controls: circular buttons with brand color icon */
.pricing-carousel .carousel-control-prev, .pricing-carousel .carousel-control-next { width:48px; height:48px; border-radius:50%; background: rgba(255,255,255,0.92); box-shadow: 0 8px 22px rgba(15,23,42,0.06); display:flex; align-items:center; justify-content:center; color: var(--primary); }
.pricing-carousel .carousel-control-prev:hover, .pricing-carousel .carousel-control-next:hover { transform: translateY(-3px); }
.pricing-carousel .carousel-control-prev-icon, .pricing-carousel .carousel-control-next-icon { background-size: 1.1rem 1.1rem; filter: none; }

/* Make indicators smaller and brand-colored when active */
.pricing-carousel .carousel-indicators [data-bs-target] { width:8px; height:8px; border-radius:8px; background: rgba(0,0,0,0.18); }
.pricing-carousel .carousel-indicators .active { background: var(--primary) !important; width:10px; height:10px; }

@media (max-width: 420px) {
    .pricing-carousel .card-category { width: 96%; }
    .pricing-carousel .carousel-control-prev, .pricing-carousel .carousel-control-next { width:44px; height:44px; }
}

/* Ensure a sensible minimum height so the container is visible on very narrow viewports */
.video-wrap .ratio { min-height: 240px; }

/* Ensure the .video-wrap clips the background/poster to rounded corners */
.video-wrap{ display:inline-block; position:relative; border-radius:.5rem; overflow:hidden; }

/* Overlay play button: centered, semi-transparent, larger tap target and accessible */
.video-load-btn.video-play-center{
  position:absolute; inset:0; margin:auto; z-index:6;
  width:72px; height:72px; display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,0.88); border: none; box-shadow: 0 8px 20px rgba(3,37,76,0.12);
  transition: transform .14s ease, background .12s ease, box-shadow .12s ease;
}
.video-load-btn.video-play-center i{ font-size:1.25rem; color: var(--primary); }
.video-load-btn.video-play-center:hover{ transform: scale(1.06); }
.video-load-btn.video-play-center:focus{ outline: 3px solid rgba(46,125,50,0.16); outline-offset:4px; }

/* Mobile: slightly larger hit area */
@media (max-width:576px){ .video-load-btn.video-play-center{ width:84px; height:84px; } }

/* Dark mode variant: darker translucent circle, keep icon contrast */
.theme-dark .video-load-btn.video-play-center{ background: rgba(8,12,16,0.64); box-shadow: 0 8px 20px rgba(0,0,0,0.6); }
.theme-dark .video-load-btn.video-play-center i{ color: #e6f4ea; }

/* Utility: visually-hidden for accessible labels */
.visually-hidden{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* Video debug panel styles */
.video-debug{ max-width:534px; }
.video-debug.collapsed #vd-lines{ display:none; }
.video-debug .btn{ font-size:.8rem; padding:.28rem .5rem; }
.video-debug ul{ padding-left:1rem; margin-bottom:0; }

/* Dark-mode: make section titles inside light background sections readable
   e.g. 'Piani e adozione' uses .section-title; when a section has .bg-light
   and the page is in .theme-dark, ensure the title uses a dark on-surface color
   so it remains visible against the light background.
*/
.theme-dark .bg-light .section-title { color: #1b1f1b; }

/* ===== Pricing carousel (mobile) styling ===== */
.pricing-carousel .carousel-inner { padding: .5rem 0; }
.pricing-carousel .carousel-item { display: flex; justify-content: center; }
.pricing-carousel .card-category { max-width: 520px; width: 94%; border-radius: .75rem; overflow: hidden; box-shadow: 0 12px 34px rgba(15,23,42,0.08); }
.pricing-carousel .category-media { flex: 0 0 auto; }
.pricing-carousel .category-content { padding: 12px 16px; }
.pricing-carousel .img-vertical-916{ width:100%; height:auto; aspect-ratio: 9/16; object-fit: cover; border-radius: .5rem; }

/* Carousel controls: circular buttons with brand color icon */
.pricing-carousel .carousel-control-prev, .pricing-carousel .carousel-control-next { width:48px; height:48px; border-radius:50%; background: rgba(255,255,255,0.92); box-shadow: 0 8px 22px rgba(15,23,42,0.06); display:flex; align-items:center; justify-content:center; color: var(--primary); }
.pricing-carousel .carousel-control-prev:hover, .pricing-carousel .carousel-control-next:hover { transform: translateY(-3px); }
.pricing-carousel .carousel-control-prev-icon, .pricing-carousel .carousel-control-next-icon { background-size: 1.1rem 1.1rem; filter: none; }

/* Make indicators smaller and brand-colored when active */
.pricing-carousel .carousel-indicators [data-bs-target] { width:8px; height:8px; border-radius:8px; background: rgba(0,0,0,0.18); }
.pricing-carousel .carousel-indicators .active { background: var(--primary) !important; width:10px; height:10px; }

@media (max-width: 420px) {
    .pricing-carousel .card-category { width: 96%; }
    .pricing-carousel .carousel-control-prev, .pricing-carousel .carousel-control-next { width:44px; height:44px; }
}

/* -------------------------
   Pricing component: card styles and mobile glass overlay
   Moved from component-local styles to central stylesheet for theme handling
   ------------------------- */
:root{
    /* overlay gradient stops for mobile glass on light theme */
    --mobile-glass-top: rgba(255,255,255,0.30);
    --mobile-glass-bottom: rgba(255,255,255,1);
    --mobile-glass-text: #111;
    --mobile-glass-subtext: rgba(51,51,51,0.9);
}

/* Dark theme overrides for mobile glass overlay */
.theme-dark{ --mobile-glass-top: rgba(0,0,0,0.30); --mobile-glass-bottom: rgba(0,0,0,0.82); --mobile-glass-text: #f5fbf2; --mobile-glass-subtext: rgba(230,244,234,0.9); }

.img-vertical-916{ width:100%; aspect-ratio:9/16; object-fit:cover; border-radius:.5rem; background:var(--surface); display:block; }

/* School overlay (used by pricing school's card) */
.card-ghost.school { position: relative; overflow: visible; }
.school-overlay { position: absolute; right: -62px; top: 50%; transform: translateY(-50%); width: 210px; max-width: 33%; pointer-events: none; user-select: none; filter: drop-shadow(0 6px 18px rgba(0,0,0,.15)); }
@media (max-width:767.98px){ .school-overlay{ display:none; } }

.card-category{ background:var(--surface); border-radius:1rem; box-shadow: 0 6px 20px rgba(0,0,0,.06); overflow:hidden; display:flex; align-items:center; height:100%; min-height:260px; transition: transform .18s ease, box-shadow .18s ease; }
.card-category:hover{ transform: translateY(-4px); box-shadow: 0 10px 28px rgba(0,0,0,.08); }
.category-media{ position:relative; flex:0 0 220px; max-width:220px; }
.category-content{ padding:1rem 1.25rem; }
.category-details{ margin-top:.5rem; }

/* Mobile: show only image + glass overlay; hide full content */
.mobile-glass{ display:none; }
@media (max-width:767.98px){
    .card-category{ flex-direction:column; border-radius:.75rem; min-height:unset; }
    .category-media{ width:100%; max-width:100%; flex:none; }
    .category-content{ display:none; }
    .category-details{ display:none; }
    .mobile-glass{ display:flex; position:absolute; left:0; right:0; bottom:0; padding:.75rem 1rem; gap:.5rem; align-items:center; justify-content:space-between; background: linear-gradient(180deg, var(--mobile-glass-top) 0%, var(--mobile-glass-bottom) 100%); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom-left-radius:.5rem; border-bottom-right-radius:.5rem; }
    .mobile-glass .title{ font-weight:600; font-size:1rem; color: var(--mobile-glass-text); }
    .mobile-glass .icon{ color: var(--mobile-glass-text); opacity:.95; font-size:1.125rem; }
    .mobile-glass .subtitle{ font-size:.85rem; color: var(--mobile-glass-subtext); }
    .mobile-glass .cta{ margin-left:auto; }
    .mobile-glass .left{ display:flex; align-items:center; gap:.5rem; }
    .category-media{ position:relative; }
}

/* Small utility to keep mobile glass buttons readable in dark/light */
.mobile-glass .btn-outline-light{ border-color: rgba(255,255,255,0.16); color:inherit; }

/* Mobile-glass CTA styling for both themes (subtle, readable) */
.mobile-glass .btn{
    border:1px solid rgba(0,0,0,0.06);
    color:var(--mobile-glass-text);
    background: rgba(255,255,255,0.06);
}
.theme-dark .mobile-glass .btn{ border-color: rgba(255,255,255,0.12); background: rgba(255,255,255,0.06); color: var(--mobile-glass-text); }

/* Smooth transition when switching themes for overlays */
.mobile-glass, .card-category, .img-vertical-916 { transition: background .18s ease, color .18s ease, box-shadow .18s ease; }


/* YouTube lazy embed styles (used by components/webinar.html) */
.youtube-embed { max-width:100%; position:relative; }
.youtube-placeholder { position:relative; cursor:pointer; border-radius:.5rem; overflow:hidden; display:block; box-shadow:0 8px 28px rgba(15,23,42,0.08); }
.youtube-placeholder:focus { outline: 3px solid rgba(46,125,50,0.12); outline-offset:4px; }
.youtube-thumb { width:100%; height:auto; display:block; }
.youtube-play { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; color:var(--primary); filter: drop-shadow(0 8px 20px rgba(0,0,0,0.18)); transition:transform .18s ease; }
.youtube-placeholder:hover .youtube-play { transform:scale(1.03); }
.youtube-frame-wrap { margin-top:0.5rem; min-height:0; transition:opacity .22s ease; }
.youtube-frame-wrap.loaded { opacity:1; }
.youtube-frame-wrap .ratio { border-radius:.5rem; overflow:hidden; box-shadow:0 6px 22px rgba(0,0,0,0.08); }

/* Dark theme adjustments for YouTube placeholder */
.theme-dark .youtube-placeholder { box-shadow: 0 8px 28px rgba(0,0,0,0.6); }

/* -------------------------
   Dark theme variables and helpers
   ------------------------- */
.theme-toggle { display:inline-flex; align-items:center; justify-content:center; width:36px; height:28px; }

/* Theme: dark overrides - applied to <html> or <body> via class 'theme-dark' */
:root.theme-dark, .theme-dark {
    --primary: #66bb6a;
    --primary-dark: #4caf50;
    --primary-container: #2e7d32;
    --secondary: #90caf9;
    --tertiary: #4caf50;
    --background: #0b1220;
    --surface: #0f1720;
    --muted: #9aa9a0;
}

/* Apply background and invert some surfaces */
.theme-dark body, .theme-dark html, :root.theme-dark body, :root.theme-dark html {
    background: linear-gradient(180deg, #071018 0%, #0b1220 100%);
    color: #e6f4ea;
}

.theme-dark .navbar{
    background: rgba(8,12,16,0.6);
    border-bottom-color: rgba(255,255,255,0.04);
}

/* Ensure brand logo remains visible in dark mode by inverting/brightening if needed */
.navbar .navbar-brand img{ transition: filter .18s ease, opacity .18s ease; }
/* Prefer not to invert logo colors globally. Use the transparent logo (logo_ByRentri.png) so it displays correctly in both themes.
   If a different asset is needed for light/dark, consider using <picture> or srcset to provide explicit variants. */
.theme-dark .navbar .navbar-brand img{ filter: none; }

/* Toggler (Font Awesome) color adjustments */
/* ===== Modifiche: rendere .navbar-toggler responsivo e aggiungere animazioni/scroll effect ===== */
/* Replace forced display of toggler with responsive rule so hamburger hides on wide viewports */

/* Old rule that forced the toggler visible on all sizes replaced by the block below */
.navbar .navbar-toggler{
    /* Keep visual styling, but hide by default: shown only on small viewports via media query */
    border-color: rgba(34,34,34,0.25);
    color: rgba(34,34,34,0.95);
    min-width: 44px;
    min-height: 40px;
    display: none; /* hide on wide screens - will be enabled in media query */
    align-items: center;
    justify-content: center;
    box-shadow: none;
    transition: transform .14s ease, box-shadow .14s ease, opacity .12s ease;
}

/* Show toggler only on small/medium viewports (Bootstrap lg breakpoint ~992px) */
@media (max-width: 991.98px){
    .navbar .navbar-toggler{ display: inline-flex; }
}

/* Toggler icon transitions and open/close icon handling */
.navbar .navbar-toggler .fa-solid{ font-size:1.35rem; color: currentColor; line-height: 1; transition: transform .18s ease, opacity .14s ease; }
.navbar .navbar-toggler .icon-close{ display:none; }
.navbar .navbar-toggler.is-open .icon-open{ display:none; }
.navbar .navbar-toggler.is-open .icon-close{ display:inline-block; transform: rotate(0deg); }
.navbar .navbar-toggler:active{ transform: scale(.98); }
.navbar .navbar-toggler:focus{ box-shadow: 0 0 0 .2rem rgba(46,125,50,0.18); outline: none; }
.theme-dark .navbar .navbar-toggler{
    border-color: rgba(255,255,255,0.4);
    color: rgba(255,255,255,0.98);
}

/* Navbar shrink on scroll to increase focus on content */
.navbar{ transition: padding .22s ease, background-color .22s ease, box-shadow .22s ease; }
.navbar.navbar-scrolled{ padding-top:6px; padding-bottom:6px; box-shadow: 0 8px 28px rgba(2,6,10,0.08); background: rgba(255,255,255,0.95); }
.theme-dark .navbar.navbar-scrolled{ background: rgba(8,12,16,0.7); }

/* Brand animation */
.navbar .navbar-brand{ transition: transform .18s ease, opacity .18s ease; display:inline-flex; align-items:center; gap:.5rem; }
.navbar .navbar-brand img{ transition: transform .22s cubic-bezier(.2,.9,.3,1), filter .18s ease; }
.navbar .navbar-brand:hover{ transform: translateY(-3px) scale(1.02); }

/* Nav links: subtle hover/underline animation and lift */
.navbar .nav-link{ position:relative; transition: color .18s ease, transform .12s ease; padding: .5rem .9rem; }
.navbar .nav-link::after{ content: ''; position: absolute; left: 20%; right: 20%; bottom: 6px; height: 2px; background: transparent; transition: all .18s ease; border-radius:2px; }
.navbar .nav-link:hover{ color: var(--primary); transform: translateY(-3px); }
.navbar .nav-link:hover::after{ background: linear-gradient(90deg, rgba(var(--hero-start-r),var(--hero-start-g),var(--hero-start-b),1), rgba(var(--hero-end-r),var(--hero-end-g),var(--hero-end-b),1)); left: 15%; right: 15%; }

/* Focus-visible for accessibility */
.navbar .nav-link:focus{ outline: none; box-shadow: 0 0 0 .18rem rgba(46,125,50,0.08); border-radius: .25rem; }

/* CTA button micro-interactions */
.btn-primary-ghost{ transition: background .18s ease, color .14s ease, transform .12s ease; }
.btn-primary-ghost:hover{ transform: translateY(-2px); }

/* Desktop-only spacing improvements for the menu when large */
@media (min-width: 992px){
    .navbar .navbar-nav { align-items: center; }
    .navbar .nav-item + .nav-item{ margin-left: .25rem; }
}

/* Smooth collapse animations fallback if Bootstrap's collapse is not present */
.collapse.navbar-collapse{ transition: height .22s ease, opacity .18s ease; }

/* Make sure mobile theme toggle fits nicely */
.theme-toggle{ transition: background .12s ease, color .12s ease, transform .12s ease; }
.theme-toggle:hover{ transform: translateY(-2px); }

/* Improve hover for .btn (play nice with mobile glass etc.) */
.btn:hover{ transform: translateY(-2px); }

/* Add a subtle entrance animation for nav when page loads */
.navbar{ transform: translateY(0); }

/* Theme-aware navbar link colors */
.navbar .nav-link{ color: rgba(34,34,34,0.8); }
.navbar .nav-link:hover, .navbar .nav-link:focus{ color: var(--primary); }
.theme-dark .navbar .nav-link{ color: rgba(230,244,234,0.92); }
.theme-dark .navbar .nav-link:hover, .theme-dark .navbar .nav-link:focus{ color: var(--primary); }

/* Category modal: improve contrast, spacing and dark mode */
#categoryModal .modal-content{ border-radius:12px; overflow: hidden; }
#categoryModal .modal-body{ background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(250,255,250,0.98)); }
.theme-dark #categoryModal .modal-body{ background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); color: #e6f4ea; }

.category-option{ border:1px solid rgba(0,0,0,0.06); }
.category-option .fa-solid{ width:44px; text-align:center; }
.theme-dark .category-option{ background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border:1px solid rgba(255,255,255,0.04); }
.category-option[aria-pressed="true"]{ box-shadow: 0 10px 30px rgba(46,125,50,0.14); border-color: var(--primary-container); }

/* Make modal buttons more prominent and accessible */
#categoryModal .btn-primary{ background: var(--primary); border-color: var(--primary); }
#categoryModal .btn-outline-secondary{ border-color: rgba(34,34,34,0.12); }
.theme-dark #categoryModal .btn-outline-secondary{ border-color: rgba(255,255,255,0.08); color: rgba(255,255,255,0.92); }

/* Small screens: larger tap targets for modal options */
@media (max-width:576px){
    #categoryModal .category-option{ padding:1rem; }
    .category-option .fa-solid{ font-size:1.6rem; }
}