/*
 Theme Name:   Avada Child
 Theme URI:    https://pamphlit.com
 Description:  Avada Child Theme for Pamphlit
 Author:       Pamphlit
 Author URI:   https://pamphlit.com
 Template:     Avada
 Version:      1.0.0
 Text Domain:  avada-child
*/

/* ============================================================
   PAMPHLIT CUSTOM CSS
   All site-wide overrides live here.
   Edit this file via VS Code SFTP or SSH terminal.
   Do NOT edit Avada parent theme files directly.
   ============================================================ */

.btn-pamphlit {
  /* Shape and Border */
  padding: 12px 36px;
  border: 2px solid #e5e5e5;
  cursor: pointer;

  /* The 3D Effect */
  /* This creates the thick bottom edge seen in your image */
  border-bottom: 6px solid #e5e5e5;
  
  /* Transition for smooth interaction */
  transition: all 0.1s ease;
  outline: none;
}


/* The "Pressed" state */
.btn-elevated:active {
  border-bottom-width: 2px;
  transform: translateY(4px);
}



/* ================================================
   Pamphlit — Mobile Drawer CTA Buttons
   VERSION 9 — Final
   ================================================ */

/* DESKTOP: hide both items */
@media screen and (min-width: 1025px) {
  li.pm-nav-signin,
  li.pm-nav-getstarted {
    display: none !important;
  }
}

