/* ==========================================================
   Public site — overrides for the theme
   ----------------------------------------------------------
   Loaded after style.css and responsive.css, so anything here
   wins over them. Put overrides here, never in the theme files.
   ========================================================== */


/* ----------------------------------------------------------
   FOOTER: certification logos
   ----------------------------------------------------------
   The theme's .cause-inner was built for a thumbnail beside a
   caption and fixes its two cells at 25% and 65%. Used for four
   logos that squashes the first of every row, and no width on
   the <img> can beat a 25%-wide parent. These make the cells
   equal instead.
   ---------------------------------------------------------- */
/* Nudge the "Certified By" heading only — the marks below it keep their own
   position. Only from the breakpoint where the footer actually has columns
   (col-sm-6); below that it stacks full width and the indent would knock the
   heading out of line with the other three columns. */
@media (min-width: 576px) {
    .footer-item .footer-causes h3 {
        margin-left: 25px;
    }
}

.footer-item .footer-causes .cause-inner ul {
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.footer-item .footer-causes .cause-inner ul li,
.footer-item .footer-causes .cause-inner ul li:nth-child(1),
.footer-item .footer-causes .cause-inner ul li:nth-child(2) {
    flex: 1 1 0;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    display: flex;
    justify-content: center;
}

.footer-item .footer-causes .cause-inner ul li img {
    display: block;
}


/* ----------------------------------------------------------
   NAVBAR: logo size
   ----------------------------------------------------------
   The theme sets no size, so the logo rendered at its own
   150x50. The mobile bar is left alone — responsive.css caps
   it at 115px, which suits the narrower space.
   ---------------------------------------------------------- */
.navbar-light .navbar-brand img,
.navbar-brand .logo-one,
.navbar-brand .logo-two {
    width: 100px !important;
    max-width: 100px !important;
    height: auto !important;
}


/* ----------------------------------------------------------
   NAVBAR: Donate button
   ----------------------------------------------------------
   With nine menu items competing for the bar, the heart icon
   wrapped onto a second line. inline-flex keeps the label and
   icon together; the gap replaces the theme's margin-left so
   the spacing is not applied twice.
   ---------------------------------------------------------- */
.side-nav a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.side-nav a i {
    margin-left: 0;
    line-height: 1;
}


/* ----------------------------------------------------------
   CARD GRIDS: equal height
   ----------------------------------------------------------
   The theme's .blog-item is a plain block, so a row of cards is
   only ever as tall as each card's own content — different
   image ratios, heading lengths and copy lengths all show up as
   a ragged row.

   Stretching each card to fill its cell and fixing the picture
   band settles it. Cards appear in two layouts, so each needs
   its own way in:

       #gallery-slider-schoolreform   an owl carousel
       .blog-area                     a Bootstrap row
   ---------------------------------------------------------- */

/* Both layouts: fixed picture band, body fills the rest of the card */
#gallery-slider-schoolreform .blog-item,
.blog-area .blog-item {
    display: flex;
    flex-direction: column;
    width: 100%;
}

#gallery-slider-schoolreform .blog-item .top img,
.blog-area .blog-item .top a img {
    display: block;
    width: 100%;
    height: 230px;
    object-fit: cover;
}

#gallery-slider-schoolreform .blog-item .bottom,
.blog-area .blog-item .bottom {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

/* Two lines reserved for every heading, so a short title does not start its
   paragraph higher than a long one. 2.8em = two lines of the theme's 22px/1.4 */
#gallery-slider-schoolreform .blog-item .bottom h3,
.blog-area .blog-item .bottom h3 {
    min-height: 2.8em;
}

/* The description takes up the slack, which lines up every card's footer */
#gallery-slider-schoolreform .blog-item .bottom p,
.blog-area .blog-item .bottom p {
    flex: 1 1 auto;
}

/* Owl floats its items at their own height. A flex stage stretches all three
   visible cards to the tallest. flex:0 0 auto keeps the inline width owl sets. */
#gallery-slider-schoolreform .owl-stage {
    display: flex;
    align-items: stretch;
}

#gallery-slider-schoolreform .owl-item {
    float: none;
    display: flex;
    flex: 0 0 auto;
}

