/* ==========================================================================
   Feed A Soul - responsive overrides + non-functional component cleanup
   --------------------------------------------------------------------------
   Loaded LAST, after the Elementor/autoptimize stylesheets, so these rules win.
   Two jobs:
     1. HIDE components that cannot work on a static site (no backend).
     2. Make the surviving layout work on phone and tablet.
   Nothing is deleted from the HTML - everything here is reversible by
   removing this stylesheet.
   ========================================================================== */

/* ==========================================================================
   1. NON-FUNCTIONAL COMPONENTS  (hidden at ALL widths, not just mobile)
   --------------------------------------------------------------------------
   This site is a static export. Every backend it calls is down:
     - theworkflow.nyc  -> HTTP 502 (nothing listening on :5000)
     - mediumwallet.nyc -> HTTP 502  (the donation checkout)
   So the donate, volunteer, contact and newsletter flows all fail silently.
   Hiding the whole component is better than showing a control that does
   nothing when a visitor taps it.
   ========================================================================== */

/* ---- Donate: KEPT VISIBLE, repointed to Instagram ----------------------
   The donate buttons are NOT hidden. Their hrefs were changed in the HTML
   from the dead checkout (mediumwallet.nyc, 502) to the Instagram account,
   so "Donate Now" now takes a supporter somewhere real where they can get
   in touch. The fundraising CTA sections on the homepage stay visible for
   the same reason.

   Still hidden below: links to donate.html and /donation-failed/, which have
   no working destination of their own.                                      */

/* Links to the old JBF donate page and the donation-failed error page.
   donate.html is Judah Boxing Foundation content (wrong charity) and its
   form posts to the dead backend; /donation-failed/ does not exist at all.

   Targeted at <li> level so the rest of each list survives - the services
   list keeps "Training" and "Personality Development" and loses only
   "Donations".                                                              */
li:has(> a[href*="donate.html"]),
li:has(> a[href*="donation-failed"]) {
  display: none !important;
}

.elementor-element:has(> .elementor-widget-container > a[href*="donation-failed"]) {
  display: none !important;
}

/* ---- Social accounts that do not exist ---------------------------------
   Instagram and TikTok are the only two real accounts. The rest linked to
   generic homepages or a login screen, not to the charity:
     YouTube  -> youtube.com          (no account)
     Facebook -> facebook.com         (no account)
     Twitter  -> twitter.com/i/flow/login
     "Google" -> google.com           (mislabelled leftover on donate.html)  */
li:has(> a[href*="youtube.com"]),
li:has(> a[href*="facebook.com"]),
li:has(> a[href*="twitter.com"]),
li:has(> a[href*="google.com"]) {
  display: none !important;
}

/* ---- Placeholder content on About Us -----------------------------------
   Theme demo content that was never replaced with real copy:

     51130240 - "WHAT WE DO" + stat counters. The numbers render as "0 Years
                of Experience", "0 Country", "0 Campaigns" (the counter script
                never runs) and every description is Lorem ipsum
                ("Veniam, quis nostrud exercitation ullamco...").
     575ab87a - a second copy of the same counter block.
     18e2af0  - "OUR SPONSORS". Its 8 logos are the theme's generic
                brand-1.png ... brand-8.png demo files and all render at
                0x0, so only an empty heading was showing.                   */

.elementor-element-51130240,
.elementor-element-575ab87a,
.elementor-element-18e2af0 {
  display: none !important;
}

/* ---- Email -------------------------------------------------------------
   There is no working email address. The mailto: links and the footer's
   "| info@..." were removed from the HTML; these two widgets are the
   contact page's "EMAIL US" heading and its value.                         */
.elementor-element-20c7fc0f,   /* "EMAIL US" label   */
.elementor-element-6d912734 {  /* the address itself */
  display: none !important;
}

