/* =============================================================================
   NextTechTalents Communication Templates.
   Hero + tab switcher + single active template card. Placeholders in the
   subject and body are rendered as yellow contenteditable pills.
   Scoped to .ntt-templates so nothing bleeds into the surrounding theme.
   ============================================================================= */

:root {
    --ntt-color-fg:        #111827;
    --ntt-color-fg-soft:   #374151;
    --ntt-color-muted:     #6b7280;
    --ntt-color-border:    #e5e7eb;
    --ntt-color-border-2:  #d1d5db;
    --ntt-color-bg:        #ffffff;
    --ntt-color-bg-soft:   #f9fafb;
    --ntt-color-bg-warm:   #fbfaf7;

    --ntt-brand:           #3F37C9;
    --ntt-brand-dark:      #17146B;
    --ntt-brand-blue:      #4895EF;
    --ntt-brand-cyan:      #57C8FA;
    --ntt-brand-yellow:    #FFC636;
    --ntt-brand-brown:     #C98200;

    --ntt-radius:          8px;
    --ntt-radius-sm:       4px;
    --ntt-radius-pill:     999px;

    --ntt-shadow-sm:       0 1px 2px rgba(17,24,39,.04);
    --ntt-shadow:          0 1px 2px rgba(17,24,39,.04), 0 4px 16px rgba(17,24,39,.05);
}

.ntt-templates [x-cloak] { display: none !important; }

.ntt-templates {
    /* Font-family intentionally omitted: inherit the parent theme's typography
       so the templates read as part of the surrounding page, not a foreign
       widget. Only colour, line-height, and rendering hints are set here. */
    color: var(--ntt-color-fg);
    line-height: 1.55;
    margin: 0 auto;
    -webkit-font-smoothing: antialiased;
}
.ntt-templates * { box-sizing: border-box; }

.ntt-templates__loading,
.ntt-templates__error {
    padding: 2rem;
    text-align: center;
    color: var(--ntt-color-muted);
}

.ntt-templates__shell {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* ─── Hero ─────────────────────────────────────────────────────────────── */
/* Plain typography on the page ground: no box, no border, no accent bar. */
.ntt-templates__hero {
    padding: 0.5rem 0;
}
.ntt-templates__hero-eyebrow {
    color: var(--ntt-brand-dark);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin-bottom: 0.35rem;
}
.ntt-templates__hero-title {
    margin: 0 0 0.6rem;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--ntt-brand-dark);
    letter-spacing: -0.01em;
}
.ntt-templates__hero-intro {
    margin: 0;
    color: var(--ntt-color-fg-soft);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* ─── Tab bar ──────────────────────────────────────────────────────────── */
.ntt-templates__tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}
.ntt-templates__tab {
    padding: 0.85rem 1rem;
    background: #fff;
    border: 1px solid var(--ntt-color-border);
    border-radius: var(--ntt-radius);
    color: var(--ntt-brand);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    text-align: center;
    box-shadow: var(--ntt-shadow-sm);
    transition: background .15s, color .15s, border-color .15s, transform .1s;
}
.ntt-templates__tab:hover {
    background: var(--ntt-color-bg-soft);
    border-color: var(--ntt-color-border-2);
}
.ntt-templates__tab.is-active {
    background: var(--ntt-brand);
    border-color: var(--ntt-brand);
    color: #fff;
}

/* ─── Card ─────────────────────────────────────────────────────────────── */
/* Matches the visual language of the site's Registration Form container:
   soft brand-blue tint (~5%), 1px brand-yellow border, generously rounded
   corners. No inner boxes — content lives directly on the tint. */
.ntt-templates__card {
    padding: 2.25rem 2.75rem;
    background: rgba(72, 149, 239, 0.05);
    border: 1px solid var(--ntt-brand-yellow);
    border-radius: 32px;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
@media (max-width: 640px) {
    .ntt-templates__card {
        padding: 1.5rem 1.35rem;
        border-radius: 22px;
    }
}
.ntt-templates__card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
/* Title inherits the theme's h4 typography — colour, size, weight all come
   from the site's global styles so the card feels native. */
.ntt-templates__card-title {
    margin: 0;
    min-width: 0;
    flex: 1 1 320px;
}
.ntt-templates__card-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    flex-shrink: 0;
}

