/* ==========================================================================
   PISSA — layout corrections
     Part A : desktop navigation  (min-width: 992px)
     Part B : phone layout        (max-width: 767px)

   The two blocks never overlap, so a change to one cannot affect the other.

   !important appears only where the theme sets the value inline on the
   element (e.g. style="height:250px") — a stylesheet cannot win otherwise.
   ========================================================================== */


/* ==========================================================================
   Governing Board — passport-style photos for EVERY member.

   The page uses three different card wrappers for different member groups
   (senior board, executive members, committee chairs), so the rule targets
   all of them. Was: full-width image, 240px tall with object-fit:contain
   (letterboxed). Now: portrait 4:5 photos centred at the top of each card,
   faces filling the frame (object-fit:cover). Sits in a soft grey card
   with a thin border so the photo reads as intentional at any card width.
   ========================================================================== */
.board-card img,
.exec-card img,
.desk-card img,
.committee-card img,
.member-card img {
  display: block;
  width: 160px !important;
  height: 200px !important;      /* 4:5 passport ratio */
  object-fit: cover !important;
  object-position: top center;   /* keep the face, crop the bottom if needed */
  border: 1px solid #e3e9f2;
  border-radius: 6px;
  background: #f5f7fa;
  margin: 26px auto 8px;
  max-width: 100%;
}
@media only screen and (max-width: 767px) {
  .board-card img,
  .exec-card img,
  .desk-card img,
  .committee-card img,
  .member-card img {
    width: 140px !important;
    height: 175px !important;
    margin: 22px auto 8px;
  }
}


/* ==========================================================================
   PART A — desktop navigation: logo hard left, menu hard right, one line
   ========================================================================== */
@media only screen and (min-width: 992px) {

  /* Breathing room from the window edges. The top strip gets the same inset
     so the logo lines up under the association name, and the menu lines up
     under the social icons — otherwise the two rows look misaligned. */
  header.main-header .navbar > .container-fluid,
  .topbar > .container-fluid {
    padding-left: 45px;
    padding-right: 45px;
  }

  /* Logo left, menu right — but inset, not jammed against the edges. */
  header.main-header .navbar > .container-fluid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
  }
  header.main-header .navbar-brand {
    flex: 0 0 auto;
    margin-right: 24px;
  }
  header.main-header .main-menu {
    flex: 1 1 auto;
    display: flex;
    justify-content: flex-end;   /* menu sits against the right edge */
  }
  /* .mr-auto is Bootstrap 4 syntax and does nothing here, but be explicit
     so the menu can never be pushed back to the left. */
  header.main-header .main-menu > ul {
    margin-left: auto !important;
    margin-right: 0 !important;
    flex-wrap: nowrap;
  }

  /* Stop menu labels breaking onto a second line ("Policies and /
     Regulations"), and tighten spacing so all ten fit on one row down to
     roughly 1200px. */
  header.main-header .main-menu > ul > li {
    margin: 0 3px !important;
  }
  header.main-header .main-menu > ul > li > a {
    white-space: nowrap;
    padding-left: 9px;
    padding-right: 9px;
  }
  header.main-header .main-menu > ul > li.submenu > a:after {
    margin-left: 5px;
  }

  /* Submenus keep their own comfortable spacing. */
  header.main-header .main-menu ul ul li {
    margin: 0 !important;
  }
  header.main-header .main-menu ul ul li a {
    white-space: nowrap;
  }

  /* Now the menu sits on the right, the dropdowns belonging to the last few
     items would open past the right edge of the window and add a horizontal
     scrollbar. Anchor those to their right edge instead. */
  header.main-header .main-menu > ul > li:nth-last-child(-n+3) > ul {
    left: auto !important;
    right: 0 !important;
  }

  /* The theme hard-codes `width: 200px` on every dropdown, which cuts off
     longer labels like "Partnership Contribution" and "Subscription Fees
     Structure" — they spill out to the right of the box. Size the panel to
     its longest item instead, with a floor so short menus still look right. */
  header.main-header .main-menu ul ul {
    width: auto !important;
    min-width: 200px;
    max-width: 320px;
  }
  header.main-header .main-menu ul ul li {
    width: 100%;
  }
  header.main-header .main-menu ul ul li a {
    white-space: nowrap;
    display: block;
    padding: 8px 22px !important;
    /* Reserve room on the right for the > arrow the theme paints on items
       that have their own submenu. */
    padding-right: 34px !important;
  }
  header.main-header .main-menu ul ul li:not(.submenu) a {
    padding-right: 22px !important;
  }

  /* ------------------------------------------------------------------
     Stuck header (.active = position:fixed after scrolling).

     The theme leaves the 120px height and zero top padding, so the 100px
     logo sits hard against y=0 — no gap above it, 20px below — which reads
     as the header being sliced in half at the top of the screen.

     Give it a shorter bar with its contents genuinely centred, so it looks
     deliberate and gives more of the screen back to the page.
     ------------------------------------------------------------------ */
  header.main-header .header-sticky.active {
    height: 88px !important;
    padding: 0 !important;
    box-shadow: 0 2px 14px rgba(0, 0, 0, .10);
  }
  header.main-header .header-sticky.active > .navbar,
  header.main-header .header-sticky.active > .navbar > .container-fluid {
    height: 100%;
  }
  header.main-header .header-sticky.active .navbar-brand {
    display: flex;
    align-items: center;
    height: 100%;
  }
  header.main-header .header-sticky.active .navbar-brand img {
    max-height: 64px !important;
    height: auto !important;
  }
}

