/*
 * Palladio — focus on every page (1.18.0). Loaded by functions.php after the parent theme and the plugin styles.
 *
 * One set of rules for the whole site. The Palladio components only set, on their dark surfaces, the three colors
 * below (light gold there: red stays under 3:1 on bordeaux).
 * Why: Twenty Twenty-Five draws a 2px outline on every :focus inside .wp-site-blocks, mouse included (gray accent-4
 * on buttons), and the Navigation block gives tabindex="-1" to the items with a submenu and to the mobile panel: in
 * Safari, which does not focus links and buttons on click, a click focuses the whole item and the browser's ring
 * surrounds label and arrow.
 *
 * - Mouse and touch: nothing, no outline and no shadow.
 * - Keyboard (:focus-visible), never a box around words:
 *   links, menu items, Details summaries, tabs, index items: text color and a 2px underline 6px below the text;
 *   buttons (filled or outlined) and the arrows of the carousels: darker fill, label underlined;
 *   icon buttons (submenu arrows, mobile menu) and the logo: color and a 2px line under the icon;
 *   areas scrolled with the arrow keys: a line under the carousel, the title of the shown frame or catalog.
 * - Form fields: border color and a soft shadow, with the mouse too (a field shows where you are typing).
 * Important declarations: the components style links and buttons with more specific selectors, and the parent
 * theme forces a 1px underline on links (!important).
 */
