/* cms.css (PORTAUTH, hand-written, NOT generated): CMS pages, the contact form and the 404 on the ported storefront.
   Mock: design/mock/cms.html (dv-pagehead = ledger rule + display title + lead, then prose). Luma form controls are restyled to the tokens:
   2 px corners, navy submit (BRAND-RULES O-2 / O-3). Tokens only. Loaded after the bundles by the devir_ported_cms handle. */
@layer components {
  .dv-pagehead { padding-block: var(--s-sp-5) var(--s-sp-3); }
  .dv-pagehead .dv-ledger-head { margin-block-end: 0; }
  .dv-pagehead p.dv-t-lead { padding-block-start: var(--s-sp-3); }

  /* ---- Prose: the CMS / Page Builder body ---- */
  /* The page head is its own .dv-wrap; the body (.columns) gets the same width so both start on the same line as the header. */
  .dv-cms-page .columns { width: min(100% - 2 * var(--s-gutter), var(--s-wrap)); margin-inline: auto; padding-block: var(--s-sp-4) var(--s-sp-8); }
  .dv-cms-page .column.main > * + *, .dv-cms-page .cms-content > * + * { margin-block-start: var(--s-sp-4); }
  .dv-cms-page .column.main { max-width: var(--p-measure-body); font: var(--t-body); color: var(--s-text); }
  .dv-cms-page .column.main h2 { font: var(--t-title); letter-spacing: var(--p-track-display); margin-block-start: var(--s-sp-6); }
  .dv-cms-page .column.main h3 { font: var(--t-heading-sm); margin-block-start: var(--s-sp-5); }
  .dv-cms-page .column.main p, .dv-cms-page .column.main li { font: var(--t-body); }
  .dv-cms-page .column.main ul, .dv-cms-page .column.main ol { padding-inline-start: var(--s-sp-5); display: grid; gap: var(--s-sp-1); }
  .dv-cms-page .column.main img { max-width: 100%; height: auto; border-radius: var(--s-radius); }
  /* A campaign page (black-friday-2026) opens with its banner at the full wrap width; the text below keeps the body measure. */
  .dv-cms-page .column.main:has(.dv-cms-banner) { max-width: none; }
  .dv-cms-page .column.main:has(.dv-cms-banner) :where(h2, h3, p, ol, ul):not(.dv-cms-banner) { max-width: var(--p-measure-body); }
  .dv-cms-page .column.main .dv-cms-banner { margin-block-start: 0; }
  .dv-cms-page .column.main .dv-cms-banner img { display: block; width: 100%; aspect-ratio: var(--c-hero-ratio-d); object-fit: cover; }

  /* ---- Contact form (Magento_Contact) ---- */
  .dv-cms-page .form.contact { display: grid; gap: var(--s-sp-5); max-width: var(--p-measure-body); }
  .dv-cms-page .form.contact .fieldset { display: grid; gap: var(--s-sp-4); margin: 0; padding: 0; border: 0; min-width: 0; }
  .dv-cms-page .form.contact .legend { padding: 0; margin-block-end: var(--s-sp-3); font: var(--t-heading-sm); }
  .dv-cms-page .form.contact .legend + br { display: none; }
  .dv-cms-page .form.contact .field { display: grid; gap: var(--s-sp-2); }
  .dv-cms-page .form.contact .field.note { font: var(--t-small); color: var(--s-text-muted); }
  .dv-cms-page .form.contact .label { font: var(--t-small); }
  .dv-cms-page .form.contact .required > .label > span::after { content: " *"; color: var(--s-text-error); }
  .dv-cms-page .form.contact input.input-text, .dv-cms-page .form.contact textarea { width: 100%; padding-inline: var(--s-sp-3); border: var(--s-rule-w) solid var(--c-field-edge); border-radius: var(--s-radius); background: var(--s-surface); color: var(--s-text); font: var(--t-body); transition: border-color var(--s-dur) var(--s-ease), background-color var(--s-dur) var(--s-ease); }
  .dv-cms-page .form.contact input.input-text { height: var(--c-field-h); }
  .dv-cms-page .form.contact textarea { min-height: calc(var(--c-field-h) * 3); padding-block: var(--s-sp-3); resize: vertical; }
  .dv-cms-page .form.contact input.input-text:hover, .dv-cms-page .form.contact textarea:hover { border-color: var(--s-text); background: var(--c-hover-tint); }
  .dv-cms-page .form.contact input.input-text:focus-visible, .dv-cms-page .form.contact textarea:focus-visible { outline: var(--s-ring-w) solid var(--s-focus-on-light); outline-offset: var(--p-1); border-color: var(--s-text); }
  .dv-cms-page .form.contact .mage-error:not(input):not(textarea) { font: var(--t-small); color: var(--s-text-error); }
  .dv-cms-page .form.contact input.mage-error, .dv-cms-page .form.contact textarea.mage-error { border-color: var(--s-text-error); border-width: var(--s-rule-w-2); }
  .dv-cms-page .form.contact .actions-toolbar { display: flex; flex-wrap: wrap; gap: var(--s-sp-3); }
  .dv-cms-page .form.contact .actions-toolbar .primary { display: contents; }
  .dv-cms-page .form.contact button.action.submit {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s-sp-2); min-height: var(--c-field-h); padding-inline: var(--s-sp-5);
    border: var(--s-rule-w) solid var(--c-btn-bg); border-radius: var(--s-radius); background: var(--c-btn-bg); color: var(--c-btn-fg);
    font: var(--t-body); font-weight: var(--s-weight-strong); cursor: pointer;
    transition: background-color var(--s-dur) var(--s-ease), border-color var(--s-dur) var(--s-ease);
  }
  .dv-cms-page .form.contact button.action.submit:hover { background: var(--c-btn-hover-bg); border-color: var(--c-btn-hover-bg); }
  .dv-cms-page .form.contact button.action.submit:disabled { cursor: not-allowed; background: var(--c-btn-disabled-bg); color: var(--c-btn-disabled-fg); border-color: var(--c-btn-disabled-edge); }

  /* ---- Page messages (contact "thanks" / error) ---- */
  .dv-cms-page .page.messages { width: min(100% - 2 * var(--s-gutter), var(--s-wrap)); margin-inline: auto; padding-block-start: var(--s-sp-5); }
  .dv-cms-page .page.messages .messages { display: grid; gap: var(--s-sp-3); }
  .dv-cms-page .message { display: flex; align-items: flex-start; gap: var(--s-sp-3); padding: var(--s-sp-3) var(--s-sp-4); border: var(--s-rule-w) solid var(--s-edge); border-radius: var(--s-radius); background: var(--c-chip-info); color: var(--s-text); font: var(--t-body); }
  .dv-cms-page .message-error { background: var(--c-chip-out); }
  .dv-cms-page .message-success { background: var(--c-chip-in); }
  .dv-cms-page .message-warning, .dv-cms-page .message-notice { background: var(--c-chip-warn); }
  .dv-cms-page .message > * { margin: 0; }

  /* ---- 404 ---- */
  .dv-noroute-page .columns { width: min(100% - 2 * var(--s-gutter), var(--s-wrap)); margin-inline: auto; padding-block: var(--s-sp-4) var(--s-sp-8); }
  .dv-noroute { max-width: var(--p-measure-body); }
  .dv-noroute__search { display: grid; gap: var(--s-sp-3); align-items: end; }
  .dv-noroute__search .dv-btn { justify-self: start; }
  @media (min-width: 768px) {
    .dv-noroute__search { grid-template-columns: minmax(0, 1fr) auto; }
  }
}