/*
  brand-logo.css
  Controls the size of logo-title.png across the whole site.
  Change only the variables below to resize globally.
*/

:root{
  /* Adjust these two values to resize everywhere */
  --logo-title-height-mobile: 100px;  /* phones/tablets */
  --logo-title-height-desktop: 120px; /* ≥640px */

  /* Tweak this value to get the exact space you want below the logo */
  --logo-gap-below: 12px;
}

/* Preferred: target a class you add to the logo image */
img.site-title-logo{
  height: var(--logo-title-height-mobile) !important;
  width: auto !important;
  display: block;
}

/* Fallback: also catch any <img> that uses logo-title.png even if no class */
img[src$="logo-title.png"]{
  height: var(--logo-title-height-mobile) !important;
  width: auto !important;
  display: block;
}

@media (min-width: 640px){
  img.site-title-logo,
  img[src$="logo-title.png"]{
    height: var(--logo-title-height-desktop) !important;
  }
}

/* Optional: if you use a wrapper like .brand-slot and want the logo centered */
.brand-slot{
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Remove default <p> margins if the logo wrapper is a <p class="brand-slot">,
   and set one consistent gap below the logo on all pages */
p.brand-slot,
.brand-slot{
  margin: 0 0 var(--logo-gap-below);
}

/* Ensure the H2 right under the header area doesn't add extra top margin.
   This targets pages where the logo (.brand-slot) appears above <main>. */
.brand-slot ~ main h2.page-title{
  margin-top: 0;
}

/* Hide "Manage Cookies" link globally */
#manage-cookies {
  display: none !important;
}

footer .disclaimer {
  font-size: 0.7rem;      /* smaller text */
  color: #555;            /* slightly lighter gray */
  margin-top: 8px;        /* space above it */
  line-height: 1.3;       /* tighter spacing */
  margin-bottom: 2px;
}

/* ====================================================================== */
/* Poster fullscreen mode (applies only while the poster is shown)        */
/* This prevents the site footer/disclaimer from overlaying the poster,   */
/* removes page scroll, and creates a fixed viewport with a tiny margin.  */
/* ====================================================================== */

html.poster-open,
html.poster-open body{
  height: 100%;
  overflow: hidden !important;
}

/* Hide footer and common consent/disclaimer bars only while poster is open */
html.poster-open footer,
html.poster-open footer .disclaimer,
html.poster-open #manage-cookies,
html.poster-open .cookie-banner,
html.poster-open [class*="cookie-consent"],
html.poster-open [id*="cookie-consent"],
html.poster-open [class*="consent"],
html.poster-open [id*="consent"]{
  display: none !important;
}

/* Fixed, safe-area-aware viewport that the poster will fit inside */
#posterViewport{
  position: fixed;
  top: calc(env(safe-area-inset-top) + 12px);
  right: calc(env(safe-area-inset-right) + 12px);
  bottom: calc(env(safe-area-inset-bottom) + 12px);
  left: calc(env(safe-area-inset-left) + 12px);
  z-index: 2147483646; /* above any site chrome */
  display: grid;
  place-items: center;
  box-sizing: border-box;
  /* hidden by default; JS removes [hidden] when poster is ready */
}

/* Keep the poster canvas inside the viewport with aspect preserved.
   This guarantees the whole poster is visible without scrolling. */
#posterViewport #posterCanvas{
  max-width: 100%;
  max-height: 100%;
  width: auto !important;
  height: auto !important;
  display: block;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.15);
}

/* Make the Save/Share controls an overlay so they don't push the poster down */
#posterViewport .controls{
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  z-index: 2;
}

/* Buttons look */
#posterViewport .controls .btn{
  appearance: none;
  background: #f1f5f9;
  border: 1px solid #cfd7e6;
  color: #0f172a;
  border-radius: 12px;
  padding: 10px 16px;
  font-weight: 900;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}
#posterViewport .controls .btn:hover{ background: #e2e8f0; }