/* ============================================================================
   Grant single page — v2 design. Loaded ONLY by grant.php, so these selectors
   are effectively page-scoped and won't affect other templates.
   Palette: navy #253a4b · teal #16999b · blue #3399d1
   ============================================================================ */
:root{
  --g-navy:#253a4b; --g-teal:#16999b; --g-blue:#3399d1;
  --g-ink:#27333c; --g-muted:#5f6e7a; --g-line:#e6edf2;
}

/* ---------- content column ---------- */
.p_content.w1200{
  width:100% !important;
  max-width:900px;
  margin:26px auto 0 !important;
  padding:0 20px !important;
}
.grant_box{
  font-size:16px; line-height:1.78; color:#3a444c;
}
.grant_box p{ margin:0 0 14px; }
/* The rich-text editor saves inline fonts (Comic Sans) into the content, and
   grant.php doesn't load page_v2.css where that override lives — so force the
   site fonts here: system stack for body, Montserrat for headings/bold. */
.grant_box, .grant_box p, .grant_box span, .grant_box li, .grant_box a,
.grant_box td, .grant_box th, .grant_box em, .grant_box div, .grant_box font,
.grant_box ul, .grant_box ol{
  font-family:'Segoe UI Variable Text','Segoe Fluent','Segoe UI',system-ui,-apple-system,'Helvetica Neue','roboto',arial,sans-serif !important;
}
.grant_box h1, .grant_box h2, .grant_box h3, .grant_box h4, .grant_box h5, .grant_box h6,
.grant_box strong, .grant_box b{
  font-family:'Montserrat',sans-serif !important;
}

/* ---------- application form card ---------- */
#grant_form{
  max-width:900px; margin:34px auto !important;
  background:#fff !important;
  border:1px solid var(--g-line) !important;
  border-radius:22px !important;
  padding:40px clamp(20px,4vw,44px) !important;
  box-shadow:0 24px 60px rgba(34,50,63,.10) !important;
}
#grant_form .grant_title{
  font-family:'Montserrat',sans-serif; font-weight:800 !important;
  font-size:clamp(22px,2.6vw,30px) !important; color:var(--g-navy) !important;
  text-align:center; margin:0 0 8px !important; letter-spacing:-.5px; line-height:1.15;
}
#grant_form .grant_title::after{
  content:''; display:block; width:60px; height:4px; border-radius:3px; margin:16px auto 22px;
  background:linear-gradient(90deg,var(--g-blue),var(--g-teal));
}

/* ---------- section headings ( .big_group ) ---------- */
.big_group_wrap{ margin:30px 0 8px; }
.big_group{
  font-family:'Montserrat',sans-serif; font-weight:800; font-size:16.5px; color:var(--g-navy);
  padding:13px 16px; background:#f2f7f8; border-inline-start:4px solid var(--g-teal);
  border-radius:10px; letter-spacing:.2px;
}

/* ---------- field polish (light — keeps existing input look, adds focus + spacing) ---------- */
#grant_form .form_field{ margin-bottom:18px; }
#grant_form .form_field > label{ font-weight:600; color:#34454f; font-size:14px; display:inline-block; margin-bottom:4px; }
#grant_form input[type=text], #grant_form input[type=number], #grant_form input[type=email],
#grant_form input[type=date], #grant_form textarea{
  border-radius:10px !important; border:1px solid #d6e0e6 !important; transition:border-color .2s, box-shadow .2s;
}
#grant_form input:focus, #grant_form textarea:focus,
#grant_form .select2-container--default.select2-container--focus .select2-selection--single{
  border-color:var(--g-teal) !important; box-shadow:0 0 0 3px rgba(22,153,155,.12) !important; outline:none !important;
}
#grant_form .select2-container--default .select2-selection--single{ border-radius:10px !important; border-color:#d6e0e6 !important; }

/* ---------- submit ---------- */
#grant_btn{
  display:flex !important; align-items:center; justify-content:center; gap:8px;
  width:fit-content; margin:28px auto 0 !important;
  background:linear-gradient(135deg,var(--g-teal),var(--g-blue)) !important;
  color:#fff !important; font-family:'Montserrat',sans-serif; font-weight:700; font-size:16px;
  padding:15px 48px !important; border-radius:40px !important; border:0 !important;
  cursor:pointer; box-shadow:0 12px 28px rgba(22,153,155,.30);
  transition:transform .2s ease, box-shadow .2s ease;
}
#grant_btn:hover{ transform:translateY(-2px); box-shadow:0 18px 38px rgba(22,153,155,.42); }

/* ---------- success message ---------- */
.form_success_message{
  max-width:900px; margin:24px auto !important; text-align:center;
  background:#eaf6f6; border:1px solid #cfe9e9; border-radius:18px; padding:34px 24px;
  font-family:'Montserrat',sans-serif; font-weight:700; color:var(--g-navy); font-size:18px;
}