/* Column, not row. Some slides hold a single .blog-item, others hold a
   picture with a caption block under it — as a row those two sat side by
   side, the caption squeezed to a third of the card with its text spilling
   out behind the photograph. */
#gallery-slider-schoolreform .gallery-item {
    display: flex;
    flex-direction: column;
    width: 100%;
}

#gallery-slider-schoolreform .blog-item {
    margin-bottom: 0;
}

/* The theme rounds the corner only for .top a img; these cards have no link
   around the image, so it is restated here */
#gallery-slider-schoolreform .blog-item .top img {
    border-radius: 30px 30px 0 30px;
}

/* News titles come from the database and run to any length, so they are held
   to the two lines reserved above. The description is already cut to 150
   characters and the whole card links to the full story. */
.blog-area .row > [class*="col-"] {
    display: flex;
}

.blog-area .blog-item .bottom h3 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* ----------------------------------------------------------
   EQUAL-HEIGHT CARD ROWS
   ----------------------------------------------------------
   Add .equal-cards to any .row and every card in it becomes the
   same height, however much text each one holds. The theme's
   cards (.benefit-item, .dream-item, .counter-item) are plain
   blocks, so without this a row is as ragged as its content.

       <div class="row equal-cards"> ... </div>

   Where a card needs its button or label to sit on the floor of
   the card so they line up across the row, add .card-stack to
   the card and .card-foot to that element:

       <div class="benefit-item card-stack">
           <h3>...</h3>
           <p>...</p>
           <p class="btn card-foot">Reform</p>
       </div>
   ---------------------------------------------------------- */
.equal-cards > [class*="col-"] {
    display: flex;
}

.equal-cards > [class*="col-"] > * {
    width: 100%;
}

.card-stack {
    display: flex;
    flex-direction: column;
}

/* margin-top pushes it to the floor of the card. align-self stops the flex
   row stretching it edge to edge — a .btn is inline-block normally, so
   without this it turns into a full-width bar instead of a small button. */
.card-stack .card-foot {
    margin-top: auto;
    align-self: center;
}


/* ----------------------------------------------------------
   COUNTER ICONS
   ----------------------------------------------------------
   The theme sizes .counter-item i as a 45px font icon. Where a
   PNG is used instead it sits inside the same <i> and renders at
   its natural size, so a row mixing the two came out uneven.
   ---------------------------------------------------------- */
.counter-item i img {
    width: 45px;
    height: 45px;
    object-fit: contain;
    vertical-align: top;
}


/* ----------------------------------------------------------
   THE ORANGE BUTTON
   ----------------------------------------------------------
   The theme wrote .common-btn for <a> tags only: it sets no
   border, so on a <button> the browser's own 2px outset border
   shows through, and it sets no transition, so the hover colour
   and the 5px lift both snap instead of easing.

   Both forms on the site submit with a <button>, which is why
   it shows up there and nowhere else.
   ---------------------------------------------------------- */
.common-btn {
    border: 0;
    cursor: pointer;
    transition: .3s all ease;
}

.common-btn:focus {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(255, 96, 21, 0.35);
}


/* ----------------------------------------------------------
   CAREERS CALL TO ACTION
   ----------------------------------------------------------
   Goes with partials/careers-band.blade.php, which closes the
   leadership page and all five Policy Achievements pages. It is
   here rather than in a page stylesheet because six pages share
   it and the partial carries no stylesheet of its own.

   The copy is pulled up over the artwork. Every old page wrote
   the band out twice, once per breakpoint, the two copies
   differing only by this offset.
   ---------------------------------------------------------- */
.careers-title {
    margin-top: -204px;
}

@media only screen and (max-width: 767px) {
    .careers-title {
        margin-top: -180px;
    }
}


