/* Small adjustments so the original template sits well inside DNN */

/* Clickable logo area over the header image */
#ttr_header_inner { position: relative; }
.mn-homelink { position: absolute; left: 0; top: 0; width: 40%; height: 100%; z-index: 3; }

/* Slides stack and fade (handled by js/midtnorge.js) */
#ttr_slideshow_inner > ul { margin: 0; padding: 0; position: relative; height: 100%; }
#ttr_slideshow_inner > ul > li { left: 0; top: 0; }

/* Panes: empty ones take no space for visitors, but are big drop targets in DNN edit mode */
.DNNEmptyPane { min-height: 0; }
.dnnEditState .mn-leftpane, .dnnEditState .mn-contentpane,
.dnnEditState #FooterLeftPane, .dnnEditState #FooterMiddlePane, .dnnEditState #FooterRightPane,
.dnnSortable, .dnnEditState .DNNEmptyPane {
    min-height: 80px; outline: 2px dashed #3d8fd1; outline-offset: -2px; position: relative;
}
.dnnEditState .mn-leftpane::before, .dnnEditState .mn-contentpane::before {
    content: attr(id); display: block; font: 11px Arial, sans-serif; color: #3d8fd1; padding: 2px 4px;
}

/* Breadcrumb inside the Navigasjon box */
#ttr_sidebar_left .breadcrumb { background: none; padding: 0; margin: 0; flex-wrap: wrap; }
#ttr_sidebar_left .breadcrumb > li + li::before { content: none; }
#ttr_sidebar_left .breadcrumb a { color: #8B0000; }

/* Page header produced by the Article container */
/* page heading keeps the template spacing */

/* Footer: same three-column layout as the original */
.footer-widget-area_fixed.row { margin-left: 0; margin-right: 0; }

/* DNN admin mode: keep module action menus clickable over the template */
.dnnEditState .actionMenu, .dnnEditState .dnn_mact { z-index: 1000; }

