/* Custom styles for the whole site */
body {
    background-color: #fff !important;
    color: #000;
    /*padding-bottom: 50px;*/ /* Adjusted for footer height */
    /*padding-top: 10px;*/ /* Adjusted for header height */
}

/* Custom styles for the fixed header */
.fixed-header {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #d11600;
    color: #fff;
    padding: 10px;
    text-align: left; /* Align text to left */
    z-index: 1060; /* Ensure header is above other content */
}

    .fixed-header a {
        color: #fff; /* Make header links white */
        text-decoration: none;
    }
/* Custom styles for the back arrow */
.back-arrow {
    float: left; /* Align arrow to left */
    margin-right: 10px; /* Add space between arrow and text */
}
/* Custom styles for link cards */
.link-card {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 15px 20px;
    margin-bottom: 10px;
    color: black;
    background-color: #f5f5f5; /* Light background color for button look */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add shadow for depth */
    transition: all 0.3s ease; /* Smooth transition for hover effects */
    cursor: pointer; /* Make cursor a pointer to indicate clickability */
}

    .link-card:hover {
        background-color: #e0e0e0; /* Slightly darker background on hover */
        color: #007bff; /* Change text color on hover */
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Increase shadow on hover */
        transform: translateY(-2px); /* Slight upward movement on hover */
    }

    .link-card:active {
        background-color: #dcdcdc; /* Even darker background when clicked */
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); /* Reduced shadow to simulate press */
        transform: translateY(0px); /* Return to original position on click */
    }

    .link-card .arrow {
        float: right;
        color: #fff; /* Make right arrow white */
    }
/* The notification dot on a nav entry. Same red, same size and same spacing as .SFHDot in
   safefromharm.css, which is the dot the Safe From Harm screens draw beside a row wanting a mark -
   a member should recognise the one from the other. Declared here rather than reused from there
   because safefromharm.css is linked per page inside that module and is not present on the layout
   that draws the nav.

   A dot rather than a count, for the reason .SFHDot gives: how many marks a form wants is not a
   number a member can act on differently. */
.NavNotificationDot {
    color: #dc3545;
    font-size: 0.5rem;
    vertical-align: middle;
    margin-right: 0.7rem;
    margin-left: -1.2rem;
}

/* A notification dot overlaid on the top right corner of an icon, the way the mobile footer's
   with-notification artwork carries one. Used on the NavigationHome tiles, where the icon is the
   thing being pointed at and a dot beside the label read as punctuation.

   Two wrappers, because they do two different jobs. The outer one carries setIconWidth so the icon
   still reserves the same width every other tile's does - the label cannot shift on one card alone.
   The inner one hugs the glyph, and is what the dot is positioned against, so that "top right" means
   the corner of the icon rather than the corner of the reserved space. */
.IconNotifyBox {
    /* setIconWidth's width only applies to a block-level box, and a span is not one. This is the
       whole of what this class adds - the width itself stays in setIconWidth, so the two cannot
       drift apart. */
    display: inline-block;
}