/* Muted single-paragraph intro replacing the previous Purpose/Target dl.
   Same voice as the form-field sub-hints on nexttechtalents.eu. */
.ntt-templates__intro {
    margin: -0.5rem 0 0.25rem;
    color: var(--ntt-color-muted);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* ─── Subject / body blocks ──────────────────────────────────────────── */
/* No inner containers: the content sits directly on the tinted card. Only
   typography and gap distinguish subject from body from label. */
.ntt-templates__block {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.ntt-templates__block-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}
/* Section labels ("Subject" / "Body") pick up the theme's h5 styling but
   pinned to the block-level typography size for a form-label feel. */
.ntt-templates__block-label {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ntt-color-fg-soft);
    letter-spacing: 0.01em;
}
/* White containers on the tinted card. The contrast + border signals
   "this is the copiable content" so the copy buttons have a clear target. */
.ntt-templates__subject,
.ntt-templates__body {
    padding: 1.15rem 1.4rem;
    background: #fff;
    border: 1px solid var(--ntt-color-border);
    border-radius: 14px;
    color: var(--ntt-color-fg);
}
.ntt-templates__subject {
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.5;
}
.ntt-templates__body {
    font-size: 1rem;
    line-height: 1.7;
    /* pre-line preserves \n from the JSON body without injecting <br> tags. */
    white-space: pre-line;
}

/* ─── Placeholder pills ──────────────────────────────────────────────── */
/* Every [Square-Bracket] in a template becomes an editable pill. The pill
   shows the default label until the user types over it. Yellow fill matches
   the "highlighted placeholders" phrasing in the hero intro. */
.ntt-templates__placeholder {
    display: inline-block;
    padding: 0.05rem 0.5rem;
    margin: 0 0.1rem;
    background: rgba(255, 198, 54, .35);
    color: var(--ntt-brand-dark);
    border-radius: var(--ntt-radius-sm);
    font-weight: 600;
    outline: none;
    cursor: text;
    transition: background .15s, box-shadow .15s;
}
.ntt-templates__placeholder:hover {
    background: rgba(255, 198, 54, .55);
}
.ntt-templates__placeholder:focus {
    background: #fff;
    box-shadow: 0 0 0 2px var(--ntt-brand-yellow);
}

/* ─── Buttons ────────────────────────────────────────────────────────── */
.ntt-templates__btn {
    padding: 0.55rem 1.1rem;
    background: #fff;
    border: 1px solid var(--ntt-color-border-2);
    border-radius: var(--ntt-radius);
    color: var(--ntt-color-fg-soft);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.ntt-templates__btn:hover {
    background: var(--ntt-color-bg-soft);
    border-color: var(--ntt-brand);
    color: var(--ntt-brand-dark);
}
.ntt-templates__btn--primary {
    background: var(--ntt-brand);
    border-color: var(--ntt-brand);
    color: #fff;
}
.ntt-templates__btn--primary:hover {
    background: var(--ntt-brand-dark);
    border-color: var(--ntt-brand-dark);
    color: #fff;
}
.ntt-templates__btn--sm {
    padding: 0.4rem 0.85rem;
    font-size: 0.8rem;
}
.ntt-templates__btn[data-state="flash"] {
    background: var(--ntt-brand-yellow);
    border-color: var(--ntt-brand-yellow);
    color: var(--ntt-brand-dark);
    cursor: default;
}

/* ─── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 720px) {
    .ntt-templates__hero { padding: 1.25rem 1.35rem; }
    .ntt-templates__hero-title { font-size: 1.35rem; }
    .ntt-templates__tabs {
        grid-template-columns: 1fr 1fr;
    }
    .ntt-templates__card { padding: 1.25rem 1.35rem; }
    .ntt-templates__card-title { font-size: 1.15rem; }
    .ntt-templates__card-actions { width: 100%; }
    .ntt-templates__card-actions .ntt-templates__btn { flex: 1 1 auto; }
}
@media (max-width: 460px) {
    .ntt-templates__tabs { grid-template-columns: 1fr; }
}