/* Site stylesheet for small UI tweaks */

/* Design tokens: brand color palette */
:root {
  /* Primary brand color */
  --brand-500: #0D80F2; /* primary / navbar & footer */
  --brand-600: #0B6ED6; /* hover */
  --brand-700: #095CB9; /* active */

  /* Light backgrounds and accents derived from primary */
  --brand-100: #EAF6FF; /* very light background */
  --brand-muted: rgba(13,128,242,0.08); /* subtle overlay */

  --brand-disabled-bg: #cfeeff; /* disabled background */
  --brand-disabled-text: rgba(255,255,255,0.65);
  --brand-contrast: #ffffff; /* text on brand */

  /* Complementary accent color for CTAs or highlights */
  --brand-accent: #FFB74D; /* warm accent, works well with primary blue */
  /* Very light tint of the accent for subtle backgrounds */
  --brand-accent-100: #FFEFE1;
  /* maximum width used for post main image and constrained content */
  --post-main-max-width: 840px;
}

/* Use Tailwind's default system sans-serif stack as the site font */
:root {
  --site-sans: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
}

html, body {
  font-family: var(--site-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Compensate for a fixed navbar so content doesn't sit under it */
body {
  padding-top: var(--navbar-height, 64px);
}

/* Slightly larger navbar menu font for better readability */
.navbar-nav .nav-link,
.navbar-nav .dropdown-item {
  font-size: 1.05rem;
}

@media (min-width: 768px) {
  .navbar-nav .nav-link,
  .navbar-nav .dropdown-item {
    font-size: 1.08rem;
  }
}

/* Horizontal spacing between top-level navbar items on medium+ screens */
@media (min-width: 768px) {
  .navbar .navbar-nav {
    display: flex; /* ensure items flow horizontally */
    gap: 20px; /* requested horizontal spacing */
    align-items: center;
  }
}

/* Keep the brand aligned and tidy */
.navbar-brand svg {
  display: inline-block;
  vertical-align: middle;
}

/* Avatar image utilities */
.avatar-card {
  object-fit: cover;
  height: 200px;
}

@media (min-width: 768px) {
  /* give more vertical space to the image on wider screens */
  .avatar-card {
    height: 260px;
  }
}

.avatar-preview {
  max-height: 150px;
}

/* Placeholder avatar for users without an uploaded photo */
.avatar-placeholder {
  background: linear-gradient(180deg, #868e96, #6c757d);
  color: #dee2e6;
  width: 100%;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 56px;
  border-radius: 0.5rem 0.5rem 0 0;
}
.avatar-placeholder .bi-person-circle { opacity: 0.95; }


.admin-thumb {
  max-height: 60px;
}

/* Card hover for soci lists: visible border matching the top menu color and a subtle shadow */
.soci-container .card,
.soci-container .card.h-100 {
  transition: box-shadow 220ms ease, transform 220ms ease, border-color 220ms ease;
  border: 3px solid transparent; /* reserve space to avoid layout shift */
}
.soci-container .card:hover,
.soci-container .card:focus-within {
  border-color: var(--brand-500);
  box-shadow: 0 8px 22px rgba(9,92,185,0.14), 0 2px 6px rgba(0,0,0,0.06);
  transform: translateY(-4px);
}

/* Add spacing above the news section title to separate it from previous blocks */
.soci-container .section-title {
  margin-top: 30px;
}

/* Flotta section: full-width light-blue background while content stays centered */
.flotta-section {
  background: var(--brand-100);
  /* Standard full-bleed technique: set both left/right to 50% and offset by -50vw
     which avoids rounding issues and works reliably with scrollbars. */
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  box-sizing: border-box;
  padding-top: 18px;
  padding-bottom: 24px;
  overflow: visible; /* allow shadows to be visible */
  z-index: 1;
}

/* Add space below the full-bleed flotta band so following content doesn't touch it */
.flotta-section { margin-bottom: 32px; }
@media (min-width: 992px) {
  .flotta-section { margin-bottom: 64px; }
}
.flotta-section .carousel-cards { background: transparent; }

/* Ensure the inner container remains centered and constrained while the section band is full-bleed */
.flotta-section > .container {
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 1200px; /* keep carousel content constrained */
  box-sizing: border-box;
}

.flotta-section .carousel-cards {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* Defensive: prevent parent container from adding asymmetric padding that can
   make the visual band look left-heavy. Ensure consistent horizontal padding. */
.flotta-section > .container,
.flotta-section .carousel-cards {
  padding-left: 12px !important;
  padding-right: 12px !important;
}

@media (max-width: 767px) {
  .flotta-section > .container { max-width: calc(100% - 24px) !important; padding-left: 12px !important; padding-right: 12px !important; }
}

/* Use Bootstrap Icons for lightweight menu icons (no animation) */
.dropdown-toggle .bi {
  font-size: 1rem;
  vertical-align: -2px;
  margin-left: 0.45rem;
}

/* Inline SVG caret used instead of Bootstrap Icons */
.caret-icon {
  display: inline-block;
  vertical-align: -2px;
  margin-left: 0.35rem;
  fill: currentColor;
}

/* Hide Bootstrap default caret pseudo-element so we don't show duplicate carets */
.navbar-nav .nav-link.dropdown-toggle::after,
.dropdown-toggle::after {
  display: none !important;
}

/* Navbar color customisation: set primary menu color and top-level link contrast */
.navbar {
  background-color: var(--brand-500) !important;
  /* keep the navbar visible on scroll */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1080;
}
.navbar .navbar-brand,
.navbar .nav-link {
  color: #ffffff !important;
}
.navbar .nav-link {
  /* Use a pseudo-element overlay for hover feedback (opacity transition) */
  position: relative;
  z-index: 1;
}
.navbar .nav-link::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.06);
  opacity: 0;
  transition: opacity 160ms ease;
  border-radius: 0.25rem;
  z-index: 0;
}
.navbar .nav-link:hover::before,
.navbar .nav-link:focus::before {
  opacity: 1;
}

/* Replace text-decoration underline with an animatable ::after underline */
.navbar .nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  bottom: -1px; /* sit closer to text */
  background: #ffffff;
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 560ms cubic-bezier(.2,.9,.2,1), opacity 360ms ease;
  opacity: 0;
  z-index: 1060; /* ensure visible above dropdown */
}
.navbar .nav-link:hover::after,
.navbar .nav-link:focus::after {
  transform: scaleX(1);
  opacity: 1;
}

/* Dropdown caret styling */
.dropdown-caret {
  margin-left: 0.45rem;
  vertical-align: -2px;
  fill: currentColor;
  transition: transform 160ms ease;
}
.nav-item.dropdown.show > .nav-link .dropdown-caret,
.nav-item.dropdown:hover > .nav-link .dropdown-caret {
  transform: rotate(180deg);
}

/* Open dropdown on hover for desktop */
@media (min-width: 768px) {
  .nav-item.dropdown:hover > .dropdown-menu,
  .nav-item.dropdown:focus-within > .dropdown-menu {
    display: block;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }
  .nav-item.dropdown:focus-within > .nav-link {
    outline: 2px solid rgba(255,255,255,0.06);
    outline-offset: 2px;
  }
}

/* Make dropdown menus follow the navbar color for a unified look */
.navbar .dropdown-menu {
  /* very light sky-blue background for the dropdown */
  background-color: var(--brand-100) !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  /* Center the dropdown horizontally on the page (desktop behavior is controlled
     by media queries below) */
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 100%; /* place flush below the navbar item to avoid hover gaps */
  z-index: 1100;
}

/* Keep dropdown visible when hovering the menu itself so users can move
   the mouse from the trigger to the menu without it disappearing. */
.navbar .dropdown-menu:hover,
.navbar .dropdown-menu:focus {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
.navbar .dropdown-menu .dropdown-item {
  color: #0b3f66 !important; /* darker text on light background */
  position: relative;
  z-index: 2; /* above hover overlay */
}
/* Expose the dropdown item color as a CSS variable for reuse */
:root { --dropdown-item-color: #0b3f66; }

/* Apply the dropdown item color to page headings (content areas only).
   We scope to .container and main to avoid changing hero titles which use a
   different contrast color on brand backgrounds. */
.container h1, .container h2, .container h3,
main h1, main h2, main h3 {
  color: var(--dropdown-item-color) !important;
}
.navbar .dropdown-menu .dropdown-caption { position: relative; z-index: 2; }

/* subtle per-item overlay for pointer feedback (still present but light) */
.navbar .dropdown-menu .dropdown-item::before {
  content: '';
  position: absolute;
  inset: 0;
  /* slightly stronger per-item hover tint */
  background: rgba(13,128,242,0.06) !important;
  opacity: 0;
  transition: opacity 160ms ease !important;
  border-radius: 0.25rem;
  z-index: 1;
}

/* Ensure Bootstrap's default hover background doesn't cover our overlay */
.navbar .dropdown-menu .dropdown-item,
.navbar .dropdown-menu .dropdown-item:hover,
.navbar .dropdown-menu .dropdown-item:focus {
  background-color: transparent !important;
  background-image: none !important;
  background: transparent !important;
}

/* Feature photo area for soci page */
.soci-feature-photo {
  /* remove decorative gradient so the photo sections are transparent/full-bleed */
  background: transparent;
  /* reduced vertical padding around photo placeholders to make the top photo tighter */
  padding-top: 16px;
  padding-bottom: 16px;
}
.feature-figure { max-width: 980px; margin: 0 auto; padding-top: 16px; padding-bottom: 16px; }
.feature-image-placeholder {
  width: 100%;
  height: 420px;
  max-width: 980px;
  background: linear-gradient(135deg,#f3f6fb,#ffffff);
  border: 1px solid #e9ecef;
  border-radius: 8px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#6c757d;
  font-size:1rem;
}
.feature-image-placeholder img.feature-image{ width:100%; height:100%; object-fit:cover; border-radius:8px; }
.feature-caption{ margin-top:8px; font-size:0.95rem; color:#495057 }

@media (max-width: 768px){
  .feature-image-placeholder { height: 260px }
  .feature-figure { padding: 0 12px }
}

/* Follow-up history block padding (below second photo) */
.history-followup {
  padding-top: 50px;
  padding-bottom: 50px;
}

/* Main history block padding (La nostra storia) */
.history-main {
  padding-top: 50px;
  padding-bottom: 50px;
}

/* Add spacing under the intro block on soci pages */
.soci-intro {
  padding-bottom: 30px;
}

/* icon used in flotta intro */
.soci-intro .bi-airplane {
  font-size: 48px;
  color: var(--brand-700);
  display: block;
  margin: 0 auto 12px auto;
}

/* Mission section padding */
.mission-section {
  padding-top: 50px;
  padding-bottom: 50px;
}

/* Values section: three horizontal items with icons */
.values-section {
  background: transparent; /* keep full-bleed neutral */
  padding-top: 30px;
}
.values-section .values-item .bi {
  font-size: 48px;
  color: var(--brand-700);
  display: block;
  margin-bottom: 12px;
}
.values-section .values-title {
  font-weight: 600;
  color: #03304d;
}
.values-section .values-item { max-width: 240px; }

/* Circle behind icons */
.values-icon {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* fully opaque circle background */
  background: rgba(234,246,255,1);
  margin: 0 auto 16px;
  /* remove border as requested */
  box-shadow: 0 6px 18px rgba(13,128,242,0.08);
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}
.values-icon .bi {
  font-size: 56px;
  color: var(--brand-700);
  line-height: 1;
  display: inline-block;
}

@media (max-width: 767px) {
  .values-icon .bi { font-size: 44px; }
  .values-icon { width: 92px; height: 92px; }
}

/* slight hover lift so the circle stands out more */
.values-icon:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(13,128,242,0.12);
}

/* Description text under each value icon */
.values-desc {
  margin-top: 8px;
  color: #495057;
  font-size: 0.98rem;
}

/* Also guard active state */
.navbar .dropdown-menu .dropdown-item:active,
.navbar .dropdown-menu .dropdown-item.active {
  background-color: transparent !important;
  background-image: none !important;
  background: transparent !important;
}

/* Reduce flicker when opening dropdowns on hover */
.nav-item.dropdown .dropdown-menu {
    display: block;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 120ms ease, visibility 120ms ease;
  }
.nav-item.dropdown.show .dropdown-menu {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

/* Full-menu highlight: when hovering the dropdown area (or opening it), show a soft
   rounded highlight that covers the items and the caption. This ensures the hover
   'box' includes the caption below the items. */
.nav-item.dropdown:hover > .dropdown-menu::before,
.navbar .dropdown-menu:hover::before,
.nav-item.dropdown.show > .dropdown-menu::before {
  /* removed decorative rounded overlay - keep only the dropdown background color */
  content: none !important;
}
/* Also handle Bootstrap adding .show directly on the menu element */
.nav-item.dropdown .dropdown-menu.show,
.dropdown-menu.show {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
.navbar .dropdown-menu .dropdown-item:hover::before,
.navbar .dropdown-menu .dropdown-item:focus::before {
  opacity: 1 !important;
}

/* Underline for dropdown items using ::after with horizontal fade-in */
.navbar .dropdown-menu .dropdown-item::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  bottom: -1px; /* sit closer to text */
  background: var(--brand-500);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 560ms cubic-bezier(.2,.9,.2,1), opacity 360ms ease;
  opacity: 0;
  z-index: 1060;
}
/* Ensure the Events dropdown shows the caption and allows wrapping (specific fix) */
.dropdown-menu[aria-labelledby="eventsDropdown"] .dropdown-caption {
  display: block !important;
  white-space: normal !important;
  max-width: 260px;
  color: rgba(108,117,125,0.95) !important;
  margin-top: 6px;
}
.navbar .dropdown-menu .dropdown-item:hover::after,
.navbar .dropdown-menu .dropdown-item:focus::after {
  transform: scaleX(1);
  opacity: 1;
}

/* Caption used under specific dropdown items (small, muted explanatory text) */
.dropdown-caption {
  /* slightly smaller caption to reduce visual weight */
  font-size: 0.78rem;
  color: #6c757d; /* muted gray for better contrast on light background */
  margin-top: 6px;
  padding-left: 0;
  padding-right: 0;
  line-height: 1.2;
  max-width: 420px;
  /* ensure caption occupies full width when placed inside a flex-row dropdown */
  width: 100%;
  order: 1000; /* push caption to the bottom of the flex container */
}

/* Make caption inside a .dropdown-item inherit link color and be clickable */
.navbar .dropdown-menu .dropdown-item .dropdown-caption,
.navbar .dropdown-menu .dropdown-item .dropdown-item-title {
  color: inherit; /* inherit color from link */
}

/* Slight spacing tweak for the inline caption inside the link */
.navbar .dropdown-menu .dropdown-item small.dropdown-caption { margin-top: 4px; }

/* Desktop: make dropdown menus layout horizontally so items are side-by-side */
@media (min-width: 768px) {
  .navbar .dropdown-menu {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    gap: 18px;
    padding: 12px 18px;
    /* make dropdown narrower so it doesn't force very wide menus; caption will wrap */
    min-width: 360px;
    white-space: nowrap;
  }
  .navbar .dropdown-menu .dropdown-item {
    white-space: nowrap;
    padding: 10px 14px;
    display: inline-flex;
    align-items: center;
    position: relative; /* establish stacking context for per-item overlay */
    overflow: hidden; /* clip per-item overlay so it doesn't spill out */
    /* slightly larger item so caption can fit up to two lines */
    min-width: 220px;
    flex-basis: 220px;
  }
  /* ensure the caption spans the full width below the inline items */
  .navbar .dropdown-menu .dropdown-caption { width: 100%; margin-top: 8px; padding-left: 0; }

  /* Two-column layout for specific dropdowns (like 'I Soci') */
  .navbar .dropdown-menu.dropdown-two-col {
    display: grid !important;
    /* use slightly larger column min-width so captions comfortably wrap */
    grid-template-columns: repeat(2, minmax(160px, 1fr));
    gap: 8px 18px;
    align-items: start;
    padding: 12px 20px;
    min-width: 520px; /* increase width so captions don't overflow */
  }
  .navbar .dropdown-menu.dropdown-two-col .dropdown-item {
    white-space: normal;
    padding: 8px 12px;
    display: block;
    position: relative;
    overflow: hidden; /* clip hover overlay within each grid cell */
  }

  /* On narrower viewports, switch the two-column dropdown to a single column to avoid overflow */
  /* On narrower viewports, switch the two-column dropdown to a single column to avoid overflow */
  @media (max-width: 860px) {
    .navbar .dropdown-menu.dropdown-two-col {
      grid-template-columns: 1fr;
      min-width: 220px;
      padding: 10px 12px;
    }
  }
}

/* Adjust overlay/hover intensities and caption wrapping per user request */
.navbar .dropdown-menu .dropdown-item::before {
  /* darker per-item hover tint to make hovered item stand out more */
  background: rgba(13,128,242,0.12) !important;
}

.nav-item.dropdown:hover > .dropdown-menu::before,
.navbar .dropdown-menu:hover::before,
.nav-item.dropdown.show > .dropdown-menu::before {
  /* ensure no decorative overlay shows on hover; rely on background-color alone */
  content: none !important;
}

/* Make caption wrap on multiple lines and avoid widening the dropdown */
.dropdown-caption {
  white-space: normal;
  max-width: 360px; /* cap width so caption wraps */
  /* Clamp caption to at most 2 lines and avoid breaking words */
  display: -webkit-box;
  /* standard property for compatibility alongside the -webkit prefixed version */
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: normal;
  hyphens: none;
}

/* Slightly lighter caption color and alignment tweaks */
.navbar .dropdown-menu .dropdown-item small.dropdown-caption {
  color: rgba(108,117,125,0.9); /* slightly darker than before */
  align-self: flex-start; /* align caption to the left within the link */
  text-align: left;
}

/* Center the title inside the dropdown-item link */
.navbar .dropdown-menu .dropdown-item .dropdown-item-title {
  display: block;
  width: 100%;
  text-align: center;
}

/* Footer styles matching navbar look */
.site-footer {
  background-color: var(--brand-500);
  color: var(--brand-contrast);
  /* make footer visually tied to navbar: full-bleed and consistent padding */
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
.site-footer .footer-copy {
  color: rgba(255,255,255,0.95);
}
.site-footer .footer-links {
  display: flex;
  gap: 0.5rem;
}
.site-footer .footer-link {
  color: #ffffff;
  position: relative;
  text-decoration: none;
  transition: color 160ms ease;
}
.site-footer .footer-link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  bottom: -1px;
  background: var(--brand-contrast);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 560ms cubic-bezier(.2,.9,.2,1), opacity 360ms ease;
  opacity: 0;
  z-index: 1060;
}
.site-footer .footer-link:hover::after,
.site-footer .footer-link:focus::after {
  transform: scaleX(1);
  opacity: 1;
}
.site-footer .footer-link:hover,
.site-footer .footer-link:focus {
  color: rgba(255,255,255,0.95);
}

/* Hero section on the homepage */
.site-hero {
  padding: 4.5rem 1rem;
  /* use the same solid brand color as the navbar for a seamless look */
  background-color: var(--brand-500);
  color: var(--brand-contrast);
  /* make the hero a bit shorter so more content is visible below the fold */
  min-height: 60vh;
  display: flex;
  align-items: center;
  /* animate changes for a smoother resize and softer layout shifts */
  transition: min-height 280ms cubic-bezier(.2,.9,.2,1),
              padding 280ms cubic-bezier(.2,.9,.2,1),
              background-color 280ms cubic-bezier(.2,.9,.2,1);
  will-change: min-height, padding;
}

/* Admin theme adjustments to match site look-and-feel (colors only) */
body.admin {
  --admin-brand: var(--brand-500);
}

/* Adjust admin buttons to use brand colors where appropriate */
.btn, .button, .submit-row .addlink {
  border-radius: 0.375rem;
}
.object-tools .addlink, .submit-row .addlink, .button.button-small {
  background: var(--brand-500) !important;
  color: var(--brand-contrast) !important;
  border: none !important;
}

/* Admin photo inline buttons: unify appearance for <button> and <a> styled as buttons
   The inline remove button is a <button>, the download control is an <a> — ensure
   both render identical in admin forms (padding, line-height, hover, focus). */
body.admin .remove-photo-btn,
body.admin .download-photo-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: .375rem !important; /* small space between icon and label */
  padding: .3125rem .6rem !important; /* match Bootstrap btn-sm sizing */
  font-size: .8125rem !important;
  line-height: 1 !important;
  border-radius: .375rem !important;
  vertical-align: middle !important;
  text-decoration: none !important; /* anchors should not show underline */
  transition: background-color .12s ease, color .12s ease, box-shadow .12s ease, transform .06s ease;
}

/* Make anchors act like buttons (pointer cursor) */
body.admin .download-photo-btn {
  cursor: pointer !important;
}

/* Focus and hover should be consistent across both controls */
body.admin .remove-photo-btn:focus,
body.admin .download-photo-btn:focus {
  outline: 3px solid rgba(13,128,242,0.12) !important;
  outline-offset: 2px !important;
}
body.admin .remove-photo-btn:hover,
body.admin .download-photo-btn:hover {
  box-shadow: 0 6px 14px rgba(0,0,0,0.06) !important;
  transform: translateY(-1px) !important;
}

/* Force anchors to look exactly like buttons in admin forms. This overrides
   any default anchor styling (color/underline) and makes the download link
   visually indistinguishable from the remove <button>. */
/* Stronger: make the download anchor visually identical to admin .button
   Use #content-main scoping and admin CSS variables to ensure parity. */
body.admin #content-main a.download-photo-btn,
body.admin a.download-photo-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: .375rem !important;
  padding: 10px 15px !important; /* match admin .button sizing */
  font-size: .8125rem !important;
  line-height: 1 !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  color: var(--button-fg) !important;
  background: var(--button-bg) !important;
  border: none !important;
  cursor: pointer !important;
}

/* If the anchor has outline/outline-secondary classes, ensure colors still match */
body.admin #content-main a.download-photo-btn.btn-outline-secondary,
body.admin a.download-photo-btn.btn-outline-secondary {
  background: var(--button-bg) !important;
  color: var(--button-fg) !important;
}

/* If the anchor also carries Bootstrap classes like btn-outline-secondary, ensure
   the admin scope applies a uniform background/text color to make it match the
   remove button when not hovered. */
body.admin a.download-photo-btn.btn-outline-secondary {
  background: transparent !important;
  color: inherit !important;
}

/* Slight active press feedback */
body.admin .remove-photo-btn:active,
body.admin .download-photo-btn:active {
  transform: translateY(0) !important;
}

/* Stronger admin theming to match homepage look-and-feel */
/* Header / branding */
body.admin #header, body.admin #header .module, body.admin #branding {
  background: var(--brand-500) !important;
  color: var(--brand-contrast) !important;
}
body.admin #header a, body.admin #branding a, body.admin #user-tools a {
  color: var(--brand-contrast) !important;
}

/* Sidebar (navigation) - only color, avoid changing layout */
body.admin #nav-sidebar {
  background: linear-gradient(180deg, rgba(13,128,242,0.02), rgba(13,128,242,0.01));
}
body.admin #nav-sidebar a {
  color: #0b3f66;
}