.IconNotify {
    position: relative;
    display: inline-block;

    /* The two numbers to adjust, and both are nudges INWARD from the icon's own top right corner:
       larger X moves the dot left, larger Y moves it down. At 0,0 the dot would be centred exactly
       on the corner of the glyph's box.

       0,0 is the wrong answer though, and by a long way: a glyph does not fill its box, and this one
       slopes away from that corner. Measured for the hard hat at fa-2x - a 48px box whose ink starts
       6px down at the crown and falls to 21px by the time it reaches the right edge - so a dot on
       the box corner sits in empty space above the brim with none of it touching the hat. These
       values put its centre at 38,12, which leaves it about half over the hat and half clear,
       straddling the upper right of the dome the way the footer's own artwork straddles the bars.

       Both are per-icon by nature. Another glyph slopes differently, and the right way to set them
       for one is by eye. */
    --icon-dot-x: 0.6rem;
    --icon-dot-y: 0.75rem;

    /* How big the dot is, ring included - the ring is part of the dot's width, not extra around
       it, so this is the whole overlay and the two positioning numbers above keep their meaning. */
    --icon-dot-size: 1rem;

    /* The ring between the dot and whatever is under it, in the colour of the card it sits on.
       Against the card it is invisible; over the glyph it separates the red from the ink, so the
       dot reads as cut into the icon rather than painted on top of it.

       Follows .link-card's own background above. A dot on a card of another colour wants this set
       alongside that colour rather than left to match the wrong one. */
    --icon-dot-ring: 2px;
    --icon-dot-ring-color: #f5f5f5;
}

    .IconNotifyDot {
        position: absolute;
        top: var(--icon-dot-y);
        right: var(--icon-dot-x);
        width: var(--icon-dot-size);
        height: var(--icon-dot-size);
        background-color: #dc3545;
        border-radius: 50%;

        border: var(--icon-dot-ring) solid var(--icon-dot-ring-color);

        /* So the ring eats into the size above rather than adding to it. Bootstrap already sets
           this globally; stated here because the two numbers only mean what they say while it
           holds, and a dot whose ring grew it would drift off the corner it was measured onto. */
        box-sizing: border-box;

        /* Shifted by half its own size so top/right address the dot's CENTRE rather than its edge.
           That is what lets 0,0 mean "on the corner" and keeps the two numbers above meaning the
           same thing if the dot's size changes. */
        transform: translate(50%, -50%);

        /* A drawn circle rather than a fa-circle glyph, unlike the inline dots above. An overlay
           wants its size and centre stated exactly, and a glyph brings font metrics and its own
           baseline to argue with. */
    }

/* ── Notification count and dialog, mobile ───────────────────────────────────
   The desktop bell is the theme's own control and needs no styling here. These are
   for the short red header, where a bell would have been a third competing icon:
   the count is inverted out of the header instead, red on a white disc. */
.cc-notify-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    /* Sized off the text so the disc grows with a longer number rather than clipping it, with a
       min to keep a single digit round rather than oval. */
    min-width: 1.6rem;
    height: 1.6rem;
    padding: 0 0.35rem;

    border: 0;
    border-radius: 999px;
    background-color: #fff;
    /* The header's own red, so the number reads as cut out of the bar rather than printed on it. */
    color: #d11600;

    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;

    /* Bootstrap's mr-4. Set here rather than as a utility class so it cannot be lost if the markup
       is reshuffled, and because it is doing more than spacing: the sign-out link next to it picks
       up the theme's generic a:hover, and this is what keeps a thumb aimed at the count from
       landing on it. */
    margin-right: 1.5rem;
}

/* The mobile header as a row, which is what centres the count in it.

   It was three boxes in an inline line, two of them carrying float-right - a class defined in none
   of the stylesheets this layout loads, Bootstrap 5 having renamed it to .float-end. So nothing
   floated, the count sat on the text baseline rather than the bar's centre, and it ended up
   alongside the sign-out link close enough to catch its hover. */
.cc-mobile-header {
    align-items: center;
}

/* The display itself has to fight .mobile-only, which carries display: block !important below the
   breakpoint and display: none !important above it.

   Two classes rather than one so this wins on specificity instead of on order - .mobile-only's rule
   sits further down this file and would otherwise beat an equally specific rule here. And inside the
   breakpoint, because unconditionally it would beat the display: none as well and put this bar on
   desktop. */
