/* =========================================================
   Mias Vei – ren og samlet CSS
   Fil: /media/templates/site/cassiopeia/css/user.css
   ========================================================= */

:root {
  --mia-green: #2f5d62;
  --mia-coral: #d9896a;
  --mia-cream: #fbf7f2;
  --mia-dark: #111827;
  --mia-white: #ffffff;
  --mia-gap: 20px;
}

.container-header {
  background: #ffffff !important;
  background-image: none !important;
  box-shadow: none !important;
}

.navbar-brand,
.site-title {
  color: var(--mia-green) !important;
}

body {
  background: #ffffff;
}

.page-header,
.article-info,
.article-info-term,
dl.article-info,
.article-info.muted {
  display: none !important;
}

.mias-page {
  max-width: 1440px;
  margin: 0 auto;
  color: var(--mia-dark);
}

.mias-header {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 22px 30px;
}

.mias-brand {
  flex: 0 0 auto;
  min-width: 240px;
}

.mias-brand-title {
  color: var(--mia-green);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2.5rem;
  line-height: 1;
}

.mias-brand-subtitle {
  margin-top: 8px;
  font-size: 1rem;
}

.mias-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex: 1 1 auto;
  flex-wrap: nowrap;
}

.mias-nav a,
.exit-btn {
  position: relative;
  z-index: 20;
  pointer-events: auto !important;
  cursor: pointer !important;
  text-decoration: none;
}

.mias-nav a {
  color: var(--mia-dark);
  font-weight: 700;
  white-space: nowrap;
}

.exit-btn {
  flex: 0 0 auto;
  background: var(--mia-coral);
  color: #fff !important;
  padding: 14px 22px;
  border-radius: 8px;
  font-weight: 700;
  white-space: nowrap;
}

.mias-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #f5f1ea;
  margin: 0 30px;
  border-radius: 0;
  overflow: hidden;
}

.hero-textbox {
  position: relative;
  z-index: 2;
  padding: 72px 48px;
}

.hero-textbox h1 {
  margin: 0 0 26px;
  color: var(--mia-green);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3rem, 5vw, 5.6rem);
  line-height: 0.95;
}

.hero-textbox > p {
  max-width: 660px;
  font-size: 1.35rem;
  line-height: 1.55;
}

.hero-small {
  margin-top: 24px;
  font-size: 1.05rem !important;
}

.hero-buttons {
  display: flex;
  gap: 20px;
  margin-top: 34px;
}

.btn-main,
.btn-secondary,
.btn-dark {
  position: relative;
  z-index: 30;
  display: inline-block;
  pointer-events: auto !important;
  cursor: pointer !important;
  padding: 16px 28px;
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none !important;
}

.btn-main {
  background: var(--mia-coral);
  color: #fff !important;
}

.btn-secondary {
  border: 2px solid var(--mia-coral);
  color: var(--mia-coral) !important;
  background: transparent;
}

.btn-dark {
  background: var(--mia-green);
  color: #fff !important;
}

.hero-image {
  min-height: 560px;
  background-image: url('images/miasvei/hero/vindu.png');
  background-size: cover;
  background-position: center;
}

.help-cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--mia-gap);
  padding: 36px 50px;
}

.help-card {
  min-height: 260px;
  padding: 28px 22px;
  background: var(--mia-cream);
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,.04);
}

.help-card .icon {
  margin-bottom: 18px;
  color: var(--mia-green);
  font-size: 2.4rem;
}

.help-card h3 {
  margin: 0 0 14px;
  font-size: 1.6rem;
  line-height: 1.15;
}

.help-card p {
  line-height: 1.55;
}

.help-card a {
  display: inline-block;
  margin-top: 8px;
  color: var(--mia-green);
  text-decoration: none;
}

.mia-info-row {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: var(--mia-gap);
  padding: 0 50px 34px;
}

.mia-box {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  min-height: 350px;
  overflow: hidden;
  background: var(--mia-cream);
  border-radius: 12px;
}

.mia-text {
  padding: 34px 30px;
}

.mia-text h2,
.important-box h2 {
  margin-top: 0;
  font-size: 2rem;
}

.mia-actions {
  margin-top: 24px;
}

.mia-photo {
  min-height: 350px;
  background-image: url('images/miasvei/mia/mia.png');
  background-size: cover;
  background-position: center top;
}

.important-box {
  padding: 34px 30px;
  background: #2f5d62 !important;
  color: #fff;
  border-radius: 12px;
}

.important-box a {
  color: #fff;
}

.articles {
  padding: 0 50px 34px;
}

.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.section-title h2 {
  margin: 0;
  font-size: 2rem;
}