:root {
  --palladio-focus-text: var(--wp--preset--color--palladio-red, #a8342a);
  --palladio-focus-fill: var(--wp--preset--color--palladio-bordeaux, #6b1d23);
  --palladio-focus-on-fill: var(--wp--preset--color--palladio-cream, #faf7f2);
  --palladio-focus-line: 2px;
  --palladio-focus-offset: 6px;
}

/* No box, whatever the input: the parent theme's outline, its gray button outline, the browser's ring. */
.wp-site-blocks :focus, .skip-link:focus { outline: none !important; }
/* The underline is below the element's box: when the focus scrolls the page, keep it in the window too. */
.wp-site-blocks :where(a, summary, button, [tabindex]:not([tabindex="-1"])) { scroll-margin-bottom: 12px; }

/* Text: links, menu items (links or buttons), Details summaries, tabs, and the Buttons drawn as links or list items. */
.wp-site-blocks :where(a, summary, [role="tab"], .wp-block-navigation-item__content, button):focus-visible,
.wp-site-blocks :where(.palladio-da-link, .palladio-az-more, .palladio-az-link-light, .ps-category, .palladio-da-profile) > .wp-block-button__link:focus-visible,
.wp-site-blocks .ps-deck:focus-visible .ps-frame.is-shown .ps-frame-title,
.wp-site-blocks .palladio-da-panel:focus-visible h2 {
  color: var(--palladio-focus-text) !important;
  text-decoration-line: underline !important;
  text-decoration-style: solid !important;
  text-decoration-color: currentColor !important;
  text-decoration-thickness: var(--palladio-focus-line) !important;
  text-underline-offset: var(--palladio-focus-offset) !important;
}

/* Buttons, filled or outlined: darker fill, label underlined inside the button. */
.wp-site-blocks .wp-block-button:not(.palladio-da-link, .palladio-az-more, .palladio-az-link-light, .ps-category, .palladio-da-profile) > .wp-block-button__link:focus-visible,
.wp-site-blocks :is(input[type="submit"], input[type="button"], input[type="reset"]):focus-visible {
  background: var(--palladio-focus-fill) !important;
  border-color: var(--palladio-focus-fill) !important;
  color: var(--palladio-focus-on-fill) !important;
  text-decoration-line: underline !important;
  text-decoration-color: currentColor !important;
  text-decoration-thickness: var(--palladio-focus-line) !important;
  text-underline-offset: 4px !important;
}

/* Round arrows of the carousels (Home, Corsi regionali, Specializzazioni): darker fill, the arrow in the light color. */
.wp-site-blocks :is(.palladio-controls, .ps-controls) button:focus-visible {
  background: var(--palladio-focus-fill) !important;
  border-color: var(--palladio-focus-fill) !important;
  color: var(--palladio-focus-on-fill) !important;
  text-decoration: none !important;
}

/* Icon buttons of the header: the icon in the focus color and a 2px line under it. The submenu arrow is drawn from
   .25em + 6px, .6em wide (palladio-patterns.css): its line is 2px wider on each side and level with the underline of
   the label next to it (baseline about .37em below the middle of the row, plus the 6px offset); in the mobile panel
   the arrow sits 10px from the right edge. */
.wp-site-blocks :is(.palladio-submenu-toggle, .wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close):focus-visible {
  color: var(--palladio-focus-text) !important;
  text-decoration: none !important;
}
.wp-site-blocks .wp-block-navigation__responsive-container-open:focus-visible { position: relative; }
.wp-site-blocks :is(.palladio-submenu-toggle, .wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close):focus-visible::after {
  content: ""; position: absolute; height: var(--palladio-focus-line); background: currentColor; pointer-events: none;
}
.wp-site-blocks .palladio-submenu-toggle:focus-visible::after { left: calc(.25em + 4px); width: calc(.6em + 4px); top: calc(50% + .37em + var(--palladio-focus-offset)); }
.wp-site-blocks .is-menu-open .palladio-submenu-toggle:focus-visible::after { left: auto; right: 8px; }
.wp-site-blocks :is(.wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close):focus-visible::after { left: calc(50% - 7px); width: 14px; top: calc(50% + 10px); }

/* Logo: a line right under the image (a shadow of the image, so it follows the smaller logo of the compact header). */
.wp-site-blocks .palladio-header-logo a:focus-visible img { box-shadow: 0 calc(var(--palladio-focus-line) + 6px) 0 -6px var(--palladio-focus-text); }

/* Carousels reached with Tab (the arrow keys scroll them): a line under the cards, in the padding above the scrollbar. */
.wp-site-blocks .palladio-rail:focus-visible {
  background-image: linear-gradient(var(--palladio-focus-text), var(--palladio-focus-text)) !important;
  background-repeat: no-repeat !important;
  background-position: 50% calc(100% - 6px) !important;
  background-size: calc(100% - 4px) var(--palladio-focus-line) !important;
}
.wp-site-blocks .palladio-services .palladio-rail:focus-visible { background-size: min(1132px, calc(100% - 48px)) var(--palladio-focus-line) !important; }

/* Form fields: border color and a soft shadow, never the browser's rectangle. */
.wp-site-blocks :is(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="reset"], [type="image"], [type="range"], [type="color"], [type="file"]), select, textarea):focus {
  border-color: var(--palladio-focus-text) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--palladio-focus-text) 18%, transparent) !important;
}
.wp-site-blocks :is(input[type="checkbox"], input[type="radio"]):focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--palladio-focus-text) 18%, transparent) !important;
}

/* WordPress skip link ("Vai al contenuto"), shown only on keyboard focus: drawn as a focused button. */
.skip-link.screen-reader-text:focus {
  background: var(--palladio-focus-fill) !important;
  color: var(--palladio-focus-on-fill) !important;
  box-shadow: none !important;
  text-decoration: underline var(--palladio-focus-line) !important;
  text-underline-offset: 4px !important;
}

/* Windows high contrast: fills, shadows and drawn lines disappear there, so the elements that rely on them get the
   system outline. The only outline of the site, and only in that mode. */
@media (forced-colors: active) {
  .wp-site-blocks :is(.palladio-controls button, .ps-controls button, .palladio-submenu-toggle, .wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close, .palladio-header-logo a, .palladio-rail):focus-visible { outline: 2px solid Highlight !important; outline-offset: 2px; }
}