@media (max-width: 699px) {
    .mobile-header.cc-mobile-header {
        display: flex !important;
    }
}

    /* Takes the slack, so the count and the sign-out link sit against the right edge. min-width
       lets a long brand shrink rather than push them off. */
    .cc-mobile-header .cc-mobile-brand {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* html body a:hover in the theme is (0,1,3) and beats .fixed-header a at (0,1,1), so a hover
       anywhere on this bar turns a white link purple and underlines it. On a touch screen that
       state is left behind by a tap and has nothing to clear it. */
    .cc-mobile-header a:hover,
    .cc-mobile-header a:focus {
        color: #fff;
        text-decoration: none;
    }

/* Hung below the header rather than centred, inset from both edges, and never more than 60% of the
   viewport tall. */
.cc-notify-modal {
    /* The height of the mobile header the dialog hangs beneath. Not readable from CSS, so it is
       stated here as the one number to correct if that bar's padding or type size changes. */
    --cc-mobile-header-height: 3.65rem;

    /* The gap left at the sides, and the same gap left under the header. */
    --cc-notify-modal-inset: 1rem;
}

.cc-notify-modal .modal-dialog {
    /* Top-anchored: the header, then one inset, then the dialog - so the space above it matches the
       space either side of it. max-width because Bootstrap pins the dialog to 500px from its sm
       breakpoint up, which lands inside the range this header is still mobile in and would leave
       far more than an inset at the sides. */
    margin: calc(var(--cc-mobile-header-height) + var(--cc-notify-modal-inset))
            var(--cc-notify-modal-inset)
            var(--cc-notify-modal-inset);
    max-width: none;
}

.cc-notify-modal .modal-content {
    max-height: 60vh;
    /* So the list's corners are clipped by the panel's radius as it scrolls under the header. */
    overflow: hidden;
}

.cc-notify-modal .cc-notify-modal-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* The notification's own heading. <strong> lands on the theme's boldest weight, which shouted next
   to the body line under it; 600 keeps it clearly the title without the emphasis. Scoped to a class
   rather than restyling <strong>, which is used across the site. */
.cc-notify-title {
    font-weight: 600;
}

/* No stacking fix needed for the fixed header and footer, which sit at 1060: this theme raises its
   modal and backdrop to 2050 and 2040 rather than leaving them at Bootstrap's 1050 and 1040, so a
   dialog and its scrim already cover both. Measured rather than assumed - the arithmetic on
   Bootstrap's own defaults says otherwise. */

/* Custom styles for the footer */
.footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #3a3633;
    color: #fff;
    padding: 10px 0;
    text-align: center;
    z-index: 1060; /* Ensure footer is above other content */

    /* The one number to adjust the menu icon by eye. Its artwork had to be scaled down inside its
       viewBox to make room for the notification dot, so the icon reads smaller than the font
       glyphs beside it at the same nominal size; this scales it back up. A starting value, not a
       measured one. */
    --footer-bars-scale: 1.55;
}

    /* Sized from the element, because both bars SVGs are width/height 100% over a 512 viewBox and
       so have no intrinsic size of their own. 20px is the .footer a font-size the fas fa-bars
       glyph rendered at, which is what keeps this the same size as its three neighbours before
       the scale is applied.

       vertical-align because an img sits on the baseline differently from the <i> it replaced. */
    .footer .footer-bars-icon {
        height: calc(20px * var(--footer-bars-scale));
        width: auto;
        vertical-align: middle;
        padding-bottom: .2rem;
    }

    .footer a {
        color: #fff;
        text-decoration: none;
        margin: 0 10px;
        font-size: 20px !important; /* Adjust font size for icons */
    }

    .footer .fa-lg {
        font-size: 24px; /* Custom size for larger icons */
    }

    .footer .fa-smaller {
        font-size: 16px; /* Custom size for smaller icons */
    }
/* Custom styles for the group header */
.group-header {
    font-size: 20px;
    margin-top: 60px; /* Adjusted margin-top */
}

.fa-lg {
    font-size: 20px !important;
}

.setIconWidth {
    width: 60px;
}

.RedHeading {
    color: #e4002b;
    padding-top: 0px;
    font-size: 22px;
}

.RedText {
    color: #e4002b;
    padding-top: 0px;
    font-size: 16px;
}

hr {
    height: 1px;
    background-color: lightgrey;
    border: none;
}

.SoftInput {
    border-color: #dddfe2 !important;
    color: #464b53 !important;
}

.SoftHeader {
    font-weight: 400;
    color: #333;
}

.GreyText {
    color: #333;
}

.SignInMobile {
    display: none;
}

.SignInDesktop {
    display: flex;
}


@media (max-width: 1000px) {
    .SignInMobile {
        display: flex;
    }

    .SignInDesktop {
        display: none;
    }

}

/* Hide by default */
.mobile-only {
    display: none !important;
}

.desktop-only {
    display: block !important;
}