/* Main content area styling - keep default layout, only adjust background color if needed */
body.admin #content, body.admin #content-main {
  background: transparent; /* don't change admin layout spacing */
}

/* Links and buttons inside admin content */
body.admin #content a, body.admin #content-main a {
  color: var(--brand-600);
}
body.admin .button, body.admin input[type=submit], body.admin .btn {
  background: var(--brand-500) !important;
  color: var(--brand-contrast) !important;
  border: none !important;
}

/* Make form fields slightly larger and rounded like site */
body.admin .form-row input, body.admin .form-row select, body.admin .form-row textarea {
  border-radius: 0.375rem;
  padding: 0.5rem;
}

/* Breadcrumbs and headings */
body.admin .breadcrumbs a { color: rgba(255,255,255,0.95); }
body.admin h1, body.admin h2, body.admin h3 { color: #0b3f66; }

/* Hero scroll indicator: centered horizontally, aligned at bottom with 20px vertical padding */
.hero-indicator {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 20px; /* 20px from bottom as requested */
  z-index: 1060;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-indicator-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-contrast);
  background: transparent;
  border: none;
  padding: 6px;
  text-decoration: none;
}
.hero-indicator-btn:focus {
  outline: 2px solid rgba(255,255,255,0.12);
  outline-offset: 4px;
}
.hero-indicator-arrow {
  width: 26px;
  height: 36px;
  color: var(--brand-contrast);
  transform: translateY(0);
  transition: transform 320ms cubic-bezier(.2,.9,.2,1), opacity 220ms ease;
  will-change: transform, opacity;
  opacity: 0.5;
  /* subtle vertical bobbing */
  animation: hero-arrow-bob 2.4s ease-in-out infinite;
}

