/* ==========================================================================
   Kontext Italia - UI polish + responsive header
   Managed by Novamira. Disable kontext-polish.php to remove entirely.
   Design contract: "Kontext Plum Editorial" (active design system).
   ========================================================================== */

:root {
  --kx-plum: #75304F;
  --kx-plum-rgb: 117, 48, 79;
  --kx-orange: #CC6E48;
  --kx-ink: #0B0620;
  --kx-surface: #FAF6F4;
  --kx-hairline: rgba(var(--kx-plum-rgb), .16);
  --kx-btn-radius: 32px;
  --kx-card-radius: 10px;
  --kx-field-radius: 6px;
}

/* --------------------------------------------------------------------------
   1. HEADER - single-line logo + navigation
   The flex row is built in the block editor (core/group, flex, nowrap,
   space-between, blockGap 0). These rules only handle sizing and responsive
   behaviour that the block UI cannot express.
   -------------------------------------------------------------------------- */
/* Hairline under the header separates it from the hero without a heavy rule.
   Design contract: composed, low-variance, no elevation without meaning. */
.kx-header {
  border-bottom: 1px solid var(--kx-hairline);
}

/* The header group uses a constrained layout, which by default caps its child
   at --wp--style--global--content-size (42rem / 672px). That is the narrow
   READING column and it is far too tight for a header: at 1440px it left only
   482px for five nav links, so "Chi siamo" and "Domande Frequenti" wrapped to
   two text lines and the row went ragged.
   The header belongs at the WIDE width instead. */
.kx-header > .kx-header__row {
  max-width: var(--wp--style--global--wide-size, 80rem);
}

.kx-header__row {
  align-items: center;
  min-height: 56px;
}

/* Nav labels are short; never let one break across two lines. */
.kx-header__nav .wp-block-navigation-item__content {
  white-space: nowrap;
}

.kx-header__logo {
  margin: 0;
  flex: 0 0 auto;
  line-height: 0;
}

/* Inline width:200px comes from the image block. max-width is a DIFFERENT
   property, so it constrains the inline value with no !important needed.
   height:auto keeps the aspect ratio exact - no re-crop, no new file. */
.kx-header__logo img {
  display: block;
  max-width: min(190px, 46vw);
  height: auto;
}

.kx-header__nav {
  flex: 0 1 auto;
  min-width: 0;
}

/* Desktop navigation stays on one line. */
.kx-header__nav .wp-block-navigation__container {
  flex-wrap: nowrap;
  gap: 0;
}

/* Spacing lives in padding, not gap. */
.kx-header__nav .wp-block-navigation-item__content {
  position: relative;
  padding-block: .4rem;
  padding-inline: clamp(.45rem, .9vw, .8rem);
  transition: color .18s ease;
}

/* --------------------------------------------------------------------------
   2. NAVIGATION - hover + current-page indicator
   The theme emits aria-current="page" natively, so it drives the indicator.
   -------------------------------------------------------------------------- */
.kx-header__nav .wp-block-navigation-item__content::after {
  content: "";
  position: absolute;
  left: clamp(.45rem, .9vw, .8rem);
  right: clamp(.45rem, .9vw, .8rem);
  bottom: .1rem;
  height: 2px;
  background: var(--kx-orange);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .2s ease;
}

.kx-header__nav .wp-block-navigation-item:hover > a::after,
.kx-header__nav .wp-block-navigation-item__content:focus-visible::after {
  transform: scaleX(1);
}

.kx-header__nav .wp-block-navigation-item:hover > a {
  color: var(--kx-orange);
}

.kx-header__nav .wp-block-navigation-item__content[aria-current="page"] {
  color: var(--kx-orange);
  font-weight: 500;
}

.kx-header__nav .wp-block-navigation-item__content[aria-current="page"]::after {
  transform: scaleX(1);
}

