/*
 * A new look for the ministry.
 *
 * The pages of the site are written in the builder of the pages and
 * they carry their own styles with them. This file sits on top of
 * them and gives the whole site one look: one writing, one scale, one
 * colour, one card, one button, one movement.
 *
 * The colours are in tokens.css. The rules of the builder are still
 * there, so the words of the administrator are never lost; this file
 * only changes the way they are shown.
 *
 * The order of the file is the order of a page: the ground, the
 * writing, the header, the hero, the sections, the cards, the buttons,
 * the forms, the footer.
 */

/* ===========================================================================
   The ground
   =========================================================================== */

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--tlv-font);
    font-size: var(--tlv-size-base);
    line-height: var(--tlv-leading);
    color: var(--tlv-ink);
    background: var(--tlv-paper);
    letter-spacing: -0.003em;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* The rule of the site: a piece of writing is never wider than the
   line it is read in. */
p, li, dd {
    max-width: 68ch;
}

/*
   A paragraph that is set in the middle of a column must also stand in
   the middle of the column. The measure of the line is kept, but the
   block that holds the words is centred as well, so that the words do
   not hang at the left edge of the heading that stands above them.
*/
.sermons-header > p,
.archive-header > p,
.tlv-form-description,
.privacy-notice p,
.donation-header .lead,
.contact-section > p,
.contact-info p,
.terms-last-updated,
.privacy-last-updated,
p[style*="text-align: center" i] {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ===========================================================================
   The writing
   =========================================================================== */

h1, h2, h3, h4,
.hero-title,
.section-title,
.tlv-section-title {
    font-family: var(--tlv-font-reading);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--tlv-primary);
    line-height: var(--tlv-leading-tight);
    text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.1rem); }
h2 { font-size: clamp(1.7rem, 1.2rem + 1.9vw, 2.4rem); }
h3 { font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.5rem); }
h4 { font-size: 1.1rem; }

.hero-title,
.section-title,
.tlv-section-title {
    margin: 0 0 var(--tlv-space-4) !important;
    color: var(--tlv-primary) !important;
    text-shadow: none !important;
}

/* The little line of gold under the name of a section. */
.hero-content h1::after,
.tlv-testimonies-section h2::after,
.sermons-header h2::after,
.events-section h2::after,
.app-section h2::after {
    content: "";
    display: block;
    width: 56px;
    height: 3px;
    margin-top: var(--tlv-space-4);
    background: var(--tlv-accent);
    border-radius: 2px;
}

.hero-content h1::after { margin-left: 0; }

/* ===========================================================================
   The header
   =========================================================================== */

.site-header {
    position: sticky;
    top: 0;
    z-index: 900;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--tlv-line);
    box-shadow: 0 1px 0 rgba(15, 27, 77, 0.03);
}

.header-top {
    background: var(--tlv-primary-deep) !important;
    color: rgba(255, 255, 255, 0.82) !important;
    font-size: var(--tlv-size-xs);
    letter-spacing: 0.02em;
}

.header-top a { color: rgba(255, 255, 255, 0.9) !important; }
.header-top a:hover { color: var(--tlv-accent) !important; }

.header-main {
    padding: var(--tlv-space-4) 0 !important;
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tlv-space-6);
}

.site-header .custom-logo,
.site-header img.logo {
    max-height: 54px;
    width: auto;
}

.site-header nav ul {
    display: flex;
    align-items: center;
    gap: var(--tlv-space-2);
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-header nav a {
    position: relative;
    display: inline-block;
    padding: 10px 14px;
    border-radius: var(--tlv-radius-sm);
    color: var(--tlv-ink) !important;
    font-weight: 600;
    font-size: 0.98rem;
    text-decoration: none;
    transition: color var(--tlv-move) var(--tlv-ease),
        background-color var(--tlv-move) var(--tlv-ease);
}

.site-header nav a::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 4px;
    height: 2px;
    background: var(--tlv-accent);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--tlv-move) var(--tlv-ease);
}

.site-header nav a:hover,
.site-header nav a:focus-visible {
    color: var(--tlv-primary) !important;
    background: var(--tlv-primary-softer);
}

.site-header nav a:hover::after,
.site-header nav a:focus-visible::after { transform: scaleX(1); }

.site-header nav .menu-item > a:hover,
.site-header nav li.current-menu-item > a {
    color: var(--tlv-primary) !important;
}

/*
 * The button of the ministry in the header.
 *
 * The button of the partnership keeps the colours that the
 * administrator chose for it in the menu of the header, so only its
 * shape is set here and not its colours.
 */
.header-cta a,
.header-actions a.button,
.site-header .header-cta .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.7rem 1.4rem !important;
    border-radius: var(--tlv-radius) !important;
    font-weight: 600;
    text-decoration: none;
    transition: transform var(--tlv-move-fast) var(--tlv-ease),
        box-shadow var(--tlv-move) var(--tlv-ease),
        background-color var(--tlv-move) var(--tlv-ease);
}

.header-actions a.button,
.site-header .header-cta .button:not(.partnership-btn) {
    background: var(--tlv-primary) !important;
    color: #fff !important;
    border: 1px solid var(--tlv-primary) !important;
}

.header-actions a.button:hover,
.site-header .header-cta .button:not(.partnership-btn):hover {
    background: var(--tlv-primary-dark) !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: var(--tlv-shadow);
}

/* ===========================================================================
   The hero
   =========================================================================== */

.hero-section {
    position: relative;
    min-height: min(88vh, 860px);
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    overflow: hidden;
    isolation: isolate;
}

/* The veil of the hero is the navy of the ministry, not a wash of
   colour over the picture. */
.hero-overlay {
    background:
        linear-gradient(100deg,
            rgba(10, 18, 45, 0.94) 0%,
            rgba(15, 27, 77, 0.86) 38%,
            rgba(15, 27, 77, 0.42) 68%,
            rgba(15, 27, 77, 0.18) 100%) !important;
    opacity: 1 !important;
    z-index: 2;
}