@media (max-width:640px){
  #grant_form{ border-radius:16px !important; padding:26px 16px !important; }
  .p_content.w1200{ padding:0 16px !important; }
}

/* ============================================================================
   Grant single page — HEADER (cover + title + date + Apply)   "Aligned Column"
   ----------------------------------------------------------------------------

   One shared edge: the title text, the date pill, the Apply button and the
   .grant_box content all start on the reading column
   (x = 290 / right = 1150 at 1440px, mirrored in RTL; 20px / 16px gutters below).
   .grant_box and everything inside it is NOT touched by this file.

   !important is used only where main/responsive/grant_v2 already use it
   (grant_v2 date/Apply/.p_content rules, responsive .page_top_bg overflow).
   ============================================================================ */
:root{
  --gh-col:860px;          /* reading column = .p_content max-width 900 - 2 x 20 padding   */
  --gh-pad:20px;           /* .p_content side padding (16px on phones, see grant_v2 @640)  */
  --gh-inset:max(var(--gh-pad), calc((100% - var(--gh-col)) / 2)); /* cover -> column edge */
  --gh-nav-gap:12px;       /* gap between the fixed header card and the cover              */
  --gh-mh-extra:0px;       /* <mh> height minus header-card height (115-71 below 1200px)   */
  --gh-pill-h:46px;        /* date + Apply height                                          */
  --gh-meta-gap:10px;      /* date -> Apply                                                */
  --gh-before-meta:28px;   /* cover bottom -> meta row                                     */
  --gh-after-meta:34px;    /* meta row -> content                                          */
  --gh-nophoto-top:36px;   /* header card -> meta row when the grant has no cover photo    */
  --gh-ring-room:14px;     /* top padding that keeps Apply's focus ring / lift unclipped   */
  --gh-cta-a:#0f7c7e;      /* deepened teal -> blue: white label >= 4.8:1                  */
  --gh-cta-b:#1f78ad;
}

/* ---------------------------------------------------------------- cover --- */
.page_top_bg{
  position:relative;
  display:flex; flex-direction:column; justify-content:flex-end;
  box-sizing:border-box;
  height:auto;                                   /* main.css: 350px fixed */
  min-height:clamp(320px, 29vw, 420px);
  margin-top:calc(var(--gh-nav-gap) - var(--gh-mh-extra));
  border-radius:28px;
  background-size:cover; background-position:center 38%;
  overflow:hidden !important;                    /* responsive.css: unset !important */
  isolation:isolate;
  box-shadow:0 18px 44px rgba(37,58,75,.14);
}
.page_top_bg > .parent{ display:none; }          /* empty legacy wrappers */

/* ---------------------------------------------------------------- title --- */
/* Sits on a navy scrim confined to the lower part of the photo; the scrim
   grows upward with the title, so long titles never collide with anything. */