.kx-header__nav .wp-block-navigation-item__content:focus-visible {
  outline: 2px solid var(--kx-plum);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Inside the mobile overlay the underline treatment is wrong - reset it. */
.kx-header__nav .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content::after {
  display: none;
}

.kx-header__nav .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content {
  padding-block: .55rem;
  padding-inline: 0;
}

/* Hamburger sits flush right on mobile. */
.kx-header__nav .wp-block-navigation__responsive-container-open {
  padding: .25rem;
}

/* --------------------------------------------------------------------------
   3. LANGUAGE SWITCHER (TranslatePress)
   Verified at 375px: the fixed switcher was the topmost hit-tested element
   over a contact-form input. TranslatePress writes --switcher-width as an
   inline custom property, but it only feeds `width: var(--switcher-width)`,
   so setting `width` directly overrides it without !important.
   -------------------------------------------------------------------------- */
.trp-floating-switcher {
  z-index: 900;
  bottom: 10px;
}

@media (max-width: 900px) {
  .trp-floating-switcher .trp-language-item-name {
    display: none;
  }
  .trp-floating-switcher {
    width: auto;
    min-width: 0;
    right: 8px;
    bottom: 8px;
    opacity: .92;
  }
  .trp-floating-switcher .trp-language-item__current {
    padding: 8px 10px;
  }
}

/* --------------------------------------------------------------------------
   4. BUTTONS - one component
   The five block buttons already render identically (plum pill). This
   formalises that and adds the missing hover / active / focus states.
   The hero "Approfondisci ora" carries an inline background-color and is
   deliberately excluded: it is the inverse variant for the dark hero.
   -------------------------------------------------------------------------- */
.wp-element-button,
.wp-block-button__link,
.wpforms-container .wpforms-submit {
  border-radius: var(--kx-btn-radius);
  font-family: inherit;
  font-weight: 500;
  line-height: 1.2;
  transition: background-color .18s ease, color .18s ease, transform .12s ease;
}

.wp-block-button__link:not([style*="background-color"]):hover,
.wpforms-container .wpforms-submit:hover {
  background-color: var(--kx-orange);
  color: #fff;
}

.wp-block-button__link:active,
.wpforms-container .wpforms-submit:active {
  transform: translateY(1px);
}

.wp-block-button__link:focus-visible,
.wpforms-container .wpforms-submit:focus-visible {
  outline: 3px solid var(--kx-plum);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   5. CONTACT FORM (WPForms #188, lives in the footer template part)
   Styling only. Field names, required flags, privacy checkbox text/link and
   the submit action are untouched. WPForms loads only its base stylesheet
   (layout, not appearance), so none of this needs !important.
   -------------------------------------------------------------------------- */
.wpforms-container#wpforms-188 {
  max-width: 720px;
  margin-inline: auto;
  padding: clamp(1.25rem, 4vw, 2.5rem);
  background: var(--kx-surface);
  border: 1px solid var(--kx-hairline);
  border-radius: var(--kx-card-radius);
}

.wpforms-container#wpforms-188 .wpforms-field {
  padding: 0;
  margin-bottom: 1.25rem;
}

.wpforms-container#wpforms-188 .wpforms-field-label {
  display: block;
  margin-bottom: .4rem;
  font-weight: 600;
  font-size: .95rem;
  color: var(--kx-plum);
}

.wpforms-container#wpforms-188 .wpforms-field-sublabel {
  display: block;
  margin-top: .3rem;
  font-size: .8rem;
  opacity: .75;
}

.wpforms-container#wpforms-188 input[type="text"],
.wpforms-container#wpforms-188 input[type="email"],
.wpforms-container#wpforms-188 input[type="tel"],
.wpforms-container#wpforms-188 input[type="url"],
.wpforms-container#wpforms-188 textarea {
  width: 100%;
  box-sizing: border-box;
  padding: .7rem .85rem;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--kx-plum);
  background: #fff;
  border: 1px solid var(--kx-hairline);
  border-radius: var(--kx-field-radius);
  transition: border-color .16s ease, box-shadow .16s ease;
}

.wpforms-container#wpforms-188 textarea {
  min-height: 150px;
  resize: vertical;
}

/* WPForms caps .wpforms-field-medium at max-width:60%, which is what makes
   the fields look ragged inside the card. Normalise to the card width. */
.wpforms-container#wpforms-188 input.wpforms-field-medium,
.wpforms-container#wpforms-188 textarea.wpforms-field-medium,
.wpforms-container#wpforms-188 .wpforms-field-medium {
  max-width: 100%;
}

.wpforms-container#wpforms-188 input:focus,
.wpforms-container#wpforms-188 textarea:focus {
  outline: none;
  border-color: var(--kx-plum);
  box-shadow: 0 0 0 3px rgba(var(--kx-plum-rgb), .18);
}

.wpforms-container#wpforms-188 ::placeholder {
  color: rgba(var(--kx-plum-rgb), .45);
}

/* Nome / Cognome: WPForms already lays this row out with flex + container
   queries, so the row layout is deliberately left alone. */