/* ---- Dead forms --------------------------------------------------------
   Newsletter (#mc4wp-form-1) has NO action attribute at all - it posts
   nowhere on all 9 pages. The volunteer and contact forms POST to
   theworkflow.nyc, which returns 502.

   The newsletter and volunteer blocks are hidden at SECTION level: the
   surrounding copy is the form's own invitation ("don't miss latest updates",
   "YOUR TIME AND POSITIVE ENERGY IS NEEDED") and reads as broken with no form
   under it.

   The CONTACT page is different and must be hidden at WIDGET level. Its
   section (4c2040ff) also contains the ADDRESS / PHONE / SOCIAL block -
   hiding the whole section took the charity's address off the page along
   with the form. Only the form widget goes; the address, phone and social
   links stay. (The email block is hidden separately above - there is no
   working email address.)                                                  */

.elementor-element-42a03d80,   /* newsletter signup - all 9 pages           */
.elementor-element-208a3812 {  /* volunteer form  - become_volunteer.html   */
  display: none !important;
}

.elementor-element-3dba503b {  /* contact FORM WIDGET only - jcontact.html  */
  display: none !important;
}

/* Belt and braces: any form that posts to the dead backend, or has no action
   at all, in case a page carries one these IDs do not cover.                */
form[action*="theworkflow.nyc"],
form#mc4wp-form-1 {
  display: none !important;
}

/* ---- Embedded frames from the dead backends ----------------------------
   These <iframe>s pull content straight from the down servers, so instead of
   a profile / campaign / blog / donor list the visitor sees the remote
   server's raw error page - a literal "502 Bad Gateway - nginx/1.18.0
   (Ubuntu)" block rendered in the middle of the content:

     about_us.html   -> theworkflow.nyc/ai/feedasoul/public/profile
     blog.html       -> theworkflow.nyc/ai/thejbf/public/blog
     campaign.html   -> theworkflow.nyc/ai/feedasoul/public/campaign/
     donor_wall.html -> mediumwallet.nyc/feedasoul/details
                        mediumwallet.nyc/thejbf/details                      */

iframe[src*="theworkflow.nyc"],
iframe[src*="mediumwallet.nyc"],
embed[src*="theworkflow.nyc"],
object[data*="theworkflow.nyc"] {
  display: none !important;
}

/* --------------------------------------------------------------------------
   HOMEPAGE HERO - stop the banner stretching (ALL screen sizes)
   --------------------------------------------------------------------------
   The hero section carries an inline `background-size:100% 100%`, which forces
   the banner to fill the box on BOTH axes and distorts it. The source art is
   1122x728 (aspect 1.54), but the section renders at aspect 1.23 on desktop
   and stretches to ~1.7x its natural height on a phone.

   The section holds no visible content at all - the container measures 0px
   high and every inner image is 0x0, so the artwork IS the section. That means
   the height can safely be driven by the image's own aspect ratio.

   `cover` + a matching aspect-ratio gives no distortion AND no cropping. This
   one block is intentionally outside the media queries: the stretch is wrong
   at every width, and the headline text is baked into the artwork, so keeping
   the full frame visible matters on desktop too.
   -------------------------------------------------------------------------- */

.elementor-section[style*="background-size:100% 100%"] {
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  aspect-ratio: 1122 / 728;
  height: auto !important;
  min-height: 0 !important;
}


