/* ==========================================================
   Advocacy page only
   ----------------------------------------------------------
   Loaded by resources/views/advocacy.blade.php via
   @push('styles'), so it lands after site.css.
   ========================================================== */


/* ----------------------------------------------------------
   FULL-WIDTH CHALKBOARD BAND
   ----------------------------------------------------------
   The old page dropped a bare <img> between two sections, which
   rendered at its own size with a gap beneath it.
   ---------------------------------------------------------- */
.advocacy-band img {
    display: block;
    width: 100%;
    height: auto;
}


/* ----------------------------------------------------------
   CURRENT GOALS
   ----------------------------------------------------------
   Four icons of different proportions, given one box each so
   the row reads evenly. The old page set width and height to
   100px on every one, which stretched the wider ones.
   ---------------------------------------------------------- */
.goal-icon img {
    display: block;
    width: 100px;
    height: 100px;
    object-fit: contain;
    margin: 0 auto;
}


/* ----------------------------------------------------------
   IN THE NEWS
   ----------------------------------------------------------
   The masthead sits in the theme's .sub-span badge. The logos
   come from six different papers at wildly different sizes —
   a 400x95 wordmark next to a 16x16 favicon — so each gets the
   same box with object-fit to scale it inside.
   ---------------------------------------------------------- */
.dream-item .sub-span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 40px;
    padding: 4px 8px;
}

.dream-item .sub-span img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}


/* ----------------------------------------------------------
   VOLUNTEER PANEL
   ----------------------------------------------------------
   The copy is pulled up over the artwork. The old page carried
   two copies of this block, one per breakpoint, differing only
   in this offset.
   ---------------------------------------------------------- */
.volunteer-title {
    margin-top: -250px;
}

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


/* ==========================================================
   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 RULE OUTSIDE A SECTION TITLE
   ----------------------------------------------------------
   The theme turns an inline orange divider into a short
   gradient bar, but only when it is a direct child of
   .section-title. The first of the five on this page sits
   outside one, so it stayed a 2px line across the full
   1272px 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 four inside a section title are
   untouched.
   ---------------------------------------------------------- */
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 makes every column a flex item so the cards
   match heights, but it adds no vertical spacing: the second
   row sat 1px and 0px below 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;
}


/* ----------------------------------------------------------
   THE POLICY ACCORDION — DARK PANELS UNDER WHITE TEXT
   ----------------------------------------------------------
   This accordion lies over a photograph and its open panels
   carry Bootstrap's .text-white. The theme already solves that
   on the home page, but its rules are scoped to
   .intro-section .faq-area, which this page has no wrapper
   for — so these panels got the light card instead and the
   white body text sat on white: the copy under "Implementation
   of Teacher Performance Evaluation in Sindh" could not be
   read at all.

   Dark glass gives the white text something to sit on while
   the photograph still reads through, matching the home page.
   ---------------------------------------------------------- */
body.home-premium .faq-area .accordion > li {
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(20, 17, 43, 0.62);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px -14px rgba(0, 0, 0, 0.6);
}

body.home-premium .faq-area .accordion > li:hover {
    border-color: rgba(255, 255, 255, 0.38);
}

/* style.css gives every closed link background-color:#fff. Left alone that
   is a white bar under white title text, which hides the headings too. */
body.home-premium .faq-area .accordion > li > a {
    color: #fff;
    background-color: transparent;
}

body.home-premium .faq-area .accordion > li > p,
body.home-premium .faq-area .accordion > li > p b {
    color: rgba(255, 255, 255, 0.92);
}

body.home-premium .faq-area .accordion > li > a i {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}


/* ----------------------------------------------------------
   CURRENT GOALS — THE ICONS, CENTRED
   ----------------------------------------------------------
   The theme lays .benefit-item out as a flex column with
   align-items: flex-start, then re-centres the children it
   knows about — the icon element, the heading, the paragraph,
   the button. These icons are wrapped in a .goal-icon div,
   which is not on that list, so all four sat hard against the
   left edge: 1px of space on the left against 467px on the
   right, despite the div's own text-center.
   ---------------------------------------------------------- */
body.home-premium .benefit-item .goal-icon {
    align-self: stretch;
    width: 100%;
}


/* ----------------------------------------------------------
   PRESS CARDS — THE LINK AND LOGO ON ONE LINE
   ----------------------------------------------------------
   .equal-cards levels the card heights, but the headline and
   summary inside run to different lengths, so "Click to read
   more" and the masthead below it floated at whatever height
   the text happened to end — 160px down in some cards, 188px
   in others.

   The card becomes a column and the link is pushed to the
   floor of it, so the link and the logo line up across the row
   however long the copy above them is.
   ---------------------------------------------------------- */
/* ----------------------------------------------------------
   THE PRESS CARDS, IN THE THEME'S LANGUAGE
   ----------------------------------------------------------
   The seven cards under "In The News" kept what style.css
   gives a .dream-item: a flat grey 20px blur, no border at
   all, and an asymmetric 30px 30px 0 30px radius whose hover
   drops to 0 -- so pointing at one squared its corners and
   did nothing else. The lift it was meant to have could not
   happen either, because data-aos sat on the card and the
   theme pins transform on anything it has revealed; that is
   on the column now.

   They take the theme's card: the hairline, the 26px radius
   on all four corners, the resting shadow, and a 7px lift
   into --shadow-lg on hover, with the radius restated there
   so it no longer snaps square. The two rules after this one
   stay: they make the card a column so "Click to read more"
   and the masthead sit on the floor of every card, level
   across the row however long the headline above them runs.
   ---------------------------------------------------------- */