/* Narrower desktops / small laptops: shave a little more so the row still
   fits rather than wrapping. */
/* Up to 1599px the full-size type does not leave a comfortable gap between
   the logo and the menu, so the mid-size treatment runs this high. */
@media only screen and (min-width: 992px) and (max-width: 1599px) {
  header.main-header .main-menu > ul > li > a {
    font-size: 14.5px;
    padding-left: 7px;
    padding-right: 7px;
  }
  header.main-header .main-menu > ul > li {
    margin: 0 1px !important;
  }
  header.main-header .navbar-brand {
    margin-right: 14px;
  }
  /* Less room to spare here, so a smaller inset than on wide screens. */
  header.main-header .navbar > .container-fluid,
  .topbar > .container-fluid {
    padding-left: 26px;
    padding-right: 26px;
  }
}

/* Smaller laptops (roughly 992–1280). Without this the menu ends up almost
   touching the logo — about 14px apart at 1200. Shaving the type and padding
   restores a visible gap while still keeping all ten items on one line. */
@media only screen and (min-width: 992px) and (max-width: 1279px) {
  header.main-header .main-menu > ul > li > a {
    font-size: 13.5px;
    padding-left: 5px;
    padding-right: 5px;
  }
  header.main-header .main-menu > ul > li {
    margin: 0 !important;
  }
  header.main-header .navbar-brand {
    margin-right: 10px;
  }
  header.main-header .navbar-brand img {
    max-height: 74px;
  }
  header.main-header .navbar > .container-fluid,
  .topbar > .container-fluid {
    padding-left: 20px;
    padding-right: 20px;
  }
}


/* ==========================================================================
   PART B — phone layout
   ========================================================================== */

/* --------------------------------------------------------------------------
   Kill horizontal scroll on phones.
   Various Bootstrap `.row` blocks use negative left/right margins (-15px)
   which extend past the viewport when the row is not sitting inside a
   matched-padding `.container`. That produces a thin white strip down the
   right side of the page and a horizontal scrollbar. Clipping the overflow
   on the root elements is the standard defence — it never removes content
   the user was meant to see, since the viewport is already the visible area.
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 991px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100%;
  }
}

/* --------------------------------------------------------------------------
   Back-to-Home pill: on mobile the section it overlays is narrow, so the
   pill lands directly on top of the page heading (e.g. "Our Past Events",
   "Our Press Release"). Reserve headroom above the heading so they never
   collide. Applies to every section that hosts the pill (.pissa-back-host).
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
  section.pissa-back-host {
    padding-top: 78px !important;
  }
}

/* --------------------------------------------------------------------------
   Scroll-reveal animations OFF on phones.

   WOW.js hides every .wow element with visibility:hidden and only reveals it
   when its scroll handler fires. On phones that handler frequently does not
   fire for content further down the page, so the element keeps its full
   height but paints nothing — which is what produced the large blank white
   sections while scrolling. Measured on About Us: 14 of 17 elements stuck
   hidden, reserving 2,068px, about 35% of the page.

   Showing everything immediately also removes a lot of scroll-time repainting,
   so scrolling itself gets smoother. Desktop keeps its animations.
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 991px) {
  .wow,
  .wow.fadeInUp,
  .wow.fadeIn,
  .wow.fadeInLeft,
  .wow.fadeInRight {
    visibility: visible !important;
    opacity: 1 !important;
    animation-name: none !important;
    animation: none !important;
    transform: none !important;
  }
  /* Same idea for the theme's other reveal helpers. */
  .reveal,
  .image-anime,
  .text-anime {
    visibility: visible !important;
    opacity: 1 !important;
  }
}