/* ----------------------------------------------------------
   ROUND ICON BADGES
   ----------------------------------------------------------
   The theme's <i> badge is an 80px circle that centres a font
   glyph with line-height and text-align. A picture in the same
   badge ignores both: it sits on the text baseline at whatever
   size the file happens to be — on advocacy one 512px icon
   broke straight out of its circle while the two beside it
   showed at 32px.

   Flex centres it properly, and one size keeps a row even. A
   page that needs a different size says so in its own CSS with
   a more specific selector.
   ---------------------------------------------------------- */
.benefit-item > i,
.benefit-item-index > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.benefit-item > i > img,
.benefit-item-index > i > img {
    width: 45px;
    height: 45px;
    object-fit: contain;
}


/* ----------------------------------------------------------
   LOADING SCREEN
   ----------------------------------------------------------
   The theme gives .loader its full-screen white backdrop and
   custom.js fades it out on window load. This centres the
   turning-book animation in it.
   ---------------------------------------------------------- */
.loader {
    display: flex;
    align-items: center;
    justify-content: center;

    /* Failsafe. custom.js is what normally removes this, and that file
       aborts on the first missing plugin — so without this one script
       error would leave every visitor behind a blank white screen with no
       way past it. Six seconds, whatever happens. */
    animation: zt-loader-failsafe 0s linear 6s forwards;
}

.loader-book {
    display: block;
    width: 200px;
    height: auto;
}

@keyframes zt-loader-failsafe {
    to { opacity: 0; visibility: hidden; }
}


/* ----------------------------------------------------------
   DARK-MODE SWITCH
   ----------------------------------------------------------
   custom.js unconditionally appends a dark-mode toggle to the
   end of <body>:

       $('body').append("<div class='switch-box'>…</div>");

   It is a template feature the theme ships turned off — its own
   theme-dark.css opens with `.switch-box { display: none }`.
   That stylesheet is not loaded here (nothing else on the site
   needs it), so the toggle had no styles at all and sat after
   the footer as a full-width 36px block in the page flow.

   Hiding it here matches what the theme intends and what
   zindagi-trust renders, without loading 8.7 KB of dark-theme
   rules that nothing can switch on. To actually offer dark
   mode, load assets/css/theme-dark.css in layout/head.blade.php
   instead of this rule and give .switch-box a display value.
   ---------------------------------------------------------- */
.switch-box {
    display: none;
}

/* ----------------------------------------------------------
   reCAPTCHA  (partials/recaptcha.blade.php)

   Google renders the checkbox in an iframe of a fixed 304px, which is
   wider than a narrow phone column. It is centred here and scaled down
   below 340px so it can never push the page sideways.
   ---------------------------------------------------------- */
.recaptcha-box {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.recaptcha-box .invalid-feedback {
    display: block;
    font-size: 14px;
    color: #dc3545;
    margin-top: 8px;
    text-align: center;
}

@media only screen and (max-width: 340px) {
    .recaptcha-box .g-recaptcha {
        transform: scale(0.88);
        transform-origin: center top;
    }
}

/* ----------------------------------------------------------
   TOP BAR — "Follow Us" icons

   The theme centres these marks with `line-height: 30px` on the <i>,
   which only works for an icon font. Two of the five (X and TikTok)
   have no icofont glyph and are inline SVG instead, and a replaced
   element sits on the text baseline rather than filling the line box.
   With the <li>s laid out as inline-block, every item aligned on its
   own baseline and the circles stepped down the row.

   Laying the row out with flex centres each mark inside its circle the
   same way, whichever kind of mark it is.
   ---------------------------------------------------------- */
.header-area .right ul {
    display: inline-flex;
    align-items: center;
}

.header-area .right ul li {
    display: flex;
    align-items: center;
}

.header-area .right ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    /* the circle must not be squashed by the flex row */
    flex: 0 0 30px;
}

.header-area .right ul li a svg {
    flex: none;
}

/* The footer renders the same partial through the same inline-block
   markup, so its row of marks stepped down in exactly the same way. */
