/* Obsidian live layer — minimal. Restores behaviours the removed Strikingly runtime
   provided. Adds NO new layout; only un-hides and un-freezes what the runtime
   would have. Everything else is the original bundle CSS untouched. */

/* 1) reveal — Strikingly hides sections/items until its JS runs */
.s-section,
.s-section .transition,
.transition { opacity: 1 !important; }
[style*="opacity: 0"] { opacity: 1 !important; }

/* 2) product-row sections (services / portfolio).
   These are NOT carousels — each product is a 2-column row (image + title/description),
   repeated 3x, with a frozen single-image slick inside each. The saved slick is frozen
   at width:0 and its disabled "Previous/Next" buttons render as broken glyphs.
   Fix: restore the 2-column row layout, drop the frozen slick entirely (killing the
   broken arrows), and show the static duplicate image that sits beside it. */
.ml-slider .s-ecommerce-row-view-wrapper { max-width: 1080px; margin: 0 auto; }
/* CSS Grid (not flex): minmax(0,..) tracks shrink below the image's intrinsic width,
   so the full-size image can't starve the text column (the flexbox min-content trap).
   The bundle floats BOTH .columns children right (`.s-ecommerce-row-view-product .columns
   {float:right}`) — that is the narrow right-strip bug; we neutralise float/width here. */
.ml-slider .s-ecommerce-row-view-product {
  display: grid !important;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) !important;
  gap: 44px !important; align-items: center !important;
  width: 100% !important; max-width: 1080px !important; margin: 0 auto 56px !important; float: none !important;
}
/* neutralise the Skeleton floats/widths on BOTH direct .columns children */
.ml-slider .s-ecommerce-row-view-product > .columns,
.ml-slider .s-ecommerce-row-view-image-package,
.ml-slider .s-ecommerce-row-view-product-detail-panel {
  width: auto !important; max-width: 100% !important; min-width: 0 !important;
  float: none !important; margin: 0 !important; padding: 0 !important;
  display: block !important; position: static !important; text-align: left !important;
}
/* constrain the image so it fills its own track and never overflows the grid */
.ml-slider .s-ecommerce-row-view-product-image-wrapper,
.ml-slider .s-ecommerce-row-view-product-image-wrapper .image-wrapper,
.ml-slider .s-ecommerce-row-view-product-image-wrapper .s-img-wrapper {
  width: 100% !important; max-width: 100% !important; min-width: 0 !important; float: none !important;
}
.ml-slider .s-ecommerce-row-view-product-image-wrapper img {
  width: 100% !important; height: auto !important; display: block !important; border-radius: 4px !important;
}
@media (max-width: 800px) {
  .ml-slider .s-ecommerce-row-view-product { grid-template-columns: 1fr !important; gap: 20px !important; }
}
/* drop the frozen slick (removes the "Previous/Next" arrow glyphs); show static image */
.ml-slider .slider-wrapper { display: none !important; }
.ml-slider .image-wrapper,
.ml-slider .s-img-wrapper { display: block !important; width: 100% !important; }
.ml-slider .image-wrapper img,
.ml-slider .s-img-wrapper img {
  width: 100% !important; height: auto !important; display: block !important;
  border-radius: 4px !important;
}
/* safety: if any slick survives elsewhere, neutralise its arrows/dots and freeze-width */
.ml-slider .slick-arrow, .ml-slider .slick-dots { display: none !important; }
.slick-slide[style*="width: 0"] { width: auto !important; }

/* 2b) blog section (services) — grid of post cards. The runtime sized the thumbnail
   avatars; without it the .s-blog-avatar divs have no height so their background
   images collapse. Restore a card grid and give avatars a real aspect box. */
.s-blog-posts-columns {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 32px !important; float: none !important;
}
/* .s-blog-posts-columns also carries .clearfix, whose ::before/::after have
   content+display:block — in a grid they become phantom items (the empty first
   cell that shifts the posts over). Remove them. */
.s-blog-posts-columns::before,
.s-blog-posts-columns::after { display: none !important; content: none !important; }
.s-blog-posts-columns .s-blog-entry {
  width: auto !important; float: none !important; margin: 0 !important; min-width: 0 !important;
}
.s-blog-posts-columns .s-blog-entry-inner { display: block !important; }
.s-blog-posts-columns .s-blog-entry-left,
.s-blog-posts-columns .s-blog-avatar-container { width: 100% !important; float: none !important; margin: 0 !important; }
.s-blog-posts-columns .s-blog-avatar {
  display: block !important; width: 100% !important;
  aspect-ratio: 16 / 10 !important; min-height: 190px;
  background-size: cover !important; background-position: center !important;
  background-repeat: no-repeat !important; border-radius: 6px !important;
}
.s-blog-posts-columns .s-blog-entry-right { width: auto !important; float: none !important; padding: 14px 2px 0 !important; }
@media (max-width: 800px) { .s-blog-posts-columns { grid-template-columns: 1fr !important; } }

/* 2d) portfolio tiled gallery (.s-new-gallery) — the runtime normally (a) toggled
   desktop/mobile blocks, (b) sized each tiled item to an aspect box and painted the
   photo as a background-image on the absolutely-positioned .image-wrapper, with the
   real <img> hidden (.image-wrapper img{display:none}). Without the runtime BOTH the
   desktop and mobile blocks render (dupes), every .image-wrapper is an empty 0-height
   absolute box, and the two columns stack full-width. Result: an empty gallery.
   Fix: drop the mobile dupe, lay the two columns 2-up, and un-hide the <img> so the
   photo flows and gives the item real height. */