.page_top_bg h1.sec_head.sec_normal{
  position:relative; z-index:1;
  margin:0;
  padding:120px var(--gh-inset) 40px;
  text-align:start;
  background:linear-gradient(to top,
    rgba(20,33,44,.92) 0%, rgba(30,48,62,.78) 42%, rgba(37,58,75,.38) 74%, rgba(37,58,75,0) 100%);
}
.page_top_bg h1.sec_head.sec_normal::before{      /* brand accent bar */
  content:''; display:block; width:48px; height:4px; border-radius:3px; margin:0 0 16px;
  background:linear-gradient(90deg, #3fc1c3, #5ab4e6);
}
.page_top_bg h1.sec_head.sec_normal span{
  position:static; display:block; max-width:var(--gh-col);
  background:none; padding:0; border-radius:0;
  font-family:'Montserrat', sans-serif; font-weight:800;
  font-size:clamp(26px, 2.5vw, 38px); line-height:1.16; letter-spacing:-.5px;
  color:#fff; text-align:start;
  text-wrap:balance; text-shadow:0 2px 16px rgba(0,0,0,.22);
}

/* ------------------------------------------------------------ meta row --- */
/* .p_content has overflow:clip (main) / hidden (responsive), and Apply is its
   first row: move part of the top margin into padding so the focus ring and
   the hover lift have room. Horizontal geometry is unchanged. */
.p_content.w1200{
  margin-top:calc(var(--gh-before-meta) - var(--gh-ring-room)) !important;
  padding-top:var(--gh-ring-room) !important;
}
mh + section > .p_content.w1200{                 /* no cover photo */
  margin-top:calc(var(--gh-nophoto-top) - var(--gh-ring-room) - var(--gh-mh-extra)) !important;
}

.date_item_grant_box,
.btn_grant_box{
  box-sizing:border-box; height:var(--gh-pill-h);
  vertical-align:middle; white-space:nowrap; width:auto;
  border-radius:999px !important;
  margin-block:0 var(--gh-after-meta) !important;
}

/* date */
.date_item_grant_box{
  display:inline-flex !important; align-items:center; gap:8px;
  margin-inline:0 var(--gh-meta-gap) !important;  /* flips on its own in RTL */
  padding-block:0 !important; padding-inline:14px 18px !important;
  font-family:'Montserrat', sans-serif; font-weight:600; letter-spacing:.2px;
  font-size:14px !important; color:var(--g-navy) !important;
  font-variant-numeric:tabular-nums;
  background:#f4f8fa; border:1px solid #e1e9ee;
}
.date_item_grant_box i{ font-size:18px; line-height:1; color:var(--g-teal); }
mh + section .date_item_grant_box{               /* no cover: teal-tint badge */
  background:#eaf6f6; border-color:#cfe9e9; color:#0e6b6d !important;
}
mh + section .date_item_grant_box i{ color:#0e6b6d; }

/* Apply — styles both the <a> (external link) and the <div onclick> fallback */
.btn_grant_box{
  display:inline-flex !important; align-items:center; justify-content:center; gap:10px;
  margin-inline:0 !important;
  padding-block:0 !important; padding-inline:28px 22px !important;
  border:0 !important; cursor:pointer; text-decoration:none;
  background:linear-gradient(135deg, var(--gh-cta-a), var(--gh-cta-b)) !important;
  color:#fff !important;
  font-family:'Montserrat', sans-serif; font-weight:700; font-size:15px; letter-spacing:.2px; line-height:1;
  box-shadow:0 8px 20px rgba(22,120,140,.24);
  transition:transform .2s ease, box-shadow .2s ease;
}
.btn_grant_box .mid{ display:inline-flex; align-items:center; }
.btn_grant_box i{ font-size:20px; transition:transform .2s ease; }
.btn_grant_box:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 26px rgba(22,120,140,.32);
}
.btn_grant_box:hover i{ transform:translateX(3px); }
.btn_grant_box:focus-visible{ outline:3px solid var(--g-navy); outline-offset:3px; }

@media (prefers-reduced-motion:reduce){
  .btn_grant_box, .btn_grant_box i{ transition:none; }
  .btn_grant_box:hover, .btn_grant_box:hover i{ transform:none; }
  .page_top_bg{ transition:none !important; transform:none !important; opacity:1 !important; }
}

/* ----------------------------------------------------------------- RTL --- */
[dir="rtl"] .page_top_bg h1.sec_head.sec_normal::before{
  background:linear-gradient(270deg, #3fc1c3, #5ab4e6);
}
[dir="rtl"] .page_top_bg h1.sec_head.sec_normal span{ letter-spacing:0; line-height:1.35; }
[dir="rtl"] .btn_grant_box:hover i{ transform:translateX(-3px); }
/* grant.php prints the "arrow_left_alt" ligature, which the bundled Material
   Icons build doesn't have (renders a stray caret in a wide box). Draw the
   known-good arrow_right_alt mirrored instead; the markup is untouched. */
[dir="rtl"] .btn_grant_box i{ font-size:0 !important; line-height:1; }
[dir="rtl"] .btn_grant_box i::before{
  content:'arrow_right_alt'; font-size:20px; display:inline-block; transform:scaleX(-1);
}

/* ------------------------------------------------------ tablet / mobile --- */
@media (max-width:1199px){
  /* <mh> grows to 115px here while the header card stays 71px tall */
  :root{ --gh-mh-extra:44px; --gh-pill-h:48px; }
  /* Edge to edge like the header card above it; --gh-inset still equals the
     content column edge exactly: max(20px, (width - 860px) / 2). */
  .page_top_bg{ width:auto; margin-inline:0; border-radius:20px; box-shadow:none; }
}
@media (max-width:939px){
  .page_top_bg h1.sec_head.sec_normal{ padding-top:110px; padding-bottom:30px; }
}
@media (max-width:640px){
  :root{
    --gh-pad:16px; --gh-nav-gap:16px;
    --gh-before-meta:22px; --gh-after-meta:26px; --gh-nophoto-top:28px;
  }
  .page_top_bg{ min-height:300px; }
  .page_top_bg h1.sec_head.sec_normal{ padding-top:96px; padding-bottom:26px; }
  .page_top_bg h1.sec_head.sec_normal::before{ width:40px; margin-bottom:12px; }
  .page_top_bg h1.sec_head.sec_normal span{ font-size:24px; line-height:1.22; }
}
/* Phones: date on its own line, Apply becomes a full-width thumb target. */
@media (max-width:575px){
  .date_item_grant_box{
    display:flex !important; width:fit-content; height:40px;
    margin-inline:0 !important; margin-bottom:12px !important;
  }
  .btn_grant_box{ display:flex !important; width:100%; height:50px; font-size:16px; }
}