/* MOBILE */
@media screen and (max-width: 1024px) {

  /* Remove Avada hover bg spans */
  li.pm-nav-signin .awb-menu__main-background-default,
  li.pm-nav-signin .awb-menu__main-background-active,
  li.pm-nav-getstarted .awb-menu__main-background-default,
  li.pm-nav-getstarted .awb-menu__main-background-active {
    display: none !important;
  }

  /* ---- SIGN IN LI ---- */
  li.pm-nav-signin {
    display: block !important;
    background: transparent !important;
    border-top: 1px solid rgba(249,247,242,0.12) !important;
    border-bottom: none !important;
    padding: 14px 16px 8px 16px !important;
    margin: 12px 0 8px 0 !important;
    min-height: 0 !important;
    height: auto !important;
    line-height: 1 !important;
  }

  /* ---- GET STARTED LI ---- */
  li.pm-nav-getstarted {
    display: block !important;
    background: transparent !important;
    border-top: none !important;
    border-bottom: none !important;
    padding: 0 16px 32px 16px !important;
    margin: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    line-height: 1 !important;
  }

  /* Sign In anchor — ghost button */
  li.pm-nav-signin > a.awb-menu__main-a {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 9px 16px !important;
    line-height: 1.4 !important;
    min-height: 0 !important;
    height: auto !important;
    text-align: center !important;
    background: transparent !important;
    border: 1px solid rgba(249,247,242,0.55) !important;
    border-radius: 4px !important;
    color: rgba(249,247,242,0.9) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
  }

  /* Sign In text span */
  li.pm-nav-signin > a.awb-menu__main-a .menu-text {
    display: block !important;
    text-align: center !important;
    color: rgba(249,247,242,0.9) !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Get Started anchor — saffron filled */
  li.pm-nav-getstarted > a.awb-menu__main-a {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 10px 16px !important;
    line-height: 1.4 !important;
    min-height: 0 !important;
    height: auto !important;
    text-align: center !important;
    background: #FFC857 !important;
    border: none !important;
    border-radius: 4px !important;
    color: #004B52 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
  }

  /* Get Started text span */
  li.pm-nav-getstarted > a.awb-menu__main-a .menu-text {
    display: block !important;
    text-align: center !important;
    color: #004B52 !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Get Started hover */
  li.pm-nav-getstarted > a.awb-menu__main-a:hover {
    background: #e8b84b !important;
    color: #004B52 !important;
  }

  /* Prevent container clipping */
  .fusion-menu-element-holder,
  .awb-menu-element-holder,
  .fusion-navbar-collapse,
  .awb-menu__main-ul,
  ul#menu-main-nav {
    overflow: visible !important;
    max-height: none !important;
  }

}

/* Replace FA hamburger with thin CSS-drawn icon */
@media screen and (max-width: 1024px) {

  /* Hide the FA icon */
  .awb-menu__mobile-trigger i,
  .awb-menu__mobile-trigger .fa-bars,
  .awb-menu__mobile-trigger .fa-xmark {
    display: none !important;
  }

  /* Draw a thin hamburger with CSS */
  .awb-menu__mobile-trigger::before {
    content: '';
    display: block;
    width: 20px;
    height: 14px;
    border-top: 1.5px solid #F9F7F2;
    border-bottom: 1.5px solid #F9F7F2;
    box-shadow: 0 6px 0 0 #F9F7F2, 0 -6px 0 0 #F9F7F2;
    box-shadow: inset 0 5px 0 0 rgba(0,0,0,0),
                0 0px 0 0 #F9F7F2;
    background: linear-gradient(
      to bottom,
      #F9F7F2 0%, #F9F7F2 1.5px,
      transparent 1.5px, transparent calc(50% - 0.75px),
      #F9F7F2 calc(50% - 0.75px), #F9F7F2 calc(50% + 0.75px),
      transparent calc(50% + 0.75px), transparent calc(100% - 1.5px),
      #F9F7F2 calc(100% - 1.5px), #F9F7F2 100%
    );
  }
}

/* Hero CTA buttons inline */
.hero-ctas .fusion-button-wrapper {
  display: inline-block !important;
  vertical-align: middle !important;
}

/* Hero buttons inline */
.hero-ctas,
.hero-ctas .fusion-button-wrapper {
  display: inline-flex !important;
  align-items: center !important;
  gap: 16px !important;
}

/* Stats bar */
.stats-container {
  border-top: 1px solid rgba(0,75,82,0.08) !important;
  border-bottom: 1px solid rgba(0,75,82,0.08) !important;
}

.stats-container .fusion-layout-column:not(:last-child) .fusion-column-wrapper {
  border-right: 1px solid rgba(0,75,82,0.08);
}

.why-body p {
  max-width: 560px;
}

.why-body p {
  max-width: 560px;
}

.why-pamphlit .fusion-layout-column {
  display: flex !important;
}
.why-pamphlit .fusion-column-wrapper {
  flex: 1 !important;
}

.why-exists blockquote {
  background: transparent !important;
  padding: 0 0 0 16px !important;
  margin: 0 0 24px 0 !important;
}

.pm-hiw-title {
  color: #F9F7F2 !important;
}

.pm-hiw {
  max-width: 100vw !important;
  overflow-x: hidden !important;
}

/* Footer nav — constrain active underline to text width */
.fusion-footer-widget-area .awb-menu__main-background-active_left,
.fusion-footer-widget-area .awb-menu__main-background-active_right {
  width: auto !important;
  left: 0 !important;
  right: 0 !important;
}

.fusion-footer-widget-area .awb-menu__main-li_regular:hover 
  .awb-menu__main-background-active_left {
  width: auto !important;
}

/* Remove unwanted focus/active borders on nav, cards, and footer links */
.fusion-main-menu .fusion-menu-element-wrapper,
.fusion-main-menu ul li,
.fusion-main-menu ul li a,
.fusion-layout-column,
.fusion-column-wrapper,
.fusion-builder-column,
.fusion-footer-widget-area .widget,
.fusion-footer-widget-area .textwidget,
.awb-menu__main-ul,
.awb-menu__main-li,
*:focus:not(:focus-visible) {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Preserve legitimate focus-visible for accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid #004B52 !important;
  outline-offset: 2px !important;
}

.fusion-layout-column .fusion-column-wrapper {
  border: none !important;
  outline: none !important;
}

.fusion-builder-row .fusion-layout-column {
  border: none !important;
}

/* Override AWB nav border CSS variables */
nav.awb-menu,
nav.awb-menu.awb-menu_row,
.fusion-column-has-shadow,
.awb-main-menu,
.avada-main-menu {
  --awb-border-bottom: 0px !important;
  --awb-active-border-bottom: 0px !important;
  --awb-border-top: 0px !important;
  --awb-border-left: 0px !important;
  --awb-border-right: 0px !important;
  border: none !important;
  outline: none !important;
}

/* Footer menu same treatment */
.fusion-footer-widget-area nav,
.fusion-footer-widget-area .awb-menu,
.fusion-footer nav {
  --awb-border-bottom: 0px !important;
  --awb-active-border-bottom: 0px !important;
  border: none !important;
}

/* footer outline — see stronger scoped rule at bottom of file */

/* ================================================
   Mobile Typography Improvements
   ================================================ */

/* 1. Let why-body paragraphs fill the full column on small screens */
@media screen and (max-width: 768px) {
  .why-body p {
    max-width: 100% !important;
  }
}

/* 2. Bump mobile nav CTA button font size to 15px (in rem for a11y) */
@media screen and (max-width: 1024px) {
  li.pm-nav-signin > a.awb-menu__main-a {
    font-size: 0.9375rem !important; /* 15px @ 16px base */
  }

  li.pm-nav-getstarted > a.awb-menu__main-a {
    font-size: 0.9375rem !important;
  }
}

/* 3. Comfortable line-height and letter-spacing for body copy on mobile */
@media screen and (max-width: 768px) {
  body,
  .fusion-text p,
  .why-body p,
  .why-exists blockquote {
    line-height: 1.65 !important;
    letter-spacing: 0.01em !important;
  }
}

/* ================================================
   Remove phantom bottom gap below footer (all breakpoints)
   ROOT CAUSE: Components pasted as full HTML docs (with </body></html>)
   inside Avada Code Blocks break the HTML5 parser — everything after
   the embedded </body> is parsed in "after body" mode, generating
   phantom layout height. CSS fix zeroes every layer + clips #boxed-wrapper.
   PERMANENT FIX: Strip <!DOCTYPE…</html> wrapper from all Code Block pastes.
   ================================================ */

/* Layer 1 — html + body (carries --bg_color via Avada CSS var)
   NOTE: The gap below the footer is fixed via Avada Theme Options →
   Overflow: Hidden. That clips the body/wrapper at the theme level.
   These rules are kept as a safety net for padding/margin edge cases. */
html,
body,
html:not(.avada-html-layout-boxed):not(.avada-html-layout-framed),
html:not(.avada-html-layout-boxed):not(.avada-html-layout-framed) body,
.avada-html-layout-boxed,
.avada-html-layout-boxed body {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  height: auto !important;
}

/* Layer 2 — Avada page/content wrappers */
#boxed-wrapper,
#wrapper,
#main,
#main .post-content,
#main .fusion-page-layout-ful,
.fusion-content-widget-area {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  min-height: 0 !important;
}

/* Layer 3 — elements outside #wrapper that can add document height */
.fusion-page-load-link,
.fusion-one-page-text-link {
  display: none !important;
}

.avada-footer-scripts {
  height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
}

.to-top-container {
  position: fixed !important;
}

/* Fix WordPress block-library border injection
   Source: /wp-includes/css/dist/block-library/common.min.css uses
   :where([style*="border-color"]) { border-style: solid } — specificity 0.
   Using real class selectors here (specificity ≥ 0,1,0) guarantees our
   override wins regardless of stylesheet load order. Do NOT switch back
   to :where() — that was the root cause of the regression. */
.fusion-footer-widget-area [style*="border-color"],
.fusion-footer [style*="border-color"],
.fusion-social-links [style*="border-color"],
.fusion-social-networks [style*="border-color"],
.wp-block-social-links [style*="border-color"],
.wp-block-social-link[style*="border-color"],
.wp-social-link[style*="border-color"] {
  border-style: none !important;
  border-width: 0 !important;
  border: none !important;
}

/* Dialect Explorer preview overlay —
   suppress all Avada layers when open.
   This site's header is Avada's Theme Builder header (a Fusion Builder
   "Header - Desktop" container with sticky="on"), NOT the classic
   .fusion-header-wrapper/.fusion-header system — confirmed via the
   compiled CSS (.fusion-tb-header .fusion-sticky-container rules exist)
   and fusion-container.js (sticky-kit adds runtime class
   .fusion-container-stuck and sets position:fixed inline, no z-index,
   on the .fusion-sticky-container child of .fusion-tb-header).
   #wpadminbar is deliberately NOT forced to position:relative below —
   it's supposed to stay position:fixed (that's how WP core renders it
   everywhere); forcing it into normal flow left an empty gap where the
   openPreview() JS offset still reserved space for it, showing the
   page's default white background through that gap (this was a real
   regression from an earlier version of this rule — reverted here).
   Only the header's own sticky container — which we have evidence
   actually goes fixed at runtime — gets the position:relative override. */
body.pm-preview-open #wrapper_all,
body.pm-preview-open .fusion-footer,
body.pm-preview-open .fusion-tb-header,
body.pm-preview-open #wpadminbar,
body.pm-preview-open .fusion-tb-footer,
body.pm-preview-open .fusion-page-title-bar{
  z-index:1 !important;
}
body.pm-preview-open .fusion-tb-header .fusion-sticky-container,
body.pm-preview-open .fusion-tb-header .fusion-container-stuck{
  z-index:1 !important;
  position:relative !important;
}

/* Suppress Avada default ul/li styles
   inside all Pamphlit scoped components.
   Scoped to .pm-pricing — the actual outer wrapper class
   in components/sections/pm-pricing-section.html
   (.pm-pricing-wrap does not exist in that file). */
.pm-pricing ul,
.pm-pricing ul li,
.pm-pricing .pm-plan-features,
.pm-pricing .pm-plan-feature {
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* ── Trademark mark (™) — used after "Dialect Explorer" sitewide.
   line-height:0 keeps the superscript from pushing the line box
   taller; max() keeps it legible inside tiny uppercase eyebrows
   while staying small next to the large serif H1. ── */
.pm-tm {
  font-size: max(0.38em, 9px);
  line-height: 0;
  vertical-align: super;
  letter-spacing: 0;
  margin-left: 0.06em;
  font-weight: inherit;
  text-transform: none;
}

/* ════════════════════════════════════════════════════════════
   Dialect Explorer teaser (logged-out / no plan) — markup from
   plugins/pamphlit-studio/includes/explorer-teaser.php
════════════════════════════════════════════════════════════ */
.pm-dx { font-family: 'DM Sans', sans-serif; color: #2D3142; }
.pm-dx-wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.pm-dx h1, .pm-dx h2, .pm-dx h3 { font-family: 'DM Serif Display', Georgia, serif !important; font-weight: 400 !important; color: #004B52 !important; letter-spacing: -0.02em; }

.pm-dx-hero { background: #F9F7F2; padding: 72px 0 64px; }
.pm-dx-hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.pm-dx-eyebrow { font-size: 12px !important; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: #004B52 !important; margin: 0 0 14px !important; }
.pm-dx-hero h1 { font-size: clamp(2.2rem, 4.2vw, 3.4rem) !important; line-height: 1.08 !important; margin: 0 0 18px !important; }
.pm-dx-hero h1 em { font-style: italic; color: #2D3142; }
.pm-dx-lead { font-size: 17px !important; line-height: 1.7 !important; color: rgba(45,49,66,0.82) !important; margin: 0 0 28px !important; max-width: 520px; }
.pm-dx-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.pm-dx-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px; border-radius: 8px; font-weight: 700; font-size: 15px; text-decoration: none !important; transition: background .2s, color .2s, border-color .2s; }
.pm-dx-btn--primary { background: #FFC857; color: #2D3142 !important; border: 2px solid #FFC857; }
.pm-dx-btn--primary:hover { background: #FFD47A; border-color: #FFD47A; }
.pm-dx-btn--ghost { background: transparent; color: #004B52 !important; border: 2px solid #004B52; }
.pm-dx-btn--ghost:hover { background: #004B52; color: #fff !important; }
.pm-dx-fine { font-size: 13px !important; color: #5F6368 !important; margin: 0 !important; }

/* Handout mock */
.pm-dx-mock { position: relative; }
.pm-dx-mock-doc { background: #fff; border-radius: 10px; box-shadow: 0 24px 60px rgba(0,75,82,0.16); overflow: hidden; transform: rotate(-1.5deg); max-width: 420px; margin: 0 auto; }
.pm-dx-mock-hd { background: #004B52; color: #fff; padding: 22px 24px; display: flex; flex-direction: column; gap: 10px; }
.pm-dx-mock-logo { align-self: flex-start; font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; border: 1px dashed rgba(255,255,255,0.5); padding: 4px 10px; border-radius: 4px; }
.pm-dx-mock-title { font-family: 'DM Serif Display', Georgia, serif; font-size: 22px; }
.pm-dx-mock-body { padding: 20px 24px 26px; display: flex; flex-direction: column; gap: 10px; }
.pm-dx-mock-line { display: block; height: 8px; border-radius: 4px; background: #EDE8DF; }
.pm-dx-mock-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #F0C9A5; font-size: 13px; }
.pm-dx-mock-row b { font-weight: 600; }
.pm-dx-mock-row i { font-style: normal; color: #6B6F76; }
.pm-dx-mock-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 22px; }
.pm-dx-mock-chips span { background: #fff; border: 1px solid #E4DFD7; border-radius: 100px; padding: 6px 12px; font-size: 12px; font-weight: 600; }
.pm-dx-mock-chips span.is-on { background: #004B52; border-color: #004B52; color: #fff; }

/* Facts strip */
.pm-dx-facts { background: #004B52; color: #F9F7F2; padding: 28px 0; }
.pm-dx-facts-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; text-align: center; }
.pm-dx-facts strong { display: block; font-family: 'DM Serif Display', Georgia, serif; font-size: 28px; font-weight: 400; color: #FFC857; }
.pm-dx-facts span { font-size: 13px; color: rgba(249,247,242,0.85); }

/* Sections */
.pm-dx-section { padding: 72px 0; background: #fff; }
.pm-dx-section--tint { background: #F9F7F2; }
.pm-dx-h2 { font-size: clamp(1.7rem, 3vw, 2.3rem) !important; text-align: center; margin: 0 0 36px !important; }
.pm-dx-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pm-dx-steps li { background: #F9F7F2; border-radius: 12px; padding: 28px; }
.pm-dx-step-n { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: #FFC857; color: #2D3142; font-weight: 700; margin-bottom: 14px; }
.pm-dx-steps h3 { font-size: 1.35rem !important; margin: 0 0 8px !important; }
.pm-dx-steps p { font-size: 15px !important; line-height: 1.65 !important; color: rgba(45,49,66,0.82) !important; margin: 0 !important; }

.pm-dx-peek { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pm-dx-peek-card { background: #fff; border: 1px solid #E4DFD7; border-radius: 12px; padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.pm-dx-peek-cat { font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: #004B52; }
.pm-dx-peek-card h3 { font-size: 1.2rem !important; line-height: 1.25 !important; margin: 0 !important; flex: 1; }
.pm-dx-peek-plan { align-self: flex-start; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 100px; background: rgba(255,200,87,0.25); color: #5C4500; }
.pm-dx-peek-plan.is-pro { background: rgba(0,75,82,0.1); color: #004B52; }
.pm-dx-more { text-align: center; margin: 22px 0 0 !important; font-size: 15px !important; color: #5F6368 !important; }
.pm-dx-more a, .pm-dx-member a { color: #004B52 !important; font-weight: 700; }

.pm-dx-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 360px)); justify-content: center; gap: 24px; }
.pm-dx-plan { position: relative; border: 1px solid #E4DFD7; border-radius: 14px; padding: 32px 28px; display: flex; flex-direction: column; }
.pm-dx-plan--featured { border: 2px solid #004B52; }
.pm-dx-plan-badge { position: absolute; top: -12px; left: 28px; background: #004B52; color: #FFC857; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 4px 12px; border-radius: 100px; }
.pm-dx-plan h3 { font-size: 1.5rem !important; margin: 0 0 6px !important; }
.pm-dx-price { font-family: 'DM Serif Display', Georgia, serif; font-size: 40px !important; color: #2D3142 !important; margin: 0 0 18px !important; }
.pm-dx-price span { font-family: 'DM Sans', sans-serif; font-size: 15px; color: #6B6F76; }
.pm-dx-plan ul { list-style: none; margin: 0 0 24px; padding: 0; flex: 1; }
.pm-dx-plan li { padding: 7px 0 7px 26px; position: relative; font-size: 15px; }
.pm-dx-plan li::before { content: '✓'; position: absolute; left: 0; color: #004B52; font-weight: 700; }
.pm-dx-member { text-align: center; margin: 28px 0 0 !important; font-size: 15px !important; }

@media (max-width: 900px) {
  .pm-dx-hero { padding: 48px 0; }
  .pm-dx-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .pm-dx-facts-grid { grid-template-columns: repeat(2, 1fr); row-gap: 20px; }
  .pm-dx-steps, .pm-dx-peek { grid-template-columns: 1fr; }
  .pm-dx-plans { grid-template-columns: minmax(0, 1fr); }
  .pm-dx-section { padding: 56px 0; }
}
@media (max-width: 480px) {
  .pm-dx-wrap { padding: 0 16px; }
  .pm-dx-ctas .pm-dx-btn { flex: 1 1 100%; }
  .pm-dx-mock-doc { transform: none; }
}