.s-new-gallery .s-new-gallery-tiled-mobile { display: none !important; }
.s-new-gallery .s-new-gallery-tiled-desktop { display: block !important; }
.s-new-gallery-content .s-new-gallery-tiled-columns.two {
  width: 50% !important; box-sizing: border-box !important; padding: 0 5px !important;
}
.s-new-gallery-content .s-new-gallery-item .image-wrapper {
  position: static !important; height: auto !important; width: 100% !important;
}
.s-new-gallery-content .s-new-gallery-item .image-wrapper img,
.s-new-gallery-content .s-new-gallery-item .s-img-wrapper img {
  display: block !important; width: 100% !important; height: auto !important;
  border-radius: 4px !important;
}
.s-new-gallery-content .s-new-gallery-item .s-img-wrapper { display: block !important; width: 100% !important; }
@media (max-width: 800px) {
  .s-new-gallery-content .s-new-gallery-tiled-columns.two { width: 100% !important; float: none !important; }
}

/* 2e) contact.html map column — the #s-map placeholder is only ever filled by the
   Google-Maps runtime; here it carries inline visibility:hidden yet keeps a reserved
   ~246px height and flex-grow:1, so it renders as a blank third of the 3-column row
   between the form and the contact-info. Collapse the empty column so form + info
   fill the width. (Only contact.html has .s-google-maps-column.) */
.s-contact-section-columns .s-google-maps-column { display: none !important; }

/* 2c) navbar styling — restore original design. Make navbar background white and text black,
   matching the original Strikingly design (solid white bar at top with dark text). */
.s-navbar-desktop-fixed {
  background-color: #ffffff !important;
  color: #000000 !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important;
}
.s-navbar-desktop-fixed * {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
}
.s-navbar-desktop-fixed a,
.s-navbar-desktop-fixed span,
.s-navbar-desktop-fixed li,
.s-navbar-desktop-fixed button { color: #000000 !important; }
/* explicitly target all nested nav elements */
.s-navbar-desktop-fixed .s-nav-li,
.s-navbar-desktop-fixed .s-nav-li *,
.s-navbar-desktop-fixed .s-nav-items-and-links li,
.s-navbar-desktop-fixed .s-nav-items-and-links li a,
.s-navbar-desktop-fixed .s-nav-items-and-links li a span,
.s-navbar-desktop-fixed .s-nav-text,
.s-navbar-desktop-fixed .s-logo-title,
.s-navbar-desktop-fixed .s-logo-title * { color: #000000 !important; }

/* 3) native header: if it was transparent over the hero, keep white text there
   but flip to a solid readable bar once scrolled (restores runtime behaviour). */
.s-navbar-desktop.ml-scrolled,
.s-navbar.ml-scrolled {
  background: #ffffff !important;
  box-shadow: 0 1px 8px rgba(20, 30, 50, .08) !important;
}
.s-navbar-desktop.ml-scrolled a,
.s-navbar-desktop.ml-scrolled .s-title,
.s-navbar.ml-scrolled a { color: #1a2233 !important; }

/* 4) mobile menu toggle (hamburger) — shown open when we add .ml-open */
.s-uncollapsed-nav.ml-open { display: block !important; }

/* ============================================================================
   Article pages (served by server.js at /<slug>) — on-brand Aura styling.
   Self-contained; does not affect the forked pages. ml- prefixed only.
   ========================================================================== */
.ml-atopbar { position: sticky; top: 0; z-index: 9999; background: #fff; border-bottom: 1px solid #e7e9f0; box-shadow: 0 1px 6px rgba(20,30,60,.05); }
.ml-atopbar-inner { max-width: 1180px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; height: 66px; padding: 0 26px; }
.ml-atopbar .ml-brand { font-family: 'Martel Sans','Open Sans',sans-serif; font-size: 24px; font-weight: 700; color: #26335c; text-decoration: none; letter-spacing: .2px; }
.ml-atopbar nav { display: flex; gap: 26px; }
.ml-atopbar nav a { font-family: 'Open Sans',sans-serif; font-size: 15px; color: #3a4361; text-decoration: none; transition: color .2s; }
.ml-atopbar nav a:hover { color: #613c93; }

.ml-ahero { position: relative; background-size: cover; background-position: center; padding: 118px 26px 96px; text-align: center; }
.ml-ahero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,24,48,.55), rgba(20,24,48,.68)); }
.ml-ahero-inner { position: relative; max-width: 900px; margin: 0 auto; }
.ml-ahero .ml-eyebrow { display: inline-block; font-family: 'Open Sans',sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #d9c9f5; margin-bottom: 16px; }
.ml-ahero h1 { font-family: 'Martel Sans','Open Sans',sans-serif; font-size: 42px; line-height: 1.2; font-weight: 700; color: #fff; margin: 0 0 18px; }
.ml-ahero .ml-ameta { font-family: 'Open Sans',sans-serif; font-size: 15px; color: rgba(255,255,255,.9); margin: 0; }

.ml-article { max-width: 760px; margin: 0 auto; padding: 56px 26px 40px; font-family: 'Open Sans',sans-serif; }
.ml-article p { font-size: 18px; line-height: 1.75; color: #2f3550; margin: 0 0 24px; }
.ml-article h2 { font-family: 'Martel Sans','Open Sans',sans-serif; font-size: 27px; color: #26335c; margin: 40px 0 16px; }
.ml-aback { display: inline-block; margin-top: 20px; font-size: 15px; font-weight: 600; color: #613c93; text-decoration: none; }
.ml-aback:hover { text-decoration: underline; }
.ml-afooter { text-align: center; padding: 34px 20px; color: #7a819b; font-family: 'Open Sans',sans-serif; font-size: 14px; border-top: 1px solid #eceef4; margin-top: 30px; }