.section-title a {
  color: var(--mia-dark);
}

.article-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: var(--mia-gap) !important;
  width: 100% !important;
  align-items: stretch !important;
}

.article-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  min-height: 360px;
  overflow: hidden;
  background: var(--mia-cream);
  border-radius: 12px;
  box-sizing: border-box !important;
  transition: transform .2s ease, box-shadow .2s ease;
}

.article-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
}

}
.article-card-hit {
    position: absolute !important;
    inset: 0 !important;
    z-index: 10 !important;
    cursor: pointer !important;
}
.article-img {
    flex: 0 0 180px !important;
    width: 100% !important;
    min-height: 180px !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

.article-img.img1 { background-image: url('images/miasvei/artikler/vin.png'); }
.article-img.img2 { background-image: url('images/miasvei/artikler/hku.png'); }
.article-img.img3 { background-image: url('images/miasvei/artikler/bov.png'); }
.article-img.img4 { background-image: url('images/miasvei/artikler/dr.png'); }

.article-card h3,
.article-card p,
.article-card span {
  margin-left: 22px;
  margin-right: 22px;
}

.article-card h3 {
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 1.65rem;
  line-height: 1.15;
}

.article-card p {
  line-height: 1.5;
}

.article-card span {
  margin-top: auto;
  margin-bottom: 22px;
  color: var(--mia-green);
}

.cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 30px 30px;
  padding: 28px 34px;
  background: var(--mia-green);
  color: #fff;
}

.cta h2,
.cta p {
  margin: 0;
}

.cta p {
  margin-top: 6px;
}

.mia-footer {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr .8fr;
  gap: 40px;
  margin: 0 30px 30px;
  padding: 34px 40px;
  background: var(--mia-green);
  color: #fff;
}

.mia-footer h3,
.mia-footer h4 {
  margin-top: 0;
}

.mia-footer a,
.mia-footer span {
  display: block;
  margin-bottom: 8px;
  color: #fff;
  text-decoration: none;
}

@media (max-width: 1100px) {
  .mias-header {
    flex-wrap: wrap;
  }

  .mias-nav {
    order: 3;
    width: 100%;
    flex-wrap: wrap;
  }

  .help-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .article-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  .mias-hero,
  .mia-info-row,
  .mia-box,
  .mia-footer {
    grid-template-columns: 1fr;
  }

  .mias-header,
  .help-cards,
  .mia-info-row,
  .articles {
    padding-left: 20px;
    padding-right: 20px;
  }

  .mias-hero,
  .cta,
  .mia-footer {
    margin-left: 20px;
    margin-right: 20px;
  }

  .hero-textbox {
    padding: 46px 28px;
  }

  .hero-buttons,
  .cta {
    align-items: stretch;
    flex-direction: column;
  }

  .help-cards,
  .article-grid {
    grid-template-columns: 1fr !important;
  }

  .hero-image {
    min-height: 420px;
  }
}

/* Standalone page resets */
*{box-sizing:border-box}body{margin:0} .mias-page{min-height:100vh}


