/*
Theme Name: Possibilitas.se 2025
Theme URI: 
Author: the Wordpress team, AB Tutman
Author URI: 
Description: Ett barntema till Twenty Twenty-Five
Requires at least: 6.8
Tested up to: 6.8
Requires PHP: 5.7
Version: 
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: twentytwentyfive
Text Domain: possibilitas-se-2025
Tags: 
*/

/* Egen focus-stajl på sajtloggan */

/* Focus styles 
:where(.wp-site-blocks *:focus) {
outline-width: 0px !important;
}*/

:root{
  --logoFocusGapRem: 1;      /* avstånd från loggans kant, i rem */
  --logoFocusFeather: 24px;  /* hur mjukt glöden tonar ut */
  --logoFocusAlpha: .55;     /* glödens styrka */
  --logoFocusPulse: 1.6s;    /* pulsens hastighet */
  --logoFocusScale: 2; /* 2 ≈ dubbelt så stor ring */
}

/* Stäng av default-kanten just för loggalänken */
.wp-site-blocks .wp-block-site-logo a:focus,
.wp-site-blocks .wp-block-site-logo a:focus-visible { outline: 0 !important; }

/* Overlay som ritar ringen ovanpå allt */
#logo-focus-ring {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2147483647;
  display: none; /* .on visar den */
}

#logo-focus-ring.on { display: block; }

/* Själva ringen: cirkel + box-shadow med gap=1rem, feather=soft */
#logo-focus-ring::before {
  content: "";
  position: absolute;
  left: var(--cx);
  top: var(--cy);
  width: var(--side);
  height: var(--side);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  mix-blend-mode: multiply;

  /* Viktigt: box-shadow ger en ring UTANFÖR elementet.
     spread = var(--gap), blur = var(--feather) */
  box-shadow: 0 0 var(--feather) var(--gap)
              rgba(160,160,160,var(--logoFocusAlpha));

  animation: logoFocusPulse var(--logoFocusPulse) ease-in-out infinite;
  will-change: left, top, width, height, box-shadow;
}

@keyframes logoFocusPulse {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 0.75; }
}

/* High contrast: använd tydlig outline istället */
@media (forced-colors: active) {
  #logo-focus-ring { display: none !important; }
  .wp-site-blocks .wp-block-site-logo a:focus,
  .wp-site-blocks .wp-block-site-logo a:focus-visible {
    outline: 2px solid CanvasText !important;
    outline-offset: 4px;
  }
}