/*
Theme Name: Căsuța emoțiilor
Theme URI: https://casutaemotiilor.ro
Description: Child theme of Inspiro. Supplies the front-end assets of two plugins that can no longer be installed, plus the handful of rules the original site set through the customizer's Additional CSS, which the static export did not preserve.
Author: Anca Manea
Template: inspiro
Version: 1.0.0
*/

/*
 * Everything below reproduces styling the live site has but Inspiro does not
 * apply on its own. Typography lives in the customizer instead (see
 * scripts/configure-inspiro.php); only rules with no customizer equivalent are
 * here. Block layout rules are deliberately absent: the child theme forces the
 * monolithic core block stylesheet, which supplies them.
 */

/* Inspiro spaces images; the live site does not. */
img { margin-bottom: 0 !important; }
.wp-block-image { margin-bottom: .5em; }

.custom-logo-text-with-image {
  font-family: Jost, sans-serif;
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
}

#side-nav .title { text-transform: none; }

/*
 * Contain the floats inside accordion panels.
 *
 * The panels on /servicii/ hold `alignleft` figures, and the plugin leaves the
 * panel as a plain block -- so the float is not contained. While a panel
 * collapses its height shrinks but the float still occupies its box, and a
 * float intrudes into the line boxes of following content: the titles below
 * shift right past the float's edge, then snap back once the panel leaves the
 * flow. flow-root makes the panel a block formatting context, which contains
 * the float. (The same glitch is present on the live site.)
 */
.lightweight-accordion .lightweight-accordion-body { display: flow-root; }
.navbar a { text-decoration: none; }
.entry-cover-image .entry-title::after { display: none; }
.entry-content .has-huge-font-size { font-size: 42px; }

/*
 * The outline button style.
 *
 * Block style variations ship their CSS per block and are enqueued only when
 * that block renders. The recovered content has no block delimiters, so
 * nothing renders and `is-style-outline` never gets its styles -- the buttons
 * come out filled dark instead of a transparent pill with a white border.
 */
.entry-content .wp-block-button.is-style-outline > .wp-block-button__link {
  border: 2px solid;
  padding: .667em 1.333em;
}
.entry-content .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color) {
  color: currentColor;
}
.entry-content .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background) {
  background-color: transparent;
  background-image: none;
}

td:first-child,
th:first-child { padding-left: .5em !important; }

.entry-content .wp-block-table table { border-collapse: collapse; }
.entry-content .wp-block-table td,
.entry-content .wp-block-table th {
  border: 1px solid #555;
  padding: .5em;
}

@media screen and (max-width: 64em) {
  /* Six of the seven live pages render the logo text at 18px in a full-width
     wrapper. The seventh, /testimoniale/, shows 24px in a narrow one -- it is
     an orphan page (unlinked, absent from the sitemap) whose static copy was
     exported before these rules landed, and it also carries the pre-edit logo
     alt text. Match the six, not the stale one. */
  .custom-logo-text-with-image { font-size: 18px; }
  .navbar .header-logo-wrapper { max-width: 100%; }
  .wp-block-image .alignleft { float: none; margin: auto; }
}

/* Long Romanian strings overflow the hero on narrow phones. */
@media screen and (max-width: 480px) {
  .site-branding-text {
    box-sizing: border-box;
    display: block !important;
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px) !important;
    padding-left: 8px;
    padding-right: 8px;
  }
  .site-title { width: 100%; overflow-wrap: anywhere; }
  .site-description { width: 100%; overflow-wrap: anywhere; }
}