/* =============================================================================
   home/style.css — Home page specific styles
   -----------------------------------------------------------------------------
   Stage-3 cleanup pass: sorted into :root vars → resets → layout → components →
   media queries (asc). No selectors targeting `device-shell` exist in this file
   (Stage 1 + Stage 2 already removed them). The single @media (max-width:
   767.98px) rule below is the only mobile override declared on this page — it
   is NOT a duplicate of any rule in responsive.css (which has no photo-gallery
   rules), so it stays. No negative top/left/right margins exist in this file,
   so the (min-width: 768px) guard requirement does not apply. All remaining
   `!important` declarations beat main.css / runtime cascade for the documented
   reason in each section comment — none were authored to beat the now-removed
   livesite.css, so all are preserved.
   ============================================================================= */


/* -----------------------------------------------------------------------------
   1. :ROOT TOKENS
   ----------------------------------------------------------------------------- */
:root {
  --color_1: rgba(24, 221, 242, 1);
  --color_2: rgba(255, 255, 255, 1);
  --color_3: rgba(24, 221, 242, 1);
  --color_7: rgba(36, 36, 36, 1);
  --color_8: rgba(255, 255, 255, 1);
}


/* -----------------------------------------------------------------------------
   2. RESETS — intrinsic image sizing + font-family fallback metrics
   ----------------------------------------------------------------------------- */
img[width][height] {
  height: auto;
}

@font-face {
  font-family: "Raleway Fallback";
  src: local('Arial');
  ascent-override: 89.616%;
  descent-override: 22.3087%;
  size-adjust: 104.892%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Roboto Fallback";
  src: local('Arial');
  ascent-override: 92.6709%;
  descent-override: 24.3871%;
  size-adjust: 100.1106%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Poppins Fallback";
  src: local('Arial');
  ascent-override: 92.326%;
  descent-override: 30.7753%;
  line-gap-override: 8.793%;
  size-adjust: 113.7274%;
}

@font-face {
  font-family: "Inter Fallback";
  src: local('Arial');
  ascent-override: 90.199%;
  descent-override: 22.4836%;
  size-adjust: 107.4014%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Fjalla One Fallback";
  src: local('Arial');
  ascent-override: 114.9994%;
  descent-override: 28.2767%;
  size-adjust: 87.7212%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Georgia Fallback";
  src: local('Arial');
  ascent-override: 92.2092%;
  descent-override: 22.0458%;
  size-adjust: 99.4469%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Oswald Fallback";
  src: local('Arial');
  ascent-override: 145.0682%;
  descent-override: 35.1423%;
  size-adjust: 82.2372%;
  line-gap-override: 0%;
}


/* -----------------------------------------------------------------------------
   3. LAYOUT — page chrome (video bg widget, sticky header behaviour)
   ----------------------------------------------------------------------------- */
.videobgwrapper {
  overflow: hidden;
  position: absolute;
  z-index: 0;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  border-radius: inherit;
}

.videobgframe {
  position: absolute;
  width: 101%;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  object-fit: fill;
}

#dm video.videobgframe {
  margin: 0;
}

/* Sticky-header normalisation — preserves builder behaviour after Stage-1
   shell removal. `!important` here beats main.css's tablet-only 238.665px
   site_content margin when sticky mode is engaged. */
#dmRoot div.stickyHeaderFix div.site_content {
  margin-top: 0 !important;
}

#dmRoot div.stickyHeaderFix div.hamburger-header-container {
  position: relative;
}


/* -----------------------------------------------------------------------------
   4. COMPONENTS — font-size tokens, gallery, page-only visibility, animation
   ----------------------------------------------------------------------------- */

/* Shared (desktop + tablet) font-size utilities */
.font-size-28,
.size-28,
.size-28 > font {
  font-size: 28px !important;
}

.font-size-20,
.size-20,
.size-20 > font {
  font-size: 20px !important;
}

.font-size-16,
.size-16,
.size-16 > font {
  font-size: 16px !important;
}

/* Mobile-only font-size utilities — gated on .dmMobileBody (added at runtime
   by /assets/js/main.js based on viewport width). */
.dmMobileBody .m-font-size-22,
.dmMobileBody .m-size-22,
.dmMobileBody .m-size-22 > font {
  font-size: 22px !important;
}

.dmMobileBody .m-font-size-16,
.dmMobileBody .m-size-16,
.dmMobileBody .m-size-16 > font {
  font-size: 16px !important;
}

.dmMobileBody .m-font-size-13,
.dmMobileBody .m-size-13,
.dmMobileBody .m-size-13 > font {
  font-size: 13px !important;
}

/* Photo gallery widget — desktop default; tablet (768–1024) shares this
   value via responsiveTablet semantics in main.css. Mobile override lives
   in the media-queries section below. */
.dmRoot .dmPhotoGallery.newPhotoGallery:not(.photo-gallery-done) {
  min-height: 45vh;
}

/* Show-on-page-only widget visibility (Duda built-in primitive) */
#dm [data-show-on-page-only] {
  display: none !important;
}

body[data-page-alias="home"] #dm [data-show-on-page-only="home"] {
  display: block !important;
}

/* Animation initial state — hides nodes flagged for entrance animation
   until the runtime triggers them. `!important` on the paragraph variant
   beats higher-specificity selectors elsewhere in the cascade. */
.dmDesktopBody:not(.editGrid) [data-anim-desktop]:not([data-anim-desktop='none']),
.dmDesktopBody:not(.editGrid) [data-anim-extended] {
  visibility: hidden;
}

.dmDesktopBody:not(.editGrid) .dmNewParagraph[data-anim-desktop]:not([data-anim-desktop='none']),
.dmDesktopBody:not(.editGrid) .dmNewParagraph[data-anim-extended] {
  visibility: hidden !important;
}

#dmRoot:not(.editGrid) .flex-element [data-anim-extended] {
  visibility: hidden;
}


/* -----------------------------------------------------------------------------
   5. MEDIA QUERIES (ascending)
   ----------------------------------------------------------------------------- */

/* < 768px (mobile) — taller photo gallery viewport on phones.
   responsive.css does not declare any photo-gallery rules, so this is the
   sole source for the mobile gallery min-height. */
@media (max-width: 767.98px) {
  .dmRoot .dmPhotoGallery.newPhotoGallery:not(.photo-gallery-done) {
    min-height: 80vh;
  }
}