@media only screen and (max-width: 767px) {

  /* ---------------------------------------------------------------------
     1. Top strip — phone number and social icons only.
        The association name and the email address are dropped on phones;
        both are still in the footer and on the Contact page.
     --------------------------------------------------------------------- */
  .topbar {
    padding: 7px 0 !important;
  }

  /* Force the two Bootstrap columns onto one row instead of stacking. */
  .topbar .container-fluid > .row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    margin: 0;
  }
  .topbar .container-fluid > .row > [class*="col-md-"] {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
  }

  /* li 1 = association name, li 2 = email, li 3 = phone */
  .topbar-contact-info ul li:nth-child(1),
  .topbar-contact-info ul li:nth-child(2) {
    display: none !important;
  }
  .topbar-contact-info {
    padding: 0 !important;
    text-align: left !important;
  }
  .topbar-contact-info ul {
    text-align: left !important;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
  }
  .topbar-contact-info ul li {
    margin: 0 !important;
    line-height: 1;
  }
  .topbar-contact-info ul li a {
    font-size: 13.5px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
  }

  /* The theme hides these on phones — bring them back. */
  .header-social-links {
    display: block !important;
    padding-right: 0 !important;
    text-align: right !important;
  }
  .header-social-links ul {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin: 0;
    padding: 0;
  }
  .header-social-links ul li {
    margin: 0 0 0 7px !important;
  }
  .header-social-links ul li a {
    width: 25px !important;
    height: 25px !important;
    font-size: 12px !important;
    border-radius: 6px !important;
  }

  /* ---------------------------------------------------------------------
     2. Header — tighter, and logo/menu button on the same centre line.
        The theme sets height:120px inline on .header-sticky.
     --------------------------------------------------------------------- */
  /* The theme sets height:120px inline. Do NOT change this to `auto` — when
     the sticky header switches to position:fixed on scroll it then expands to
     the full height of the (hidden) desktop menu, roughly 870px, and covers
     the screen with a blank white block. Keep it a fixed height, just smaller. */
  header.main-header .header-sticky {
    height: 74px !important;
    padding: 6px 0 !important;
    /* MUST stay visible. The opened hamburger menu is ~390px tall and is
       painted outside this 74px box; `overflow:hidden` here clips it away
       entirely and the menu appears not to open at all.
       The fixed height (never `auto`) is what stops the header ballooning
       to full-screen when it sticks — overflow plays no part in that. */
    overflow: visible;
  }

  /* The theme animates the header in and out with transform: translateY(-100%)
     based on scroll direction. On phones this transition catches the eye —
     the header is visible half-way through the animation and looks like it is
     sliced in half at the top of the screen. Kill the slide entirely: keep
     the header sitting flat at the top instead. */
  header.main-header .header-sticky,
  header.main-header .header-sticky.hide,
  header.main-header .header-sticky.active,
  header.main-header .header-sticky.active.hide {
    transform: none !important;
    transition: none !important;
  }
  /* When it becomes fixed on scroll, give it a solid white background so
     content flowing under it does not bleed through. */
  header.main-header .header-sticky.active {
    background: #fff !important;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    height: 74px !important;
    padding: 6px 0 !important;
  }

  /* The logo has an inline style="height:100px" set by the theme, which is
     taller than the 74px sticky header — the "PISSA" text below the sun
     gets clipped. Force it to fit at every scroll state. */
  header.main-header .navbar-brand,
  header.main-header .header-sticky.active .navbar-brand {
    display: flex !important;
    align-items: center !important;
    height: 100%;
  }
  header.main-header .navbar-brand img,
  header.main-header .header-sticky.active .navbar-brand img {
    max-height: 56px !important;
    height: 56px !important;
    width: auto !important;
    object-fit: contain !important;
  }
  /* The dropdown sits in an absolutely-positioned wrapper, so it must paint
     above the page content once open. The theme handles its own colours. */
  header.main-header .responsive-menu,
  header.main-header .slicknav_menu {
    z-index: 1001;
  }
  /* Cap the menu height so on small phones the last items never fall off
     the bottom with no way to reach them. */
  .slicknav_nav {
    max-height: calc(100vh - 130px);
    overflow-y: auto;
  }
  header.main-header .navbar {
    padding-top: 0;
    padding-bottom: 0;
  }
  header.main-header .navbar > .container-fluid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 15px;
    padding-right: 15px;
  }
  header.main-header .navbar-brand {
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto;
  }
  header.main-header .navbar-brand img {
    max-height: 56px !important;
    height: auto !important;
    width: auto !important;
  }
  .navbar-toggle,
  .slicknav_btn {
    margin: 0 !important;
    flex: 0 0 auto;
  }

  /* Dropdown menu spacing once opened */
  .slicknav_nav li a {
    padding: 9px 12px !important;
    font-size: 14.5px !important;
  }
  .slicknav_nav ul {
    margin: 0 0 0 14px !important;
  }

  /* ---------------------------------------------------------------------
     3. Footer — was over two full screens tall on a phone.
     --------------------------------------------------------------------- */
  .main-footer {
    padding-bottom: 16px !important;
  }

  /* Mail Us / Call Us / Coverage cards — 30px gaps between three stacked
     boxes is a lot of empty space on a phone. */
  .footer-contact {
    padding: 22px 0 0 !important;
  }
  .footer-contact .footer-contact-box {
    margin: 0 0 14px !important;
  }
  .footer-contact [class*="col-"]:last-child .footer-contact-box {
    margin-bottom: 0 !important;
  }

  .mega-footer {
    padding-top: 22px !important;
  }
  .mega-footer > .row > [class*="col-"] {
    margin-bottom: 22px;
  }
  .mega-footer > .row > [class*="col-"]:last-child {
    margin-bottom: 0;
  }

  /* logo carries style="height:130px" inline */
  .footer-about figure {
    margin: 0 0 12px;
  }
  .footer-about figure img {
    height: 82px !important;
    width: auto !important;
  }
  .footer-about p {
    font-size: 13.5px;
    line-height: 1.6;
    margin-bottom: 14px;
  }

  .footer-affiliation {
    margin-bottom: 14px;
  }
  .footer-affiliation .affil-label {
    font-size: 10px;
    margin-bottom: 7px;
  }
  .footer-affiliation .affil-logos img {
    height: 30px !important;
  }

  .footer-links h2 {
    font-size: 17px !important;
    margin-bottom: 12px !important;
  }
  .footer-links ul {
    margin: 0;
    padding: 0;
  }
  .footer-links ul li {
    margin-bottom: 7px !important;
  }
  .footer-links ul li a {
    font-size: 13.5px;
  }

  /* Scan-to-join QR: 250px square is far too large on a phone.
     Centred under its heading. Inline style="height:250px" needs !important. */
  /* QR code: left-aligned, matching the other two footer columns. */
  .footer-links img.img-fluid {
    height: 148px !important;
    width: auto !important;
    max-width: 100%;
    display: block;
    margin: 0;
    border-radius: 8px;
  }
  /* Targeted by position rather than :has(), so it also works on older
     Android browsers that lack :has() support. */
  .mega-footer > .row > [class*="col-"]:last-child .footer-links,
  .mega-footer > .row > [class*="col-"]:last-child .footer-links h2 {
    text-align: left;
  }

  .footer-copyright {
    padding: 14px 0 !important;
  }
  .footer-copyright-text {
    gap: 10px !important;
  }
  .footer-copyright-text p {
    font-size: 12.5px;
    text-align: center;
  }
}

/* Very small phones */
@media only screen and (max-width: 360px) {
  .topbar-contact-info ul li a { font-size: 12.5px; }
  .header-social-links ul li { margin-left: 5px !important; }
  .header-social-links ul li a { width: 23px !important; height: 23px !important; }
  header.main-header .navbar-brand img { max-height: 50px !important; }
}