.hero-content {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: var(--tlv-wrap) !important;
    margin: 0 auto;
    padding: clamp(72px, 12vh, 140px) var(--tlv-space-5) !important;
    text-align: left !important;
}

.hero-content > * { max-width: 30ch; }
.hero-content .hero-subtitle,
.hero-content p { max-width: 46ch; }

.hero-title {
    font-size: clamp(2.4rem, 1.5rem + 3.2vw, 3.7rem) !important;
    max-width: 17ch;
    line-height: 1.06 !important;
    color: #fff !important;
    text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35) !important;
    margin-bottom: var(--tlv-space-5) !important;
}

.hero-title::after {
    margin-top: var(--tlv-space-5) !important;
    width: 72px;
    height: 4px;
}

.hero-subtitle {
    font-family: var(--tlv-font) !important;
    font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem) !important;
    font-weight: 400 !important;
    line-height: 1.65 !important;
    color: rgba(255, 255, 255, 0.86) !important;
    text-shadow: none !important;
    margin-bottom: var(--tlv-space-6) !important;
}

.hero-buttons {
    display: flex !important;
    gap: var(--tlv-space-4) !important;
    justify-content: flex-start !important;
    flex-wrap: wrap;
}

.hero-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 0.6rem;
    min-height: 52px;
    padding: 0.9rem 1.9rem !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    border-radius: var(--tlv-radius) !important;
    text-decoration: none !important;
    transition: transform var(--tlv-move-fast) var(--tlv-ease),
        box-shadow var(--tlv-move) var(--tlv-ease),
        background-color var(--tlv-move) var(--tlv-ease),
        border-color var(--tlv-move) var(--tlv-ease);
}

.hero-btn-primary {
    background: var(--tlv-accent) !important;
    color: var(--tlv-primary-deep) !important;
    border: 1px solid var(--tlv-accent) !important;
    box-shadow: 0 10px 30px rgba(245, 158, 11, 0.28) !important;
}

.hero-btn-primary:hover {
    background: var(--tlv-accent-dark) !important;
    color: var(--tlv-primary-deep) !important;
    transform: translateY(-2px);
    box-shadow: 0 16px 40px rgba(245, 158, 11, 0.34) !important;
}

.hero-btn-secondary {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.55) !important;
    color: #fff !important;
    backdrop-filter: blur(6px);
}

.hero-btn-secondary:hover {
    background: #fff !important;
    border-color: #fff !important;
    color: var(--tlv-primary-deep) !important;
    transform: translateY(-2px);
}

.hero-btn:active { transform: translateY(0); }

/* ===========================================================================
   The sections
   =========================================================================== */

.events-section,
.tlv-testimonies-section,
.sermons-section,
.preview-media-section,
.app-section,
.newsletter-section,
.tlv-why-section,
.tlv-facts-section,
.tlv-impact-section,
.tlv-cta-section,
.tlv-form-section,
.tlv-hero-section,
.tlv-values-section,
.tlv-stats-section,
.tlv-timeline-section,
.tlv-team-section {
    padding: clamp(56px, 8vw, 104px) 0 !important;
}

/* The alternate ground of the site: one colour, flat, no wash. */
.tlv-testimonies-section {
    background: var(--tlv-surface) !important;
}

.events-section h2,
.sermons-header h2,
.tlv-testimonies-section h2,
.app-section h2 {
    font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.5rem) !important;
    margin-bottom: var(--tlv-space-7) !important;
    text-align: center;
}

.events-section h2::after,
.sermons-header h2::after,
.tlv-testimonies-section h2::after,
.app-section h2::after {
    margin-left: auto;
    margin-right: auto;
}

/* ===========================================================================
   The cards
   =========================================================================== */

.event-card,
.sermon-card,
.tlv-testimony-card,
.action-card,
.testimonial-card,
.preview-section,
.upcoming-event-card {
    background: var(--tlv-paper) !important;
    border: 1px solid var(--tlv-line) !important;
    border-radius: var(--tlv-radius-lg) !important;
    box-shadow: var(--tlv-shadow-sm) !important;
    overflow: hidden;
    transition: transform var(--tlv-move) var(--tlv-ease),
        box-shadow var(--tlv-move) var(--tlv-ease),
        border-color var(--tlv-move) var(--tlv-ease);
}

.event-card:hover,
.sermon-card:hover,
.action-card:hover,
.tlv-testimony-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--tlv-shadow-lg) !important;
    border-color: var(--tlv-primary-soft) !important;
}

.event-card img,
.sermon-card img,
.action-card img {
    aspect-ratio: 16 / 10;
    object-fit: cover;
    width: 100%;
    display: block;
}

/* ===========================================================================
   The discs of the signs
   A sign that stands in a disc of the ministry is light, because the
   disc is the navy of the ministry.
   =========================================================================== */

.visit-visa-card-icon,
.info-card-icon,
.essential-info-card-icon,
.need-assistance-card-icon,
.contact-info-icon,
.quick-contact-icon,
.contact-quick-icon {
    background: var(--tlv-primary) !important;
    color: #fff !important;
    border-radius: 50% !important;
    box-shadow: 0 10px 26px rgba(30, 58, 138, 0.18) !important;
    transition: transform var(--tlv-move) var(--tlv-ease),
        background-color var(--tlv-move) var(--tlv-ease),
        box-shadow var(--tlv-move) var(--tlv-ease);
}

.visit-visa-card-icon:hover,
.info-card-icon:hover,
.essential-info-card-icon:hover,
.need-assistance-card-icon:hover {
    background: var(--tlv-primary-dark) !important;
    transform: translateY(-2px);
}

/* The signs that stand alone take the colour of the words. */
.why-icon,
.what-emoji,
.testimony-why-icon,
.testimony-what-emoji,
.testimony-other-icon,
.benefit-icon,
.step-icon,
.icon-badge {
    color: var(--tlv-accent) !important;
}