@keyframes hero-arrow-bob {
  0% { transform: translateY(0); }
  50% { transform: translateY(8px); }
  100% { transform: translateY(0); }
}

/* reduce motion for users who prefer that */
@media (prefers-reduced-motion: reduce) {
  .hero-indicator-arrow { animation: none; }
}

/* Make sure the hero container is positioned so absolute children are relative to it */
.site-hero { position: relative; }

/* Respect user's preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .site-hero {
    transition: none !important;
  }
}
.site-hero .hero-inner {
  max-width: 740px;
  margin: 0 auto;
}

/* Ensure no visible colored box or background sits behind the hero content */
.site-hero .hero-inner,
.site-hero .hero-inner > * {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}
.site-hero .hero-inner .hero-title {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}
.hero-logo {
  /* slightly larger hero logo for better presence */
  width: 140px;
  height: 140px;
  display: inline-block;
  border-radius: 50%;
  /* removed circular plate background and padding to display the raw logo */
  padding: 0;
  background: transparent;
  /* remove box-shadow to avoid halo/transparent ring effect */
  box-shadow: none;
  object-fit: contain;
  vertical-align: middle;
  position: relative;
  z-index: 3; /* ensure it sits above overlay and background slides */
}

/* Hero background carousel: slides stacked absolutely, fading between them */
.hero-bg-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero-bg-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  opacity: 0;
  transition: opacity 900ms cubic-bezier(.2,.9,.2,1);
  will-change: opacity;
}
.hero-bg-slide.active { opacity: 1; }

/* Overlay tint using brand color at 25% opacity */
.site-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(13,128,242,0.25); /* brand color approx. -> 25% opacity */
  z-index: 1;
  pointer-events: none;
}

/* Ensure hero content sits above the background and overlay */
.site-hero > *:not(.hero-bg-wrap) { position: relative; z-index: 2; }
.site-hero {
  /* hero sizing variables: --hero-title-size controls title and subtitle scales with --hero-sub-scale */
  --hero-title-size: 2.6rem;
  --hero-sub-scale: 0.56; /* subtitle = title * 0.56 -> ~1.45 at 2.6rem */
}

.hero-title {
  font-size: var(--hero-title-size);
  font-weight: 700;
  color: var(--brand-contrast);
  line-height: 1.05;
  letter-spacing: 0.6px;
  /* stronger multi-layered text-shadow for legibility on busy backgrounds */
  text-shadow: 0 1px 0 rgba(0,0,0,0.6), 0 6px 18px rgba(0,0,0,0.45);
}

.hero-sub {
  font-size: calc(var(--hero-title-size) * var(--hero-sub-scale));
  color: rgba(255,255,255,0.95) !important;
  line-height: 1.2;
  letter-spacing: 0.25px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.55);
}

@media (min-width: 768px) {
  /* increase hero vertical space by 120px (previously +70px, now +50px more) */
  .site-hero { padding: calc(6rem + 120px) 1rem; }
  /* increase hero title size on desktop and keep subtitle proportional */
  .site-hero { --hero-title-size: 3.4rem; }
  /* On desktop keep the single-line behavior */
  .hero-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hero-logo { width: 180px; height: 180px; padding: 0; }
  /* scale subtitle a touch more on wider screens */
  /* subtitle size computed from --hero-title-size * --hero-sub-scale */

  /* slightly tighter line-height on large screens for presence */
  .hero-title { line-height: 1.02; letter-spacing: 0.8px; }
  .hero-sub { line-height: 1.15; }
}

/* Utility: full-bleed sections (span entire viewport width while keeping inner content centered) */
.full-bleed,
main > section {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  box-sizing: border-box;
}

