/* ============================================================
   WordPress-only glue. Everything visual comes from the mockup's own CSS
   (base.css / page-*.css / tail.css, extracted verbatim). This file only
   undoes what Elementor and JetMenu add around that markup.
   ============================================================ */

/* Bands are neutral: on the front end the Elementor container and its widget
   wrappers generate no box, so each <section> is laid out as a direct child
   of the page — as in the mockup. That is what lets the menu page's sticky
   category bar stick for the whole page instead of inside a 60px wrapper.
   The editor keeps the boxes so bands stay selectable. */
body:not(.elementor-editor-active) .bento-band,
body:not(.elementor-editor-active) .bento-band > .elementor-element,
body:not(.elementor-editor-active) .bento-band .bento-band__body > .elementor-widget-container,
body:not(.elementor-editor-active) .bento-chrome,
body:not(.elementor-editor-active) .bento-chrome > .elementor-element,
body:not(.elementor-editor-active) .bento-chrome .bento-band__body > .elementor-widget-container{
  display:contents;
}
main#main{display:block}

/* Elementor's `.elementor a{text-decoration:none}` sits in a cascade layer now
   (Assets::layer_elementor), which beats every mockup rule — but author CSS in
   any layer still outranks the browser's own default underline, which is all
   the mockup relies on for plain links. Zero specificity: any mockup rule that
   styles a link still wins. */
:where(.elementor a){text-decoration-line:revert}

/* ---------- JetMenu in the mockup's header ----------
   JetMenu renders the desktop nav (the brief asked for its mega menu). These
   rules make its markup read exactly like the mockup's `.nav a`: same size,
   colour, 24px rhythm and the salmon underline that slides in on hover and
   sits under the current page. JetMenu's own item padding/background vars are
   zeroed so the mockup's spacing is the only spacing. */
