/* fourfats.com: replaces the Weebly theme scripts. Edited in /admin/s3. */

/* Page edge and header bar height, shared by the header and the content.
   --ff-pad matches #wsite-content .container's side padding. */
:root { --ff-pad: 60px; --ff-bar: 64px; }
@media screen and (max-width: 767px) { :root { --ff-pad: 20px; --ff-bar: 60px; } }
@media screen and (min-width: 1025px) { :root { --ff-bar: 72px; } }

/* Hidden copies of the nav from the Weebly theme. */
.nav.dummy-nav { display: none !important; }
.nav.collapsed-nav { display: none; }
.wsite-menu-wrap { display: none; }

/* ---- Header: one bar holding the logo and the menu ---------------------- */

.paris-header { height: var(--ff-bar) !important; border-bottom: 1px solid #ececec; }
.main-wrap { padding-top: var(--ff-bar) !important; }

/* The logo file is a 1024px square with the wordmark in the middle; crop
   to the wordmark so it reads at a sensible size. */
.fourfatslogo {
  top: 0 !important; height: var(--ff-bar);
  display: flex; align-items: center;
}
.fourfatslogo img { width: 150px !important; height: 34px !important; object-fit: cover; }

/* Desktop: logo on the content's left edge, menu on its right edge. */
@media screen and (min-width: 1025px) {
  .fourfatslogo { left: max(var(--ff-pad), calc(50% - 510px)) !important; transform: none !important; }
  .fourfatslogo img { width: 180px !important; height: 40px !important; }
  body.collapsed-menu-off .desktop-nav ul.site-menu {
    max-width: 1140px; height: var(--ff-bar) !important; margin: 0 auto; padding: 0 var(--ff-pad);
    box-sizing: border-box; align-items: center; justify-content: flex-end;
  }
  body.collapsed-menu-off .desktop-nav ul.site-menu > li:last-child { margin-right: 0 !important; }
}

/* Desktop: hover / keyboard dropdowns. */
.desktop-nav ul.site-menu li { position: relative; }
.desktop-nav .wsite-menu-wrap {
  position: absolute; top: 100%; right: -12px; z-index: 30;
  min-width: 260px; padding: 8px 0;
  background: #f4f4f4; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}
.desktop-nav .wsite-menu-wrap .wsite-menu-wrap { top: -8px; right: 100%; }
.desktop-nav li:hover > .wsite-menu-wrap,
.desktop-nav li:focus-within > .wsite-menu-wrap { display: block; }
.desktop-nav .wsite-menu { margin: 0; padding: 0; list-style: none; }
.desktop-nav .wsite-menu-subitem-wrap { display: block !important; margin: 0 !important; }
body.collapsed-menu-off .desktop-nav ul.site-menu > li li a.wsite-menu-subitem {
  display: block; padding: 8px 16px; border: 0; font-size: 14px; text-transform: none; white-space: nowrap;
}
body.collapsed-menu-off .desktop-nav ul.site-menu > li li a.wsite-menu-subitem:hover { background: #e6e6e6; border: 0; padding: 8px 16px; }
/* Sub-menus open to the left (the menu sits on the right), so the arrow points left. */
.desktop-nav .wsite-menu-subitem-wrap > .wsite-menu-subitem .wsite-menu-arrow { display: inline-block !important; float: left; margin-right: 12px; opacity: 0.5; transform: rotate(180deg); }

/* Phone / tablet: menu icon on the content's left edge, logo centred, same bar. */
@media screen and (max-width: 1024px) {
  body.collapsed-menu-off .paris-header > .hamburger {
    display: flex !important; align-items: center;
    position: fixed; top: 0; left: var(--ff-pad); height: var(--ff-bar);
    margin: 0; padding: 0 12px 0 0; cursor: pointer;
  }
  .paris-header > .hamburger .hamburger-icon { top: 0; }
}

/* The full-screen menu opens below the bar, lined up with the content. */
body.nav-open .collapsed-nav { top: var(--ff-bar) !important; height: calc(100vh - var(--ff-bar)) !important; }
.collapsed-nav { padding-left: 0 !important; padding-right: 0 !important; }
.collapsed-nav > ul.site-menu { padding-left: var(--ff-pad) !important; padding-right: var(--ff-pad) !important; max-width: none !important; }
body.nav-open .menu-open-text { display: none; }
body.nav-open .menu-close-text { display: inline; }
.collapsed-nav .wsite-menu-wrap { display: block; }
.collapsed-nav .wsite-menu { margin: 6px 0 0; padding: 0 0 0 18px; list-style: none; }
.collapsed-nav .wsite-menu-subitem-wrap { padding: 4px 0; font-size: 18px; }
.collapsed-nav .wsite-menu-subitem { font-family: 'Montserrat', sans-serif; color: #000; }
.collapsed-nav li#active > a, .collapsed-nav li.wsite-nav-current > a { text-decoration: underline; }

/* ---- Content images ------------------------------------------------------ */

/* Never stretch an image: if its box has a different shape than the file,
   fit the picture inside the box instead. */
#wsite-content img { object-fit: contain; }

/* Store badges: one height everywhere, centred in their column. */
#wsite-content img:is([src*="appstoredownloadbadge"], [src*="app-store-badge"],
  [src*="googleplaybadge"], [src*="googleplaydownloadbadge"], [src*="google-play-badge"],
  [src*="steambadge"], [src*="steam-wishlist"], [src*="switchbadge"], [src*="eshopicon"]) {
  width: auto !important; height: 52px !important; max-width: 100% !important;
}
#wsite-content .wsite-image:has(img:is([src*="appstoredownloadbadge"], [src*="app-store-badge"],
  [src*="googleplaybadge"], [src*="googleplaydownloadbadge"], [src*="google-play-badge"],
  [src*="steambadge"], [src*="steam-wishlist"], [src*="switchbadge"], [src*="eshopicon"])) {
  text-align: center !important; padding-top: 6px !important; padding-bottom: 6px !important;
}