/* Allow opting out of full-bleed for sections that should be constrained */
main > section.no-full-bleed,
.no-full-bleed {
  /* reset the full-bleed offsets */
  left: auto !important;
  right: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: auto !important;
  max-width: 1200px;
  padding-left: 1rem;
  padding-right: 1rem;
  box-sizing: content-box;
}

/* Ensure the hero uses full-bleed by default */
.site-hero {
  /* Re-asserted to ensure full-bleed behaviour applies */
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  /* default mobile padding increased by 120px to match desktop change */
  padding: calc(3rem + 120px) 1rem;
}

/* Brand button utility */
.btn-brand {
  background: var(--brand-500);
  color: var(--brand-contrast);
  border: none;
  padding: 0.45rem 0.8rem;
  border-radius: 0.375rem;
  cursor: pointer;
}
.btn-brand:hover {
  background: var(--brand-600);
}
.btn-brand:active {
  background: var(--brand-700);
}
.btn-brand:disabled,
.btn-brand[disabled] {
  background: var(--brand-disabled-bg);
  color: var(--brand-disabled-text);
  cursor: not-allowed;
  opacity: 0.9;
}

/* Specific padding for soci list container: small padding on mobile, larger on md+ */
.soci-container {
  padding-left: 1rem;
  padding-right: 1rem;
}

/* vertical spacing between rows of cards inside the soci container */
  .soci-container .row {
  row-gap: 30px;
  /* center the columns (cards) horizontally on the page) */
  justify-content: center;
}

@media (min-width: 768px) {
  .soci-container {
    padding-left: 150px;
    padding-right: 150px;
  }
}

/* Title spacing for soci page */
.soci-title {
  padding: 50px 0;
  text-align: center; /* ensure titles like Contatti and La flotta are centered */
}

/* Ensure the modern page title is centered on the contact page specifically */
.contact-page .page-title-modern {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

/* Reduce gap between intro and first large photo specifically on La Pista page */
.la-pista-page .soci-intro { margin-bottom: 16px; padding-bottom: 12px; }
.la-pista-page .soci-feature-photo { margin-top: 8px; }

/* La Pista: keep photo frames visually borderless (transparent) including hover/focus states */
.la-pista-page .feature-figure.card {
  border: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.la-pista-page .feature-figure.card:hover,
.la-pista-page .feature-figure.card:focus-within {
  border-color: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}
.la-pista-page .feature-figure.card .feature-image img,
.la-pista-page .feature-figure.card img.clickable-photo {
  border-color: transparent !important;
}

.soci-intro {
  /* intermediate background for the intro section: very light orange tint */
  background: var(--brand-accent-100, #FFF6E8);
  padding: 18px 24px;
  /* add spacing below the intro section */
  margin-bottom: 60px;
  border-radius: 6px;
  color: #03304d; /* slightly darker for contrast */
  display: flex;
  align-items: center;
  justify-content: center;
  /* ensure there's enough height so vertical centering is noticeable */
  min-height: 110px;
}

/* Signup box under hero on homepage */
.signup-box {
  max-width: 920px;
  border: 3px solid rgba(255,158,26,0.95); /* vivid orange border */
  border-radius: 12px;
  background: #FFF0E0; /* light orange background */
  padding: 18px 22px;
  text-align: center;
  color: #0b3f66;
}
/* Flotta carousel styles */
.carousel-cards { overflow: hidden; padding: 28px 12px; position: relative; }
.carousel-cards .section-title {
  /* Use same modern gradient title treatment as other section titles */
  font-weight: 800;
  font-size: 2.4rem;
  background: linear-gradient(90deg, #0D80F2 0%, #4AB3FF 40%, #7EE7FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  position: relative;
  display: inline-block;
  padding-bottom: 30px; /* keep consistent spacing under title */
  text-align: center;
  margin-bottom: 18px;
}

/* Ensure carousel titles are centered like other section titles */
.carousel-cards .section-title {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.section-subtitle { color: var(--brand-700); }
.carousel-track { display: flex; align-items: stretch; gap: 12px; will-change: transform; }
.flotta-card { min-width: 300px; max-width: 380px; background: rgba(255,255,255,0.98); border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,0.06); overflow: hidden; flex: 0 0 auto; cursor: pointer; }
.flotta-card .flotta-card-img, .flotta-card img { cursor: pointer; }

/* make the whole card a real link and style focus for accessibility */
.flotta-card-link { display: inline-block; text-decoration: none; color: inherit; }
.flotta-card-link:focus { outline: 3px solid rgba(13,128,242,0.18); outline-offset: 6px; border-radius: 8px; }
.flotta-card-link .flotta-card { transition: transform 240ms cubic-bezier(.2,.9,.2,1), box-shadow 240ms ease; }
.flotta-card-link:focus .flotta-card, .flotta-card-link:hover .flotta-card { transform: translateY(-6px) scale(1.03); box-shadow: 0 12px 30px rgba(0,0,0,0.12); }
.flotta-card-img-wrap { width: 100%; height: 180px; overflow: hidden; }
.flotta-card-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.flotta-card-meta { padding: 8px 12px; text-align: left; }
.flotta-owner { font-weight: 600; color: #0b3f66; }

@media (max-width: 767px) {
  .flotta-card { min-width: 220px; max-width: 280px; }
  .flotta-card-img-wrap { height: 160px; }
}

@media (min-width: 992px) {
  .flotta-card { min-width: 360px; max-width: 440px; }
  .flotta-card-img-wrap { height: 220px; }
}


/* Controls: keep legacy generic control styles but ensure flotta buttons are placed at the sides */
.carousel-control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  color: #fff;
  border: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  pointer-events: auto;
}
.carousel-control.prev { left: 12px; }
.carousel-control.next { right: 12px; }
.carousel-viewport { overflow: hidden; }

/* Flotta-specific controls (templates use .flotta-prev / .flotta-next) — position them on the sides */
.flotta-prev, .flotta-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.92);
  color: #0b3f66;
  border: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 20;
  box-shadow: 0 8px 22px rgba(0,0,0,0.12);
  pointer-events: auto;
}
.flotta-prev { left: 12px; }
.flotta-next { right: 12px; }

/* Hide the page indicators (dots) for the flotta carousel specifically */
.carousel-cards .carousel-indicators { display: none !important; }

/* Keep legacy dot styles in case other carousels rely on them (not used for flotta) */
.carousel-indicators { display: flex; gap: 6px; justify-content: center; margin-top: 12px; }
.carousel-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(0,0,0,0.15); border: none; cursor: pointer; }
.carousel-dot.active { background: rgba(0,0,0,0.6); }

/* Hover scale effect on card */
.flotta-card { transition: transform 240ms cubic-bezier(.2,.9,.2,1), box-shadow 240ms ease; }
.flotta-card:hover { transform: translateY(-6px) scale(1.03); box-shadow: 0 12px 30px rgba(0,0,0,0.12); }
.signup-box {
  display: block;
  width: min(92%, 920px);
  margin-left: auto;
  margin-right: auto;
}

/* Signup box two-column layout tweaks */
.signup-title {
  font-size: 1.25rem;
  margin: 0;
  color: #03304d;
  display: inline-flex;
  align-items: center; /* ensure icon vertically centers with the text */
  gap: 0.5rem;
}
.signup-title .signup-flag {
  font-size: 1.25rem;
  color: var(--brand-700);
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.5rem; /* explicit small gap when used inside title */
}
/* legacy selector kept for other usages */
.signup-flag {
  font-size: 1.25rem;
  color: var(--brand-700);
  vertical-align: middle;
  margin-right: 0.5rem;
}
.signup-text { color: #08304d; }
.signup-box .btn-brand { margin-left: 0; }

@media (max-width: 767px) {
  .signup-box .col-md-4 { text-align: left !important; }
}
.signup-title { font-size: 1.05rem; }
.signup-title .signup-flag { font-size: 1rem; margin-right: 0.4rem; }
.signup-box p { margin-top: 8px; margin-bottom: 0; }

@media (min-width: 768px) {
  .soci-intro {
    /* keep consistent spacing on medium+ screens */
    margin-bottom: 60px;
  }
}

  /* Community section below intro */
  .soci-community {
    /* mantenuta per compatibilità ma senza margine verticale in caso la sezione non venga mostrata */
    background: #ffffff;
    padding: 20px 24px;
    border-radius: 6px;
    margin-bottom: 0;
  }
  .soci-community-title {
    font-size: 1.4rem;
    margin-bottom: 8px;
    color: var(--brand-700);
  }

  /* Meteo & Mappa section */
  .weather-map-section { 
    display: flex;
    gap: 1rem;
    flex-wrap: nowrap; /* keep columns on the same row when there's space */
    align-items: stretch; /* make children equal height */
    padding: 50px; /* added breathing room around the weather/map panels */
  }
  /* Ensure the inner columns behave like Bootstrap columns but flex-grow so they stay side-by-side */
  .weather-map-section > .col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  /* Make the actual panels stretch to equal height */
  .weather-map-section .weather-widget,
  .weather-map-section .map-frame {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center; /* center content vertically if desired */
  }

  /* Ensure the map iframe fills its container */
  .map-frame iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    flex: 1 1 auto;
  }
  /* Inner wrapper for map iframe so we can control min-height and sizing cleanly */
  .map-inner { flex: 1 1 auto; display: flex; flex-direction: column; width: 100%; height: 100%; border: 1px solid #e9ecef; border-radius: 6px; overflow: hidden; padding: 0; box-sizing: border-box; background: #ffffff; }

  /* Ensure both panels have a reasonable minimum height so they match visually */
  .weather-map-section .col-md-6 { min-height: 320px; }
  @media (min-width: 768px) { .weather-map-section .col-md-6 { min-height: 420px; } }

  /* Ensure weather widget uses border-box so padding is included in size calculations */
  .weather-map-section .weather-widget { box-sizing: border-box; }

  /* Allow iframe inside flex child to shrink/grow correctly */
  .map-inner iframe { min-height: 0; flex: 1 1 auto; border-radius: 6px; }

/* Signup section vertical padding: stronger selector to avoid overrides */
/* Use external spacing (margin) between sections rather than large internal padding
   so the signup box doesn't expand horizontally when adding vertical space. */
section#signup-section {
  margin-top: 40px;
  margin-bottom: 40px;
}

@media (min-width: 768px) {
  section#signup-section {
    margin-top: 80px;
    margin-bottom: 80px;
  }
}

