/*
CUSTOM CSS FILE
This is the cleanest, update-safe way: your overrides won’t be wiped when you tweak or upgrade the theme, 
and you avoid wrestling with existing selectors.
*/

/*
How the custom CSS file works

Edit your theme header (layout.html.php) and add this line below the existing style.css include.

<link rel="stylesheet" id="gridzone-style-css"
      href="<?php echo theme_path(); ?>css/style.css" type="text/css" media="all">

<?php
  $customCssWeb = theme_path() . 'css/custom.css';
  $customCssFs  = rtrim($_SERVER['DOCUMENT_ROOT'], '/') . $customCssWeb;
  $ver = @file_exists($customCssFs) ? @filemtime($customCssFs) : time();
?>
<link rel="stylesheet" id="gridzone-custom-css"
      href="<?php echo $customCssWeb . '?v=' . $ver; ?>" type="text/css" media="all">
*/



/* ------------------------------------------------------------------------- *
 *  Table of contents
    
    Youtube Styles
    facebook and bluesky post-sharing feature

/* ------------------------------------------------------------------------- */


/* ------------------------------------------------------------------------- *
 *  Youtube Styles
/* ------------------------------------------------------------------------- */

/* LITE YOUTUBE */
.yt-lite{
  position:relative;
  aspect-ratio: 16 / 9;
  background:#000;
  border-radius:12px;
  overflow:hidden;
  display:block;
}

/* Poster image */
.yt-lite img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:saturate(1.05);
  transform: translateZ(0);
}

/* Slight dark overlay for contrast */
.yt-lite::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.15), rgba(0,0,0,0.35));
  pointer-events:none;
}

/* Play button */
.yt-lite .lty-playbtn{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:68px; height:48px; border:0; border-radius:10px;
  background: rgba(0,0,0,.6);
  cursor:pointer;
}
.yt-lite .lty-playbtn::before{
  content:"";
  display:block; margin:auto;
  width:0; height:0; border-style:solid;
  border-width:10px 0 10px 16px;
  border-color: transparent transparent transparent #fff;
  position:relative; left:26px; top:14px;
}
.yt-lite:hover .lty-playbtn{ background: rgba(0,0,0,.75); }

/* When activated, hide overlay and button */
.yt-lite.lty-activated img,
.yt-lite.lty-activated::after,
.yt-lite.lty-activated .lty-playbtn{ display:none; }

.yt-lite iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0;
}

/* Noscript fallback link */
.yt-fallback-link{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  color:#fff; text-decoration:none; background:rgba(0,0,0,.6);
  font-weight:600;
}
/* ------------------------------------------------------------------------- */


/* ------------------------------------------------------------------------- */
/*  facebook and bluesky post-sharing feature
/* ------------------------------------ */

:root{
  --bsky: #01A6FF;   /* Bluesky brand-ish blue */
  --fb:   #1877F2;
}

/* Hide the old plus box entirely */
.sharrre .count { display: none !important; }

/* Share button hit area */
.sharrre .box{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:8px; position:relative; text-decoration:none;
  background: transparent;
}

/* Icon sizing (FA or SVG/mask) */
.sharrre .share i,
.sharrre .share img { width:18px; height:18px; display:block; }

/* Bluesky icon via CSS mask (colors the SVG to brand blue) */
.icon-bsky{
  width:18px; height:18px; display:inline-block; background-color: var(--bsky);
  -webkit-mask: url(/system/resources/images/social-logos/bluesky.svg) no-repeat center / contain;
          mask: url(/system/resources/images/social-logos/bluesky.svg) no-repeat center / contain;
}

/* Facebook brand color */
#facebook .share i { color: var(--fb); }

/* Optional hover/focus background */
.sharrre .box:hover,
.sharrre .box:focus { background: rgba(0,0,0,0.06); outline: none; }

/* Accessible tooltip */
.sharrre .share-link::after{
  content: attr(data-tooltip);
  position: absolute; left: 50%; bottom: 100%;
  transform: translateX(-50%) translateY(-8px);
  background: rgba(0,0,0,0.85); color:#fff;
  padding: 4px 8px; border-radius: 4px; font-size:12px;
  white-space: nowrap; opacity:0; pointer-events:none;
  transition: opacity .15s ease, transform .15s ease;
}
.sharrre .share-link::before{
  content:""; position:absolute; left:50%; bottom: calc(100% - 4px);
  transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: rgba(0,0,0,0.85);
  opacity: 0; transition: opacity .15s ease;
}
.sharrre .share-link:hover::after,
.sharrre .share-link:focus::after,
.sharrre .share-link:hover::before,
.sharrre .share-link:focus::before{
  opacity: 1; transform: translateX(-50%) translateY(-12px);
}

/* Screen-reader-only helper */
.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip: rect(0,0,1px,1px); white-space:nowrap; border:0;
}

/* ------------------------------------------------------------------------- */