.nav--jet{display:none}
@media (min-width:1000px){ .nav--jet{display:flex;align-items:center} }
.nav--jet .jet-mega-menu{
  --jmm-top-items-gap:var(--s3);
  --jmm-top-items-ver-padding:0px; --jmm-top-items-hor-padding:0px;
  --jmm-top-item-bg-color:transparent; --jmm-top-hover-item-bg-color:transparent; --jmm-top-active-item-bg-color:transparent;
  --jmm-top-menu-bg-color:transparent; --jmm-top-menu-ver-padding:0px; --jmm-top-menu-hor-padding:0px;
  --jmm-sub-menu-bg-color:transparent; --jmm-mega-container-ver-padding:0px; --jmm-mega-container-hor-padding:0px;
  --jmm-items-dropdown-gap:0px;
}
.nav--jet .jet-mega-menu-list{gap:var(--s3)}
.nav--jet .jet-mega-menu-item__link--top-level{
  display:block;color:rgba(251,247,242,.82);text-decoration:none;font-size:15px;font-weight:500;line-height:1.65;
  padding:6px 2px;position:relative;transition:color .2s var(--ease);
}
.nav--jet .jet-mega-menu-item__link--top-level .jet-mega-menu-item__title,
.nav--jet .jet-mega-menu-item__link--top-level .jet-mega-menu-item__label{color:inherit;font:inherit}
.nav--jet .jet-mega-menu-item__link--top-level::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;
  background:var(--c-accent);transition:right .25s var(--ease);
}
.nav--jet .jet-mega-menu-item__link--top-level:hover,
.nav--jet .jet-mega-menu-item__link--top-level[aria-current="page"],
.nav--jet .jet-mega-menu-item--hover > .jet-mega-menu-item__inner > .jet-mega-menu-item__link--top-level{color:#FBF7F2}
.nav--jet .jet-mega-menu-item__link--top-level:hover::after,
.nav--jet .jet-mega-menu-item__link--top-level[aria-current="page"]::after,
.nav--jet .jet-mega-menu-item--hover > .jet-mega-menu-item__inner > .jet-mega-menu-item__link--top-level::after{right:0}
.nav--jet .jet-mega-menu-item__dropdown{display:none}
.nav--jet .jet-mega-menu-item__inner{gap:2px}
.nav--jet .mega-toggle{
  display:inline-grid;place-items:center;width:24px;height:24px;margin:0 -6px 0 0;padding:0;
  background:transparent;border:0;border-radius:6px;color:rgba(251,247,242,.82);cursor:pointer;
  transition:color .2s var(--ease),transform .22s var(--ease);
}
.nav--jet .mega-toggle:hover,.nav--jet .mega-toggle[aria-expanded="true"]{color:#FBF7F2}
.nav--jet .jet-mega-menu-item--hover .mega-toggle svg{transform:rotate(180deg)}
.nav--jet .mega-toggle svg{transition:transform .22s var(--ease)}
.nav--jet .mega-toggle:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px}
.nav--jet .jet-mega-menu-item__inner:focus-visible{outline:2px solid var(--c-accent);outline-offset:4px;border-radius:4px}

/* The Meny panel hangs under its own item, the same way the restaurant picker
   hangs under its button, and uses the picker's card language. */
.nav--jet .jet-mega-menu-item--mega{position:relative}
.nav--jet .jet-mega-menu.jet-mega-menu--layout-horizontal .jet-mega-menu-item--mega > .jet-mega-menu-mega-container{
  left:50% !important;width:min(380px,calc(100vw - 48px)) !important;top:calc(100% + 18px);
  transform:translateX(-50%);
}
.nav--jet .jet-mega-menu-item--mega > .jet-mega-menu-mega-container::before{
  /* hover bridge across the 18px gap, so the panel does not close on the way down */
  content:"";position:absolute;left:0;right:0;top:-18px;height:18px;
}
.mega-meny{
  display:grid;grid-template-columns:1fr 240px;gap:var(--s3);
  background:#fff;border:1px solid var(--c-line);border-radius:18px;box-shadow:var(--sh-3);
  padding:var(--s3);color:var(--c-text);text-align:left;
}
.mega-meny__h{margin:0 0 var(--s2);font-size:var(--t-eyebrow);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--c-accent-ink)}
.mega-meny__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px}
.mega-meny__link{display:block;padding:10px 12px;border-radius:12px;text-decoration:none;color:var(--c-text);transition:background .18s var(--ease)}
.mega-meny__link:hover,.mega-meny__link:focus-visible{background:#F4EEE7}
.mega-meny__name{display:block;font-weight:700;letter-spacing:-.01em;line-height:1.3}
.mega-meny__meta{display:block;margin-top:2px;font-size:13px;line-height:1.35;color:#5E5F78} /* --c-muted is 4.43:1 on the hover tint; this is 5.39:1 */
.mega-meny__card{background:var(--c-primary);color:#FBF7F2;border-radius:14px;padding:var(--s3);display:flex;flex-direction:column;gap:10px}
.mega-meny__card .mega-meny__h{color:var(--c-accent)}
.mega-meny__lede{margin:0 0 6px;font-size:var(--t-small);line-height:1.5;color:rgba(251,247,242,.82)}
.mega-meny__order{color:#FBF7F2;font-weight:600;font-size:15px;text-decoration:none;display:flex;justify-content:space-between}
.mega-meny__order::after{content:"→";color:var(--c-accent)}
.mega-meny__order:hover{color:var(--c-accent)}
.mega-meny__all{
  margin-top:auto;display:inline-flex;justify-content:center;min-height:44px;align-items:center;border-radius:999px;
  background:var(--c-accent);color:var(--c-deep);font-weight:600;font-size:15px;text-decoration:none;
}

/* ---------- Formidable inside the mockup's form card ----------
   Formidable emits the mockup's own classes (field, control, field-hint,
   consent, btn btn-primary), so page-kontakt.css styles the fields. These
   rules only lay Formidable's flat field list out as the mockup's two-up
   rows and style what the mockup never had: errors and the success message.
   Formidable's own stylesheet is off for this form (custom_style=0). */
.form-card .frm_forms fieldset{border:0;margin:0;padding:0;min-width:0}
.form-card .frm_fields_container{display:grid;grid-template-columns:minmax(0,1fr);column-gap:var(--s3)}
.form-card .frm_fields_container > *{grid-column:1/-1}
@media (min-width:640px){
  .form-card .frm_fields_container{grid-template-columns:1fr 1fr}
  .form-card .frm_fields_container > .bento-half{grid-column:auto}
}
.form-card .field .req:empty{display:none}
.form-card .frm_screen_reader,.form-card .frm_hidden,.form-card .frm_verify{
  position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.form-card .frm_hidden_container,.form-card .frm_none_container{display:none}
.form-card .consent{flex-direction:column;gap:0;padding:12px 0;margin-bottom:var(--s3)}
.form-card .consent .frm_checkbox label{display:block;position:relative;padding-left:34px;min-height:24px;font-size:var(--t-small);line-height:1.5;color:var(--c-text);cursor:pointer}
/* the required mark follows the text inline, as in the mockup — Formidable escapes HTML in option labels */
.form-card .consent .frm_checkbox label::after{content:" *";color:var(--c-accent-ink);font-weight:700}
.form-card .consent input[type="checkbox"]{position:absolute;left:0;top:0;width:22px;height:22px;margin:0;accent-color:var(--c-primary);cursor:pointer}
.form-card .field-error{margin:0;font-size:var(--t-small);line-height:1.45;color:#B3261E;font-weight:600}
.form-card .frm_blank_field .control{border-color:#B3261E}
.form-card .frm_blank_field .control:focus{box-shadow:0 0 0 3px rgba(179,38,30,.22)}
.form-card .frm_error_style{margin:0 0 var(--s3);padding:14px 16px;border-radius:14px;background:#FBEAE8;color:#8C1D18;font-size:var(--t-small)}
.form-card .frm_error_style p{margin:0}
.form-card .frm_message,.form-card .form-success{margin:0;padding:18px 20px;border-radius:14px;background:#EEF4EC;color:#1E4620;font-size:var(--t-body);line-height:1.6}
.form-card .frm_message p{margin:0}
.form-card .frm_button_submit[disabled]{opacity:.7;cursor:progress}
.form-card .frm_ajax_loading{display:none}

/* The mockup's «[… legges inn når klienten sender …]» markers are notes about
   missing client content, not design. On the paper ground their accent-ink text
   measured 4.29:1 (axe); one step darker clears AA. Dark grounds keep the
   mockup's own salmon rule. Remove with the markers once the content arrives. */
.placeholder{color:#94512C}
.on-dark .placeholder{color:var(--c-accent)}

/* The 2.5 s reveal fail-safe (site.js) applies instantly — see wp.js. */
html.reveal-now .reveal{transition:none !important}

/* Round 2 (2026-10-14): the Meny panel is the order card alone */
.mega-meny--order{grid-template-columns:1fr;padding:0;border:0;background:transparent;box-shadow:none}
.mega-meny--order .mega-meny__card{border:1px solid var(--c-line-dark);box-shadow:var(--sh-3);gap:6px}
.mega-meny--order .mega-meny__order{padding:10px 12px;margin:0 -12px;border-radius:12px;align-items:center}
.mega-meny--order .mega-meny__order:hover,.mega-meny--order .mega-meny__order:focus-visible{background:rgba(245,173,131,.12);color:#FBF7F2}
.mega-meny__town{display:block;font-weight:700}
.mega-meny__addr{display:block;font-size:13px;font-weight:400;color:rgba(251,247,242,.62);margin-top:2px}

/* Catering form: Formidable's option groups as the mockup's bordered rows, HTML fields as section labels */
.form-card .choice-label{margin:0 0 10px;font-size:var(--t-small);font-weight:600;color:var(--c-primary);line-height:1.4}
.form-card .choice .frm_radio,.form-card .choice .frm_checkbox{display:block}
.form-card .choice .frm_radio label,.form-card .choice .frm_checkbox label{display:flex;align-items:center;gap:12px;min-height:48px;padding:0 16px;border:1px solid var(--c-line);border-radius:14px;cursor:pointer;font-size:var(--t-small);background:#fff;color:var(--c-text)}
.form-card .choice input[type=radio],.form-card .choice input[type=checkbox]{width:20px;height:20px;accent-color:var(--c-primary);margin:0;flex:none}
.form-card .frm_html_container{grid-column:1/-1}
.form-card .control[type=date]{min-height:48px}

/* Error lines must not change the layout when they appear or clear. Formidable removes a field's error the moment
   the field loses focus — so a tap on the option below landed 29 px off (mousedown on one row, mouseup on another)
   and the delivery choice silently did not register (found 2026-10-14). The error sits in the 24 px gap below
   the field instead. */
.form-card .field,.form-card .frm_form_field{position:relative}
.form-card .field-error{position:absolute;left:0;top:100%;margin:3px 0 0;font-size:13px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.form-card .frm_form_field.bento-full .field-error{position:static;margin-top:6px;white-space:normal}