.footer-item .footer-logo ul {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding-left: 0;
}

.footer-item .footer-logo ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
}

.footer-item .footer-logo ul li a svg {
    flex: none;
}


/* ==========================================================
   THE SITE-WIDE POPUP

   Not scoped to #fd-page: the banner appears on every page, and only the
   link inside it points here.
   ========================================================== */
#fundraising-popup .modal-dialog { max-width: 340px; }

#fundraising-popup .modal-content {
    border: 0;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}

#fundraising-popup .modal-body { padding: 0; position: relative; }

#fundraising-popup .modal-body img { display: block; width: 100%; height: auto; }

#fundraising-popup .btn-close-banner {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    background-color: rgba(0, 0, 0, .55);
    border-radius: 50%;
    padding: 8px;
    opacity: 1;
}

#fundraising-popup .btn-close-banner:hover { background-color: rgba(0, 0, 0, .8); }

#fundraising-popup .btn-book-now {
    display: block;
    width: 100%;
    padding: 13px;
    background: #F26522;
    color: #fff;
    text-align: center;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    transition: background .2s;
}

#fundraising-popup .btn-book-now:hover { background: #D9540F; color: #fff; }

/* ==========================================================
   BACK TO FUNDRAISING
   ==========================================================
   The circle pinned to the left of the window on the three fundraiser pages
   that are not the landing page — the listing, one fundraiser, and the create
   form.

   It lives in this file rather than in fundraisers.css because those three
   pages do not load the same stylesheets: the create form loads
   fundraiser-create.css instead, which is why the button was unstyled there.
   One copy here, loaded everywhere, beats two copies that can drift apart. It
   styles nothing unless a page includes fundraisers/_back.blade.php.
   ========================================================== */

.fr-back {
    /* Pinned to the left edge, halfway down the window, so it is in the same
       place however far the reader has scrolled. z-index 4 is the theme's
       own for the scroll-to-top circle in the opposite corner — the same
       layer, well under the navigation and any dialog. */
    position: fixed;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
    z-index: 4;

    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 1px solid #e0e0e6;
    border-radius: 50%;
    background-color: #fff;
    color: #302c51;
    box-shadow: 0 6px 18px rgba(48, 44, 81, .12);
    transition: .3s all ease;
}

.fr-back i {
    font-size: 22px;
    line-height: 1;
    transition: .3s transform ease;
}

.fr-back:hover,
.fr-back:focus {
    border-color: #302c51;
    background-color: #302c51;
    color: #fff;
}

.fr-back:hover i {
    transform: translateX(-3px);
}

/* A phone has no room beside the content, so it tucks into the corner and
   shrinks — still in reach of a thumb, still out of the way of the words. */
@media only screen and (max-width: 767px) {
    .fr-back {
        left: 10px;
        width: 42px;
        height: 42px;
    }

    .fr-back i {
        font-size: 19px;
    }
}


/* ==========================================================
   COOKIE NOTICE
   ==========================================================
   spatie/laravel-cookie-consent ships the dialog unstyled. These are
   zindagitrust.org's own rules for it, so the bar reads the same on both
   sites — dark strip across the foot, orange button.
   ========================================================== */

.js-cookie-consent.cookie-consent {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    background-color: #333;
    color: #fff;
    opacity: .95;
    box-shadow: 0 0 10px rgba(0, 0, 0, .5);
}

.cookie-consent__message {
    font-size: 15px;
    line-height: 1.5;
    margin: 0;
}

.js-cookie-consent-agree.cookie-consent__agree {
    padding: 9px 22px;
    border: 0;
    border-radius: 5px;
    background-color: #ff6015;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: .3s background ease;
}

.js-cookie-consent-agree.cookie-consent__agree:hover {
    background-color: #302c51;
}

/* The back-to-fundraising circle sits at the left edge, halfway down; the
   notice is across the foot. Nothing to move, but the go-top control is in
   the corner the notice covers, so it steps up while the notice is there. */