/* V3 – kontrollert visuell justering mot original Joomla-forside */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
.mias-page { max-width: 1200px; min-height: 100vh; }
.mias-header { gap: 18px; padding: 20px 26px; }
.mias-brand { min-width: 190px; }
.mias-brand-title { font-size: clamp(1.8rem, 2.8vw, 2.5rem); }
.mias-nav { gap: clamp(8px, 1.1vw, 17px); }
.mias-nav a { font-size: clamp(.74rem, .9vw, .95rem); }
.mias-nav .exit-btn { padding: 12px 15px; }
/* Desktop: no extra hamburger button */
.mobile-nav-toggle { display: none !important; }
.mias-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; margin: 0 26px; }
.hero-textbox { padding: clamp(38px, 5vw, 65px) clamp(28px, 4vw, 50px); min-width: 0; }
.hero-textbox h1 { font-size: clamp(3.1rem, 5.4vw, 4.8rem); line-height: .99; max-width: 440px; }
.hero-textbox > p { font-size: clamp(1rem, 1.45vw, 1.22rem); }
.hero-textbox .hero-small { font-size: 1rem !important; }
.hero-buttons { flex-wrap: wrap; }
.hero-image { position: relative; min-height: 100%; overflow: hidden; background: #f5f1ea; }
.hero-image img { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.content-page { max-width: 850px; margin: 36px auto 80px; padding: 0 26px; min-height: 45vh; }
.content-page h1 { font-family: Georgia,serif; color: var(--mia-green); font-size: clamp(2.2rem, 5vw, 3.6rem); }
.content-page p { line-height: 1.7; }
.content-page .source-note { background: var(--mia-cream); border-left: 4px solid var(--mia-green); padding: 18px; margin: 25px 0; }
.content-page a { color: var(--mia-green); }
/* Joomla reference: calm cream CTA rather than dark full-width bar */
.cta { background: #f5f1ea; color: var(--mia-dark); border-radius: 10px; margin-top: 35px; }
.cta .btn-main, .cta .btn-dark { background: var(--mia-green); color: white; }
@media (max-width: 1100px) {
  .mias-header { flex-wrap: wrap; }
  .mias-nav { order: 3; width: 100%; flex-wrap: wrap; justify-content: flex-start; }
}
@media (max-width: 760px) {
  .mias-header { display: flex; flex-wrap: wrap; align-items: center; padding: 16px 20px; gap: 12px; }
  .mias-brand { min-width: 0; flex: 1; }
  .mias-brand-title { font-size: 2rem; }
  .mobile-nav-toggle { display: inline-block !important; order: 2; border: 0; border-radius: 6px; padding: 11px 14px; background: var(--mia-green); color: white; font: inherit; cursor: pointer; }
  .mias-nav { display: none; order: 3; flex-basis: 100%; width: 100%; flex-direction: column; align-items: stretch; gap: 0; }
  .mias-nav.is-open { display: flex; }
  .mias-nav a { font-size: 1rem; padding: 12px 8px; border-bottom: 1px solid #e7e2da; }
  .mias-nav .exit-btn { margin-top: 8px; text-align: center; }
  .mias-hero { display: flex; flex-direction: column; margin: 0 20px; }
  .hero-textbox { padding: 38px 28px; }
  .hero-textbox h1 { font-size: clamp(2.9rem, 10vw, 4.1rem); }
  .hero-image { height: 330px; min-height: 330px; }
  .hero-image img { position: absolute; }
  .hero-buttons { gap: 12px; }
  .cta { align-items: flex-start; }
}

/* V4 – Joomla reference visual refinements. Kept separately for easy rollback. */
@media (min-width: 1101px) {
  .mias-page { max-width: 1080px; }
  .mias-header { padding: 17px 20px; gap: 12px; }
  .mias-brand { min-width: 165px; }
  .mias-brand-title { font-size: 2rem; }
  .mias-brand-subtitle { font-size: .78rem; margin-top: 5px; }
  .mias-nav { gap: 11px; }
  .mias-nav a { font-size: .78rem; }
  .mias-nav .exit-btn { padding: 10px 12px; }
  .mias-hero { margin: 0 20px; grid-template-columns: 53% 47%; }
  .hero-textbox { padding: 46px 36px; }
  .hero-textbox h1 { color: #182d29; font-size: clamp(3.5rem, 5vw, 4.5rem); line-height: .98; max-width: 410px; margin-bottom: 20px; }
  .hero-textbox > p { font-size: 1.04rem; line-height: 1.48; }
  .hero-textbox .hero-small { font-size: .94rem !important; }
  .hero-image { min-height: 420px; }
  .hero-buttons { margin-top: 22px; gap: 12px; }
  .btn-main,.btn-secondary,.btn-dark { padding: 12px 19px; border-radius: 5px; }
  .help-cards { padding: 24px 36px; gap: 14px; }
  .help-card { padding: 20px 17px; min-height: 215px; border-radius: 9px; }
  .help-card .icon { font-size: 1.85rem; margin-bottom: 12px; }
  .help-card h3 { font-size: 1.27rem; }
  .help-card p { font-size: .88rem; }
  .articles { padding: 0 36px 24px; }
  .article-grid { gap: 14px !important; }
  .article-card { min-height: 310px; }
  .article-img { flex-basis: 135px !important; min-height: 135px !important; }
  .article-card h3 { font-size: 1.3rem; margin: 14px 15px 8px; }
  .article-card p,.article-card span { margin-left: 15px; margin-right: 15px; font-size: .9rem; }
  .cta { margin: 28px 36px 30px; min-height: 180px; padding: 32px 45px; justify-content: center; gap: 42px; }
  .cta > div { flex: 1; text-align: center; }
  .cta h2 { font-size: 1.75rem; }
  .cta p { font-size: .95rem; }
}
@media (max-width: 1100px) and (min-width: 761px) {
  .mias-hero { grid-template-columns: 53% 47%; }
  .hero-textbox h1 { color: #182d29; }
  .hero-image { min-height: 440px; }
}
@media (max-width: 760px) {
  .hero-textbox h1 { color: #182d29; }
  .cta > div { text-align: left; }
}