/* ==========================================================================
   Archive refinements for the peterandrewdanzig.com backup.
   Loaded last so these rules win over the original Weebly theme.
   Goals: make the saved copy work without the original JavaScript, and give
   it a light, tasteful cleanup (readable measure, sensibly sized images).
   ========================================================================== */

/* --- 1. Reveal content the theme hid until its scroll-JS ran --------------- */
.wsite-section-effect-reveal .wsite-section-content > * { visibility: visible !important; }

/* --- 2. Replace the fixed split-screen layout with a simple column flow ---- */
html, body, #wrapper { height: auto !important; }
#panel-one, #panel-two {
  position: relative !important;
  width: 100% !important;
  margin-left: 0 !important;
  height: auto !important;
  float: none !important;
  display: block !important;
}
#panel-one { min-height: 300px; overflow: visible !important; }

/* --- 3. Navigation: always visible, cleaner spacing & states -------------- */
.w-navlist {
  display: block !important;
  opacity: 1 !important;
  position: static !important;
  background: rgba(22, 22, 24, 0.92) !important;
}
.w-navlist .menu-wrapper { text-align: center !important; padding: 0 !important; }
.w-navlist li a,
#nav .wsite-menu-default li a {
  display: inline-block;
  padding: 18px 18px !important;
  letter-spacing: 0.04em;
  transition: color 150ms ease, background 150ms ease;
}
.w-navlist li a:hover { background: rgba(255, 255, 255, 0.10) !important; }
.w-navlist #active a { font-weight: 700; }

/* --- 4. Header title / logo readable over the hero image ------------------ */
#logo { position: static !important; padding: 20px 40px !important; }
.shade { background: rgba(0, 0, 0, 0.30); }

/* --- 5. Drop the JS-only fullscreen navpane + hamburger (no JS in archive) - */
#nav.w-navpane, .w-navpane-trigger, .hamburger { display: none !important; }

/* --- 6. Comfortable reading measure --------------------------------------- */
.container { max-width: 820px !important; margin-left: auto !important; margin-right: auto !important; }
#footer .wsite-footer { max-width: 820px; margin: 0 auto; }

/* --- 7. Keep content images at a sensible, consistent size ---------------- */
#wsite-content .wsite-image img,
#footer .wsite-image img {
  width: auto !important;
  height: auto !important;
  max-width: min(100%, 580px) !important;
  border-radius: 8px;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.12);
}
#wsite-content .wsite-image,
#footer .wsite-image { text-align: center !important; }

/* --- 8. Typography: restore the site's original type pairing -------------- */
/* Titles: Montserrat.  Body copy: PT Sans.  Both with real fallbacks so the
   page still reads well if the web fonts are unavailable. */
.wsite-content-title, .wsite-headline, h1, h2, h3,
#banner .paragraph, #banner p {
  font-family: "Montserrat", -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
}
body, #wsite-content .paragraph, #wsite-content p,
#wsite-content li, .wsite-footer .paragraph, .wsite-footer p, td {
  font-family: "PT Sans", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* --- 9. A little more breathing room in body sections --------------------- */
.wsite-section-elements { padding: 8px 0; }

/* --- 10. Responsive guards: no horizontal overflow, nav wraps on mobile ---- */
* { box-sizing: border-box; }
html, body, #wrapper, #panel-one, #panel-two, #main, #banner, #footer {
  max-width: 100%; overflow-x: hidden;
}
#main, #wsite-content, .wsite-section, .wsite-section-wrap, .wsite-section-content,
.wsite-section-elements, .container, .w-navlist, .menu-wrapper, .wsite-menu-default {
  max-width: 100% !important;
}
.wsite-multicol-table, .wsite-multicol-table-wrap { width: 100% !important; max-width: 100% !important; }
.paragraph, p, li, h1, h2, h3, .wsite-content-title { overflow-wrap: break-word; }
.wsite-menu-default { display: flex; flex-wrap: wrap; justify-content: center; }
.wsite-menu-default li { display: inline-block; }

@media (max-width: 640px) {
  .w-navlist li a { padding: 12px 12px !important; font-size: 13px !important; letter-spacing: 0.02em; }
  #logo { padding: 12px 16px !important; }
  .wsite-content-title { word-break: normal; overflow-wrap: break-word; }
}

/* --- 11. Make the nav clickable --------------------------------------------
   The theme's .shade overlay is absolutely positioned across the whole hero
   at z-index:1, so it sat on top of the menu and swallowed every click.
   Let clicks pass through the overlays and lift the nav above them. */
.shade, #wrapper .overlay { pointer-events: none !important; }
.w-navlist { position: relative !important; z-index: 5 !important; }
.w-navlist li a { position: relative; z-index: 5; }

/* --- 12. Frame each hero photo on Peter's face ---------------------------
   As a short full-width banner the centered crop cut off faces. Each photo
   places him at a different height, so anchor the crop per page. */
#panel-one { min-height: 400px; }
.wsite-background.wsite-custom-background {
  background-size: cover !important;
  background-position: center 18% !important;   /* home (landscape, face high) */
}
.wsite-page-areas-of-expertise .wsite-background.wsite-custom-background { background-position: center 22% !important; }
.wsite-page-speaking-press     .wsite-background.wsite-custom-background { background-position: center 24% !important; }
.wsite-page-contact            .wsite-background.wsite-custom-background { background-position: center 45% !important; }
@media (max-width: 640px) {
  #panel-one { min-height: 300px; }
}