/* ==========================================================
   Volunteer page and sign-up form
   ----------------------------------------------------------
   Loaded by volunteer.blade.php and volunteer-form.blade.php
   via @push('styles'), so it lands after site.css.
   ========================================================== */


/* ----------------------------------------------------------
   WHY CHOOSE ZINDAGI TRUST
   ----------------------------------------------------------
   An accordion on the left with a matching photograph on the
   right. custom.js hides three of the four pictures on load and
   swaps them as entries are clicked, so all four occupy the
   same slot rather than running down a column.
   ---------------------------------------------------------- */
.faq-area .accordion {
    margin-bottom: 0;
}

/* The theme spaces accordion entries with a margin on the list, and each
   entry here is its own one-item list, so the gap goes between lists. */
.faq-area .accordion + .accordion {
    margin-top: 15px;
}

/* The accordion runs straight into the button below it, so it is given room */
.faq-area .accordion + .common-btn {
    margin-top: 30px;
}

.volunteer-photo {
    display: block;
    width: 100%;
    height: 420px;
    object-fit: cover;
    border-radius: 10px;
}

@media only screen and (max-width: 767px) {
    .volunteer-photo {
        height: 260px;
        margin-top: 25px;
    }
}


/* ----------------------------------------------------------
   OPPORTUNITIES FOR VOLUNTEERS
   ----------------------------------------------------------
   The old page put width and height inline on all six icons.
   ---------------------------------------------------------- */
.role-icon {
    display: block;
    width: 64px;
    height: 64px;
    object-fit: contain;
    margin: 0 auto 16px;
}


/* ----------------------------------------------------------
   TESTIMONIALS
   ----------------------------------------------------------
   Four cards, each showing the opening of its quote with the
   rest behind a Read More button, the way zindagi-trust has
   them. .equal-cards levels the row so the four buttons sit on
   one line however long the visible part happens to be.
   ---------------------------------------------------------- */
.testimonial-card {
    height: 100%;
}

.testimonial-card .blog-item {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin-bottom: 30px;
}

.testimonial-card .top {
    flex: 0 0 auto;
}

