/* GSH-360 custom-page ARTICLE styles.
   Shared by the public render (.custom-page-body) and the TipTap editor surface
   (.fpsed-editor .ProseMirror) so the editor is a true preview of the published page.
   Professional landing-page / blog-article typography (firstpagesage-style). */

/* PT Sans faces for custom-page/blog content, declared under a PRIVATE family name ('FPS PT Sans')
   that maps to the same PT Sans files. Why a private name: fpsarticle.css loads on blog/custom pages
   (and the GrapesJS canvas, which lacks Global.min.css), and @font-face is document-global — declaring
   it as 'PT Sans' added a real 700 face to the SITE's 'PT Sans' family, which changed the top nav's
   bold text (font-weight:bold on 'PT Sans') from faux-bold to real bold on blog pages only. Using a
   private family keeps the real regular+bold faces available to .custom-page-body (so the builder
   previews correctly and bold is true PT Sans Bold) without touching the chrome's 'PT Sans'.
   Paths resolve relative to /Style/ (same as Global's @font-face). */
@font-face {
    font-family: 'FPS PT Sans';
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url('Fonts/PT-Sans.woff2') format('woff2'), url('Fonts/PT-Sans.woff') format('woff');
}
@font-face {
    font-family: 'FPS PT Sans';
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url('Fonts/PT-Sans-Bold.woff2') format('woff2'), url('Fonts/PT-Sans-Bold.woff') format('woff');
}

/* ---- Custom-page column layout ----
   Custom pages render in a flex row (.custompage-container, added by Index.aspx when the page is
   custom) instead of the structured-page display:table from page.scss. Flex lets the left nav and
   the right-rail form be position:sticky on desktop and collapse to a single column on mobile.
   !important overrides page.scss's higher-specificity `... > .container { display:table }`. */

/* The page wrapper is a real <table> using auto table-layout, so a wide non-wrapping descendant
   (e.g. the geo-template's nowrap data table, min-width:900) propagates its min-content through the
   single <td> and stretches the whole page past the viewport — a horizontal scrollbar that appears
   at tablet widths (~800-1200) as well as on phones. table-layout:fixed makes the single-cell
   wrapper honor its 100% width so wide content scrolls/reflows inside instead. Applied at ALL widths
   (not just the mobile breakpoint). Safe because fpsarticle.css only loads on custom pages. */
.pagecontainer { table-layout: fixed; }

.pagecontainer.secondary form > .container.custompage-container {
    display: flex !important;
    align-items: flex-start;   /* side columns stay shorter than the content, giving sticky room to travel */
    gap: 40px;
}
.pagecontainer.secondary form > .container.custompage-container > .leftnav {
    display: block;
    flex: 0 0 175px;
    width: 175px;
    padding-right: 0 !important;   /* page.scss sets .leftnav{padding-right:30px} at higher specificity (0,8,1); !important overrides it (it has none) */
    position: -webkit-sticky;
    position: sticky;
    top: 20px;
}
.pagecontainer.secondary form > .container.custompage-container > .custom-page-body {
    display: block;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;              /* allow the content column to shrink instead of overflowing the row */
}
/* Right-rail lead-capture form (the admin "Form" dropdown applies to custom pages too).
   The grey form card itself is styled by Global.scss (.secondary .form). */
.pagecontainer.secondary form > .container.custompage-container > .custompage-form {
    display: block;
    /* Hug the form: Global.scss fixes .formcontainer at 200px and the .form card adds a 1px
       border each side, so 202px fits the content with no empty strip on the right. */
    flex: 0 0 202px;
    width: 202px;
    position: -webkit-sticky;
    position: sticky;
    top: 20px;
}
.pagecontainer.secondary form > .container.custompage-container > .custompage-form .form {
    margin-left: 0;
    margin-top: 0;
}

/* Mobile: stack everything in one full-width column, drop sticky, and hide the site left nav
   (matches how structured secondary pages drop the left nav on phones). */