/* The place of a picture that is not there is not left white. */
.sermon-thumbnail-wrapper,
.event-card-image,
.featured-event .event-image {
    background:
        linear-gradient(160deg, rgba(30, 58, 138, 0.10), rgba(30, 58, 138, 0.04));
}

.sermon-thumbnail-wrapper {
    border-radius: var(--tlv-radius) var(--tlv-radius) 0 0;
}

.event-card h3,
.event-card h4,
.sermon-card h3,
.action-card h3,
.tlv-testimony-card h3 {
    font-family: var(--tlv-font-reading) !important;
    color: var(--tlv-primary) !important;
    font-weight: 700;
    letter-spacing: -0.015em;
}

/* Only the name of the card takes the colour of the ministry. The other
   links keep the colour they were given, so a button that is white on
   navy does not turn navy on navy. */
.event-card h3 a,
.event-card h4 a,
.sermon-card h3 a,
.sermon-card h4 a,
.action-card h3 a {
    color: var(--tlv-primary) !important;
    text-decoration: none;
    transition: color var(--tlv-move) var(--tlv-ease);
}

.event-card h3 a:hover,
.event-card h4 a:hover,
.sermon-card h3 a:hover,
.sermon-card h4 a:hover,
.action-card h3 a:hover {
    color: var(--tlv-accent-dark) !important;
}

/* The button of a card. */
.sermon-watch-btn,
.sermon-card .tlv-btn,
.event-card .tlv-btn,
.preview-media-section .tlv-btn {
    color: #fff !important;
}

.sermon-watch-btn svg {
    fill: currentColor !important;
    stroke: none !important;
}

/* The name of the person in a testimony. */
.tlv-testimony-card blockquote {
    font-family: var(--tlv-font-reading) !important;
    font-size: 1.05rem !important;
    line-height: 1.75 !important;
    color: var(--tlv-ink-soft) !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 0 var(--tlv-space-4) !important;
}

.tlv-testimony-card cite {
    font-style: normal;
    font-weight: 700;
    color: var(--tlv-primary) !important;
}

/* ===========================================================================
   The clock of the coming service
   =========================================================================== */

.countdown-timer {
    display: flex !important;
    gap: 12px !important;
    justify-content: flex-start !important;
    margin-top: var(--tlv-space-6);
}

.countdown-item {
    min-width: 76px !important;
    padding: 14px 10px !important;
    border-radius: var(--tlv-radius) !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    backdrop-filter: blur(8px);
}

.countdown-number {
    font-family: var(--tlv-font-reading) !important;
    font-size: 1.6rem !important;
    font-weight: 700 !important;
    color: #fff !important;
    letter-spacing: 0;
}

.countdown-label {
    font-size: 0.7rem !important;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.7) !important;
}

/* ===========================================================================
   The buttons of the site
   =========================================================================== */

.tlv-btn,
.hero-btn,
.cta-button,
.tlv-submit,
.event-card a.button,
.sermons-footer a,
.sermon-card a.button {
    transition: transform var(--tlv-move-fast) var(--tlv-ease),
        box-shadow var(--tlv-move) var(--tlv-ease),
        background-color var(--tlv-move) var(--tlv-ease);
}

/* ===========================================================================
   The forms
   =========================================================================== */

.tlv-form,
.tlv-visit-form,
.tlv-contact-form,
.tlv-testimony-form {
    background: var(--tlv-paper) !important;
    border: 1px solid var(--tlv-line) !important;
    border-radius: var(--tlv-radius-lg) !important;
    box-shadow: var(--tlv-shadow) !important;
    padding: clamp(24px, 4vw, 44px) !important;
}