.testimonial-card .top img {
    display: block;
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.testimonial-card .bottom {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 20px;
}

.testimonial-card .bottom h3 {
    font-size: 19px;
    margin-bottom: 8px;
}

.testimonial-card .bottom p {
    flex: 1 1 auto;
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 14px;
}

/* Hidden until Read More is pressed. The old page did this with an inline
   <style> block naming #text1 to #text4 one by one. */
.testimonial-more {
    display: none;
}

/* margin-top pins the row of buttons to the floor of the cards */
.testimonial-card .btn-container {
    margin-top: auto;
    text-align: center;
}

.testimonial-card .btn-primary {
    background-color: #ff6015;
    border-color: #ff6015;
    color: #fff;
}

/* The theme sets .btn:hover { color: #333 } for every button on the site.
   Left alone, that paints dark grey text on the dark navy hover colour and
   the label disappears, so the colour is restated here. */
.testimonial-card .btn-primary:hover,
.testimonial-card .btn-primary:focus,
.testimonial-card .btn-primary:active {
    background-color: #302c51;
    border-color: #302c51;
    color: #fff;
    box-shadow: none;
}


/* ----------------------------------------------------------
   THE SIGN-UP FORM
   ----------------------------------------------------------
   The same fields as the payment page and the create-a-fundraiser
   form: 46px boxes, one border colour, an orange focus ring, red
   for what is wrong. Written out here because donate.css scopes
   its copy to .pay-panel — keep the three in step.

   The theme styles .form-group for its newsletter box, putting an
   icon in a label positioned over the field. This form's labels
   are for screen readers only, so that is overridden throughout.
   ---------------------------------------------------------- */
.volunteer-form .form-group {
    margin-bottom: 16px;
}

.volunteer-form .form-control,
.volunteer-form .form-select {
    width: 100%;
    height: 46px;
    padding: 10px 14px;
    border: 1px solid #e0e0e6;
    border-radius: 5px;
    background-color: #fff;
    color: #302c51;
    font-size: 15px;
    transition: .2s border-color ease;
}

.volunteer-form .form-select {
    padding-right: 2.25rem;
}

.volunteer-form .form-control::placeholder {
    color: #9a9aa5;
}

.volunteer-form .form-control:focus,
.volunteer-form .form-select:focus {
    border-color: #ff6015;
    box-shadow: 0 0 0 3px rgba(255, 96, 21, .15);
    outline: 0;
}

/* A textarea is as tall as its rows, not 46px. */
.volunteer-form textarea.form-control {
    height: auto;
    min-height: 120px;
    line-height: 1.7;
}

.volunteer-form small.text-muted {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.5;
}

/* ---------------------------------------------------------
   WHAT IS MISSING, IN RED
   --------------------------------------------------------- */
.volunteer-form .form-control.is-invalid {
    border-color: #dc3545;
    /* Bootstrap paints a warning icon inside the field, which collides with
       the text on a box this narrow. The border and the message say it. */
    background-image: none;
    padding-right: 14px;
}

/* The :not()s match Bootstrap's own selector for an invalid select; without
   them this loses on specificity and the icon lands on top of the chevron. */
.volunteer-form .form-select.is-invalid:not([multiple]):not([size]) {
    border-color: #dc3545;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
    padding-right: 2.25rem;
}

.volunteer-form .field-error {
    display: block;
    margin-top: 5px;
    font-size: 13px;
    line-height: 1.4;
    color: #dc3545;
}

/* Left there deliberately for robots to fill in — see the view */
.volunteer-form .website-field {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}


/* ---------------------------------------------------------
   PREFERRED VOLUNTEER AREAS
   ---------------------------------------------------------
   A dropdown of checkboxes. The button is dressed as a field so the
   row reads as two fields side by side, and the panel under it is the
   width of the button rather than the width of the longest option.
   --------------------------------------------------------- */
.volunteer-form .vf-areas {
    width: 100%;
}

.volunteer-form .vf-areas-toggle {
    width: 100%;
    text-align: left;
    color: #9a9aa5;
    cursor: pointer;
    /* A button centres its label and clips it; this keeps a long list of
       chosen areas on one line, cut with an ellipsis rather than wrapped. */
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Once something is ticked the button is an answer, not a prompt. */
.volunteer-form .vf-areas.has-choices .vf-areas-toggle {
    color: #302c51;
}

.volunteer-form .vf-areas-toggle:focus {
    border-color: #ff6015;
    box-shadow: 0 0 0 3px rgba(255, 96, 21, .15);
    outline: 0;
}

.volunteer-form .vf-areas-menu {
    width: 100%;
    max-height: 260px;
    overflow-y: auto;
    padding: 6px;
    border: 1px solid #e0e0e6;
    border-radius: 5px;
    box-shadow: 0 10px 30px rgba(48, 44, 81, .12);
}

.volunteer-form .vf-area-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 0;
    padding: 9px 10px;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 400;
    color: #302c51;
    cursor: pointer;
    transition: .2s background ease;
}

.volunteer-form .vf-area-item:hover {
    background-color: #f6f6fb;
}

/* The theme hides every checkbox inside a label — `label input { position:
   absolute; left: -9999px }` — because it draws its own out of a pseudo
   element on the label's span. These want the real one: it is a list you tick,
   and the browser's own box is the thing everybody recognises. */
.volunteer-form .vf-area-item input[type="checkbox"] {
    position: static;
    left: auto;
    flex: none;
    width: 17px;
    height: 17px;
    margin: 0;
    accent-color: #ff6015;
    cursor: pointer;
}

/* Three things the theme does to a `label > span`, all of them for its own
   radio-pill widget and none of them wanted here: it draws a circle in front
   of the text, paints the span navy on hover, and paints it navy with white
   text once the input beside it is checked — which put a dark block behind
   the words of every ticked line. The row highlights instead. */
.volunteer-form .vf-area-item span {
    display: inline;
    padding: 0;
    background-color: transparent;
    color: inherit;
}

.volunteer-form .vf-area-item span::before {
    display: none;
}

.volunteer-form .vf-area-item:hover span,
.volunteer-form .vf-area-item input:checked + span {
    background-color: transparent;
    color: #302c51;
}

/* What a ticked line looks like: the row, faintly, and the label in the
   site's navy rather than reversed out of a block. */
.volunteer-form .vf-area-item:has(input:checked) {
    background-color: #fff3ec;
    font-weight: 600;
}


/* ==========================================================
   THEMED PAGE ONLY
   ----------------------------------------------------------
   Applies only while the page carries the premium theme
   (body.home-premium, set by the @section in the Blade file).
   Drop that one line and the page returns to how it was.
   ========================================================== */


/* ----------------------------------------------------------
   THE ORANGE RULES UNDER THE HEADINGS
   ----------------------------------------------------------
   The theme turns an inline orange divider into a short
   gradient bar, but only when it is a direct child of
   .section-title. This page uses plain containers for most of
   its headings, so three of its four dividers sat outside one
   and stayed as 2px lines across the full 1296px container.

   Same declarations as the theme's own, so every divider on
   the page matches; the theme's rule is the more specific, so
   the one inside a section title keeps its own.
   ---------------------------------------------------------- */
body.home-premium main div[style*="border-bottom: 2px solid #ff6015"] {
    border-bottom: 0 !important;
    width: 72px;
    height: 5px;
    margin: 20px auto 22px !important;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent), #ffab74);
}