.container {
    margin-left: 0px;
}

/* Show mobile layout under 800px */
@media (max-width: 699px) {
    .mobile-only {
        display: block !important;
    }

    .desktop-only {
        display: none !important;
    }

    body {
        padding: 0px;
        padding-bottom: 50px;  /*Adjusted for footer height */
        padding-top: 50px; /* Adjusted for header height */
    }

    .container {
        margin-left: auto;
    }
}

/* ── External header (public prayer request pages) ─────────────────────────
   Overrides the theme's .mobile-header for _LayoutMobileFirstExternal. The brand
   lockup sits hard left with padding equal on the top, bottom and left, and the
   sign-in affordance sits at the far right. */
.cc-ext-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px !important;
}

.cc-ext-brand {
    display: flex;
    align-items: center;
    gap: 9px;
    text-decoration: none;
    /* Pushes the login affordance to the far right without needing a spacer element. */
    margin-right: auto;
}

.cc-ext-brand:hover,
.cc-ext-brand:focus {
    text-decoration: none;
}

.cc-ext-shield {
    width: 25px;
    height: auto;
    display: block;
}

.cc-ext-wordmark {
    color: #fff;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.01em;
    white-space: nowrap;
    line-height: 1;
}

.cc-ext-user,
.cc-ext-login {
    color: rgba(255, 255, 255, 0.92);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    flex: 0 0 auto;
}

.cc-ext-user {
    /* A name carries more weight than a generic action, so it sits a step up. */
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 45%;
}

.cc-ext-login {
    background: transparent;
    border: none;
    padding: 6px 2px;
    min-height: 32px;
    cursor: pointer;
}

.cc-ext-login:hover,
.cc-ext-login:focus-visible {
    color: #fff;
    text-decoration: underline;
}

/* The theme's page-content adds gutters this layout does not want. The element and
   its id stay because other scripts key off js-page-content. */
.cc-ext-flush {
    padding: 0 !important;
    margin: 0 !important;
}

/* ── Sign-in prompt modal ─────────────────────────────────────────────────
   Standalone so it works on every page using this layout, not just the feed. */
.cc-ext-modal-scrim {
    position: fixed;
    inset: 0;
    background: rgba(31, 27, 24, 0.42);
    z-index: 1060;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: ccExtFadeIn 0.22s ease both;
}

.cc-ext-modal {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 1px 3px rgba(31, 27, 24, 0.06), 0 8px 22px rgba(31, 27, 24, 0.05);
    padding: 22px;
    width: 100%;
    max-width: 380px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-family: Figtree, "Segoe UI", system-ui, sans-serif;
    color: #1F1B18;
    animation: ccExtPopIn 0.3s cubic-bezier(0.2, 0.9, 0.25, 1) both;
}

.cc-ext-modal-title {
    margin: 0;
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 20px;
    line-height: 1.25;
}

.cc-ext-modal-body {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: #6E6A64;
}

.cc-ext-modal-actions {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}

.cc-ext-modal-actions button {
    flex: 1;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    padding: 13px;
    min-height: 48px;
    border-radius: 10px;
    cursor: pointer;
}

.cc-ext-modal-cancel {
    border: 1px solid #E2DACD;
    background: #FBF8F3;
    color: #6E6A64;
}

.cc-ext-modal-confirm {
    border: 1px solid #CE0E00;
    background: #CE0E00;
    color: #fff;
}

@keyframes ccExtFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes ccExtPopIn {
    from {
        opacity: 0;
        transform: translateY(26px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {

    .cc-ext-modal-scrim,
    .cc-ext-modal {
        animation: none;
    }
}

/* The count on the header bell. The theme's .badge.badge-icon sets padding to "0 3px" and centres
   the digit on line-height alone, which leaves it sitting a touch high inside the pill. Two pixels
   under it is the whole of the correction; the horizontal padding is the theme's and is left alone.

   Here rather than in the theme files - there are fifteen of them, one per skin, and the rule is
   the same whichever is on. _LayoutMobileFirst is the layout that draws the bell and the layout
   that links this. */
.page-header .badge.badge-icon {
    padding-bottom: 2px;
}