@media (max-width: 800px) {
    .pagecontainer.secondary form > .container.custompage-container {
        display: block !important;
    }
    .pagecontainer.secondary form > .container.custompage-container > .custom-page-body,
    .pagecontainer.secondary form > .container.custompage-container > .custompage-form {
        display: block;
        width: auto;
        position: static;
    }
    .pagecontainer.secondary form > .container.custompage-container > .custompage-form {
        margin-top: 30px;
    }
    .pagecontainer.secondary form > .container.custompage-container > .leftnav {
        display: none;
    }
    /* Keep authored content from forcing horizontal page overflow on phones:
       wide data tables scroll inside their own column, embeds shrink, long words break.
       Without this a many-column table expands the outer layout table and the whole
       page renders wider than the viewport (horizontal scroll). */
    .custom-page-body table {
        display: block;
        max-width: 100%;
        min-width: 0;        /* override authored min-width (e.g. .geo-table{min-width:900px}) so the table can shrink and scroll instead of forcing page overflow */
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* If the author already wrapped the table in its own horizontal-scroll container
       (the GEO template uses .geo-table-wrap{overflow-x:auto}), the rule above would make the
       inner table a SECOND scroll box — two stacked scrollbars. Inside such a wrapper, restore
       the table to normal so ONLY the wrapper scrolls. */
    .custom-page-body .geo-table-wrap > table {
        display: table;
        overflow-x: visible;
        min-width: auto;     /* let the table take its natural width so the wrapper scrolls it */
        max-width: none;
    }
    .custom-page-body img,
    .custom-page-body iframe,
    .custom-page-body video,
    .custom-page-body embed,
    .custom-page-body object {
        max-width: 100%;
        height: auto;
    }
    .custom-page-body {
        overflow-wrap: break-word;
        word-wrap: break-word;
        /* The position:fixed top nav is 71px tall but page.scss only clears .container 65px, and
           custom content resets its first child's top margin to 0 — so the heading tucked under the
           bar. This pads the content clear of the nav with breathing room (65 + 25 = 90px). */
        padding-top: 25px;
    }
}

.custom-page-body,
.fpsed-editor .ProseMirror {
    font-family: 'FPS PT Sans', 'PT Sans', Arial, Helvetica, sans-serif;
    font-size: 17px;
    line-height: 1.7;
    color: #2d2d2d;
    max-width: 1200px;
    word-wrap: break-word;
}

/* The site-wide Global.min.css directly targets `body,table,tr,td,a,input,select,textarea` with
   `font: normal 12px Arial`. A direct element match beats the inherited .custom-page-body font, so on
   the PUBLIC page links/table cells rendered in Arial while the builder canvas (which doesn't load
   Global.min.css) showed the intended article font — a visible boldness mismatch. Re-assert the
   article font (and size) on those elements so the published page matches the builder. */
.custom-page-body a,
.custom-page-body table,
.custom-page-body tr,
.custom-page-body td,
.custom-page-body input,
.custom-page-body select,
.custom-page-body textarea {
    font-family: inherit;
    font-size: inherit;
}


/* rhythm: reset first/last child margins so blocks sit flush */
.custom-page-body > *:first-child,
.fpsed-editor .ProseMirror > *:first-child { margin-top: 0; }
.custom-page-body > *:last-child,
.fpsed-editor .ProseMirror > *:last-child { margin-bottom: 0; }

/* paragraphs */
.custom-page-body p,
.fpsed-editor .ProseMirror p { margin: 0 0 1.15em; }

/* headings */
.custom-page-body h2,
.fpsed-editor .ProseMirror h2 { font-size: 28px; line-height: 1.25; font-weight: 700; color: #1a1a1a; margin: 1.8em 0 .6em; }
.custom-page-body h3,
.fpsed-editor .ProseMirror h3 { font-size: 21px; line-height: 1.3; font-weight: 700; color: #1a1a1a; margin: 1.5em 0 .5em; }

/* lists */
.custom-page-body ul, .custom-page-body ol,
.fpsed-editor .ProseMirror ul, .fpsed-editor .ProseMirror ol { margin: 0 0 1.15em; padding-left: 1.5em; }
.custom-page-body li, .fpsed-editor .ProseMirror li { margin: 0 0 .45em; }
.custom-page-body li > p, .fpsed-editor .ProseMirror li > p { margin: 0; }

/* links */
.custom-page-body a,
.fpsed-editor .ProseMirror a { color: #003479; text-decoration: none; }
.custom-page-body a:hover,
.fpsed-editor .ProseMirror a:hover { text-decoration: underline; }

/* blockquote / pull-quote */
.custom-page-body blockquote,
.fpsed-editor .ProseMirror blockquote { margin: 0 0 1.3em; padding: 4px 0 4px 20px; border-left: 4px solid #c8102e; color: #555; font-style: italic; }
.custom-page-body blockquote p,
.fpsed-editor .ProseMirror blockquote p { margin: 0; }

/* divider */
.custom-page-body hr,
.fpsed-editor .ProseMirror hr { border: 0; border-top: 1px solid #e0e0e0; margin: 2em 0; }

/* images + captions */
.custom-page-body img,
.fpsed-editor .ProseMirror img { max-width: 100%; height: auto; }
.custom-page-body figure,
.fpsed-editor .ProseMirror figure { margin: 0 0 1.3em; }
.custom-page-body figcaption,
.fpsed-editor .ProseMirror figcaption { font-size: 13px; color: #888; text-align: center; margin-top: 6px; }

/* data tables */
.custom-page-body table,
.fpsed-editor .ProseMirror table { width: 100%; border-collapse: collapse; margin: 0 0 1.4em; font-size: 15px; }
.custom-page-body th, .custom-page-body td,
.fpsed-editor .ProseMirror th, .fpsed-editor .ProseMirror td { border: 1px solid #ddd; padding: 10px 12px; text-align: left; vertical-align: top; color: #2d2d2d; font-size: 15px; font-family: 'FPS PT Sans', 'PT Sans', Arial, Helvetica, sans-serif; }
.custom-page-body th,
.fpsed-editor .ProseMirror th { font-weight: 700; }

/* text-align utility (from @tiptap/extension-text-align, which writes inline style; these are fallbacks) */
.custom-page-body [style*="text-align:center"], .fpsed-editor .ProseMirror [style*="text-align:center"] { text-align: center; }
.custom-page-body [style*="text-align:right"], .fpsed-editor .ProseMirror [style*="text-align:right"] { text-align: right; }

/* ---- branded blocks ---- */

/* CTA button */
.custom-page-body a.fps-btn,
.fpsed-editor .ProseMirror a.fps-btn { display: inline-block; background: var(--fps-btn-bg, #c8102e); color: #fff; padding: 11px 26px; border-radius: 4px; text-decoration: none; font-weight: 700; line-height: 1.2; }
.custom-page-body a.fps-btn:hover,
.fpsed-editor .ProseMirror a.fps-btn:hover { background: var(--fps-btn-hover, #a50d25); text-decoration: none; }

/* Any block made clickable via the builder's "Link URL" trait (data-fps-href). */
.custom-page-body [data-fps-href] { cursor: pointer; }

/* callout / highlight */
.custom-page-body .fps-callout,
.fpsed-editor .ProseMirror .fps-callout { border-left: 4px solid #c8102e; background: #f9f2f3; padding: 16px 20px; margin: 0 0 1.4em; border-radius: 0 4px 4px 0; }
.custom-page-body .fps-callout > *:last-child,
.fpsed-editor .ProseMirror .fps-callout > *:last-child { margin-bottom: 0; }

/* two columns */
.custom-page-body .fps-columns,
.fpsed-editor .ProseMirror .fps-columns { display: flex; gap: 28px; margin: 0 0 1.4em; }
.custom-page-body .fps-columns > .fps-column,
.fpsed-editor .ProseMirror .fps-columns > .fps-column { flex: 1; min-width: 0; }
@media (max-width: 600px) {
    .custom-page-body .fps-columns, .fpsed-editor .ProseMirror .fps-columns { flex-direction: column; gap: 0; }
}

/* accordion: one .fps-accordion holds repeatable .fps-accordion-item (head+body) pairs, each
   toggling independently. Bodies show by default in the editor; the public page collapses each
   item via JS (custompage-interactive.js). */
.custom-page-body .fps-accordion,
.fpsed-editor .ProseMirror .fps-accordion { border: 1px solid #ddd; border-radius: 4px; margin: 0 0 1em; overflow: hidden; }
.custom-page-body .fps-accordion-item + .fps-accordion-item,
.fpsed-editor .ProseMirror .fps-accordion-item + .fps-accordion-item { border-top: 1px solid #ddd; }
.custom-page-body .fps-accordion-head,
.fpsed-editor .ProseMirror .fps-accordion-head { background: #f4f4f4; padding: 12px 16px; cursor: pointer; font-weight: 700; position: relative; }
.custom-page-body .fps-accordion-body,
.fpsed-editor .ProseMirror .fps-accordion-body { padding: 14px 16px; }
.custom-page-body .fps-accordion-body > *:last-child,
.fpsed-editor .ProseMirror .fps-accordion-body > *:last-child { margin-bottom: 0; }
.custom-page-body .fps-accordion-item.fps-collapsed .fps-accordion-body { display: none; }
.custom-page-body .fps-accordion-head:after,
.fpsed-editor .ProseMirror .fps-accordion-head:after { content: "\2013"; position: absolute; right: 16px; }
.custom-page-body .fps-accordion-item.fps-collapsed .fps-accordion-head:after { content: "+"; }
/* legacy single-item markup (no .fps-accordion-item wrapper) */
.custom-page-body .fps-accordion.fps-collapsed .fps-accordion-body { display: none; }
.custom-page-body .fps-accordion.fps-collapsed .fps-accordion-head:after { content: "+"; }

/* raw HTML block (editor only shows a dashed frame; public renders the content bare) */
.fpsed-editor .ProseMirror .fps-raw { border: 1px dashed #bbb; background: #fafafa; padding: 8px; }

/* ---- GrapesJS builder blocks (public + canvas; canvas wrapper carries .custom-page-body) ---- */
.custom-page-body .fps-section { }
.custom-page-body .fps-spacer { width: 100%; }
.custom-page-body .fps-video { position: relative; padding-bottom: 56.25%; height: 0; margin: 0 0 1.4em; }
.custom-page-body .fps-video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

.custom-page-body .fps-tabs { margin: 0 0 1.4em; }
.custom-page-body .fps-tab-heads { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 2px solid #ddd; }
.custom-page-body .fps-tab-head { padding: 10px 16px; cursor: pointer; font-weight: 700; border: 1px solid transparent; border-bottom: none; }
.custom-page-body .fps-tab-head.fps-active { background: #fff; border-color: #ddd; margin-bottom: -2px; color: #c8102e; }
.custom-page-body .fps-tab-panel { display: none; padding: 16px 4px; }
.custom-page-body .fps-tab-panel.fps-active { display: block; }
.custom-page-body .fps-tab-panel > *:last-child { margin-bottom: 0; }