.wpforms-container#wpforms-188 .wpforms-field-name fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}
.wpforms-container#wpforms-188 .wpforms-field-name legend.wpforms-field-label {
  padding: 0;
}
/* NOTE: no `gap` and no `padding` override on the Nome/Cognome row.
   WPForms lays the two halves out at width:50% with 10px padding gutters,
   which is already the correct "spacing in padding, zero gap" pattern.
   Adding gap:1rem on top made it 360px + 360px + 16px = 736px inside a 720px
   row, so the second half wrapped onto its own line, and padding:0 removed
   the gutter. Both overrides are deliberately absent. Do not re-add them. */

.wpforms-container#wpforms-188 .wpforms-field-checkbox ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.wpforms-container#wpforms-188 .wpforms-field-checkbox li {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
}
.wpforms-container#wpforms-188 .wpforms-field-checkbox input[type="checkbox"] {
  flex: 0 0 auto;
  margin-top: .2rem;
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--kx-plum);
}
.wpforms-container#wpforms-188 .wpforms-field-label-inline {
  font-size: .9rem;
  line-height: 1.5;
}

.wpforms-container#wpforms-188 .wpforms-submit {
  padding: .72rem 1.4rem;
  font-size: 1rem;
  color: #fff;
  background-color: var(--kx-plum);
  border: none;
  cursor: pointer;
}

.wpforms-container#wpforms-188 label.wpforms-error {
  display: block;
  margin-top: .35rem;
  font-size: .85rem;
  color: #B3261E;
}
.wpforms-container#wpforms-188 input.wpforms-error,
.wpforms-container#wpforms-188 textarea.wpforms-error {
  border-color: #B3261E;
}

@media (max-width: 900px) {
  .wpforms-container#wpforms-188 .wpforms-submit-container {
    padding-bottom: 3.5rem;
  }
}

/* --------------------------------------------------------------------------
   6. COURSE CARDS (Percorsi)
   core/media-text with is-image-fill-element: the photo is a FILL box, so
   anything that changes the card's width or height silently re-crops it.
   Verified: an earlier draft using height:100% re-framed pic-website.png from
   640x250 to 368x400. The ring therefore uses box-shadow, not border, so it
   adds ZERO layout box and the media geometry stays pixel-identical.
   -------------------------------------------------------------------------- */
.wp-block-media-text.is-style-ext-preset--media-text--natural-1--card-1 {
  border-radius: var(--kx-card-radius);
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--kx-hairline);
  transition: box-shadow .2s ease;
}

.wp-block-media-text.is-style-ext-preset--media-text--natural-1--card-1:hover {
  box-shadow: 0 0 0 1px var(--kx-hairline),
              0 6px 20px rgba(var(--kx-plum-rgb), .12);
}

.wp-block-media-text.is-style-ext-preset--media-text--natural-1--card-1
  > .wp-block-media-text__content > * + * {
  margin-top: .75rem;
}

.wp-block-media-text.is-style-ext-preset--media-text--natural-1--card-1
  > .wp-block-media-text__content > .wp-block-buttons {
  margin-top: 1.25rem;
}

/* --------------------------------------------------------------------------
   7. RESPONSIVE SAFETY NET
   Guards against horizontal overflow at every breakpoint without changing
   any layout the editor owns.
   -------------------------------------------------------------------------- */
img,
video,
iframe {
  max-width: 100%;
}

/* Long unbroken strings (URLs, emails) must not push the page wide. */
.wp-block-post-content,
.wp-site-blocks p,
.wp-site-blocks li,
.wp-site-blocks h1,
.wp-site-blocks h2,
.wp-site-blocks h3 {
  overflow-wrap: break-word;
}

/* Wide media inside constrained content scrolls in its own box rather than
   widening the page. */
.wp-site-blocks .wp-block-table {
  overflow-x: auto;
}

/* NOTE: deliberately no min-height rule for stacked fill media here.
   Extendable already sets its own mobile min-height (250px) on
   .wp-block-media-text__media. Because this stylesheet loads at priority 100,
   an equal-specificity min-height here WINS over the theme and silently
   re-crops all three course photos (measured: 250px -> 220px at 393px wide).
   The theme's own value is correct; leave it alone. */

/* --------------------------------------------------------------------------
   8. MOTION
   Design dial motion = 0.4. Honour reduced-motion above the lowest settings.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .kx-header__nav .wp-block-navigation-item__content,
  .kx-header__nav .wp-block-navigation-item__content::after,
  .wp-element-button,
  .wp-block-button__link,
  .wpforms-container .wpforms-submit,
  .wp-block-media-text.is-style-ext-preset--media-text--natural-1--card-1 {
    transition: none;
  }
  .wp-block-button__link:active,
  .wpforms-container .wpforms-submit:active {
    transform: none;
  }
}