body.home-premium .dream-item {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 28px 26px 30px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease), border-color 0.6s var(--ease);
}

body.home-premium .dream-item:hover {
    transform: translateY(-7px);
    border-radius: var(--radius-lg);
    border-color: transparent;
    box-shadow: var(--shadow-lg);
}

/* The theme staggers a row of cards by reading data-aos on a
   descendant of the column; with it on the column itself that
   stopped matching, so the three across arrive together. */
body.home-premium .equal-cards > [class*="col-"]:nth-of-type(2)[data-aos] {
    transition-delay: 110ms !important;
}

body.home-premium .equal-cards > [class*="col-"]:nth-of-type(3)[data-aos] {
    transition-delay: 220ms !important;
}


/* ----------------------------------------------------------
   THE MASTHEAD PLATE
   ----------------------------------------------------------
   style.css draws .sub-span as a 35px lavender disc, #e5e6ff,
   for the numbered bubbles it was written for. This page
   reuses it to hold a newspaper masthead, so each logo sat on
   a lavender oval -- a colour that appears nowhere else on the
   themed site.

   A neutral plate instead: the theme's own tint, its hairline
   and a small radius. It still reads as something holding the
   masthead, which a transparent box would not for the logos
   that are pale, and it takes no colour of its own into a row
   of six different brands.
   ---------------------------------------------------------- */
body.home-premium .dream-item .sub-span {
    background-color: #f7f6fb;
    border: 1px solid var(--line);
    border-radius: 10px;
}


/* ----------------------------------------------------------
   READ MORE
   ----------------------------------------------------------
   It was a line of Bootstrap-blue text at the foot of the
   card. It is the theme's button now: a pill on the brand
   gradient with a light sweep parked 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 a button paints out its label.

   Compact at 13.5px, and set to the same 118x40 as the
   masthead plate it shares the row with -- the two together
   are 236px inside 364px of card, so they sit level with room
   between them.
   ---------------------------------------------------------- */
body.home-premium .dream-item h4 a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    /* A set box rather than one the label sizes, so the button and
       the masthead plate beside it are the same 118x40 and the foot
       of every card reads as two matching shapes. */
    width: 118px;
    height: 40px;
    padding: 0;
    border-radius: 999px;
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    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;
    box-shadow: 0 10px 26px -10px rgba(255, 96, 21, 0.75);
    transition:
        background-position 1.125s var(--ease),
        transform 0.525s var(--ease),
        box-shadow 0.525s var(--ease);
}

body.home-premium .dream-item h4 a:hover {
    color: #fff;
    text-decoration: none;
    transform: translateY(-3px);
    box-shadow: 0 18px 38px -12px rgba(255, 96, 21, 0.8);
    background-position: -60% 0, 0 0;
}

/* style.css puts the masthead at bottom: 35px, which lined it up
   with a line of text. The pill is 40px tall and ends at the
   card's floor, so the plate moves to 30px -- the card's own
   bottom padding -- and the two centres now agree. It takes
   the button's measurements as well: same width, same height,
   same baseline. */
body.home-premium .dream-item .sub-span {
    right: 26px;
    bottom: 30px;
    width: 118px;
    height: 40px;
}

body.home-premium .dream-item h4 {
    margin-top: auto;
}


/* ----------------------------------------------------------
   THE VOLUNTEER BAND — COPY ABOVE THE PHOTOGRAPH
   ----------------------------------------------------------
   .volunteer-title is given margin-top:-250px further up this
   file so the copy sits above the artwork. The theme's
   .section-title rule is a margin shorthand, which resets that
   to 0 — so the heading, the lead and the button all dropped
   onto the picture.
   ---------------------------------------------------------- */
body.home-premium .section-title.volunteer-title {
    margin-top: -250px;
}

@media only screen and (max-width: 767px) {
    body.home-premium .section-title.volunteer-title {
        margin-top: -220px;
    }
}

/* The pull is 36px deeper than the -250px above, and the band is pushed down
   by the same 36px. The copy therefore stays where it is relative to the page
   while the artwork moves down beneath it — which is what lifts the button
   clear of the photograph. Measured: the picture begins about 270px below the
   band's top, and the button ended at 279px, nine pixels inside it. */
body.home-premium .section-title.volunteer-title {
    margin-top: -286px;
}

body.home-premium .page-title-area[style*="volunteer.png"] {
    margin-top: 36px;
}

/* The category icons are black line drawings, drawn for a white panel. On the
   dark glass they all but disappear — the same problem the chess and arts
   accordions had, and the one the theme already solves for the home page.
   The art is transparent PNG line work, so inverting gives clean white
   strokes rather than a washed-out box. */
body.home-premium .faq-area .accordion > li > a img {
    filter: invert(1) brightness(1.9);
}