/* --------------------------------------------------------------------------
   PHONE AND TABLET (<= 1024px)
   --------------------------------------------------------------------------
   Covers both, deliberately. Elementor.s own mobile breakpoint is 767px, but
   this layout has no usable tablet treatment either - at 768-1024px the
   columns stay side by side and the 52-60px headings still overflow. Single
   column with fluid type reads correctly across the whole range.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {

  /* Nothing should ever force the page wider than the screen. */
  html, body {
    max-width: 100%;
    overflow-x: hidden;
  }

  img,
  video,
  iframe,
  canvas {
    max-width: 100%;
    height: auto;
  }

  /* ---- Typography ------------------------------------------------------
     Desktop headings are hard-coded at 52-60px, which is unreadable on a
     375px screen. clamp() scales them fluidly instead of stepping.          */

  h1,
  .elementor-heading-title,
  h1.elementor-heading-title {
    font-size: clamp(1.75rem, 7.5vw, 2.5rem) !important;
    line-height: 1.2 !important;
    word-break: break-word;
    hyphens: auto;
  }

  h2,
  h2.elementor-heading-title {
    font-size: clamp(1.5rem, 6.5vw, 2rem) !important;
    line-height: 1.25 !important;
    word-break: break-word;
  }

  h3,
  h3.elementor-heading-title {
    font-size: clamp(1.25rem, 5.5vw, 1.5rem) !important;
    line-height: 1.3 !important;
  }

  h4,
  h5,
  h6 {
    font-size: clamp(1.05rem, 4.5vw, 1.25rem) !important;
    line-height: 1.35 !important;
  }

  /* Body copy: 1.875 line-height is airy on desktop but wastes a lot of
     vertical space on a phone. Tighten slightly, keep it comfortable.       */
  p,
  .elementor-text-editor,
  .elementor-widget-text-editor {
    font-size: 1rem !important;
    line-height: 1.6 !important;
  }

  /* Long centred paragraphs are hard to read on narrow screens - a ragged
     left edge costs the reader on every line. Left-align body copy, but
     leave short headings and buttons centred.                              */
  .elementor-widget-text-editor p,
  .elementor-widget-text-editor {
    text-align: left !important;
  }

  /* ---- Layout & spacing ------------------------------------------------
     Several sections render edge-to-edge, so text touches the bezel.

     The gutter is applied to the TEXT-BEARING WIDGETS rather than to a
     structural wrapper, because the pages use two different generations of
     Elementor markup: index/about use .elementor-container, while donate and
     the other inner pages use .elementor-row / .elementor-column-wrap with no
     .elementor-container at all. Targeting widgets works for both, and it
     leaves images, heroes and dividers full-bleed - which is what we want on
     a phone.

     Deliberately NOT padded: .container (the global page wrapper - padding it
     insets the whole site and boxes in full-bleed heroes).                  */

  .elementor-widget-text-editor,
  .elementor-widget-heading,
  .elementor-widget-button,
  .elementor-widget-icon-list,
  .elementor-widget-icon-box,
  .elementor-widget-form,
  .elementor-widget-wp-widget-give_forms_widget,
  .elementor-widget-testimonial,
  .elementor-widget-counter,
  .elementor-widget-divider {
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
  }

  /* Never double the gutter when these widgets nest. */
  .elementor-widget-text-editor .elementor-widget-text-editor,
  .elementor-widget-heading .elementor-widget-heading {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Stack every multi-column row into a single column. */
  .elementor-column,
  .elementor-col-25,
  .elementor-col-33,
  .elementor-col-50,
  .elementor-col-66,
  .elementor-col-75 {
    width: 100% !important;
  }

  /* ...except the header row. The logo and the hamburger live in separate
     columns and must stay side by side - stacking them drops the toggle onto
     its own line and doubles the header height.

     Keep the row horizontal and let the two columns share it, rather than
     setting widths: the pages use different column counts in the header
     (col-33 vs col-50), so a fixed width breaks one or the other.

     The header is identified by the HAMBURGER TOGGLE it contains - not by the
     logo filename, and not by the nav menu:
       - logo filename: logos are uploaded as timestamps (1655969595.png), so
         an img[src*="logo"] selector matches nothing on these pages.
       - nav menu: the FOOTER contains a nav menu too, so keying on that
         matched 6 rows instead of 2 and squeezed the footer newsletter
         heading down to 24px wide (one letter per line).
     Only the header carries a menu-toggle, so that is the reliable hook.     */

  /* The theme only swaps the horizontal nav for the hamburger below 767px, so
     at 768-1024px BOTH render and the nav lands on top of the logo ("CONTACT"
     wrapping onto a second line). Extend the swap across the whole range.    */

  .elementor-nav-menu--main {
    display: none !important;
  }

  .elementor-menu-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
  }

  .elementor-row:has([class*="menu-toggle"]),
  .elementor-container:has([class*="menu-toggle"]) {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 14px;
  }

  /* The toggle and the Donate button ended up edge to edge (0px apart), which
     is a mis-tap waiting to happen. Keep them clearly separated.            */
  .elementor-menu-toggle {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  /* Inner wrappers must not re-introduce wrapping. */
  .elementor-row:has([class*="menu-toggle"]) .elementor-widget-wrap,
  .elementor-row:has([class*="menu-toggle"]) .elementor-column-wrap,
  .elementor-container:has([class*="menu-toggle"]) .elementor-widget-wrap {
    flex-wrap: nowrap !important;
  }

  .elementor-row:has([class*="menu-toggle"]) > .elementor-column,
  .elementor-container:has([class*="menu-toggle"]) > .elementor-column {
    width: auto !important;
    flex: 0 1 auto !important;
  }

  /* The logo column takes up the slack so the toggle sits hard right. */
  .elementor-row:has([class*="menu-toggle"]) > .elementor-column:has(img),
  .elementor-container:has([class*="menu-toggle"]) > .elementor-column:has(img) {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  /* Cap the logo by position (inside the header row) rather than filename. */
  .elementor-row:has([class*="menu-toggle"]) img,
  .elementor-container:has([class*="menu-toggle"]) img {
    max-width: 180px !important;
    height: auto !important;
  }

  /* Header widgets are already inside the row's own gutter - don't add more. */
  .elementor-row:has([class*="menu-toggle"]) .elementor-widget-heading,
  .elementor-row:has([class*="menu-toggle"]) .elementor-widget-button {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* NOTE: no blanket vertical-padding rule on .elementor-section.
     .elementor-section-boxed is Elementor's default class on almost every
     section, so padding it gives empty decorative sections (e.g. the black
     divider under the header) a height they never had. The desktop vertical
     padding is already reasonable on mobile - leave it alone.              */

  .elementor-spacer,
  .elementor-widget-spacer {
    max-height: 24px !important;
  }

  /* ---- Footer spacing ---------------------------------------------------
     The three footer strips each carry 40px top AND bottom padding for a
     single line of content, so the footer ran ~630px on a phone and read as
     a large empty gap under the copyright line. Measured on production:
       1a8bf649 (address)   284px tall
       2a273baa (socials)   162px tall
       4dafbd90 (copyright) 183px tall for 82px of content
     Trimming the padding keeps every element, just closes the gap.          */

  .elementor-element-1a8bf649,
  .elementor-element-2a273baa,
  .elementor-element-4dafbd90 {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }

  /* ---- Hero ------------------------------------------------------------
     The hero art is sized for desktop and clips its overlaid text on the
     right. Contain it and let the section size to content.                 */

  .elementor-section.hero,
  .elementor-section[class*="hero"],
  .banner-section,
  .page-banner {
    min-height: auto !important;
    background-size: cover !important;
    background-position: center center !important;
  }

  .hero img,
  [class*="hero"] img,
  .banner-section img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover;
  }

  /* ---- Forms -----------------------------------------------------------
     iOS Safari auto-zooms the whole page when a focused input has a
     font-size below 16px. The donate and contact fields are at 13-14px,
     so tapping a field currently zooms the layout. 16px stops that.        */

  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  input[type="search"],
  input[type="url"],
  input[type="date"],
  select,
  textarea {
    font-size: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 48px;
    padding: 12px 14px !important;
    box-sizing: border-box !important;
  }

  textarea {
    min-height: 120px;
  }

  /* Comfortable, thumb-sized targets. */
  button,
  .elementor-button,
  input[type="submit"],
  input[type="button"],
  a.btn,
  .btn {
    min-height: 48px !important;
    width: 100% !important;
    max-width: 100% !important;
    font-size: 1rem !important;
    padding: 14px 20px !important;
    box-sizing: border-box !important;
  }

  /* Space out stacked links so they aren't mis-tapped. */
  .elementor-widget-button + .elementor-widget-button {
    margin-top: 12px;
  }

  /* ---- Tables & wide content ------------------------------------------
     Anything genuinely wide scrolls inside its own box rather than
     widening the page.                                                     */

  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  pre,
  code {
    white-space: pre-wrap;
    word-break: break-word;
  }

  /* Long unbroken strings (emails, URLs) must not push the layout out. */
  a,
  li,
  span,
  td {
    overflow-wrap: break-word;
  }
}

/* --------------------------------------------------------------------------
   SMALL PHONES (<= 480px)
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {

  .elementor-section > .elementor-container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  h1,
  .elementor-heading-title {
    font-size: clamp(1.5rem, 8vw, 2rem) !important;
  }

  .elementor-row:has([class*="menu-toggle"]) img,
  .elementor-container:has([class*="menu-toggle"]) img {
    max-width: 150px !important;
  }
}