/**
 * The share row and the subscribe popup. The stylesheet loads on every singular
 * view because the row does; the popup rules simply have nothing to style when
 * no subscribe page is configured.
 *
 * @package tglf-loom
 */

/* ---- The share row ---- */

/* Panelled like .translations, the per-post language switcher, so the two bars
   that frame the article read as one family rather than two inventions. */
.share-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;background:var(--blue-4);border:var(--rule);padding:12px 18px;margin-bottom:34px;margin-block-end:34px}
.share-row .sharehead{margin:0;font-weight:700;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--blue-text)}
.share-list{display:flex;flex-wrap:wrap;align-items:center;gap:8px;list-style:none;margin:0;padding:0}
.share-list li{margin:0}

/* --tglf-cut paints the knockout inside the LinkedIn and YouTube glyphs, and
   must track this square's own background: white at rest, ink on hover. A CSS
   class cannot reach inside the shadow tree a <use> element builds, which is
   why the symbols read a custom property instead. */
/* Every rule here is scoped to .share-row on purpose. The article stylesheet
   carries .entry-content a{color:var(--red-cta)}, and the row renders inside
   .entry-content, so a bare .share-link or .btn loses the colour contest to it:
   two classes outrank one class plus one element. Unscoped, the glyphs turn red
   and the button paints red text on its own red ground. */
.share-row .share-link{--tglf-cut:#fff;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid rgba(36,47,58,.25);background:#fff;color:var(--ink);text-decoration:none}
.share-row .share-link svg{width:20px;height:20px}
.share-row .share-link:hover,.share-row .share-link:focus-visible{--tglf-cut:var(--ink);background:var(--ink);border-color:var(--ink);color:#fff}

/* The button closes the row of squares and matches their 40px box, so the whole
   set reads as one line of controls: hence the fixed height, the flattened
   padding and the smaller type, rather than the taller page-level .btn. */
.share-row .btn{display:inline-flex;align-items:center;height:40px;padding:0 18px;font-size:13px;letter-spacing:.06em;color:#fff;background:var(--red-cta)}
.share-row .btn:hover,.share-row .btn:focus-visible{color:#fff;background:var(--red-deep)}

/* ---- The subscribe popup ---- */

/* A browser centres dialog:modal itself with position:fixed, inset:0 and
   margin:auto, so any position:relative here would drop the card at the top
   left. Fixed positioning keeps the centring and still anchors the absolutely
   positioned close button; height:fit-content stops inset:0 stretching the
   card to the full height of the window. */
.subscribe-modal{position:fixed;inset:0;margin:auto;width:min(620px,calc(100vw - 32px));height:fit-content;max-height:min(86vh,860px);overflow-y:auto;border:var(--rule);background:#fff;color:var(--ink);padding:32px 28px 28px;border-radius:2px}
.subscribe-modal::backdrop{background:rgba(0,0,0,.55)}
.subscribe-modal h2{font-size:1.5rem;margin-right:44px;margin-inline-end:44px}
.subscribe-close{position:absolute;top:4px;right:4px;inset-inline-end:4px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;font-size:26px;line-height:1;background:none;border:0;color:var(--ink);cursor:pointer}
.subscribe-close:hover{color:var(--blue-text)}
.subscribe-body{margin-top:16px;margin-block-start:16px}
.subscribe-body > :first-child{margin-top:0;margin-block-start:0}

/* A Kajabi embed measures itself on load and can report zero height while the
   dialog is closed, so the slot keeps a floor until the form paints. */
.subscribe-body iframe,.subscribe-body .kajabi-form-embed,.subscribe-body form{min-height:320px;width:100%}

/* Browsers without <dialog>: the script leaves the button as a plain link, so
   the element must not be visible in the flow either. */
dialog.subscribe-modal:not([open]){display:none}

@media (max-width:480px){
	.subscribe-modal{padding:28px 18px 20px}
}