/* 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; }
.custom-page-body h4,
.fpsed-editor .ProseMirror h4 { font-size: 18px; line-height: 1.35; font-weight: 700; color: #1a1a1a; margin: 1.4em 0 .45em; }
.custom-page-body h5,
.fpsed-editor .ProseMirror h5 { font-size: 15px; line-height: 1.4; font-weight: 700; color: #1a1a1a; margin: 1.3em 0 .4em; }
.custom-page-body h6,
.fpsed-editor .ProseMirror h6 { font-size: 13px; line-height: 1.4; font-weight: 700; color: #555; text-transform: uppercase; letter-spacing: .05em; margin: 1.3em 0 .4em; }

/* 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; }

/* ---- PDF Viewer/Downloader block (fps-pdf) ----
   Inline pdf.js viewer (iframe -> /Connect/Reader) + optional download button. Fixed frame height
   (not 16:9 like video); select the frame and use the Style Manager to change it. Empty state shows
   a placeholder instead of the blank iframe. `.fps-pdf-nodownload` hides the (kept) download button. */
.custom-page-body .fps-pdf { margin: 0 0 1.4em; }
.custom-page-body .fps-pdf-frame { position: relative; width: 100%; height: 640px; border: 1px solid #ddd; background: #f4f4f4; }
.custom-page-body .fps-pdf-iframe { display: block; width: 100%; height: 100%; border: 0; }
.custom-page-body .fps-pdf-empty .fps-pdf-iframe { display: none; }
.custom-page-body .fps-pdf-placeholder { display: none; }
.custom-page-body .fps-pdf-empty .fps-pdf-placeholder { display: flex; align-items: center; justify-content: center; height: 100%; color: #8a8a8a; font-weight: 700; text-align: center; padding: 20px; }
.custom-page-body .fps-pdf-placeholder-ico { font-size: 1.4em; margin-right: 8px; }
.custom-page-body .fps-pdf-actions { margin: 12px 0 0; }
.custom-page-body .fps-pdf.fps-pdf-nodownload .fps-pdf-actions { display: none; }
@media (max-width: 600px) { .custom-page-body .fps-pdf-frame { height: 460px; } }

.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; }

/* ---- Placeable Form block (fps-form-embed) ----
   Canvas: the component view injects .fps-form-embed-preview (a labelled placeholder). Public page:
   custompage-forms.js replaces it with a real .fps-form (see FormEmbed.ashx). Styles cover both. */
.custom-page-body .fps-form-embed { margin: 0 0 1.4em; }
.custom-page-body .fps-form-embed-preview {
    border: 1px dashed #c8102e; border-radius: 4px; background: #fbeaec;
    padding: 18px 20px; color: #8a1020; font-weight: 700; text-align: center;
}
.custom-page-body .fps-form-embed-ico { opacity: .7; margin-right: 4px; }

/* Floating-label restyle to match the standard FPS lead form (.blogpost-side-form in fpsblog.css):
   flat #c7ced6 inputs, labels that lift out of the field on focus/fill, custom select chevron, and a
   full-width square navy submit button. renderForm() emits .fps-fl wrappers (control before label) and
   initFloat() toggles data-val/data-focus. The form card itself stays transparent so it inherits its
   host container (e.g. the pilot page's white form box); fields carry their own spacing. */
.custom-page-body .fps-form { max-width: 640px; }
.custom-page-body .fps-form-title { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.25; color: var(--fps-navy, #0f3063); margin: 0 0 4px; }
.custom-page-body .fps-form-field { margin: 24px 0 0; }
.custom-page-body .fps-form-field.fps-fl { position: relative; }
.custom-page-body .fps-form-req { color: #c0392b; padding-left: 2px; }
.custom-page-body .fps-form input[type="text"],
.custom-page-body .fps-form input[type="email"],
.custom-page-body .fps-form input[type="tel"],
.custom-page-body .fps-form textarea,
.custom-page-body .fps-form select {
    width: 100%; box-sizing: border-box; margin: 0;
    padding: 13px 12px 11px; border: 1px solid #c7ced6; border-radius: 0;
    font-size: 14px; color: #333; background: #fff; line-height: 1.3; font-family: inherit;
    transition: border-color .15s, box-shadow .15s;
}
.custom-page-body .fps-form textarea { min-height: 92px; resize: vertical; }
/* Custom chevron so it can sit inset from the right edge (native selects ignore padding-right). */
.custom-page-body .fps-form select {
    height: auto; cursor: pointer; padding-right: 34px;
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23555' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 13px center; background-size: 10px 6px;
}
.custom-page-body .fps-form select::-ms-expand { display: none; }
/* Floating label: at rest it sits inside the field as a gray placeholder; when the field is focused or
   filled it lifts to the top border. Its background matches the (white) host so it blanks the border
   segment beneath it. */
.custom-page-body .fps-fl .fps-form-label {
    position: absolute; left: 9px; top: 12px; margin: 0; padding: 0 4px;
    font-size: 14px; font-weight: 400; color: #8a939e; background: transparent;
    pointer-events: none; text-align: left; z-index: 1; transition: all .15s ease;
}
.custom-page-body .fps-fl[data-val="true"] .fps-form-label,
.custom-page-body .fps-fl[data-focus="true"] .fps-form-label {
    top: -8px; font-size: 11px; font-weight: 600; line-height: 16px; color: #6b747f;
    background: #fff; padding: 0 6px; z-index: 2;
}
.custom-page-body .fps-fl[data-focus="true"] input,
.custom-page-body .fps-fl[data-focus="true"] textarea,
.custom-page-body .fps-fl[data-focus="true"] select {
    outline: 0; border-color: #aaa;
    box-shadow: rgba(0, 0, 0, 0.05) 0 1px 6px, rgba(0, 0, 0, 0.05) 0 1px 4px;
}
/* Radio/checkbox groups keep a block label above the options. */
.custom-page-body .fps-form-field:not(.fps-fl) .fps-form-label { display: block; margin: 0 0 8px; font-size: 13px; font-weight: 600; color: #333; }
.custom-page-body .fps-form-optionlist { display: flex; flex-direction: column; gap: 10px; }
.custom-page-body .fps-form-option { font-weight: 400; display: flex; align-items: center; gap: 9px; font-size: 14px; color: #333; }
.custom-page-body .fps-form-option input { width: auto; }
.custom-page-body .fps-form-actions { margin-top: 20px; }
.custom-page-body .fps-form-submit {
    display: block; width: 100%; box-sizing: border-box;
    padding: 12px 16px; border: 0; border-radius: 0;
    background: #0a4b8c; background-image: none; color: #fff;
    font-size: 14px; font-weight: 700; letter-spacing: .02em; font-family: inherit;
    cursor: pointer; transition: background .15s;
}
.custom-page-body .fps-form-submit:hover { background: #08407a; }
.custom-page-body .fps-form-submit:disabled { opacity: .6; cursor: default; }
.custom-page-body .fps-form-error { color: #c0392b; font-weight: 600; font-size: 13px; margin: 8px 0 0; }
.custom-page-body .fps-form-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.custom-page-body .fps-form-loading { color: #888; padding: 16px 0; }
.custom-page-body .fps-form-thankyou { background: #fff; padding: 4px 0; max-width: 640px; }
.custom-page-body .fps-form-thankyou-msg { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; color: var(--fps-navy, #0f3063); }
.custom-page-body .fps-form-download { margin-top: 16px; }
.custom-page-body .fps-form-download .fps-btn {
    display: inline-block; padding: 12px 28px; border: 0; border-radius: 0;
    background: #0a4b8c; color: #fff; font-size: 14px; font-weight: 700; letter-spacing: .02em;
    text-decoration: none; cursor: pointer; transition: background .15s;
}
.custom-page-body .fps-form-download .fps-btn:hover { background: #08407a; }