/* Fixes added during the static migration (loaded after the template CSS).
   See MIGRATION.md. Keep this file small and commented. */

/* 1. Full-height page backgrounds (desktop sidebar layout only).
   The template sizes the sidebar to the content, but never the content to the
   sidebar: when the sidebar (menu + contacts) is taller, the area under the
   page background showed the bare page colour. Make header + content a flex
   row so #content always stretches to the taller of the two, and paint each
   page's background on #content instead of on the shorter inner section. */
@media (min-width: 1025px) {
  #container { display: flex; align-items: stretch; height: auto; min-height: 100%; }
  #container > header { flex: 0 0 auto; float: none; height: auto; }
  #content { flex: 1 1 auto; min-width: 0; margin-left: 0 !important; height: auto;
             background-size: cover; background-position: center; background-repeat: no-repeat; }

  #content:has(.services-page) { background-image: url('../images/services-back.jpg'); }
  #content:has(.about-page)    { background-image: url('../images/about-bg.jpg'); }
  #content:has(.single-page)   { background-image: url('../images/single-back.jpg'); }
  #content:has(.services-page) .services-page,
  #content:has(.about-page) .about-page,
  #content:has(.single-page) .single-page { background: none; }
  /* the Joomla wrapper .single-post is white: let the column background through */
  #content:has(.services-page, .about-page, .single-page, .contact-page) .single-post { background: transparent; }

  /* contatti: the map becomes the column background (same focal point as
     scripts/map/make_map.mjs FOCUS_X/Y), so it also runs the full height */
  #content:has(.contact-page) { background: #dfe7e8 url('../../../images/mappa-nord-italia.svg') 35% 40% / cover no-repeat; }
  #content:has(.contact-page) .contact-page .map { display: none; }
}

/* 2. Project tiles: the whole tile is one link (see fix_site.py "project tiles").
   The old "+" link is now a decorative span with the same look. */
a.tile-link { display: block; color: inherit; text-decoration: none; }
a.tile-link:focus-visible { outline: 3px solid #29692d; outline-offset: -3px; }
.hover-box .hover-content span.tile-plus {
  display: inline-block; width: 25px; height: 25px; margin-bottom: 12px;
  background: #fff url('../images/plus.png') center center no-repeat;
  transition: transform 0.2s ease-in-out;
}
.project-post:hover .hover-content span.tile-plus { transform: scale(1.17); }