/*
   The prayer form is the one form that lives inside a card of its own:
   the card of the page carries the navy band at the top and the grey
   band at the foot. A second white panel inside that card is a box
   inside a box, so the form is only the form and the card of the page
   is the one that is raised.
*/
.tlv-prayer-form {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.tlv-form label,
.tlv-visit-form label,
.tlv-contact-form label,
.tlv-prayer-form label,
.tlv-testimony-form label {
    color: var(--tlv-ink-soft) !important;
    font-weight: 600 !important;
    font-size: 0.94rem;
}

.tlv-form input[type="text"],
.tlv-form input[type="email"],
.tlv-form input[type="tel"],
.tlv-form input[type="date"],
.tlv-form input[type="number"],
.tlv-form select,
.tlv-form textarea,
.tlv-visit-form input,
.tlv-visit-form select,
.tlv-visit-form textarea,
.tlv-contact-form input,
.tlv-contact-form select,
.tlv-contact-form textarea {
    /*
       A field is not a card. On the white panel of a form the white
       ground of the field was hidden anyway, so the ground is taken
       away and the field is marked by its line alone. The arrow of the
       list also survives now, because the long hand is used and the
       short hand no longer wipes the picture away.
    */
    background-color: transparent !important;
    border: 1px solid var(--tlv-line-strong) !important;
    border-radius: var(--tlv-radius-sm) !important;
    color: var(--tlv-ink) !important;
    padding: 12px 14px !important;
    min-height: 46px;
    transition: border-color var(--tlv-move) var(--tlv-ease),
        box-shadow var(--tlv-move) var(--tlv-ease);
}

/* The field that was refused is told apart by its ground as well. */
.tlv-form input.tlv-field-error,
.tlv-form textarea.tlv-field-error,
.tlv-form select.tlv-field-error {
    background-color: var(--tlv-danger-soft) !important;
}

.tlv-form input:focus,
.tlv-form select:focus,
.tlv-form textarea:focus,
.tlv-visit-form input:focus,
.tlv-contact-form input:focus {
    border-color: var(--tlv-primary) !important;
    box-shadow: var(--tlv-ring) !important;
    outline: none !important;
}

.tlv-form .tlv-submit,
.tlv-visit-form .tlv-submit,
.tlv-contact-form .tlv-submit,
.tlv-prayer-form .tlv-submit,
.tlv-testimony-form .tlv-submit {
    background: var(--tlv-accent) !important;
    color: var(--tlv-primary-deep) !important;
    border: 0 !important;
    border-radius: var(--tlv-radius) !important;
    min-height: 52px;
    font-weight: 700;
    box-shadow: 0 10px 26px rgba(245, 158, 11, 0.26) !important;
}

.tlv-form .tlv-submit:hover {
    background: var(--tlv-accent-dark) !important;
    transform: translateY(-2px);
}

.tlv-form .tlv-btn-primary,
.tlv-visit-form .tlv-btn-primary,
.tlv-contact-form .tlv-btn-primary {
    background: var(--tlv-primary) !important;
    color: #fff !important;
    border-radius: var(--tlv-radius) !important;
    min-height: 46px;
}

.tlv-form .tlv-btn-primary:hover {
    background: var(--tlv-primary-dark) !important;
}

/* The steps of the long forms. */
.tlv-progress-fill {
    background: var(--tlv-accent) !important;
}

.tlv-progress-text {
    color: var(--tlv-muted) !important;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* ===========================================================================
   The letter of the site
   =========================================================================== */

.newsletter-section,
.app-section {
    background: var(--tlv-primary) !important;
    color: #fff;
}

.app-section {
    background:
        radial-gradient(120% 120% at 50% 0%, rgba(59, 130, 246, 0.28) 0%, rgba(15, 27, 77, 0) 60%),
        var(--tlv-primary) !important;
}

.app-section h2,
.app-section .section-title {
    color: #fff !important;
}

.app-section .action-card {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: var(--tlv-radius-lg) !important;
    color: #fff !important;
    box-shadow: none !important;
    transition: transform var(--tlv-move) var(--tlv-ease),
        background-color var(--tlv-move) var(--tlv-ease),
        border-color var(--tlv-move) var(--tlv-ease);
}

.app-section .action-card:hover {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, 0.14) !important;
    border-color: rgba(245, 158, 11, 0.5) !important;
}

.app-section .action-card h3 {
    color: #fff !important;
    font-family: var(--tlv-font-reading) !important;
}

.app-section .action-card i {
    color: var(--tlv-accent) !important;
    font-size: 2.6rem !important;
    margin-bottom: var(--tlv-space-3) !important;
}

.newsletter-section h2,
.newsletter-section .section-title {
    color: #fff !important;
}

.newsletter-section p { color: rgba(255, 255, 255, 0.84) !important; }

.newsletter-section input[type="email"] {
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    color: #fff !important;
    border-radius: var(--tlv-radius) !important;
    min-height: 50px;
}

/*
   The word that waits in the field has to be read on the navy of the
   block. A white that is let through by an alpha takes the colour of
   the navy with it and comes out as a grey, so the pale blue of the
   ministry is used instead: it is a colour of the palette and it reads
   at 6:1.
*/
.newsletter-section input[type="email"]::placeholder { color: var(--tlv-primary-soft, #e0e7ff); }

.newsletter-section button,
.newsletter-section input[type="submit"] {
    background: var(--tlv-accent) !important;
    color: var(--tlv-primary-deep) !important;
    border-radius: var(--tlv-radius) !important;
    font-weight: 700;
    min-height: 50px;
    padding: 0 1.6rem !important;
}

.newsletter-section button:hover {
    background: var(--tlv-accent-dark) !important;
}

/* ===========================================================================
   The footer
   =========================================================================== */

.site-footer {
    background: var(--tlv-primary-deep) !important;
    color: rgba(255, 255, 255, 0.78) !important;
    /*
       The gold rule along the top of the footer is already drawn by the
       theme as a rule that fades from the gold to the deep gold. A
       second flat rule on the edge made eight pixels of gold where one
       was meant, so this one is taken away.
    */
}

.site-footer h3,
.site-footer .footer-widget h3 {
    font-family: var(--tlv-font-reading) !important;
    color: #fff !important;
    font-size: 1.05rem !important;
    letter-spacing: -0.01em;
}

.site-footer a {
    color: rgba(255, 255, 255, 0.78) !important;
    text-decoration: none;
    transition: color var(--tlv-move) var(--tlv-ease);
}

.site-footer a:hover {
    color: var(--tlv-accent) !important;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: rgba(255, 255, 255, 0.6) !important;
}

/* ===========================================================================
   The list of the events and the archive
   =========================================================================== */

.tlv-event-card,
.tlv-calendar-day,
.tlv-events-toolbar,
.tlv-filter-bar {
    border-radius: var(--tlv-radius) !important;
    border-color: var(--tlv-line) !important;
}

.tlv-event-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--tlv-shadow) !important;
}

.tlv-event-card__title,
.tlv-event-card__title a {
    font-family: var(--tlv-font-reading) !important;
    color: var(--tlv-primary) !important;
}

/* ===========================================================================
   The small screen
   =========================================================================== */

@media (max-width: 900px) {
    .hero-section { min-height: 78vh; }

    .hero-content {
        padding: var(--tlv-space-8) var(--tlv-space-4) !important;
    }

    .hero-buttons { width: 100%; }

    .hero-btn {
        flex: 1 1 auto;
        justify-content: center;
    }

    .countdown-item { min-width: 62px !important; }
}

@media (max-width: 640px) {
    .hero-title { font-size: 2.35rem !important; }

    .hero-subtitle { font-size: 1rem !important; }

    .hero-btn { width: 100%; }

    .events-section,
    .tlv-testimonies-section,
    .sermons-section,
    .app-section,
    .newsletter-section {
        padding: 48px 0 !important;
    }

    .events-section h2,
    .sermons-header h2,
    .tlv-testimonies-section h2,
    .app-section h2 {
        margin-bottom: var(--tlv-space-6) !important;
    }

    .site-header nav ul { gap: 0; }
}

/* ===========================================================================
   A visitor who has asked for less movement gets a site that does not
   move.
   =========================================================================== */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    .event-card:hover,
    .sermon-card:hover,
    .action-card:hover,
    .hero-btn:hover,
    .header-cta a:hover,
    .tlv-submit:hover {
        transform: none;
    }
}