.js-cookie-consent.cookie-consent ~ .go-top,
body:has(.js-cookie-consent.cookie-consent) .go-top {
    bottom: 80px;
}


/* ==========================================================
   MOBILE MENU: REACHING A PARENT'S OWN LINK
   ==========================================================
   meanmenu lays its [+] over the whole row —

       .mean-container .mean-nav ul li a.mean-expand { width: 100%;
       position: absolute; right: 0; top: 0; z-index: 2 }

   — so every tap on a parent hits the expander and opens the submenu,
   whatever the parent itself points at. On this site one parent has a
   destination of its own: Careers, which goes to the recruitment portal.
   On a phone it could not be opened at all.

   The [+] is now a square at the right of the row, leaving the rest of
   the row to the link. Parents that point nowhere (href="#") still open
   their submenu when tapped — assets/js/mobile-nav.js does that part.
   ========================================================== */

.mean-container .mean-nav ul li a.mean-expand {
    width: 56px;
    padding: 12px 0 !important;
    text-align: center;
}


/* ==========================================================
   BACK TO FUNDRAISING
   ==========================================================
   The circle pinned to the left of the window on the three fundraiser pages
   that are not the landing page — the listing, one fundraiser, and the
   create form.

   It lives in this file rather than in fundraisers.css because those three
   pages do not load the same stylesheets: the create form loads
   fundraiser-create.css instead. One copy here, loaded everywhere, beats
   two copies that can drift apart. It styles nothing unless a page includes
   fundraisers/_back.blade.php.
   ========================================================== */

.fr-back {
    /* Pinned to the left edge, halfway down the window, so it is in the same
       place however far the reader has scrolled. z-index 4 is the theme's own
       for the scroll-to-top circle in the opposite corner — the same layer,
       well under the navigation and any dialog. */
    position: fixed;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
    z-index: 4;

    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 1px solid #e0e0e6;
    border-radius: 50%;
    background-color: #fff;
    color: #302c51;
    box-shadow: 0 6px 18px rgba(48, 44, 81, .12);
    transition: .3s all ease;
}

.fr-back i {
    font-size: 22px;
    line-height: 1;
    transition: .3s transform ease;
}

.fr-back:hover,
.fr-back:focus {
    border-color: #302c51;
    background-color: #302c51;
    color: #fff;
}

.fr-back:hover i {
    transform: translateX(-3px);
}

/* A phone has no room beside the content, so it tucks in closer and shrinks —
   still in reach of a thumb, still out of the way of the words. */
@media only screen and (max-width: 767px) {
    .fr-back {
        left: 10px;
        width: 42px;
        height: 42px;
    }

    .fr-back i {
        font-size: 19px;
    }
}


/* ----------------------------------------------------------
   THE TOP BAR'S FUNDRAISE BUTTON
   ----------------------------------------------------------
   The size and shape it has always had, the brand's flat orange, and a
   quiet hover: a shade darker, a 2px lift and a soft glow, easing over
   0.45s instead of Bootstrap's 0.15s snap.

   The topbar is one shared partial, so this is here rather than in the
   home page's stylesheet — every page gets the same button.
   ---------------------------------------------------------- */

.header-area .left .btn-orange {
    background-image: none;
    background-color: #ff6015;
    box-shadow: 0 6px 14px -6px rgba(255, 96, 21, 0.45);

    transition:
        background-color 0.45s cubic-bezier(0.33, 1, 0.68, 1),
        transform 0.45s cubic-bezier(0.33, 1, 0.68, 1),
        box-shadow 0.45s cubic-bezier(0.33, 1, 0.68, 1);
}

.header-area .left .btn-orange:hover,
.header-area .left .btn-orange:focus {
    /* The brand purple fills it, the orange moves to the border, and the
       glow underneath stays orange so the button still reads as the one
       warm control on the bar. */
    color: #fff !important;
    background-color: #302c51;
    border-color: #ff6015;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px -8px rgba(255, 96, 21, 0.75);
}