/* =Child-Theme responsive styles starts here
-------------------------------------------------------------- */

/* No automatic word splitting in headings ("Contribute to the fu-ture").
   The theme's __responsive.css sets hyphens:auto on h1-h6 at its phone
   breakpoints; whole words wrap instead. overflow-wrap:break-word (theme)
   still keeps a word longer than the line from overflowing. */
h1, h2, h3, h4, h5, h6 {
  -webkit-hyphens: manual;
  -ms-hyphens: manual;
  hyphens: manual;
}

/* Narrow-content columns go full width on phones.

   417 Elementor columns on 79 pages and layouts (and 10 at 1/2) set the
   trx_addons "Content width" to 3/4: on desktop a centred text column, as
   designed. Below 1440px trx_addons swaps the percentage for a fixed width
   per breakpoint (trx_addons __responsive.css: 825, 723, 531, then 330px below
   768px and 210px below 480px), calibrated to a page narrower than ours. On a
   393px phone the text ran down a 210px strip in the middle of the screen.
   Its own phone variant (`sc-mobile_inner_width_1_1`, Elementor's mobile
   value) is pinned the same way (440 / 280px), so per-section settings in
   Elementor cannot fix it. Hence one rule for every such column. Tablets keep
   the 3/4, which still reads well there (531px of ~708px). The column class
   raises the weight above trx_addons' two-class selectors. */
@media (max-width: 767px) {
  .elementor-column[class*="sc_inner_width_"] > .elementor-widget-wrap,
  .elementor-column[class*="sc_inner_width_"] > .elementor-column-wrap,
  .elementor-column[class*="sc-tablet_inner_width_"] > .elementor-widget-wrap,
  .elementor-column[class*="sc-tablet_inner_width_"] > .elementor-column-wrap,
  .elementor-column[class*="sc-mobile_inner_width_"] > .elementor-widget-wrap,
  .elementor-column[class*="sc-mobile_inner_width_"] > .elementor-column-wrap {
    width: 100%;
  }
}

/* Plain h2 headings on phones ("Ce facem", "Despre noi povestesc:"…).

   The theme's __responsive.css steps h2 down from 38px on desktop to 24px
   below 768px and 22px below 480px, which left section titles barely above
   the 20px h3 and well under the 26px h1. These two steps are larger. They
   stay at or below the theme's h1 for the same widths (30 / 26px), so the
   order of headings holds. This file is enqueued after __responsive.css, so
   the same selector wins. Headings with their own size set in Elementor are
   not affected. */
@media (max-width: 767px) {
  h2 {
    font-size: 28px;
    line-height: 34px;
  }
}
@media (max-width: 479px) {
  h2 {
    font-size: 26px;
    line-height: 32px;
  }
}