/* ===========================================================================
   The service that is featured
   The gold belongs to the button and to the line under the name of a
   section. Around a card it is a shout, and it shouts on every page.
   =========================================================================== */

.featured-event {
    border: 1px solid var(--tlv-line) !important;
    border-radius: var(--tlv-radius-lg) !important;
    padding: clamp(24px, 3vw, 40px) !important;
    background: var(--tlv-paper) !important;
    box-shadow: var(--tlv-shadow) !important;
}

.featured-event h3 {
    font-family: var(--tlv-font-reading) !important;
    font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem) !important;
    color: var(--tlv-primary) !important;
    margin-bottom: var(--tlv-space-3) !important;
}

.featured-event p {
    color: var(--tlv-ink-soft) !important;
    line-height: 1.7;
}

.featured-event .event-image,
.events-container .event-image {
    background:
        linear-gradient(160deg, rgba(30, 58, 138, 0.96), rgba(15, 27, 77, 0.96)) !important;
    border-radius: var(--tlv-radius-lg) !important;
    color: rgba(255, 255, 255, 0.72) !important;
    font-family: var(--tlv-font-reading);
    font-size: 1.1rem !important;
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 260px;
}

/* The name of the service, the day and the place. */
.event-label {
    color: var(--tlv-accent-dark) !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.event-name {
    font-family: var(--tlv-font-reading) !important;
    color: var(--tlv-primary) !important;
}

.previous-event {
    opacity: 1 !important;
}

.previous-event .event-name,
.previous-event h3,
.previous-event h4 {
    color: var(--tlv-muted) !important;
}

/* ===========================================================================
   The width of the page
   Every page of the site is read in the same measure. The page builder
   sometimes asks for a wider measure; the site keeps its own.
   =========================================================================== */

.events-section .container,
.sermons-section .container,
.tlv-testimonies-section .container,
.app-section .container,
.preview-media-section .container,
.newsletter-section .container {
    max-width: var(--tlv-wrap) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--tlv-space-5) !important;
    padding-right: var(--tlv-space-5) !important;
}

/* The service that is featured and its picture sit next to each other,
   each the height of its own words. */
.events-container {
    display: grid !important;
    grid-template-columns: 1.05fr 0.95fr !important;
    gap: var(--tlv-space-7) !important;
    align-items: center !important;
    margin-bottom: var(--tlv-space-8) !important;
}

.upcoming-events-grid,
.previous-events-section,
.sermons-grid,
.testimonies-grid,
.action-cards-grid {
    gap: var(--tlv-space-5) !important;
}

/* ===========================================================================
   The clock of the coming service
   On the dark ground of the hero the clock is made of glass. On the
   white ground of a card it is made of the light blue of the ministry.
   =========================================================================== */

.featured-event .countdown-item,
.event-card .countdown-item {
    background: var(--tlv-primary-softer) !important;
    border: 1px solid var(--tlv-primary-soft) !important;
    border-radius: var(--tlv-radius) !important;
    min-width: 68px !important;
}

.featured-event .countdown-number,
.event-card .countdown-number {
    color: var(--tlv-primary) !important;
    font-size: 1.45rem !important;
}

.featured-event .countdown-label,
.event-card .countdown-label {
    color: var(--tlv-muted) !important;
}

.hero-section .countdown-item {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.24) !important;
}

.hero-section .countdown-number { color: #fff !important; }
.hero-section .countdown-label { color: rgba(255, 255, 255, 0.72) !important; }

/* ===========================================================================
   The guard
   ---------------------------------------------------------------------------
   The pages of the ministry are built by several hands: the templates of
   the theme, the sections of the page builder and the older styles of the
   plugin. This block is the last word, so that the same navy, the same gold
   and the same measure are read on every page.

   1. The dark grounds use one gradient, with no blue stop in the middle.
   2. The words on a dark ground are white; the gold is a fill, not a word.
   3. The gold on white is the deep gold, which passes.
   4. Every page keeps the same rhythm and the same width.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. The dark grounds
   The blue stop (#3b82f6) made white words read at 3.7:1. The navy gradient
   below keeps the depth and carries white words at 8.7:1 or better.
   --------------------------------------------------------------------------- */

#primary .testimony-hero,
#primary .contact-quick-section,
#primary .info-cards-section,
#primary .about-page-hero,
#primary .about-page-cta,
#primary .privacy-hero-section,
#primary .terms-hero-section,
#primary .donation-header,
#primary .leader-quote,
#primary .leader-experience-badge,
#primary .sermon-watch-btn,
#primary .preview-watch-full-btn,
#primary .events-hero,
#primary .contact-hero-section,
#primary .visit-hero-section {
    background-image: var(--tlv-hero-gradient) !important;
}

/* The gradients the page builder writes into the style attribute. */
#primary [style*="linear-gradient" i][style*="1e3a8a" i],
#primary [style*="linear-gradient" i][style*="3b82f6" i],
#primary [style*="linear-gradient" i][style*="30, 58, 138" i],
#primary [style*="linear-gradient" i][style*="59, 130, 246" i] {
    background-image: var(--tlv-hero-gradient) !important;
}

/* The old orange of the scripture band is not in the palette. It becomes
   the navy of the ministry, and the gold stays on its border. */
#primary [style*="f4a261" i],
#primary [style*="e76f51" i] {
    background-image: linear-gradient(135deg, var(--tlv-primary) 0%, var(--tlv-primary-dark) 100%) !important;
    color: var(--tlv-on-dark) !important;
    border-left-color: var(--tlv-accent) !important;
}

/* The wash of blue behind the app section is the navy of the ministry.
   The wash is painted as a background, and not as a circle that hangs
   outside the section, so that the section keeps its own measure. */