/* Revert signup-box inner padding to the original comfortable values so box width
   remains compact while the section spacing is provided by margins. */
#signup-section .signup-box,
section#signup-section .signup-box,
main > section#signup-section .signup-box {
  padding-top: 18px;
  padding-bottom: 18px;
  padding-left: 22px;
  padding-right: 22px;
}

/* Center headings inside the weather/map panels */
  /* Stronger rule to override utility classes like .mb-2 which may use !important */
  .weather-map-section h4 {
  text-align: center;
  margin-bottom: 24px !important; /* mobile default */
  }

  @media (min-width: 768px) {
    .weather-map-section h4 { margin-bottom: 48px !important; }
  }
  .weather-widget {
    background: linear-gradient(180deg, #E8F6FF 0%, #DFF3FF 100%);
    border: 1px solid rgba(13,128,242,0.12);
    border-radius: 12px;
    min-height: 180px;
    color: #08304d;
    padding: 14px 12px;
  }

  /* Weather icon styling: larger SVGs and subtle animations */
  /* Weather icon styling for Bootstrap Icons: larger size and subtle animations */
  .weather-icon {
    font-size: 72px; /* large icon */
    line-height: 1;
    vertical-align: middle;
    margin-right: 12px;
    transition: transform 420ms ease;
    display: inline-block;
  }
  .weather-icon-sun { animation: spin-slow 10s linear infinite; }
  @keyframes spin-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

  .weather-icon-cloud { animation: bob 3s ease-in-out infinite; }
  @keyframes bob { 0% { transform: translateY(0); } 50% { transform: translateY(4px); } 100% { transform: translateY(0); } }

  .wind-icon {
    font-size: 40px;
    display: inline-block;
    transform-origin: center center;
    transition: transform 420ms ease;
    animation: sway 1.6s ease-in-out infinite;
    margin-left: 6px;
  }
  @keyframes sway { 0% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } 100% { transform: rotate(-6deg); } }

  /* Slightly increase font-size for temp to match larger icons */
  .weather-widget .temp { font-size: 2.5rem; font-weight: 700; }
  .weather-widget .desc { font-size: 1rem; color: #495057; }

  /* Two-row layout: icons on top, details below */
  .weather-widget { display: flex; flex-direction: column; gap: 8px; }
  .weather-widget .weather-top { display:flex; align-items:center; justify-content:center; gap:18px; padding-top:8px; }
  .weather-widget .weather-bottom { text-align:center; padding-bottom:10px; }

  /* Much larger colored icons */
  .weather-icon { font-size: 120px; }
  .weather-icon.sun { color: #FFD54A; filter: drop-shadow(0 6px 12px rgba(255,181,74,0.12)); }
  .weather-icon.cloud { color: #90A4AE; filter: drop-shadow(0 6px 12px rgba(33,150,243,0.06)); }
  .weather-icon.rain { color: #42A5F5; filter: drop-shadow(0 6px 12px rgba(66,165,245,0.06)); }
  .weather-icon.snow { color: #B3E5FC; filter: drop-shadow(0 6px 12px rgba(179,229,252,0.06)); }
  .weather-icon.thunder { color: #FFB74D; filter: drop-shadow(0 6px 12px rgba(255,183,77,0.08)); }

  /* Icon animations */
  .weather-icon.sun { animation: sun-shine 8s linear infinite; }
  @keyframes sun-shine { 0% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.03) rotate(6deg); } 100% { transform: scale(1) rotate(0deg); } }

  .weather-icon.cloud { animation: cloud-float 6s ease-in-out infinite; }
  @keyframes cloud-float { 0% { transform: translateY(0); } 50% { transform: translateY(-6px); } 100% { transform: translateY(0); } }

  .weather-icon.rain { animation: rain-shimmer 1.6s linear infinite; }
  @keyframes rain-shimmer { 0% { transform: translateY(0); opacity:1 } 50% { transform: translateY(2px); opacity:0.92 } 100% { transform: translateY(0); opacity:1 } }

  .weather-icon.snow { animation: snow-fall 3.6s linear infinite; }
  @keyframes snow-fall { 0% { transform: translateY(0); } 50% { transform: translateY(6px); } 100% { transform: translateY(0); } }

  .weather-icon.thunder { animation: thunder-flash 2.4s linear infinite; }
  @keyframes thunder-flash { 0% { opacity: 1 } 40% { opacity: 1 } 45% { opacity: 0.25 } 55% { opacity: 1 } 100% { opacity: 1 } }
  .wind-icon { font-size: 48px; color: #1E88E5; }
  .wind-arrow { display:inline-block; font-size: 28px; color: #1E88E5; margin-right:8px; transition: transform 320ms ease; }
  /* Larger arrow and animated wrapper */
  .wind-arrow-wrap { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; margin-left:8px; margin-right:8px; }
  .wind-arrow { font-size: 34px; }
  @keyframes wind-bob { 0% { transform: translateY(0); } 50% { transform: translateY(-4px); } 100% { transform: translateY(0); } }
  .wind-arrow-anim { animation: wind-bob 1.6s ease-in-out infinite; }

  /* Italian description line under the icon */
  .weather-desc-it { font-size: 1rem; color: #36454f; margin-top: 6px; }

  /* Ensure small screens don't overflow with huge icons */
  @media (max-width: 400px) {
    /* reduce title on very small screens and keep subtitle proportional */
    .site-hero { --hero-title-size: 1.6rem; }
    .hero-title { white-space: normal !important; }
    .hero-sub { font-size: calc(var(--hero-title-size) * var(--hero-sub-scale)) !important; }
    .wind-arrow { font-size: 22px; }
    .wind-arrow-wrap { width:38px; height:38px; }
  }
  .weather-widget .weather-loading { color: #6c757d; }
  .weather-widget .temp { font-size: 2rem; font-weight: 600; }
  .weather-widget .desc { font-size: 1rem; color: #495057; }
  .map-frame iframe { border-radius: 8px; }

  @media (max-width: 767px) {
    .map-frame iframe { height: 260px; }
  }

  /* Section: how to join */
  .soci-join {
    /* ridotto lo spazio verticale in caso la sezione venga rimossa dal template */
    background: var(--brand-100, #F2F8FF);
    padding: 20px 24px;
    border-radius: 6px;
    margin-top: 0;
    margin-bottom: 24px;
    text-align: center;
  }
  .soci-join-title {
    font-size: 1.5rem;
    color: var(--brand-700);
    margin-bottom: 12px;
  }

  /* remove underline for links in join section and keep a subtle hover color change */
  .soci-join a {
    text-decoration: none;
    color: var(--brand-700);
    border-bottom: 1px solid transparent; /* preserve layout when adding hover underline if needed */
  }
  .soci-join a:hover,
  .soci-join a:focus {
    color: var(--brand-600);
    outline: none;
  }

  /* Card hover/focus highlight for soci list: lift, shadow and slight image zoom */
  .soci-container .card {
    /* explicitly only transition transform and box-shadow (exclude border-color) */
    transition-property: transform, box-shadow !important;
    transition-duration: 240ms, 240ms !important;
    transition-timing-function: cubic-bezier(.2,.9,.2,1), ease !important;
    will-change: transform, box-shadow;
    /* slightly rounded to match site aesthetic */
    border-radius: 0.5rem;
    /* subtle frame around the card: slightly stronger border and a soft brand-tinted glow */
    border: 1px solid rgba(13,128,242,0.06); /* subtle brand tint */
    box-shadow: 0 6px 18px rgba(13,128,242,0.035), inset 0 1px 0 rgba(255,255,255,0.6);
    background-color: #ffffff;
  }
  .soci-container .card:hover,
  .soci-container .card:focus-within {
    /* hover: apply visible brand-colored border, shadow and slight lift */
    border: 3px solid #0D80F2 !important; /* explicit border to ensure correct color & width */
    /* external colored shadow and lift */
    box-shadow: 0 10px 28px rgba(9,92,185,0.16), 0 4px 10px rgba(0,0,0,0.08) !important;
    transform: translateY(-4px) !important;
    transition-property: transform, box-shadow, border !important;
    transition-duration: 220ms, 220ms, 220ms !important;
  }

/* Extra-high-specificity fallback for any remaining overrides (covers news-card too) */
body .soci-container .card:hover,
body .soci-container .card:focus-within,
body .soci-container .card.news-card:hover,
body .soci-container .card.news-card:focus {
  border: 3px solid #0D80F2 !important;
  box-shadow: 0 10px 28px rgba(9,92,185,0.16) !important;
  z-index: 3 !important;
  background-clip: padding-box !important;
}
  .soci-container .card .card-img-top {
    transition: none !important;
    will-change: auto;
  }
  .soci-container .card:hover .card-img-top,
  .soci-container .card:focus-within .card-img-top {
    transform: none !important;
  }

/* Make the card body more compact so the image gets more vertical space */
.soci-container .card .card-body {
  /* keep compact vertical spacing but reserve a smaller top padding
     so adding padding to the title doesn't grow the card */
  padding: 0.1rem 0.6rem 0.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Make news cards occupy full width and be visually larger */
.soci-container .news-card {
  /* For list pages we want a single large card per row that fills the available width */
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border-radius: 0.6rem;
}
.soci-container .news-card .img-wrapper { height: 260px; }
.soci-container .news-card .card-img-top {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Enlarge news/event/activity photos on larger viewports for better visual impact */
@media (min-width: 992px) {
  .soci-container .news-card { max-width: 420px; }
  .soci-container .news-card .img-wrapper { height: 360px; }
}
@media (min-width: 1200px) {
  .soci-container .news-card { max-width: 520px; }
  .soci-container .news-card .img-wrapper { height: 420px; }
}
@media (max-width: 991px) {
  .soci-container .news-card .img-wrapper { height: 300px; }
}
.soci-container .news-card .card-footer { padding: 18px 22px; position: relative; }

/* Make sure list pages show a single column layout visually centered inside the container */
.soci-list-one-per-row .row > [class*="col-"] { padding-left: 0; padding-right: 0; }
.soci-list-one-per-row .news-card { border-radius: 8px; }

/* Homepage-only: more compact cards (reduce white space under photos) */
.home-compact-cards .news-card .img-wrapper { height: 220px; }
.home-compact-cards .news-card .card-footer { padding-top: 10px; padding-bottom: 12px; }
.home-compact-cards .news-card .card-title { font-size: 1.6rem; }
@media (min-width: 992px) {
  .home-compact-cards .news-card .img-wrapper { height: 260px; }
}
.soci-container .news-card .card-title { font-size: 2rem; font-weight: 800; line-height: 1.04; color: var(--dropdown-item-color); margin-bottom: 0.9rem; }
.soci-container .news-card .card-subtitle { font-size: 1rem; color: #5b6d7a; margin-top: 0.5rem; }

/* Emphasize post meta (date and subtitle) for better visibility */
.post-detail .post-meta .post-date {
  font-weight: 600;
  color: var(--brand-700);
  font-size: 1.08rem;
  padding: 6px 8px;
  background: rgba(234,246,255,0.5); /* subtle sky tint */
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
}
.post-detail .post-meta .post-date .bi {
  margin-right: 8px;
  font-size: 1.18rem;
  color: var(--brand-700);
}
.post-detail .post-meta .card-subtitle {
  background: rgba(13,128,242,0.06);
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 600;
  color: var(--brand-700);
  box-shadow: none;
}

/* Also make the subtitle in news cards slightly more prominent */
.soci-container .news-card .card-subtitle {
  font-weight: 600;
  color: var(--brand-700);
}

/* Make the date and subtitle strongly visible: filled badges in brand color */
.post-detail .post-meta .post-date {
  background: var(--brand-600);
  color: var(--brand-contrast) !important;
  box-shadow: 0 6px 18px rgba(13,128,242,0.12);
}
.post-detail .post-meta .post-date .bi { color: var(--brand-contrast) !important; }
.post-detail .post-meta .card-subtitle {
  background: var(--brand-600);
  color: var(--brand-contrast) !important;
  padding: 6px 14px;
  border-radius: 999px;
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(13,128,242,0.12);
}

/* Also apply a subtle badge style to the small subtitle inside news cards */
.soci-container .news-card .card-subtitle {
  background: var(--brand-100);
  color: var(--brand-700);
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 600;
}

/* Position date bottom-left and read button bottom-right inside the card footer */
.soci-container .news-card .post-date {
  /* center the date inside the footer */
  position: relative;
  display: block;
  margin: 0.25rem auto 0.5rem auto;
  font-size: 0.95rem;
  color: #6c757d;
  left: auto !important;
  bottom: auto !important;
  text-align: center;
}
.soci-container .news-card .post-read-btn {
  position: absolute;
  right: 18px;
  bottom: 8px;
  padding: 8px 14px;
  font-size: 0.95rem;
}

/* Stronger override to prevent card-footer centering from affecting these elements */
.soci-container .news-card .card-footer .post-date {
  /* ensure footer-centered date wins over previous absolute overrides */
  position: relative !important;
  left: auto !important;
  bottom: auto !important;
  text-align: center !important;
  z-index: 3 !important;
  display: block !important;
  margin: 0.25rem auto 0.5rem auto !important;
}
.soci-container .news-card .card-footer .post-read-btn {
  position: absolute !important;
  right: 18px !important;
  bottom: 8px !important;
  display: inline-block !important;
  margin: 0 !important;
  z-index: 3 !important;
}

/* Ensure the footer has enough bottom padding to avoid overlap */
.soci-container .news-card .card-footer { padding-bottom: 28px; }

/* Lightbox / carousel styles */
.flotta-lightbox-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.85);
  z-index: 2000;
}
.flotta-lightbox-inner { position: relative; width: 100%; max-width: 1200px; height: 80vh; overflow: hidden; }
.flotta-lb-track { height: 100%; display: flex; transition: transform 320ms ease; will-change: transform; overflow: hidden; }
.flotta-lb-slide { min-width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.flotta-lb-image { max-width: 90vw; max-height: 90vh; object-fit: contain; display: block; margin: 0 auto; }
.flotta-lb-close, .flotta-lb-prev, .flotta-lb-next {
  position: absolute; top: 12px; background: rgba(255,255,255,0.06); color: #fff; border: none; font-size: 28px; padding: 8px 12px; border-radius: 6px; backdrop-filter: blur(6px);
}
.flotta-lb-close { right: 12px; top: 12px; }
.flotta-lb-prev { left: 12px; top: 50%; transform: translateY(-50%); }
.flotta-lb-next { right: 12px; top: 50%; transform: translateY(-50%); }

@media (max-width: 767px) {
  .flotta-lightbox-inner { max-width: 100%; height: 70vh; }
  .flotta-lb-close, .flotta-lb-prev, .flotta-lb-next { font-size: 20px; padding: 6px 8px; }
}
.soci-container .card:not(.news-card) .card-title {
  font-size: 1rem;
  /* use padding-top on the title instead of margin so spacing is inside the flow
     and compensated by the reduced .card-body padding above */
  padding-top: 0.5rem;
  margin-bottom: 0.25rem;
}
.card-subtitle {
  font-size: 0.95rem; /* slightly smaller than title */
  color: #556b7a; /* muted-but-readable slate tone */
  display: block;
  margin-top: 4px;
  margin-bottom: 6px;
  line-height: 1.2;
}
.soci-container .card .card-text {
  margin-bottom: 0.25rem;
  font-size: 0.95rem;
  color: #334;
}

/* Spazio sotto il testo introduttivo del form di contatto */
.contact-form-intro {
  display: block;
  margin-bottom: 20px !important;
}

/* Add 30px margin above news section titles to improve vertical rhythm */
.soci-container .section-title {
  margin-top: 30px;
  display: block !important;
  width: 100% !important;
  text-align: center !important;
}

/* Add 50px padding to the signup-columns container as requested */
#signup-columns {
  padding: 50px;
}

/* Small positioned button on the news section for "Leggi altro" */
.news-more-btn {
  position: absolute;
  top: 8px;
  right: 8px;
}

/* Contact phone list styling */
.contact-phones li {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  color: #0b3f66;
}
.contact-phones li a {
  color: var(--brand-700);
  text-decoration: none;
  margin-left: 6px;
}
.contact-phones li a:hover {
  text-decoration: underline;
}
.contact-phones .bi-telephone-fill {
  color: var(--brand-600);
  font-size: 1.05rem;
  min-width: 22px; /* keep icons aligned */
}

/* Main contact list (email/address) icon styling */
.contact-main-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #0b3f66;
}
.contact-main-list li .bi {
  color: var(--brand-600);
  font-size: 1rem;
  min-width: 22px;
}
.contact-main-list li a { color: var(--brand-700); }

/* Image visual enhancements: subtle border and overlay */
.soci-container .card .card-img-top {
  display: block;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));
}
.soci-container .card .img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.06));
  opacity: 0;
  transition: opacity 200ms ease;
  border-radius: 0.5rem 0.5rem 0 0;
}
.soci-container .card:hover .img-overlay,
.soci-container .card:focus-within .img-overlay {
  opacity: 1;
}

/* Place a relative container for images in card to host overlay */
.soci-container .card .img-wrapper { position: relative; overflow: hidden; border-radius: 0.5rem 0.5rem 0 0; }

/* Clickable news cards: blue 3px border on hover/focus and a soft shadow */
.news-card {
  display: block; /* ensure it can be wrapped by anchors or act as a block link */
  transition: box-shadow 220ms cubic-bezier(.2,.9,.2,1), border-color 200ms ease, transform 240ms ease;
  /* stronger default border for high visibility on news cards */
  border: 2px solid rgba(13,128,242,0.36);
  border-radius: 0.6rem;
  /* slightly stronger brand-tinted base shadow for clearer separation */
  box-shadow: 0 12px 30px rgba(13,128,242,0.10);
}
.news-card:focus, .news-card:focus-within {
  outline: none; /* we'll show a visible border instead */
}
.news-card:hover, .news-card:focus {
  /* exact brand color used by the navbar to ensure visual consistency */
  border: 4px solid var(--brand-500) !important;
  /* stronger, brand-tinted shadow on hover for a modern elevated effect */
  box-shadow: 0 28px 68px rgba(13,128,242,0.28) !important;
  transform: translateY(-4px);
}

/* Zoom the card image slightly on hover for a more dynamic effect */
/* Stronger zoom rules for news card images to override other styles and ensure visibility */
.soci-container .news-card .img-wrapper img,
.soci-container .news-card .card-img-top {
  transition: transform 420ms cubic-bezier(.2,.9,.2,1) !important;
  will-change: transform;
  transform-origin: center center !important;
}
.soci-container .news-card:hover .img-wrapper img,
.soci-container .news-card:focus .img-wrapper img,
.soci-container .news-card:hover .card-img-top,
.soci-container .news-card:focus .card-img-top {
  transform: scale(1.08) !important;
}

/* Respect reduced motion preference: disable image zoom */
@media (prefers-reduced-motion: reduce) {
  .soci-container .news-card .img-wrapper img,
  .soci-container .news-card .card-img-top {
    transition: none !important;
    transform: none !important;
  }
}

/* High-specificity override to ensure no other .card hover rule changes the color */
.soci-container .card.news-card:hover,
.soci-container .card.news-card:focus {
  border-width: 4px !important;
  border-style: solid !important;
  border-color: #0D80F2 !important; /* explicit hex for exact match */
  box-shadow: 0 28px 68px rgba(13,128,242,0.28) !important;
}

/* Ensure the image link inside the card doesn't display its own underline/outline */
.card-image-link { display: block; text-decoration: none; color: inherit; }
.card-image-link img { display: block; width: 100%; height: auto; }

/* Keep keyboard focus visible for accessibility */
.news-card:focus-visible {
  /* slightly larger focus ring to improve accessibility visibility */
  box-shadow: 0 0 0 6px rgba(13,128,242,0.18);
}

  /* Respect users who prefer reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .soci-container .card,
    .soci-container .card .card-img-top {
      transition: none !important;
      transform: none !important;
      box-shadow: none !important;
    }
  }

/* Override: ensure the intro section across site pages uses the requested background color */
.soci-intro {
  background: #ffe9ad !important;
}

/* Regolamento intro block: icon + lead paragraph */
/* regolamento intro uses the shared .soci-intro styles for consistency across pages */

/* Regolamento - articoli (miglioramenti di leggibilità) */
.norme-section {
  padding: 14px 18px;
}
.regolamento-articoli {
  max-width: 980px;
  margin: 0 auto;
  line-height: 1.65; /* maggiore interlinea per leggibilità */
  font-size: 1rem;
  color: #0b3f66; /* contrasto con il tema */
  padding-left: 1.1rem; /* lascia spazio per il marker */
}
.regolamento-articoli li {
  margin-bottom: 0.9rem;
  text-align: justify; /* rende i paragrafi più facili da leggere */
}
.regolamento-articoli li strong { color: var(--brand-700); margin-right: 0.35rem; font-weight: 700; }
.regolamento-articoli li::marker { color: var(--brand-700); font-weight: 600; }
.regolamento-articoli p { margin-top: 0.6rem; color: #495057; }

@media (max-width: 767px) {
  .regolamento-articoli { font-size: 0.95rem; padding-left: 0.85rem; }
  .regolamento-articoli li { margin-bottom: 0.72rem; }
}

/* Socio avatar circle used in flotta list: 200px with 3px border and circular crop */
.socio-avatar-circle {
  width: 100px;
  height: 100px;
  flex: 0 0 100px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid var(--brand-500); /* slightly reduced border */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f6f6f6;
}
.socio-avatar-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.socio-avatar-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9aa6b2;
  font-size: 3rem;
}

@media (max-width: 767px) {
  .socio-avatar-circle {
    width: 82px;
    height: 82px;
    flex: 0 0 82px;
  }
  .socio-avatar-placeholder { font-size: 2rem; }
}

/* Center header (avatar + name) for each socio in flotta list */
.socio-header {
  text-align: center;
}
.socio-header h4 { margin: 0; }
.socio-header .socio-avatar-circle { margin-left: auto; margin-right: auto; }
.socio-header h4.text-center { display:block; }

/* Stronger rules to ensure centering on desktop (override Bootstrap row/col behaviours) */
.soci-container .socio-header {
  display: flex !important;
  flex-direction: column;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.75rem;
  width: 100%;
}
@media (min-width: 768px) {
  .soci-container .socio-header {
    flex-direction: row;
  }
}
.soci-container .socio-header h4 {
  text-align: center !important;
  margin: 0 !important;
}
.soci-container .socio-header .socio-avatar-circle {
  margin: 0 !important;
}
/* add spacing between the socio header (avatar + name) and the following cards */
.soci-container .socio-header {
  margin-bottom: 30px !important;
}

.soci-container .socio-header + .row {
  margin-top: 18px !important;
}

/* Modern animated page title used on la_pista and similar pages.
   Also applied to .hero-title and .section-title for consistent appearance */
.page-title-modern,
.hero-title,
.section-title {
  font-weight: 800;
  font-size: 2.4rem;
  background: linear-gradient(90deg, #0D80F2 0%, #4AB3FF 40%, #7EE7FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  position: relative;
  display: inline-block;
  padding-bottom: 30px; /* increased space under title per request */
  transition: transform 420ms cubic-bezier(.2,.9,.2,1), opacity 420ms ease;
  opacity: 0;
  transform: translateY(10px);
}
/* underline removed per request */
.page-title-modern::after { display: none; }

/* Reveal animation when page loads */
.page-title-modern.revealed { opacity: 1; transform: translateY(0); }
/* Also make section titles visible when revealed class is present */
.section-title.revealed { opacity: 1; transform: translateY(0); }

/* Hover emphasis for pointer users */
.page-title-modern:hover { transform: translateY(-4px) scale(1.01); }

/* Post detail: center the page title specifically on post detail pages */
.post-detail .page-title-modern {
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Center the modern page title on the flotta list page specifically */
.flotta-list .page-title-modern,
.flotta-list .soci-title {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

/* Increase title padding and align subtitle + date on one line for post detail */
.post-detail .page-title-modern {
  padding: 50px 0; /* 50px vertical padding as requested */
}
.post-detail .post-meta {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between; /* push date left and subtitle right */
  margin-bottom: 8px;
  /* Align post-meta to match the edges of the .post-main-image */
  max-width: var(--post-main-max-width); /* same as .post-main-image */
  margin-left: auto;
  margin-right: auto;
  padding-left: 14px; /* increased padding for breathing room */
  padding-right: 14px;
  padding-top: 8px;
  padding-bottom: 8px;
}
.post-detail .post-meta .card-subtitle {
  margin: 0;
  font-size: 1rem;
  color: #5b6d7a;
}
.post-detail .post-meta .post-date {
  margin: 0;
  font-size: 1.02rem; /* slightly larger for readability */
  color: #6c757d;
  display: inline-flex;
  align-items: center;
}
.post-detail .post-date .bi { margin-right: 8px; font-size: 1.05rem; color: #6c757d; }
.post-detail .post-author { text-align: center; margin-top: 4px; }

/* Main image for post detail: smaller and centered under the title */
.post-detail .post-main-image { max-width: var(--post-main-max-width); margin-left: auto; margin-right: auto; }
.post-detail .post-main-image .post-main-img { width: 100%; height: auto; max-height: 360px; object-fit: cover; border-radius: 8px; }

/* Ensure the main image is above any decorative/animated layers */
.post-main-image { position: relative; z-index: 10; }

@media (max-width: 767px) {
  .post-detail .post-main-image .post-main-img { max-height: 260px; }
}

/* Full-bleed light-blue background behind the main image */
.post-main-bg {
  /* static light-blue band behind the main image (animations removed) */
  background-color: var(--brand-100);
  padding-top: 44px; /* maintained spacing */
  padding-bottom: 44px;
  position: relative;
  overflow: visible;
  animation: none !important;
}

/* Slightly increase the max-width inside the blue band to give breathing room */
.post-main-bg .post-main-image { max-width: var(--post-main-max-width); }

@media (max-width: 767px) {
  .post-main-bg { padding-top: 34px; padding-bottom: 34px; }
  .post-main-bg .post-main-image { max-width: calc(100% - 24px); }
}

/* shimmer overlay to add a soft moving highlight across the band */
.post-main-bg::after {
  display: none !important;
  content: none !important;
}

/* Pause animation when user hovers the band to reduce distraction */
.post-main-bg:hover { animation-play-state: paused; }
.post-main-bg:hover::after { animation-play-state: paused; }

/* Decorative animated shape behind the band that morphs its border-radius and
   subtly scales/rotates to create a more visible, organic motion. Kept as a
   separate layer so it doesn't affect layout of the content. */
.post-main-bg::before {
  display: none !important;
  content: none !important;
}
.post-main-bg { position: relative; }

.post-main-bg:hover::before { animation-play-state: paused; }

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .post-main-bg { animation: none !important; }
  .post-main-bg::after { animation: none !important; }
}

@keyframes postMainBgPan {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

@keyframes postMainShimmer {
  0% { transform: translateX(-40%); opacity: 0.0; }
  50% { transform: translateX(120%); opacity: 0.95; }
  100% { transform: translateX(240%); opacity: 0.0; }
}

@keyframes postMainShape {
  0% {
    transform: translate(-50%, -50%) scale(1) rotate(-1deg);
    border-radius: 20% 80% 30% 70% / 40% 30% 70% 60%;
    opacity: 0.9;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.03) rotate(1.2deg);
    border-radius: 40% 60% 50% 50% / 30% 50% 30% 50%;
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(0.98) rotate(-0.6deg);
    border-radius: 60% 30% 70% 20% / 50% 40% 60% 30%;
    opacity: 0.92;
  }
}

/* Post body constrained to same width as main image */
.post-detail .post-body {
  max-width: var(--post-main-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 8px;
  padding-right: 8px;
}
.post-detail .post-content { font-size: 1rem; line-height: 1.7; color: #223; }

/* Post gallery: 2-up responsive grid with captions */
.post-gallery { max-width: var(--post-main-max-width); margin-left: auto; margin-right: auto; padding: 8px; }
.post-gallery .post-gallery-grid {
  display: flex;
  flex-direction: column;
  gap: 28px; /* increased vertical gap between gallery items */
}
.post-gallery .post-gallery-item { margin: 0; }
.post-gallery .post-gallery-item img { width: 100%; height: auto; border-radius: 8px; object-fit: cover; display: block; }
.post-gallery .post-gallery-caption { font-size: 0.9rem; margin-top: 10px; color: #6c757d; }

/* Fallback spacing in case gap is overridden: add margin-bottom to each item */
.post-gallery .post-gallery-item {
  margin-bottom: 28px; /* ensure vertical spacing even when gap isn't applied */
  box-sizing: border-box;
}
.post-gallery .post-gallery-item:last-child { margin-bottom: 0; }

/* Add internal padding so images are visually inset from each other. We use
   background: transparent so the padding appears as gap (not a colored band). */
.post-gallery .post-gallery-item {
  padding: 10px 0; /* top/bottom padding to increase distance */
}
.post-gallery .post-gallery-item img { display: block; width: 100%; height: auto; }
.post-gallery { background: transparent; }

/* Additional fallback: some templates render the gallery using a Bootstrap .row
   with .col-12 wrappers (see news1.html snapshot). Ensure those figures also
   receive spacing so the gallery is visibly separated regardless of markup. */
.post-gallery .row .post-gallery-item,
.post-gallery .row > .col-12 > .post-gallery-item,
.post-gallery .row > .col-12 > figure.post-gallery-item {
  margin-bottom: 28px; /* match gap */
}
.post-gallery .row > .col-12:last-child > .post-gallery-item { margin-bottom: 0; }

/* Ensure images inside older structure have display:block and don't collapse */
.post-gallery .row .post-gallery-item img,
.post-gallery .row > .col-12 img {
  display: block;
  width: 100%;
  height: auto;
}

/* Ensure the Bootstrap .row inside the gallery doesn't add negative margins that
   could collapse the spacing. We scope this to only the gallery's row. */
.post-gallery .row { margin-left: 0; margin-right: 0; }
.post-gallery .row > [class*="col-"] { padding-left: 0; padding-right: 0; }

/* When the gallery is wrapped in a .card (post-gallery-card) we intentionally
   remove the card chrome so images appear borderless as the user expects. We
   keep keyboard focus outlines (outline) for accessibility but remove any
   default border that Bootstrap or other rules might add. */
.post-gallery-card {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
}
.post-gallery-card .post-gallery-item img,
.post-gallery .post-gallery-item img {
  border: none !important;
  outline: none !important; /* don't show a permanent outline around images */
  display: block;
}
/* Preserve an accessible focus ring for clickable images without showing a
   persistent border. Use outline on focus so keyboard users can still see focus. */
.post-gallery-card .clickable-photo:focus,
.post-gallery .clickable-photo:focus {
  outline: 3px solid rgba(13,128,242,0.14);
  outline-offset: 4px;
  border: none !important;
}


@media (max-width: 767px) {
  /* Stack meta items on small screens for readability */
  .post-detail .post-meta {
    flex-direction: column;
    gap: 6px;
    align-items: center;
  }
  .post-detail .post-meta .card-subtitle,
  .post-detail .post-meta .post-date { text-align: center; }
}

@media (min-width: 768px) {
  .page-title-modern, .hero-title { font-size: 3.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .page-title-modern, .page-title-modern::after { transition: none !important; animation: none !important; transform: none !important; }
}

/* Restore previous non-gradient font/color for hero title specifically (homepage hero)
   Keep reveal animation behaviour but remove gradient/background-clip applied earlier */
.site-hero .hero-title {
  /* format hero title to match the subtitle (.hero-sub)
     - same size (relative), color, line-height, letter-spacing and text-shadow */
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  color: rgba(255,255,255,0.95) !important; /* same as .hero-sub */
  font-weight: 700 !important; /* make hero title bold as requested */
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: var(--hero-title-size) !important; /* larger than subtitle */
  line-height: 1.2 !important;
  letter-spacing: 0.25px !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.55) !important; /* same as .hero-sub */
}

/* Ensure reduced-motion respect for hero as well */
@media (prefers-reduced-motion: reduce) {
  .site-hero .hero-title { transition: none !important; transform: none !important; }
}

/* Disable reveal animation for hero title so it appears immediately */
.site-hero .hero-title {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* Aeromodello card: main photo and thumbnails */
.modello-main-photo {
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
}
.clickable-photo { cursor: zoom-in; }

/* very specific selector to override any remaining hover transform rules */
.soci-container .row .col-md-6 .card:hover,
.soci-container .row .col-md-6 .card:focus-within {
  transform: none !important;
  box-shadow: none !important;
}
.modello-main-placeholder {
  width: 100%;
  height: 240px;
  background: linear-gradient(180deg,#f3f6fb,#ffffff);
  border: 1px dashed #e9ecef;
}
.modello-thumbs {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}

/* Category tag inside card: small pill between image and body */
.card-category {
  display: inline-block;
  padding: 6px 10px;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 999px;
  margin: 8px 12px 0 12px;
  color: #0b3f66;
  background: rgba(13,128,242,0.08);
}

/* per-category color tokens */
.tag-scoppio { background: rgba(255,99,71,0.12); color:#8a260b; }
.tag-elettrico { background: rgba(13,128,242,0.12); color:var(--brand-700); }
.tag-aliante { background: rgba(34,197,94,0.12); color:#166534; }
.tag-motoaliante { background: rgba(34,197,94,0.10); color:#166534; }
.tag-ventola { background: rgba(102,126,234,0.10); color:#2b3aa1; }
.tag-turbina { background: rgba(255,193,7,0.12); color:#735200; }
.tag-tuttala { background: rgba(120,74,255,0.10); color:#3b1569; }
.tag-vincolato { background: rgba(99,102,241,0.08); color:#2c2fa1; }
.tag-fpv { background: rgba(236,72,153,0.10); color:#7a1141; }
.tag-drone { background: rgba(14,165,233,0.10); color:#055f79; }
.tag-elicottero { background: rgba(34,197,94,0.10); color:#165c2b; }
.modello-thumb-wrap { flex: 0 0 auto; }
.modello-thumb {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,0.06);
}
@media (max-width: 767px) {
  .modello-main-photo, .modello-main-placeholder { height: 180px; }
  .modello-thumb { width: 56px; height: 56px; }
}

/* Flotta list: subtle border and hover animation for cards */
.flotta-list .card {
  border: 1.6px solid rgba(13,128,242,0.16); /* slightly stronger bluish border */
  transition: transform 220ms cubic-bezier(.2,.9,.2,1), box-shadow 220ms ease, border-color 180ms ease;
  will-change: transform, box-shadow;
}
.flotta-list .card:hover,
.flotta-list .card:focus-within {
  transform: translateY(-8px);
  box-shadow: 0 18px 40px rgba(8,35,65,0.12);
  border-color: rgba(13,128,242,0.28);
}
.flotta-list .card .img-wrapper img,
.flotta-list .card .card-img-top img,
.flotta-list .modello-main-photo {
  transition: transform 420ms ease;
}

/* Increase flotta list image heights on desktop */
@media (min-width: 992px) {
  .flotta-list .card .img-wrapper { height: 260px; }
  .flotta-list .card .card-img-top img { height: 260px; object-fit: cover; }
}
.flotta-list .card:hover .img-wrapper img,
.flotta-list .card:focus-within .img-wrapper img,
.flotta-list .card:hover .card-img-top img {
  transform: scale(1.04);
}

/* Keep reduced-motion users respected */
@media (prefers-reduced-motion: reduce) {
  .flotta-list .card,
  .flotta-list .card .img-wrapper img { transition: none !important; transform: none !important; }
}

/* Tessere storiche: framed layout where the two tessera images fill the frame */
.tessere-section .tessera-wrap {
  display: block;
  background: linear-gradient(180deg, rgba(234,246,255,0.95), rgba(245,252,255,1));
  border: 2px solid rgba(13,128,242,0.18);
  border-radius: 12px;
  box-shadow: 0 10px 20px rgba(13,128,242,0.06);
  padding: 8px; /* tighter inner padding so images appear larger */
  width: 100%;
  box-sizing: border-box;
}
.tessere-section .tessera-inner-row {
  display: flex;
  gap: 8px; /* smaller gap so the two cards visually fill the frame */
  align-items: stretch;
  justify-content: center;
  flex-wrap: nowrap;
}
.tessere-section .tessere-inner-col {
  flex: 0 0 50%;
  max-width: 50%;
  padding-left: 6px; /* small gutter inside the frame */
  padding-right: 6px;
  box-sizing: border-box;
}
.tessere-section .tessera-img {
  display: block;
  width: 100%;
  height: 320px; /* fixed height so the images fill vertically the frame */
  border-radius: 6px;
  object-fit: cover; /* fill and crop as needed */
}
@media (max-width: 767px) {
  .tessere-section .tessera-inner-row { flex-wrap: wrap; gap: 12px; }
  .tessere-section .tessere-inner-col { flex: 0 0 100%; max-width: 100%; padding-left: 0; padding-right: 0; }
  .tessere-section .tessera-img { height: auto; }
}

/* Add 20px padding around the final group photo so it doesn't touch edges */
.final-photo-placeholder .feature-image-placeholder,
.final-photo-placeholder .feature-image-placeholder img {
  /* keep 20px inner padding but remove any frame or decorative styles */
  padding: 20px;
  box-sizing: border-box;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}