/*RED GOOSE DESIGN & MEDIA CSS*/
/*header*/
#sp-top-bar{background: transparent;position: absolute;top: 0;width: 100%;z-index: 999;}
#sp-header{background: transparent;box-shadow: none;position: absolute;top: 38px;}
#sp-header .container, #sp-top-bar .container{max-width:100%;width:100%;padding:0 16px;}
#sp-top-bar a {color: #000000;}
.sp-megamenu-parent > li > a, .sp-megamenu-parent > li > span, .sp-megamenu-parent .sp-dropdown li.sp-menu-item > a {font-size: 18px;color: #000000;text-decoration: none;}
.sp-megamenu-parent>li:hover>a {color: #ff0000;}
.sp-contact-info li, .offcanvas-menu .offcanvas-inner a{color:#000000;}
/*body*/
#sp-main-body{padding-top:118px!important;}
.main #sp-main-body{padding-top:0!important;}
.view-search #sp-main-body, .view-article #sp-main-body{padding-top:118px!important;}
#sp-page-builder .sppb-section-title {margin-bottom: 16px;}
/*convert forms*/
.convertforms{margin:auto;}
/*footer*/
#sp-footer{background: transparent;position: absolute;bottom: 0;width: 100%;z-index: 999;text-align:center;color:#000000;}
#sp-footer a {color: #000000;}
/*login logout*/
.login, .logout{text-align:center;height:78vh;}
.logout form{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.logout .controls{padding:0;margin:0;}
.login form button{padding:20px 0;}
.logout form button{padding:20px;}
/* ============================
   Responsive + Capability Queries Starter
   Drop this into your global CSS
   ============================ */

/* Base utilities you can keep or rename */
:root {
  /* Example design tokens */
  --space: 1rem;
  --radius: 0.75rem;
}

.container {
  margin-inline: auto;
  padding-inline: var(--space);
  max-width: 72rem; /* ~1152px */
}

.safe-pad {
  /* Keeps content out of notches/home indicators when present */
  padding:
    env(safe-area-inset-top, 0)
    env(safe-area-inset-right, 0)
    env(safe-area-inset-bottom, 0)
    env(safe-area-inset-left, 0);
}

.panel {
  /* Dynamic viewport accounts for mobile browser UI */
  min-height: 100dvh;
}

/* Example image that swaps to @2x on high-DPI */
.img-2x {
  background-image: url('/img/example@1x.png');
  background-size: cover;
}

/* ============================
   Viewport Width (mobile-first)
   ============================ */
@media (min-width: 480px)  { /* small phones/phablets */
#sp-top-bar {display: none;}
#sp-header{top:0;}
}

@media (min-width: 640px)  { /* sm */
  /* ... */
}

@media (min-width: 768px)  { /* md tablets / small laptops */
  /* ... */
}

@media (min-width: 1024px) { /* lg laptops */
  /* ... */
}

@media (min-width: 1280px) { /* xl desktops */
  /* ... */
}

@media (min-width: 1536px) { /* 2xl wide/hi-res monitors */
  /* ... */
}

/* ============================
   Orientation & Short Viewports
   ============================ */
@media (orientation: portrait) {
#sp-top-bar {display: none;}
#sp-header{top:0;}
}

@media (orientation: landscape) {
  /* Sidebars, multi-pane layouts */
}

@media (max-height: 700px) {
  /* Compact headers/footers for short viewports or split-screen */
}

/* ============================
   High-DPI (“retina”) assets
   ============================ */
@media (min-resolution: 2dppx) {
  .img-2x { background-image: url('/img/example@2x.png'); }
}

/* Optional legacy WebKit fallback */
@media (-webkit-min-device-pixel-ratio: 2) {
  .img-2x { background-image: url('/img/example@2x.png'); }
}

/* ============================
   Color Gamut (wide color / P3)
   ============================ */
@media (color-gamut: p3) {
  /* Use P3 colors where supported */
  :root {
    /* Example: brighter brand color in P3 */
    --brand: color(display-p3 0.9 0.2 0.2);
  }
}

/* ============================
   User Preferences / Accessibility
   ============================ */
@media (prefers-color-scheme: dark) {
  /* Dark theme tokens */
  :root {
    color-scheme: dark;
    --bg: #0b0b0c;
    --fg: #e8e8ea;
  }
  body { background: var(--bg); color: var(--fg); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

@media (prefers-contrast: more) {
  /* Stronger outlines / focus styles */
  :root { --focus: 2px solid CanvasText; }
  :focus-visible { outline: var(--focus); outline-offset: 3px; }
}

/* ============================
   Input Capability (touch vs mouse)
   ============================ */
/* Precise pointer + hover (mouse/trackpad) */
@media (hover: hover) and (pointer: fine) {
  .tooltip:hover .tooltip-panel { opacity: 1; visibility: visible; }
}

/* Coarse / no-hover (touch) */
@media (hover: none), (pointer: coarse) {
  .button { padding: 0.9rem 1.1rem; } /* bigger targets */
  .tooltip-panel { display: none !important; } /* avoid hover-only UI */
}

/* ============================
   Aspect Ratio Specific Layouts
   ============================ */
@media (min-aspect-ratio: 21/9) {
  /* Add columns / adjust letterboxing for ultra-wide */
}

@media (min-aspect-ratio: 16/9) {
  /* Video-first layouts, wider hero */
}

/* ============================
   Print & Installed App Contexts
   ============================ */
@media print {
  /* Printer-friendly: white bg, dark text, no shadows/animations */
  * { box-shadow: none !important; text-shadow: none !important; }
  body { background: #fff; color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.9em; }
}

@media (display-mode: standalone) {
  /* PWA tweaks when “installed” */
  .app-header { padding-top: env(safe-area-inset-top, 0); }
}