#primary .app-section {
    background-color: var(--tlv-primary-dark) !important;
    background-image:
        radial-gradient(38% 55% at 82% 10%, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 70%),
        var(--tlv-hero-gradient) !important;
}

/* The old circle of the theme is not used any more. */
#primary .app-section::before {
    display: none !important;
}

/* ---------------------------------------------------------------------------
   2. The words on the dark grounds
   --------------------------------------------------------------------------- */

#primary .testimony-hero :is(h1, h2, h3, h4, p, blockquote),
#primary .contact-quick-section :is(h2, h3, p),
#primary .info-cards-section :is(h2, h3, p),
#primary .about-page-hero :is(h1, h2, h3, p, cite, blockquote),
#primary .privacy-hero-section :is(h1, h2, p),
#primary .terms-hero-section :is(h1, h2, p),
#primary .prayer-request-form .form-header :is(h2, h3, p),
#primary .prayer-privacy :is(h2, h3, h4, p, li),
#primary .leader-quote :is(blockquote, cite),
#primary .leader-experience-badge :is(span, .number, .label),
#primary .events-hero :is(h1, h2, h3, p) {
    color: var(--tlv-on-dark) !important;
}

/* The quiet words on a dark ground are still white enough to read. */
#primary .testimony-hero .hero-subtitle,
#primary .testimony-hero .hero-verse,
#primary .about-page-hero .hero-subtitle,
#primary .privacy-hero-section p,
#primary .terms-hero-section p,
#primary .prayer-request-form .form-header p {
    color: var(--tlv-on-dark-muted) !important;
}

/* The words written inside a gradient of the page builder. */
#primary [style*="linear-gradient" i][style*="1e3a8a" i] :is(h1, h2, h3, h4, h5, h6, p, li, blockquote, cite),
#primary [style*="linear-gradient" i][style*="3b82f6" i] :is(h1, h2, h3, h4, h5, h6, p, li, blockquote, cite) {
    color: var(--tlv-on-dark) !important;
}

/* A link on a dark ground keeps the gold, in its lighter tone. */
#primary .contact-quick-card a,
#primary .info-card a {
    color: var(--tlv-accent-soft) !important;
}

#primary .contact-quick-card a:hover,
#primary .info-card a:hover {
    color: var(--tlv-on-dark) !important;
}

/* The mark of the verse in the hero is gold, not orange. */
#primary .testimony-hero .hero-verse {
    border-left-color: var(--tlv-accent) !important;
}

/*
   The disc of a sign is the navy of the ministry, so the sign itself
   is written in white. (The disc used to be gold, and the sign was
   then navy. The disc is navy now, and the sign follows it.)
*/
#primary .contact-quick-icon,
#primary .info-card-icon {
    color: var(--tlv-on-dark) !important;
}

#primary .contact-quick-icon .tlv-icon,
#primary .info-card-icon .tlv-icon {
    fill: none;
    stroke: currentColor;
}

/*
   The header of the visit form sits on the light ground of the page,
   like the header of the steps that follow it. The name is the navy of
   the ministry, and the line under it is the ordinary ink. It was a
   band of navy in the middle of a white page, and the words in it
   could not be read against the band.
*/
#primary .visit-form-section .form-header h2 {
    color: var(--tlv-primary) !important;
}

#primary .visit-form-section .form-header p {
    color: var(--tlv-ink-soft) !important;
}

/*
   The numbers of the founder are words, not decoration. A word that is
   cut out of a gradient is hard to read and says nothing, so the number
   is the navy of the ministry.
*/
#primary .leader-stat .number {
    background-image: none !important;
    -webkit-text-fill-color: currentColor !important;
    color: var(--tlv-primary) !important;
}

/* The header of the live chat is navy, so its name is white. */
#primary .chat-header :is(h1, h2, h3, h4, p, span) {
    color: var(--tlv-on-dark) !important;
}

#primary .program-time {
    color: var(--tlv-gold-text) !important;
}

/* ---------------------------------------------------------------------------
   3. The gold as a word, and the gold as a ground
   The gold is a ground colour: with navy words on it, it reads at 6.9:1.
   As a word on white it becomes the deep gold, which reads at 5:1.
   --------------------------------------------------------------------------- */

#primary .tlv-testimony-card__cta,
#primary .sermon-speaker,
#primary .tlv-guide__time,
#primary .tlv-testimony-answer--gold h2 {
    color: var(--tlv-gold-text) !important;
}

/* The gold that carries white words now carries the navy. */
body .footer-newsletter-btn,
#primary .live-indicator,
#primary .chat-widget__send,
#primary #chat-send {
    color: var(--tlv-on-gold) !important;
}

/* The blue eyebrow of the founder is the navy of the ministry. */
#primary .about-leader-content .title,
#primary p.title {
    color: var(--tlv-primary) !important;
}

/* The quiet greys that were too light for their ground. */
#primary .countdown-label,
#primary .tlv-countdown__label,
#primary .sermon-key-verse span,
#primary .tlv-filter-tab,
#primary .tlv-filter-bar__count,
#primary .tlv-btn--save,
#primary .tlv-event-card__status--ended,
#primary .optional,
#primary .form-group .optional,
#primary [style*="color: #6c757d" i],
#primary [style*="color:#6c757d" i] {
    color: var(--tlv-ink-soft) !important;
}

/* The chips of the events keep a dark ground and a light word. */
#primary .tlv-event-card__status--upcoming {
    background: var(--tlv-primary) !important;
    color: var(--tlv-on-dark) !important;
}

#primary .tlv-event-card__status--ended {
    background: var(--tlv-line) !important;
}

#primary [style*="color: #d97706" i],
#primary [style*="color:#d97706" i] {
    color: var(--tlv-gold-text) !important;
}