/* ---- Galleri: thumbnail grid + lightbox ---- */
.mn-gallery { display: flex; flex-wrap: wrap; gap: 10px; padding: 10px 0; }
.mn-gallery a.mn-lightbox { display: block; width: 150px; height: 150px; overflow: hidden; border: 1px solid #ddd; background: #fff; }
.mn-gallery a.mn-lightbox img { width: 100%; height: 100%; object-fit: cover; transition: transform .2s; }
.mn-gallery a.mn-lightbox:hover img { transform: scale(1.05); }
.mn-lb { position: fixed; inset: 0; background: rgba(0,0,0,.85); display: none; align-items: center; justify-content: center; z-index: 10000; }
.mn-lb.open { display: flex; }
.mn-lb img { max-width: 92vw; max-height: 86vh; box-shadow: 0 0 20px #000; }
.mn-lb button { position: absolute; background: none; border: 0; color: #fff; font-size: 40px; line-height: 1; cursor: pointer; padding: 10px 16px; }
.mn-lb .mn-lb-close { top: 10px; right: 14px; }
.mn-lb .mn-lb-prev { left: 10px; top: 50%; transform: translateY(-50%); }
.mn-lb .mn-lb-next { right: 10px; top: 50%; transform: translateY(-50%); }
.mn-lb .mn-lb-count { position: absolute; bottom: 14px; color: #ddd; font-size: 14px; }

/* ---- Kontaktskjema (same layout as the original form) ---- */
.mn-kontakt .mn-row { display: flex; flex-wrap: wrap; align-items: flex-start; margin-bottom: 14px; }
.mn-kontakt .mn-row label { flex: 0 0 25%; padding-top: 6px; }
.mn-kontakt .mn-row input, .mn-kontakt .mn-row textarea { flex: 1 1 60%; min-width: 200px; padding: 6px 8px; border: 1px solid #ccc; border-radius: 4px; background: #f5f5f5; font: inherit; }
.mn-kontakt .mn-buttons { padding-left: 25%; gap: 6px; }
.mn-kontakt .mn-hp { position: absolute; left: -9999px; }
.mn-kontakt .mn-status { margin-top: 10px; font-weight: bold; }
.mn-kontakt .mn-status.ok { color: #1a7f37; }
.mn-kontakt .mn-status.err { color: #c00; }
.mn-kontakt .mn-invalid { border-color: #c00 !important; }
@media (max-width: 600px) { .mn-kontakt .mn-row label { flex-basis: 100%; } .mn-kontakt .mn-buttons { padding-left: 0; } }

/* Menu: keep each separator beside its item, exactly like the original (desktop/tablet menu bar only).
   DNN's own stylesheet gives <hr> "clear:both", which pushed the floated separators below the links. */
@media (min-width: 768px) {
#ttr_page #ttr_menu ul.ttr_menu_items > li { display: flex !important; flex-direction: row !important; align-items: stretch !important; height: 41px; position: relative; }
#ttr_page #ttr_menu ul.ttr_menu_items > li > a,
#ttr_page #ttr_menu ul.ttr_menu_items > li > span { float: none !important; display: block !important; flex: 1 1 auto; line-height: 41px; white-space: nowrap; }
#ttr_page #ttr_menu ul.ttr_menu_items > li > hr.horiz_separator { float: none !important; clear: none !important; display: block !important; flex: 0 0 auto;
    width: 0 !important; height: 41px !important; margin: 0 !important; padding: 0 !important; border-width: 0 0 0 3px !important; border-style: solid !important; border-color: #4E4E4E !important; }
#ttr_page #ttr_menu ul.ttr_menu_items > li:last-child > hr.horiz_separator { display: none !important; }
#ttr_page #ttr_menu ul.ttr_menu_items > li > ul.dropdown-menu { top: 100%; left: 0; }
}

/* Edit mode: extra room under each pane's last module so new modules can be dropped below it */
.dnnEditState .mn-leftpane, .dnnEditState .mn-contentpane { padding-bottom: 60px; }

/* SliderPane: holds the banner images. Hidden for visitors (the slideshow shows them);
   visible in edit mode so the HTML module can be edited. */
.mn-sliderpane { display: none; }
.dnnEditState .mn-sliderpane { display: block; min-height: 80px; outline: 2px dashed #3d8fd1; outline-offset: -2px; background: #fff; padding: 4px; }
.dnnEditState .mn-sliderpane::before { content: "SliderPane - banner images (1001 x 288)"; display: block; font: 11px Arial, sans-serif; color: #3d8fd1; padding: 2px 4px; }
.dnnEditState .mn-sliderpane img { max-width: 220px; height: auto; display: inline-block; margin: 4px; border: 1px solid #ccc; }
.mn-sliderpane p { display: inline; margin: 0; }


/* =====================================================================
   PHONES AND TABLETS (below 1200px). Desktop (1200px and wider) is unchanged.
   ===================================================================== */
@media (max-width: 1199px) {
  /* Header: keep the header picture in proportion instead of squeezing it into 170px */
  #ttr_page header #ttr_header_inner { height: auto !important; aspect-ratio: 1000 / 144; background-size: 100% 100% !important; }

  /* Slider: keep banners in proportion (1001 x 288) */
  #ttr_page #ttr_slideshow_inner { height: auto !important; aspect-ratio: 1001 / 288; }
  #ttr_page #ttr_slideshow_inner > ul > li.ttr_slide { height: 100% !important; width: 100% !important; }
  #ttr_page #ttr_slideshow_inner ul > li > a { height: 100% !important; }
  #ttr_page #nav { top: auto !important; bottom: 6px; }

  /* Pictures in content and sidebar never get squeezed */
  #ttr_page .mn-contentpane img, #ttr_page .mn-leftpane img, #ttr_page #ttr_footer img { max-width: 100%; height: auto; }
}

/* Tablets: menu bar stays, but more compact so it fits on one line where possible */
@media (min-width: 768px) and (max-width: 1199px) {
  #ttr_page #ttr_menu ul.ttr_menu_items { flex-wrap: wrap; }
  #ttr_page #ttr_menu ul.ttr_menu_items > li { flex: 1 1 auto; margin: 0 !important; }
  #ttr_page #ttr_menu ul.ttr_menu_items > li > a, #ttr_page #ttr_menu ul.ttr_menu_items > li > span {
      margin: 0 !important; padding-left: 8px !important; padding-right: 8px !important; font-size: 13px !important; text-align: center !important; }
}

/* Phones (below 768px) */
@media (max-width: 767px) {
  /* Content first, sidebar boxes after it */
  #ttr_page #ttr_content_and_sidebar_container { display: flex; flex-direction: column; }
  #ttr_page #ttr_content { order: 1; }
  #ttr_page #ttr_sidebar_left { order: 2; margin-top: 12px; }
  #ttr_page #ttr_content_and_sidebar_container > div[style*="clear"] { order: 3; }

  /* Mobile menu: simple full-width list, sub-pages shown indented */
  #ttr_page #ttr_menu ul.ttr_menu_items { display: block !important; width: 100%; padding: 0; margin: 0; }
  #ttr_page #ttr_menu ul.ttr_menu_items > li { display: block !important; float: none !important; width: 100%; height: auto; margin: 0 !important; border-top: 1px solid #bdbdbd; }
  #ttr_page #ttr_menu ul.ttr_menu_items > li > a,
  #ttr_page #ttr_menu ul.ttr_menu_items > li > span { display: block !important; float: none !important; margin: 0 !important; padding: 0 16px !important; line-height: 44px !important; text-align: left; }
  #ttr_page #ttr_menu ul.ttr_menu_items hr { display: none !important; }
  #ttr_page #ttr_menu ul.ttr_menu_items > li > ul.dropdown-menu { display: block !important; position: static !important; float: none !important;
      width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 0 6px 0 !important; border: 0 !important; box-shadow: none !important; background: transparent !important; }
  #ttr_page #ttr_menu ul.ttr_menu_items > li > ul.dropdown-menu > li > a { display: block; padding: 0 16px 0 36px !important; line-height: 36px !important;
      background: transparent !important; border: 0 !important; color: #8B0000 !important; font-size: 13px; }

  /* Content panel and sidebar: a little breathing room on small screens */
  #ttr_page #ttr_html_content_margin { padding-left: 12px !important; padding-right: 12px !important; }
  #ttr_page .ttr_sidebar_left_padding { margin-left: 8px; margin-right: 8px; }

  /* Footer: stack and centre */
  #ttr_page .ttr_footer_bottom_footer_inner > div { float: none !important; position: static !important; text-align: center !important; margin: 6px auto !important; width: auto !important; }
  #ttr_page .footer-widget-area_fixed > div { width: 100%; }
  #ttr_page #ttr_footer, #ttr_page #ttr_footer_inner, #ttr_page .ttr_footer_bottom_footer, #ttr_page .ttr_footer_bottom_footer_inner { height: auto !important; min-height: 0 !important; }
  #ttr_page .ttr_footer_bottom_footer_inner { padding: 10px 0 14px !important; }
  #ttr_page .ttr_footer_bottom_footer_inner .ttr_images_container { text-align: center !important; }
  #ttr_page .ttr_footer_facebook { position: static !important; display: inline-block; margin: 0 auto !important; }
  /* Sidebar pictures centred on phones */
  #ttr_page .mn-leftpane .ttr_block_content p { text-align: center !important; }

  /* Gallery: smaller thumbnails so 2 fit per row */
  .mn-gallery a.mn-lightbox { width: calc(50% - 5px); height: auto; aspect-ratio: 1 / 1; }

  /* Contact form: full width fields */
  .mn-kontakt .mn-row input, .mn-kontakt .mn-row textarea { min-width: 0; width: 100%; }
}