/* ----------------------------------------------------------
   SPACE BETWEEN THE ROWS OF CARDS
   ----------------------------------------------------------
   .equal-cards matches the cards' heights but adds no vertical
   spacing, so the second row sat directly on the first. The
   margin matches the 24px Bootstrap already puts between the
   columns, so the gaps match in both directions.
   ---------------------------------------------------------- */
body.home-premium .equal-cards > [class*="col-"] {
    margin-bottom: 24px;
}


/* ----------------------------------------------------------
   ROOM ABOVE "READY TO MAKE A DIFFERENCE?"
   ----------------------------------------------------------
   The theme pulls .careers-title up by 304px, so that the copy
   of a careers band sits above its photograph rather than on
   it, and pushes the band itself down by 100px to pay for it.
   That push is on .careers-band, the class the shared partial
   carries. This page writes its band out by hand as a plain
   .page-title-area, so it took the pull and none of the push:
   the heading ended 31px ABOVE the foot of the testimonials,
   riding up into the section before it.

   138px puts it about 59px clear, the spacing the rest of the
   site keeps between a section and the next heading. 90px of
   that is the gap itself and 48px pays for margin collapse:
   the testimonials container carries mb-5, and an adjoining
   48px bottom margin and this top margin collapse to the
   larger of the two rather than adding up. Heading,
   button and artwork all move together, so the Volunteer Now
   button keeps the clearance it has from the photograph.

   :has(.careers-title) picks out this band alone -- the page
   hero at the top is a .page-title-area too.
   ---------------------------------------------------------- */
body.home-premium .page-title-area:has(.careers-title) {
    margin-top: 138px;
}


/* ----------------------------------------------------------
   THE TESTIMONIAL READ MORE BUTTONS
   ----------------------------------------------------------
   These four are the only buttons on the themed site still
   wearing Bootstrap: a flat orange box, 3.2px corners, regular
   weight and no shadow, sitting in cards that carry the
   theme's radius and depth.

   Same declarations as the theme gives .common-btn: a pill on
   the brand gradient with a light sweep held off to one side,
   which travels across the face on hover while the button
   lifts 3px and its glow deepens. Both layers are backgrounds
   rather than a pseudo-element, because a pseudo-element over
   the face of the button paints out the label.

   background-color must be cleared: Bootstrap's .btn-primary
   sets a solid colour that would otherwise sit over the
   gradient. The hover colour is restated because the theme
   sets .btn:hover { color: #333 } for every button on the
   site, which would grey out the label.
   ---------------------------------------------------------- */
body.home-premium .testimonial-card .btn-primary {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 26px;
    border: 0;
    border-radius: 999px;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.01em;
    box-shadow: 0 10px 26px -10px rgba(255, 96, 21, 0.75);
    overflow: hidden;
    background-color: transparent;
    background-image:
        linear-gradient(120deg, transparent 36%, rgba(255, 255, 255, 0.30) 50%, transparent 64%),
        linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
    background-size: 220% 100%, 100% 100%;
    background-position: 160% 0, 0 0;
    background-repeat: no-repeat;
    transition:
        background-position 1.125s var(--ease),
        transform 0.525s var(--ease),
        box-shadow 0.525s var(--ease);
}

body.home-premium .testimonial-card .btn-primary:hover,
body.home-premium .testimonial-card .btn-primary:focus,
body.home-premium .testimonial-card .btn-primary:active {
    background-color: transparent;
    border-color: transparent;
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 18px 38px -12px rgba(255, 96, 21, 0.8);
    background-position: -60% 0, 0 0;
}


/* ----------------------------------------------------------
   THE SIGN-UP PAGE'S HEADINGS, UNCAPPED
   ----------------------------------------------------------
   The theme measures a .section-title at 760px, which suits a
   lead paragraph under a heading. "Volunteer Program at
   Zindagi Trust" broke to two lines inside that measure and
   holds one line without it.

   Both pages load this file, and the only .section-title on
   /volunteer is the careers band, which the theme uncaps
   already -- so this reaches the two headings on the form and
   nothing else.
   ---------------------------------------------------------- */
body.home-premium .section-title {
    max-width: none;
}


/* ----------------------------------------------------------
   THE FORM HEADING IS THE SUBORDINATE OF THE TWO
   ----------------------------------------------------------
   "Volunteer Program at Zindagi Trust" and "Volunteer Sign-Up
   Form" were set identically -- same size, same weight, each
   with its own orange rule under it -- so the page opened
   with two titles of equal rank and no sense of which was
   which.

   The second is the form's label, not a second page title: it
   comes down to 30px, keeps the ink and the centring, and
   loses its rule, which the page heading above it already
   carries. Its own margin tightens too, so the label sits
   with the form it introduces rather than floating between
   the two.
   ---------------------------------------------------------- */
body.home-premium .section-title.form-title {
    margin-top: 10px;
    margin-bottom: 34px;
}

body.home-premium .section-title.form-title h2 {
    font-size: 30px;
    margin-bottom: 10px;
}