/* Palestine Diaspora Technology Network landing page.
   Scoped to .pdtn so nothing reaches the site header/footer. */

/* --- undo the CMS's blanket typography override -------------------------
   custom_new.css: #all_body *{font-size:22px!important;line-height:1.5!important}
   (18px under its 768px media query) and #all_body a{color:#419496!important}.
   Specificity here is (1,1,0), which beats #all_body a at (1,0,1); elements
   carrying their own inline value win with inline !important. Anything without
   one now inherits normally instead of being forced to 22px. */
#all_body .pdtn *{
  font-size:inherit!important;
  line-height:normal!important;
  color:inherit!important;
}
#all_body .pdtn{
  font-size:16px!important;
  line-height:normal!important;
  color:#0f172a!important;
}

.pdtn{font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
.pdtn *,.pdtn *::before,.pdtn *::after{box-sizing:border-box}
.pdtn img{max-width:100%;height:auto}
.pdtn a{text-decoration:none}
.pdtn h1,.pdtn h2,.pdtn h3,.pdtn h4{font-family:inherit;margin:0}
.pdtn p{margin:0}
.pdtn ul{margin:0}

/* Material Symbols ligature icons */
.pdtn .ms{font-family:"Material Symbols Outlined"!important;font-weight:normal;
  font-style:normal;line-height:1!important;letter-spacing:normal;text-transform:none;
  display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;
  font-feature-settings:"liga";-webkit-font-feature-settings:"liga";
  -webkit-font-smoothing:antialiased;vertical-align:middle}

/* --- full-bleed out of .container{max-width:720px} ----------------------
   --pdtn-sbw is the scrollbar width from the inline probe, subtracted so the
   break-out is exactly viewport-wide and adds no sideways scrollbar.
   NO overflow clipping here: it would disable the header's position:sticky,
   and clipping on html/body stops the page scrolling (the site sets
   html,body{height:100%}). */
.pdtn{
  width:calc(100vw - var(--pdtn-sbw, 0px));
  max-width:calc(100vw - var(--pdtn-sbw, 0px));
  margin-left:calc(50% - 50vw + (var(--pdtn-sbw, 0px) / 2));
  margin-right:calc(50% - 50vw + (var(--pdtn-sbw, 0px) / 2));
}

/* --- site chrome off on this page ---------------------------------------
   The design carries its own sticky header, so the site's nav duplicated it;
   and this is a landing page, not a news item, so the "Home >> Diaspora News"
   trail did not describe it. The article template's own 600px banner goes too:
   the page brings its own hero.
   .header was absolute/z-9999 and overlaid the page, and .internal_div's top
   padding existed only to clear it - with the header gone that padding would
   be a gap above the hero, so it is zeroed here.
   The inline probe in the page body hides the same three by hand, for browsers
   without :has(). */
body:has(.pdtn) section.header_image{display:none!important}
body:has(.pdtn) .header{display:none!important}
body:has(.pdtn) .bread-crumb{display:none!important}
body:has(.pdtn) .internal_div{padding-top:0!important}
/* the article column carries an inline padding-top:15px, which with the
   chrome gone is a white strip above the sticky header */
body:has(.pdtn) .internal_div .container > .row > .col-12.text-left{padding-top:0!important}

/* --- hover / active states, lifted from style-hover / style-active --- */
.pdtn .pdtnx1:hover{color:#1F4E79!important}
.pdtn .pdtnx2:hover{color:#1F4E79!important}
.pdtn .pdtnx3:hover{color:#1F4E79!important}
.pdtn .pdtnx4:hover{color:#1F4E79!important}
.pdtn .pdtnx5:hover{color:#1F4E79!important}
.pdtn .pdtnx6:hover{background:#163A5A;transform:translateY(-2px)}
.pdtn .pdtnx6:active{transform:translateY(0) scale(.97)}
.pdtn .pdtnx7:hover{background:#163A5A;transform:translateY(-3px) scale(1.03)}
.pdtn .pdtnx7:active{transform:translateY(0) scale(.98)}
.pdtn .pdtnx8:hover{background:rgba(255,255,255,0.22);color:#fff!important;transform:translateY(-3px) scale(1.03)}
.pdtn .pdtnx8:active{transform:translateY(0) scale(.98)}
.pdtn .pdtnx9:hover{background:#1F4E79;border-color:#1F4E79;color:#fff!important;transform:translateY(-2px)}
.pdtn .pdtnx10:hover{background:#1F4E79;border-color:#1F4E79;color:#fff!important;transform:translateY(-2px)}
.pdtn .pdtnx11:hover{background:#1F4E79;border-color:#1F4E79;color:#fff!important;transform:translateY(-2px)}
.pdtn .pdtnx12:hover{background:#1F4E79;border-color:#1F4E79;color:#fff!important;transform:translateY(-2px)}
.pdtn .pdtnx13:hover{border-color:#1F4E79;box-shadow:0 16px 32px rgba(15,23,42,0.1);transform:translateY(-4px);color:inherit!important}
.pdtn .pdtnx13:active{transform:translateY(-1px) scale(.99)}
.pdtn .pdtnx14:hover{border-color:#2E7D74;box-shadow:0 16px 32px rgba(15,23,42,0.1);transform:translateY(-4px);color:inherit!important}
.pdtn .pdtnx14:active{transform:translateY(-1px) scale(.99)}
.pdtn .pdtnx15:hover{border-color:#1F4E79;box-shadow:0 16px 32px rgba(15,23,42,0.1);transform:translateY(-4px);color:inherit!important}
.pdtn .pdtnx15:active{transform:translateY(-1px) scale(.99)}
.pdtn .pdtnx16:hover{border-color:#2E7D74;box-shadow:0 16px 32px rgba(15,23,42,0.1);transform:translateY(-4px);color:inherit!important}
.pdtn .pdtnx16:active{transform:translateY(-1px) scale(.99)}
.pdtn .pdtnx17:hover{background:#163A5A;color:#fff!important;transform:translateY(-2px);box-shadow:0 12px 24px rgba(31,78,121,0.3)}
.pdtn .pdtnx17:active{transform:translateY(0) scale(.99)}
.pdtn .pdtnx18:hover{color:#163A5A!important}
.pdtn .pdtnx19:hover{box-shadow:0 16px 32px rgba(15,23,42,0.12);transform:translateY(-4px)}
.pdtn .pdtnx20:hover{box-shadow:0 16px 32px rgba(15,23,42,0.12);transform:translateY(-4px)}
.pdtn .pdtnx21:hover{box-shadow:0 16px 32px rgba(15,23,42,0.12);transform:translateY(-4px)}
.pdtn .pdtnx22:hover{box-shadow:0 16px 32px rgba(15,23,42,0.12);transform:translateY(-4px)}
.pdtn .pdtnx23:hover{box-shadow:0 24px 48px rgba(15,23,42,0.12);transform:translateY(-6px);border-color:#dbe7f1}
.pdtn .pdtnx24:hover{color:#235E57!important;text-decoration:underline}
.pdtn .pdtnx25:hover{box-shadow:0 24px 48px rgba(15,23,42,0.12);transform:translateY(-6px);border-color:#dbe7f1}
.pdtn .pdtnx26:hover{color:#163A5A!important;text-decoration:underline}
.pdtn .pdtnx27:hover{box-shadow:0 24px 48px rgba(15,23,42,0.12);transform:translateY(-6px);border-color:#dbe7f1}
.pdtn .pdtnx28:hover{color:#0f172a!important;text-decoration:underline}
.pdtn .pdtnx29:hover{background:#163A5A;transform:translateY(-2px);box-shadow:0 12px 24px rgba(31,78,121,0.3)}
.pdtn .pdtnx29:active{transform:translateY(0) scale(.99)}
.pdtn .pdtnx30:hover{color:#1F4E79!important}
.pdtn .pdtnx31:hover{color:#1F4E79!important}
.pdtn .pdtnx32:hover{color:#1F4E79!important}
.pdtn .pdtnx33:hover{color:#1F4E79!important}
.pdtn .pdtnx34:hover{color:#1F4E79!important}
.pdtn .pdtnx35:hover{color:#1F4E79!important}
.pdtn .pdtnx36:hover{color:#1F4E79!important}
.pdtn .pdtnx37:hover{color:#1F4E79!important}
.pdtn .pdtnx38:hover{background:#1F4E79;color:#fff!important}
.pdtn .pdtnx39:hover{background:#1F4E79;color:#fff!important}

/* --- Arabic / RTL variant -------------------------------------------------
   Only direction-sensitive things are mirrored; the layout is flex/grid and
   flips on its own once dir="rtl" is set. */
.pdtn-rtl{text-align:right}
.pdtn-rtl .ms{transform:scaleX(-1)}          /* arrows point the other way */
.pdtn-rtl input,.pdtn-rtl button{text-align:right}
.pdtn-rtl [style*="letter-spacing"]{letter-spacing:normal!important}

/* ==========================================================================
   Small screens
   ==========================================================================
   The design was exported at desktop width and every measurement in it is an
   INLINE style, so a stylesheet can only correct it with !important. That is
   not enthusiasm for !important — an inline declaration simply outranks any
   normal rule, and the body is CMS content we would rather not rewrite for
   every breakpoint.

   Two things were actually broken rather than merely tight:

   1. The header laid a desktop nav out with flex-wrap, so at 390px it became
      three ragged rows 202px tall — a third of the screen, on every scroll
      position, since it is sticky. It now collapses to a logo and a menu.

   2. `repeat(auto-fit,minmax(300px,1fr))` cannot go below 300px: auto-fit
      removes empty tracks, it does not shrink the ones that remain. Inside
      the newsletter card (327px wide, 48px padding, so 231px of content) the
      track stayed 300px and the card ran 160px off the right of the screen.
      Every auto-fit grid here has the same shape, so they are all released to
      one column before they can overflow.
   -------------------------------------------------------------------------- */

/* The menu button only exists below the breakpoint. */
.pdtn .pdtn-burger{display:none;align-items:center;justify-content:center;
  width:44px;height:44px;padding:0;flex-shrink:0;cursor:pointer;
  background:#fff;border:1px solid #e2e8f0;border-radius:10px;color:#1F4E79!important;
  transition:background .2s,border-color .2s}
.pdtn .pdtn-burger:hover{background:#f1f5f9;border-color:#cbd5e1}
.pdtn .pdtn-burger:active{transform:scale(.96)}

/* An in-page link must not land under the sticky header. */
.pdtn section[id]{scroll-margin-top:100px}

@media (max-width:900px){
  /* the header bar itself */
  .pdtn header > div{padding:10px 16px!important;min-height:0!important;gap:8px 12px!important}
  .pdtn header > div > a img{height:44px!important}
  .pdtn header > div > a img + img{height:40px!important}
  .pdtn header > div > a > span > span{font-size:16px!important}

  .pdtn .pdtn-burger{display:inline-flex;order:3;margin-left:auto}

  /* the nav becomes a panel under the bar, closed until the button opens it */
  .pdtn .pdtn-nav{display:none!important;order:4;flex-basis:100%;
    flex-direction:column!important;align-items:stretch!important;
    justify-content:flex-start!important;gap:0!important;white-space:normal!important;
    margin-top:4px;padding-top:4px;border-top:1px solid #e2e8f0}
  .pdtn .pdtn-nav.pdtn-open{display:flex!important}
  .pdtn .pdtn-nav a{padding:12px 2px;font-size:15px!important;border-bottom:1px solid #f1f5f9}
  .pdtn .pdtn-nav a:last-child{border-bottom:0}

  .pdtn .pdtn-cta{order:2;padding:10px 18px!important;font-size:13px!important}

  .pdtn section[id]{scroll-margin-top:76px}
}

@media (max-width:700px){
  /* No room for the call to action beside the logo. It joins the menu — and
     the hero repeats it one screen down, so nothing is lost while closed. */
  .pdtn .pdtn-cta{display:none}
  .pdtn .pdtn-nav.pdtn-open ~ .pdtn-cta{display:block;order:5;flex-basis:100%;
    margin:2px 0 6px!important;text-align:center}
}

@media (max-width:760px){
  /* Release every auto-fit track. Written per width rather than as one
     [style*="repeat(auto-fit"] rule so the footer columns can stay paired —
     four one-per-row link lists would be a very long tail on the page. */
  .pdtn [style*="minmax(320px"],
  .pdtn [style*="minmax(300px"],
  .pdtn [style*="minmax(280px"],
  .pdtn [style*="minmax(250px"],
  .pdtn [style*="minmax(240px"]{grid-template-columns:1fr!important}
  .pdtn [style*="minmax(220px"]{grid-template-columns:repeat(2,1fr)!important}

  /* and tighten the spacing those grids were designed around */
  .pdtn [style*="gap:48px"]{gap:28px!important}
  .pdtn [style*="gap:64px"]{gap:32px!important}
  .pdtn [style*="padding:48px"]{padding:24px!important}
  .pdtn [style*="padding:32px"]{padding:22px!important}
  .pdtn [style*="padding:80px 0"]{padding:52px 0!important}
  .pdtn [style*="padding:80px 24px"]{padding:52px 16px!important}
  .pdtn [style*="padding:0 24px"]{padding:0 16px!important}
}

@media (max-width:480px){
  .pdtn header > div > a{gap:8px!important}
  .pdtn header > div > a img{height:36px!important}
  .pdtn header > div > a img + img{height:32px!important}
  .pdtn header > div > a > span > span{font-size:13px!important}
  .pdtn .pdtn-burger{width:40px;height:40px}

  /* full-width buttons read better than a ragged row of pills */
  .pdtn [style*="padding:16px 40px"]{width:100%;justify-content:center}
}