/* The active tab of the events is a solid navy, so the white word reads. */
#primary .tlv-filter-tab.active,
#primary .tlv-filter-tab[aria-selected="true"] {
    background: var(--tlv-primary) !important;
    border-color: var(--tlv-primary) !important;
    color: var(--tlv-on-dark) !important;
}

/* ---------------------------------------------------------------------------
   4. The rhythm and the width of the page
   Two layers of padding met between the sections and left dead bands of up
   to 340px. The section keeps one rhythm, and the page keeps one measure.
   --------------------------------------------------------------------------- */

#primary > .tlv-part > section:not(.hero-section):not(.testimony-hero):not(.contact-hero-section):not(.prayer-request-hero):not(.about-page-hero):not(.privacy-hero-section):not(.terms-hero-section):not(.donation-header) {
    padding-top: clamp(32px, 3vw, 48px) !important;
    padding-bottom: clamp(32px, 3vw, 48px) !important;
}

/*
   The content of a section does not carry a second rhythm.
   The first thing of a section began 50 or 60 pixels below the edge of
   the section, and the last thing ended 50 or 60 pixels above it. The
   two bands met in the middle of the page and left dead air between
   the sections. Now the content begins and ends where the section
   begins and ends, and the padding of the section is the only space.
   The space inside the section, between the heading and the content,
   is left alone.
*/
#primary > .tlv-part > section:not(.hero-section):not(.testimony-hero):not(.contact-hero-section):not(.prayer-request-hero):not(.about-page-hero):not(.privacy-hero-section):not(.terms-hero-section):not(.donation-header) > *:first-child {
    margin-top: 0 !important;
}

#primary > .tlv-part > section:not(.hero-section):not(.testimony-hero):not(.contact-hero-section):not(.prayer-request-hero):not(.about-page-hero):not(.privacy-hero-section):not(.terms-hero-section):not(.donation-header) > *:last-child {
    margin-bottom: 0 !important;
}

/*
   The content of a section sits inside a container, and the container
   was the last thing the rule above could reach. The last block inside
   the container therefore kept the margin of 50 or 60 pixels that the
   older styles gave it, and the dead band between two sections was
   half as big again as the rhythm of the page.
*/
#primary > .tlv-part > section:not(.hero-section):not(.testimony-hero):not(.contact-hero-section):not(.prayer-request-hero):not(.about-page-hero):not(.privacy-hero-section):not(.terms-hero-section):not(.donation-header) > .container > *:first-child {
    margin-top: 0 !important;
}

#primary > .tlv-part > section:not(.hero-section):not(.testimony-hero):not(.contact-hero-section):not(.prayer-request-hero):not(.about-page-hero):not(.privacy-hero-section):not(.terms-hero-section):not(.donation-header) > .container > *:last-child {
    margin-bottom: 0 !important;
}

/* The heading of the sermons began 60 pixels below the edge of its
   block, on top of the padding of the section. */
#primary .sermons-header {
    padding-top: 0 !important;
}

#primary .contact-info-container,
#primary .contact-info-grid,
#primary .tlv-events-container {
    max-width: var(--tlv-wrap) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

#primary .donation-header .container {
    max-width: var(--tlv-wrap) !important;
}

/* The first words of an archive page are not pressed against the header. */
#primary.tlv-events-archive,
#primary.tlv-testimonies-archive {
    padding-top: clamp(24px, 3vw, 40px);
}

/* ---------------------------------------------------------------------------
   5. The palette, everywhere
   The pages that were painted with the blue of the old brand, the orange
   of the first band and the red of the mark of a required field are
   brought back to the navy and the gold of the ministry.
   --------------------------------------------------------------------------- */

/* The name of the ministry in the header is a link, and a link that no
   one coloured keeps the blue of the browser. */
.custom-logo-link {
    color: var(--tlv-primary) !important;
}

/* The page of the sermons and the page of the events. */
#primary .pagination-current-page,
#primary .event-status.upcoming,
#primary .sermon-archive-btn.primary:hover {
    background: var(--tlv-primary) !important;
    border-color: var(--tlv-primary) !important;
    color: var(--tlv-on-dark) !important;
}

#primary .filter-select:focus,
#primary .filter-input:focus {
    border-color: var(--tlv-primary) !important;
    box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.15) !important;
}

#primary .sermon-archive-title a:hover {
    background: transparent !important;
    color: var(--tlv-primary) !important;
}

/* The mark of a required field. */
#primary .tlv-label .required,
#primary .required {
    color: var(--tlv-danger) !important;
}

/* The small disc that says that the ministry is on air. */
#primary .online-indicator {
    background: var(--tlv-success) !important;
}

/* The welcome of the chat. */
#primary .chat-welcome {
    background: rgba(30, 58, 138, 0.08) !important;
    border: 1px solid rgba(30, 58, 138, 0.18) !important;
    border-left-color: rgba(30, 58, 138, 0.18) !important;
}

/* The days of the calendar that hold a service. */
#primary .tlv-calendar-day--has-events {
    background: linear-gradient(135deg, rgba(30, 58, 138, 0.1), rgba(30, 64, 175, 0.1)) !important;
}

#primary .tlv-calendar-day--has-events:hover {
    background: linear-gradient(135deg, rgba(30, 58, 138, 0.15), rgba(30, 64, 175, 0.15)) !important;
    border-color: var(--tlv-primary) !important;
}

/* The discs of the contact details and the marks of the values of the
   about page are the navy of the ministry. */
#primary .contact-info-icon,
#primary .ministry-badge-icon,
#primary .value-icon {
    background: var(--tlv-hero-gradient) !important;
}

/*
   The numbers of the steps of the visit and the pin of the map are the
   gold of the ministry. The gold is a ground, so the number that sits
   on it is the navy: six words out of nine.
*/
#primary .process-step-number,
#primary .contact-map-marker-icon,
#primary .map-marker-pin {
    background-image: linear-gradient(135deg, var(--tlv-accent) 0%, var(--tlv-accent-dark) 100%) !important;
    color: var(--tlv-on-gold) !important;
}

