/* =========================================================================
   FIP call-out boxes & link-buttons — TRIMMED
   -------------------------------------------------------------------------
   Same features as fip-callouts.css, just tighter: the 3x-repeated :has()
   selectors are collapsed and the long comments cut down. Nothing removed.
   All classes are namespaced "fip-" so they never clash with Bootstrap 4/5.

   EDITOR QUICK-START (TinyMCE Table button)
     Table Class = fip-callouts   -> every cell is a rounded card, no cell class.
     One link in a cell           -> whole box is clickable, with hover-lift.
     Link Class = fip-btn         -> that link renders as a button.
   OVERRIDES (cell class, only to deviate)
     fip-callout        plain, non-clickable card (opt a link cell out)
     fip-callout--link  force whole box clickable
     fip-callout--hover hover-lift with NO link (decorative / JS click)
     fip-callout--soft  lighter fill      fip-callout--dark  dark cell
   Table extras: fip-callouts--dark, width fip-callouts--half/third/... (or
   --3..--12), fip-float-left/right (+ fip-clear on the next element).
   :has() needs Safari 15.4+, Chrome/Edge 105+, Firefox 121+ (all 2022+).
   ========================================================================= */

/* ----- Colour tokens (override any --fipc-* to re-skin) ------------------ */
:root {
    --fipc-bg: #dcf4fc;                              /* box fill              */
    --fipc-bg-hover: #cfeffc;                        /* fill on hover         */
    --fipc-border: var(--cyan, #20c4f4);             /* box border            */
    --fipc-text: var(--dark-blue, #1e3a5f);          /* text (8.9:1 on fill)  */
    --fipc-link: var(--fip-indigo, #3d4e81);         /* inline link (5.9:1)   */
    --fipc-link-hover: var(--dark-blue, #1e3a5f);
    --fipc-btn-bg: var(--dark-blue, #1e3a5f);        /* button fill           */
    --fipc-btn-text: #ffffff;
    --fipc-btn-bg-hover: var(--fip-indigo, #3d4e81);
    --fipc-radius: 10px;
    --fipc-pad: 18px 22px;
    --fipc-font: inherit;
}

/* ----- 1. The table: a FLEX row of cards -------------------------------- */
/* The editor writes a normal <table>, but we override its display to flex so
   the 16px `gap` sits ONLY between columns — never on the outer edges. That's
   the whole point: cards are flush with the container left & right, with a gap
   only in the middle (border-spacing can't do this — it's symmetric).
   !important beats any inline width/border TinyMCE writes on drag-resize. */
table.fip-callouts {
    display: flex !important;
    flex-wrap: wrap;
    gap: 16px;
    width: 100% !important;
    border: 0 !important;
    background: transparent !important;
    margin: 1.5rem 0;
    font-family: var(--fipc-font);
    color: var(--fipc-text);
}
/* let the <tbody> and <tr> vanish as boxes so the <td> cards become the direct
   flex items of the table. */
table.fip-callouts > tbody,
table.fip-callouts > tbody > tr,
table.fip-callouts > tr { display: contents; }

table.fip-callouts, table.fip-callouts * { box-sizing: border-box; }

/* ----- 2. A cell: a card (bare cells included) -------------------------- */
/* A bare td/th in the table is a card too, so one table class is enough;
   explicit cell classes still win (coloured variants carry their own fills). */
table.fip-callouts > tbody > tr > td,
table.fip-callouts > tbody > tr > th,
table.fip-callouts > tr > td,
table.fip-callouts > tr > th,
.fip-callout, .fip-callout--link, .fip-callout--soft, .fip-callout--dark {
    /* equal-width flex items that share the row and fill it (flex-basis:0 so the
       split is even regardless of content length). min-width:0 lets a cell
       shrink instead of overflowing on long words. */
    flex: 1 1 0;
    min-width: 0;
    position: relative;                              /* anchors the click layer */
    text-align: left;
    /* !important: editors can set a cell background/border in the Cell dialog. */
    background: var(--fipc-bg) !important;
    color: var(--fipc-text) !important;
    padding: var(--fipc-pad);
    border: 1px solid var(--fipc-border) !important;
    border-radius: var(--fipc-radius);
    box-shadow: 0 2px 6px rgba(30, 58, 95, .12);
    transition: box-shadow .15s ease, transform .15s ease, background .15s ease;
}
.fip-callout--soft { background: var(--fipc-bg-hover) !important; }

/* text flow inside a box — scoped to BOTH a bare cell in the table (the
   one-class shortcut: `table.fip-callouts td/th`) AND a classed callout used on
   its own (`[class*="fip-callout"]`). Without the table-scoped half, bare cells
   keep the browser's default <p> margins, which shows up as stray inner spacing. */
table.fip-callouts td > :first-child,
table.fip-callouts th > :first-child,
[class*="fip-callout"] > :first-child { margin-top: 0; }
table.fip-callouts td > :last-child,
table.fip-callouts th > :last-child,
[class*="fip-callout"] > :last-child { margin-bottom: 0; }
table.fip-callouts td :is(h2, h3, h4, strong),
table.fip-callouts th :is(h2, h3, h4, strong),
[class*="fip-callout"] :is(h2, h3, h4, strong) { color: var(--fipc-text); line-height: 1.25; }
table.fip-callouts td p,
table.fip-callouts th p,
[class*="fip-callout"] p { margin: 0 0 .75rem; line-height: 1.5; }

/* inline links: force a readable colour so the theme's cyan link can't vanish */
table.fip-callouts td a:not(.fip-btn),
table.fip-callouts th a:not(.fip-btn),
[class*="fip-callout"] a:not(.fip-btn),
[class*="fip-callout"] a:not(.fip-btn):link,
[class*="fip-callout"] a:not(.fip-btn):visited {
    color: var(--fipc-link) !important;
    text-decoration: underline;
}
table.fip-callouts td a:not(.fip-btn):hover,
table.fip-callouts td a:not(.fip-btn):focus,
[class*="fip-callout"] a:not(.fip-btn):hover,
[class*="fip-callout"] a:not(.fip-btn):focus {
    color: var(--fipc-link-hover) !important;
    text-decoration: none;
}

/* ----- 3. Whole-cell clickable ----------------------------------------- */
/* (a) auto: a bare cell with exactly one non-button link (anywhere, incl. in a
       <p>) -> clickable. "Exactly one" = :not(:has(link ~ link)).
   (b) explicit: .fip-callout--link always clickable.
   (c) .fip-callout--hover lifts on hover with no link.
   Selectors are repeated for tbody/no-tbody and kept at full specificity (no
   :where()) so they still beat the theme's own td rules. */
table.fip-callouts > tbody > tr > td:not([class]):has(a:not(.fip-btn)):not(:has(a:not(.fip-btn) ~ a:not(.fip-btn))),
table.fip-callouts > tr > td:not([class]):has(a:not(.fip-btn)):not(:has(a:not(.fip-btn) ~ a:not(.fip-btn))),
.fip-callout--link {
    cursor: pointer;
}

table.fip-callouts > tbody > tr > td:not([class]):has(a:not(.fip-btn)):not(:has(a:not(.fip-btn) ~ a:not(.fip-btn))):hover,
table.fip-callouts > tr > td:not([class]):has(a:not(.fip-btn)):not(:has(a:not(.fip-btn) ~ a:not(.fip-btn))):hover,
.fip-callout--link:hover,
.fip-callout--hover:hover {
    background: var(--fipc-bg-hover) !important;
    box-shadow: 0 6px 16px rgba(30, 58, 95, .22);
    transform: translateY(-2px);
}

/* the link's ::after stretches the click target over the whole cell */
table.fip-callouts > tbody > tr > td:not([class]):not(:has(a:not(.fip-btn) ~ a:not(.fip-btn))) a:not(.fip-btn)::after,
table.fip-callouts > tr > td:not([class]):not(:has(a:not(.fip-btn) ~ a:not(.fip-btn))) a:not(.fip-btn)::after,
.fip-callout--link a:not(.fip-btn):first-of-type::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* ----- 4. Dark theme (whole table --dark, or one cell --dark) ----------- */
/* Re-points the colour tokens; a dark box uses a LIGHT button with DARK text. */
.fip-callouts--dark td, td.fip-callout--dark, .fip-callout--dark {
    --fipc-bg: var(--dark-blue, #1e3a5f);
    --fipc-bg-hover: var(--fip-indigo, #3d4e81);
    --fipc-border: var(--cyan, #20c4f4);
    --fipc-text: #ffffff;
    --fipc-link: var(--cyan-mid, #a8e4f6);
    --fipc-link-hover: #ffffff;
    --fipc-btn-bg: var(--cyan-mid, #a8e4f6);
    --fipc-btn-text: var(--dark-blue, #1e3a5f);
    --fipc-btn-bg-hover: #ffffff;
}
.fip-callouts--dark .fip-btn--ghost, .fip-callout--dark .fip-btn--ghost {
    color: #ffffff !important;
    border-color: var(--cyan-mid, #a8e4f6);
    background: transparent;
}
.fip-callouts--dark .fip-btn--ghost:hover, .fip-callout--dark .fip-btn--ghost:hover {
    background: var(--cyan-mid, #a8e4f6);
    color: var(--dark-blue, #1e3a5f) !important;
}

/* ----- 5. Link-as-button ------------------------------------------------ */
.fip-btn {
    display: inline-block;
    box-sizing: border-box;
    max-width: 100%;
    padding: .6em 1.2em;
    margin: .25rem 0;
    border: 1px solid var(--fipc-btn-bg);
    border-radius: 8px;
    background: var(--fipc-btn-bg);
    color: var(--fipc-btn-text) !important;
    font-family: var(--fipc-font);
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none !important;
    cursor: pointer;
    position: relative;
    z-index: 2;                                      /* above a cover link */
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.fip-btn:hover, .fip-btn:focus {
    background: var(--fipc-btn-bg-hover);
    border-color: var(--fipc-btn-bg-hover);
    color: var(--fipc-btn-text) !important;
}
.fip-btn:focus-visible { outline: 2px solid var(--fipc-border); outline-offset: 2px; }

/* button variants */
.fip-btn--ghost {
    background: transparent;
    color: var(--fipc-btn-bg) !important;
    border-color: var(--fipc-btn-bg);
}
.fip-btn--ghost:hover, .fip-btn--ghost:focus {
    background: var(--fipc-btn-bg);
    color: var(--fipc-btn-text) !important;
}
.fip-btn--block { display: block; width: 100%; text-align: center; }
.fip-btn--pill  { border-radius: 999px; }
.fip-btn--arrow::after { content: " \2192"; }       /* → */
.fip-btn--primary {                                 /* cyan accent */
    --fipc-btn-bg: var(--cyan, #20c4f4);
    --fipc-btn-bg-hover: var(--dark-blue, #1e3a5f);
    color: var(--dark-blue, #1e3a5f) !important;
}
.fip-btn--primary:hover, .fip-btn--primary:focus { color: #fff !important; }
.fip-btn--lg { padding: .8em 1.6em; font-size: 1.05rem; }

/* ----- 6. Width & float (on the table) ---------------------------------- */
/* !important beats the base width:100% and any inline width TinyMCE writes. */
.fip-callouts--12 { width: 100% !important; }
.fip-callouts--9  { width: 75% !important; }
.fip-callouts--8, .fip-callouts--two-thirds { width: 66.6667% !important; }
.fip-callouts--6, .fip-callouts--half        { width: 50% !important; }
.fip-callouts--4, .fip-callouts--third       { width: 33.3333% !important; }
.fip-callouts--3, .fip-callouts--quarter     { width: 25% !important; }
.fip-float-left  { float: left;  margin: .5rem 1.25rem 1rem 0; }
.fip-float-right { float: right; margin: .5rem 0 1rem 1.25rem; }
.fip-clear       { clear: both; }

/* ----- 7. Responsive: cells stack on phones ----------------------------- */
/* The table is already a flex column-row; giving each cell a 100% flex-basis
   makes them wrap one-per-row. The table's `gap:16px` spaces them vertically. */
@media (max-width: 640px) {
    table.fip-callouts > tbody > tr > td,
    table.fip-callouts > tbody > tr > th,
    table.fip-callouts > tr > td,
    table.fip-callouts > tr > th,
    .fip-callout, .fip-callout--link, .fip-callout--soft, .fip-callout--dark {
        flex: 1 1 100%;
    }
    .fip-float-left, .fip-float-right { float: none; width: 100% !important; margin: 1.5rem 0; }
}