/* ==========================================================================
   gabriellacarter.com — restoration layer
   The original site was a fixed 980px Wix canvas (isResponsive:false) whose
   layout, custom elements and reveal animations were finished off by Wix's
   JavaScript runtime. That runtime is gone, so this file:
     1. gives the unregistered custom elements their intended box model
     2. reveals content the runtime used to un-hide
     3. makes the fixed 980px canvas fit any screen
   ========================================================================== */

/* --- 1. custom elements (no longer registered by JS) ---------------------- */
wow-image,
wix-bg-media,
wix-dropdown-menu {
  display: block;
}

wow-image {
  position: relative;
  overflow: hidden;
}

wow-image > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- 2. reveal what the runtime used to un-hide --------------------------- */
.hidden-during-prewarmup {
  visibility: visible !important;
}

/* Wix fades sections in on scroll via JS-added classes; with no JS the
   starting state would stay applied, so force the finished state. */
[data-motion-enter="true"],
.always-visible,
[class*="animation-"] {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* --- 2b. drop-down menus ------------------------------------------------- */
/* Wix ships sub-menus as <ul aria-hidden="true" style="display:none"> and its
   runtime revealed them on hover. With the runtime gone they were unreachable,
   so hover/focus is reimplemented in CSS. */
wix-dropdown-menu li > ul {
  display: none !important;
}

@media (min-width: 768px) {
  wix-dropdown-menu li {
    position: relative !important;
  }

  wix-dropdown-menu li:hover > ul,
  wix-dropdown-menu li:focus-within > ul {
    display: block !important;
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    transform: translateX(-50%);
    z-index: 9999;
    min-width: 150px;
    margin: 0;
    padding: 6px 0;
    list-style: none;
    text-align: center;
    background: var(--dropdown-bg, #fff);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
  }

  wix-dropdown-menu li > ul a {
    display: block;
    padding: 9px 16px;
    white-space: nowrap;
    text-decoration: none;
    color: inherit;
    font: inherit;
  }

  wix-dropdown-menu li > ul a:hover {
    background: rgba(0, 0, 0, 0.06);
  }
}


/* --- 3. base page ------------------------------------------------------- */
html {
  -webkit-text-size-adjust: 100%;
}

body {
  overflow-x: hidden;
}

/* A few empty Wix spacer blocks are positioned past the 980px canvas edge and
   would otherwise raise a horizontal scrollbar. `clip` (not `hidden`) trims
   them without turning #site-root into a scroll container. */
#site-root {
  overflow-x: clip;
}

img {
  max-width: 100%;
}

/* --- 4. responsive ------------------------------------------------------- */
/* The design is a fixed 980px canvas, so there are two regimes:
     tablet (768-979px) - shrink the whole canvas to fit; text stays >=14px.
     phone  (<768px)    - shrinking would put body text near 7px, so instead
                          unstack the Wix "mesh" grid into one column and let
                          text run at its natural size.
   --site-zoom is set by site.js (CSS cannot divide a viewport width by a
   number to produce the unitless ratio `zoom` requires). */
@media (min-width: 768px) and (max-width: 979.98px) {
  #SITE_CONTAINER {
    zoom: var(--site-zoom, 1);
  }
}

@media (max-width: 767.98px) {
  /* Wix centres every page/background wrapper with
       margin-left: calc((100% - var(--site-width))/2); width: var(--site-width)
     so retargeting this one variable un-pins all of them at once. */
  :root,
  body,
  #SITE_CONTAINER,
  #site-root,
  #masterPage {
    --site-width: 100% !important;
  }

  #SITE_CONTAINER,
  #site-root,
  #masterPage,
  #PAGES_CONTAINER,
  #SITE_HEADER,
  #SITE_FOOTER,
  #SITE_PAGES,
  #main_MF {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* Headings must never split mid-word — site.js shrinks any that do not fit.
     Body copy may hyphen-break rather than overflow its (clipped) container. */
  h1, h2, h3, h4, h5, h6,
  h1 span, h2 span, h3 span {
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  p, li, span {
    word-break: normal !important;
    overflow-wrap: break-word;
  }

  svg {
    max-width: 100%;
  }

  /* every Wix section keeps its background but grows to fit its content */
  [id^="comp-"],
  section[id],
  [data-mesh-id] {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Blanket cap for the many hard-coded pixel sizes Wix bakes in: the blog
     app's article column is a flat 740px and the bookings/services widgets
     carry min-width:980px, which max-width alone cannot override. max-width
     only ever shrinks and min-width:0 only ever releases, so nothing that
     already fits is affected. SVG internals are excluded because their
     geometry is viewBox-relative. */
  #SITE_CONTAINER *:not(svg):not(svg *) {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Pro Gallery is the exception: it measures itself and reserves a matching
     pixel height, so squeezing its width makes the cards re-flow taller than
     the reserved box and spill under the footer. Leave its internals at their
     desktop metrics — site.js scales the whole widget down to fit instead. */
  #SITE_CONTAINER [class*="pro-gallery"],
  #SITE_CONTAINER [class*="pro-gallery"] * {
    max-width: none !important;
  }

  /* the mesh grid becomes a plain single-column flow */
  [data-mesh-id$="-gridContainer"] {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 18px !important;
    box-sizing: border-box !important;
  }

  [data-mesh-id$="-gridContainer"] > * {
    position: relative !important;
    grid-area: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
  }

  /* Multi-column sections ("column strips") are flex rows on desktop; stack
     them so each column gets the full width instead of a squeezed sliver. */
  .wixui-column-strip,
  .wixui-column-strip > div {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .wixui-column-strip__column {
    width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
  }

  /* images keep their aspect ratio instead of a hard pixel box */
  wow-image,
  wow-image > img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
  }

  wow-image > img {
    object-fit: contain !important;
  }

  /* the horizontal nav wraps instead of overflowing */
  wix-dropdown-menu,
  wix-dropdown-menu > nav,
  wix-dropdown-menu ul {
    position: static !important;
    width: 100% !important;
    height: auto !important;
  }

  wix-dropdown-menu ul {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 2px 14px;
  }

  wix-dropdown-menu li {
    position: static !important;
    width: auto !important;
    height: auto !important;
  }

  /* Nothing inside the menu stays pinned; the whole thing becomes normal flow
     so the wrapped rows cannot collide. */
  wix-dropdown-menu * {
    position: static !important;
  }

  /* No hover on touch, so sub-menu entries (Shop > eBook) sit inline under
     their parent instead of being unreachable. */
  wix-dropdown-menu li > ul {
    display: block !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }
}