#primary .contact-map-marker-icon span,
#primary .map-marker-pin span {
    color: var(--tlv-on-gold) !important;
}

/* ---------------------------------------------------------------------------
   6. The size of the targets
   The finger is wider than the mouse, so every control that stands on its
   own is at least forty-four pixels tall. A link that stands inside a
   sentence keeps the height of the line, as the standard asks.
   --------------------------------------------------------------------------- */

/* The link that opens the whole testimony of a card. */
#primary .tlv-testimony-card__cta {
    min-height: 44px !important;
    padding-block: 10px !important;
}

/*
   The name of a service is a link of its own. The padding gives it the
   height of a finger and the negative margin gives the card back the
   space, so that the card does not grow because of it.
*/
#primary .tlv-event-card__title-link {
    display: inline-block !important;
    padding-block: 11px !important;
    margin-block: -11px !important;
}

/* The tabs that sort the events. */
#primary .tlv-filter-tab {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 44px !important;
}

/* The button of the letter of the footer. */
body .footer-newsletter-btn {
    min-height: 44px !important;
}

/* The telephone, the letter and the address on the pages of contact and of visit. */
#primary .contact-info-details p a,
#primary .info-card p a,
#primary .tlv-share-card__link,
#primary .tlv-event-card__link {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 44px !important;
}

/* The buttons of the events and of the sermons. */
#primary .event-btn {
    min-height: 44px !important;
}

/*
   The footer of the phone was rebuilt for the small screen, and there
   every link is a target of its own.
*/
@media (max-width: 900px) {
    .footer-widget a,
    .footer-bottom-content a {
        display: inline-flex !important;
        align-items: center !important;
        min-height: 44px !important;
    }
}

/* ---------------------------------------------------------------------------
   7. The last line of a paragraph
   A paragraph that ends with one small word leaves a hole in the column
   and reads like the writing stopped early. The browser is asked to keep
   the last line from being that short, and a heading is asked to spread
   its own lines evenly.
   --------------------------------------------------------------------------- */

body .site-footer p,
body .footer-widget p {
    text-wrap: pretty;
}

#primary .previous-event h4 {
    text-wrap: balance;
}

#primary .previous-event p {
    text-wrap: pretty;
}

#primary .visit-hero-content p,
#primary .tlv-form-description,
#primary .tlv-why-card p,
#primary .tlv-what-card p,
#primary .tlv-share-card p,
#primary .tlv-faq-card p {
    text-wrap: pretty;
}

#primary .leader-stat .number,
#primary h1,
#primary h2,
#primary h3 {
    text-wrap: balance;
}

/* ---------------------------------------------------------------------------
   8. The card of the prayer request on the small screen
   The card is a wide one. Its own padding, three times over, would
   leave the fields of the form narrower than a phone needs, so the
   padding of the card is smaller there.
   --------------------------------------------------------------------------- */

@media (max-width: 640px) {
    #primary .prayer-request-form .form-header {
        padding: 28px 20px !important;
    }

    #primary .prayer-request-form .form-header h2 {
        font-size: 1.8rem !important;
    }

    #primary .prayer-request-form .cf7-form-wrapper {
        padding: 24px 16px !important;
    }

    #primary .prayer-request-form .form-footer {
        padding: 28px 16px !important;
    }
}

/* ---------------------------------------------------------------------------
   9. The small screen
   On a phone the words of the site must not be written against the
   very edge of the screen, and the name of a section must have more
   air above it than below it.
   --------------------------------------------------------------------------- */

@media (max-width: 640px) {
    /* The words under the name of the ministry, and under the name of
       the founder, were written against the very edge of the screen. */
    #primary .about-page-ministry .section-header,
    #primary .about-page-leader .section-header {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* The line at the foot of the page, with the year and the name of
       the ministry, was written against the very edge of the screen. */
    .site-footer .footer-bottom-content {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* The name of a section has more air above it than below it, so
       that it reads as the name of what follows and not as a subtitle
       of what came before. */
    #primary .visit-visa-section h2,
    #primary .process-section h2 {
        margin-bottom: 24px;
    }
}

/* ---------------------------------------------------------------------------
   10. The last line of a paragraph, the second time
   The words that end with one small word leave a hole in the column.
   The browser is asked to keep the last line from being that short.
   --------------------------------------------------------------------------- */

#primary .sermons-header p,
#primary .archive-header p,
#primary .value-item p,
#primary .about-page-leader .section-header p,
#primary .about-page-ministry .section-header p,
#primary .visit-visa-card p,
#primary .process-step p,
#primary .testimonial-card p,
#primary .chat-welcome p,
#primary .step-item p,
#primary .partnership-program-lead,
#primary .partnership-level-description,
#primary .partnership-level-benefits li,
#primary .partnership-level-features li,
#primary .partnership-steps p,
#primary .terms-section p,
#primary .terms-section li,
#primary .privacy-section p,
#primary .privacy-section li,
#primary .privacy-contact-info p,
#primary .terms-disclaimer p {
    text-wrap: pretty;
}

/* ---------------------------------------------------------------------------
   11. The clock of the coming service, on a ground of amber
   On the navy of the hero the clock is made of glass, and its numbers
   are white. On the archive of the events the clock stands upon a
   ground of amber: the numbers there are the navy of the ministry, the
   words are the ordinary ink, and the clock is not a box inside the
   box of amber.
   --------------------------------------------------------------------------- */

.countdown-section .countdown-item {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
    min-width: 68px !important;
    padding: 10px 14px !important;
}

.countdown-section .countdown-number {
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    color: var(--tlv-primary) !important;
}

.countdown-section .countdown-text {
    color: var(--tlv-ink-soft) !important;
}

/* ---------------------------------------------------------------------------
   12. The word of welcome in the chat
   The word is not written against the very edge of the panel of the
   chat.
   --------------------------------------------------------------------------- */

#primary .chat-welcome {
    padding: 14px 16px 18px;
}