/*
  grunnur.css
  Sameiginleg stílskrá fyrir undirsíður ohmyclaude.is (greinar o.fl.).
  Vörumerkjagildi, letur og grunntýpógrafía eru dregin úr index.html.
  Athugið: index.html notar enn sína eigin innbyggðu stílskrá og linkar ekki í þessa.
*/

/* Letur: HAL Timezone (fyrirsagnir) og Suisse Int'l (meginmál), hýst hjá okkur */
@font-face {
  font-family: 'HAL Timezone';
  src: url('../assets/fonts/HALTimezone-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'HAL Timezone';
  src: url('../assets/fonts/HALTimezone-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'SuisseIntl';
  src: url('../assets/fonts/SuisseIntl-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SuisseIntl';
  src: url('../assets/fonts/SuisseIntl-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SuisseIntl';
  src: url('../assets/fonts/SuisseIntl-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --paper: #FFFFFF;
  --off: #FAF9F5;          /* off-hvítur tónn úr glærunum */
  --ink: #2B1B13;
  --ink-soft: #6B5F58;
  --orange: #E5663D;
  --orange-deep: #C94F28;
  --hairline: rgba(43, 27, 19, 0.14);
  --spark-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 191 191'%3E%3Cpath d='M37.4058 126.913L75.0025 105.92L75.5751 104.011L75.0025 103.057H73.094L66.7961 102.675L45.4214 102.103L26.7185 101.148L8.58807 100.194L4.00777 99.24L0 93.5146L0.381692 90.6519L4.19861 88.1709L9.73315 88.5526L21.7565 89.5068L39.8868 90.6519L53.0552 91.4153L72.5215 93.7054H75.5751L75.9567 92.3695L75.0025 91.6061L74.2391 90.8427L55.3454 78.2469L35.1157 64.8877L24.4283 57.063L18.7029 53.2461L15.8402 49.4291L14.6951 41.4136L19.848 35.6882L26.9093 36.2608L28.6269 36.6424L35.6882 42.177L50.9559 53.8186L70.6131 68.7046L73.4757 70.9947L74.6208 70.2314L74.8117 69.6588L73.4757 67.5595L62.9792 47.7115L51.5284 27.8635L46.3756 19.6571L45.0397 14.6951C44.4671 12.7867 44.2763 10.8782 44.2763 8.96976L50.0017 0.95423L53.4369 0L61.4524 1.14508L64.506 3.81692L69.468 15.2677L77.2927 33.0164L89.6977 57.063L93.5146 64.3151L95.423 70.8039L95.9956 72.7123H97.3315V71.7581L98.2857 58.0172L100.194 41.4136L102.103 20.0388L102.675 13.9318L105.729 6.67961L111.454 2.86269L116.416 4.962L120.233 10.4965L119.66 13.9318L117.561 28.6269L112.599 51.7193L109.736 67.3687H111.454L113.363 65.2694L121.187 54.9637L134.356 38.5509L140.081 31.8713L146.951 24.81L151.341 21.3748H159.547L165.464 30.3445L162.792 39.696L154.394 50.3834L147.333 59.3531L137.218 72.9032L131.111 83.7814L131.684 84.5448H133.02L155.921 79.5828L168.135 77.4835L182.64 75.0025L189.319 78.056L190.083 81.1096L187.411 87.5984L171.761 91.4153L153.44 95.2322L126.149 101.53L125.768 101.721L126.149 102.293L138.363 103.439L143.707 103.82H156.685L180.731 105.729L187.029 109.546L190.655 114.698L190.083 118.515L180.35 123.477L167.372 120.424L136.837 113.172L126.531 110.691H125.004V111.454L133.783 120.042L149.623 134.356L169.853 152.868L170.807 157.448L168.326 161.265L165.654 160.883L148.097 147.524L141.226 141.799L125.958 128.821H125.004V130.157L128.439 135.31L147.142 163.364L148.097 171.952L146.761 174.624L141.799 176.533L136.646 175.388L125.577 160.12L114.126 142.944L105.156 127.294L104.202 128.058L98.6674 185.693L96.1864 188.556L90.461 190.846L85.6899 187.029L83.018 181.304L85.6899 169.471L88.7434 154.204L91.2244 141.989L93.5146 126.913L94.8505 121.951V121.569H93.5146L82.0638 137.409L64.8877 160.883L51.1467 175.388L47.9024 176.723L42.177 173.861L42.7495 168.517L45.8031 164.128L64.8877 139.699L76.3384 124.622L83.9723 115.844L83.7814 114.889H83.2089L32.8255 147.715L23.8558 148.86L20.0388 145.043L20.4205 139.318L22.329 137.409L37.5967 126.913H37.4058Z'/%3E%3C/svg%3E");
}

body {
  background: var(--paper);
  font-family: 'SuisseIntl', 'Inter', -apple-system, sans-serif;
  font-size: 16px;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
  overflow-x: hidden;
}

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 32px; }
.wrap-narrow { max-width: 720px; margin: 0 auto; padding: 0 32px; }
/* Neðsta efnið á hverri síðu lá alveg ofan í línunni fyrir ofan fótinn.
   Þarf að vera sérhæfðara en .wrap, sem núllstillir botninn með styttingunni. */
main.wrap, main.wrap-narrow { padding-bottom: 88px; }

h1, h2, h3 {
  font-family: 'HAL Timezone', Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.kicker {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 18px;
}

p { color: var(--ink-soft); }
a { color: var(--ink); }
a:hover { color: var(--orange-deep); }

.spark {
  display: inline-block;
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  background-color: var(--orange);
  -webkit-mask: var(--spark-mask) no-repeat center / contain;
  mask: var(--spark-mask) no-repeat center / contain;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--ink);
  color: #FFFFFF;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  padding: 13px 26px;
  border-radius: 999px;
  transition: background 0.2s;
  white-space: nowrap;
}
.btn:hover { background: #000; color: #FFF; }
.btn.orange { background: var(--orange); }
.btn.orange:hover { background: var(--orange-deep); color: #FFF; }
.btn .arrow { width: 15px; height: 15px; flex-shrink: 0; }

/* Haus */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 0;
  gap: 20px;
}
.brand-word { display: block; }
.brand-logo {
  display: block;
  height: 22px;
  width: auto;
  filter: brightness(0);
}
.header-nav { display: flex; align-items: center; gap: 28px; }
.header-link {
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
}
.header-link:hover { color: var(--orange-deep); }
.nav-stutt { display: none; }
@media (max-width: 860px) {
  .brand-logo { height: 18px; }
  .header-nav { gap: 16px; }
}

/* Fótur */
footer {
  border-top: 1px solid var(--hairline);
  padding: 64px 32px;
  text-align: center;
  font-size: 15px;
  color: var(--ink-soft);
}
footer .ohmyclaude {
  font-family: 'HAL Timezone', Georgia, serif;
  font-style: italic;
  font-size: 24px;
  color: var(--ink);
  margin-bottom: 12px;
}
footer a { color: var(--ink-soft); }

/* Greinasíður deila nú .wrap með forsíðunni svo textinn byrji í sömu línu og
   lógóið. Lesdálkurinn er samt hafður þröngur, annars verða línurnar of langar. */
.greinar-haus, .grein, .grein-cta { max-width: 900px; }
.greinar-listi { max-width: 900px; }
.grein-mal { max-width: 840px; }
.uppruni { max-width: 840px; }

/* Greinar: yfirlit */
.greinar-haus { padding: 64px 0 8px; }
.greinar-haus h1 { font-size: clamp(38px, 6vw, 62px); line-height: 1.05; }
.greinar-haus .lead { font-size: 19px; margin-top: 18px; max-width: 52ch; }

.greinar-listi { list-style: none; margin: 48px 0 0; padding: 0; }
.greinar-listi > li { border-top: 1px solid var(--hairline); }
.greinar-listi > li:last-child { border-bottom: 1px solid var(--hairline); }
.greinar-listi a.grein-hlekkur {
  display: block;
  padding: 30px 4px;
  text-decoration: none;
  color: inherit;
  transition: padding-left .18s ease;
}
.greinar-listi a.grein-hlekkur:hover { padding-left: 12px; }
.greinar-listi a.grein-hlekkur:hover h2 { color: var(--orange-deep); }
.greinar-listi h2 { font-size: 27px; line-height: 1.2; margin-bottom: 10px; }
.greinar-listi p { max-width: 62ch; }
.grein-merki {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 12px;
}

/* Greinar: einstök grein */
.grein { padding: 56px 0 8px; }
.grein h1 { font-size: clamp(32px, 5vw, 50px); line-height: 1.1; }
.grein .grein-dagsetning { font-size: 14px; color: var(--ink-soft); margin-top: 20px; }
.grein-mal { margin-top: 40px; }
.grein-mal p { font-size: 20px; line-height: 1.7; margin-bottom: 24px; }
.grein-mal h2 {
  font-size: 26px;
  line-height: 1.25;
  margin: 40px 0 14px;
}
.grein-mal ul { margin: 0 0 22px 22px; }
.grein-mal li { font-size: 20px; line-height: 1.7; color: var(--ink-soft); margin-bottom: 9px; }
.grein-mal a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.grein-mal a:hover { color: var(--orange-deep); }

/* Kassi sem vísar á upprunalegu greinina á Vísi */
.uppruni {
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: var(--off);
  padding: 26px 28px;
  margin: 36px 0;
}
.uppruni p { margin: 0 0 16px; font-size: 17px; }
.uppruni p:last-child { margin-bottom: 0; }

/* Lokakall aftur á námskeiðið */
.grein-cta {
  border-top: 1px solid var(--hairline);
  margin-top: 56px;
  padding-top: 44px;
}
/* Listinn lokar sér sjálfur með línu, svo tvær línur birtust hlið við hlið */
.greinar-listi + .grein-cta { border-top: 0; margin-top: 44px; }
.grein-cta h2 { font-size: 30px; line-height: 1.2; margin-bottom: 14px; }
.grein-cta p { font-size: 17px; max-width: 58ch; margin-bottom: 22px; }

.aftur-hlekkur {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  color: var(--ink-soft);
  margin-top: 48px;
}
.aftur-hlekkur:hover { color: var(--orange-deep); }

/* Fljótandi miðakaup á síma: lítill hnappur yfir efninu, ekki borði þvert yfir skjáinn */
.sticky-cta {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  /* Sýnileg í öllum breiddum á undirsíðum. Þetta eru langar síður og hnappurinn
     í hausnum skrollast burt, svo pillan tekur við. */
  display: block;
  transform: translateY(160%);
  transition: transform 0.28s ease;
}
.sticky-cta.synilegt { transform: translateY(0); }
.sticky-cta .btn { box-shadow: 0 6px 22px rgba(43, 27, 19, 0.22); }
@media (prefers-reduced-motion: reduce) { .sticky-cta { transition: none; } }

@media (max-width: 480px) {
  /* Hnappurinn í hausnum kemst ekki fyrir við hliðina á lógóinu, fljótandi hnappurinn tekur við */
  .header-nav .btn { display: none; }
  .header-link { font-size: 14px; }
  .nav-langt { display: none; }
  .nav-stutt { display: inline; }
  footer { padding-bottom: 92px; }
}

/* Fyrirtækjanámskeið: sölusíða fyrir vinnustaði */
.fyrirtaeki-haus { padding: 64px 0 8px; }
.fyrirtaeki-haus h1 { font-size: clamp(36px, 5.6vw, 58px); line-height: 1.06; }
.fyrirtaeki-haus .lead { font-size: 19px; margin-top: 18px; max-width: 54ch; }
.fyrirtaeki-haus .haus-verd {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 18px;
  margin-top: 26px;
}
.fyrirtaeki-haus .haus-verd .verd {
  font-family: 'HAL Timezone', Georgia, serif;
  font-size: 30px;
  color: var(--ink);
}
.fyrirtaeki-haus .haus-verd .verd-skil { font-size: 15px; color: var(--ink-soft); }

.hluti { border-top: 1px solid var(--hairline); margin-top: 54px; padding-top: 44px; }
.hluti > h2 { font-size: 30px; line-height: 1.2; margin-bottom: 16px; }
.hluti > p { font-size: 17px; line-height: 1.7; max-width: 62ch; margin-bottom: 18px; }
.hluti > p:last-child { margin-bottom: 0; }
.hluti h3 { font-size: 20px; margin: 30px 0 10px; }

/* Listi með ✳ merki: dagskrá, innihald, undirbúningur */
.merkt-listi { list-style: none; margin: 22px 0 0; padding: 0; }
.merkt-listi > li {
  display: flex;
  gap: 13px;
  padding: 15px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 17px;
  line-height: 1.62;
  color: var(--ink-soft);
}
.merkt-listi > li .spark { margin-top: 7px; }
.merkt-listi > li strong { color: var(--ink); font-weight: 500; }

/* Staðreyndatafla: heiti, verð, fjöldi, tungumál */
.stadreyndir { margin: 24px 0 0; }
.stadreyndir > div {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--hairline);
}
.stadreyndir dt {
  flex: 0 0 190px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-top: 3px;
}
.stadreyndir dd { flex: 1 1 260px; font-size: 17px; color: var(--ink); }

/* Áberandi kassi fyrir það sem má ekki misskiljast */
.athygli {
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: var(--off);
  padding: 26px 28px;
  margin: 28px 0;
}
.athygli h3 { font-size: 20px; margin: 0 0 10px; }
.athygli p { font-size: 17px; line-height: 1.68; margin: 0 0 14px; }
.athygli p:last-child { margin-bottom: 0; }
.athygli a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.athygli a:hover { color: var(--orange-deep); }


/* Umsagnir og fjölmiðlar á þessari síðu */
.umsogn {
  border-left: 2px solid var(--orange);
  padding: 2px 0 2px 22px;
  margin: 26px 0;
}
.umsogn blockquote { font-size: 17px; line-height: 1.7; color: var(--ink-soft); }
.umsogn figcaption { font-size: 15px; color: var(--ink); margin-top: 12px; }

.pressa-listi { list-style: none; margin: 22px 0 0; padding: 0; }
.pressa-listi > li { border-bottom: 1px solid var(--hairline); }
.pressa-listi a {
  display: flex;
  gap: 13px;
  align-items: baseline;
  padding: 15px 0;
  text-decoration: none;
  color: inherit;
}
.pressa-listi a:hover .pressa-titill { color: var(--orange-deep); }
.pressa-listi .pressa-titill { font-size: 17px; color: var(--ink); }
.pressa-listi .pressa-meta { font-size: 14px; color: var(--ink-soft); margin-left: auto; text-align: right; }

/* Spurt og svarað */
.faq-listi { margin: 22px 0 0; }
.faq-lidur { border-top: 1px solid var(--hairline); padding: 22px 0; }
.faq-lidur:last-child { border-bottom: 1px solid var(--hairline); }
.faq-lidur h3 { font-size: 19px; margin: 0 0 9px; }
.faq-lidur p { font-size: 17px; line-height: 1.68; margin: 0; }
.faq-lidur a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 620px) {
  .stadreyndir dt { flex: 0 0 100%; }
  .pressa-listi a { flex-direction: column; gap: 5px; }
  .pressa-listi .pressa-meta { margin-left: 0; text-align: left; }
}

/* Villusíða */
.villa {
  max-width: 560px;
  margin: 0 auto;
  padding: 90px 32px 40px;
  text-align: center;
}
.villa h1 { font-size: clamp(32px, 5vw, 50px); line-height: 1.08; }
.villa p { font-size: 18px; line-height: 1.7; margin-top: 18px; }
.villa .villa-hnappar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 34px;
}
.villa .spark { margin-bottom: 22px; width: 26px; height: 26px; }

/* Hero á undirsíðu, mynd við hliðina á textanum */
.undir-hero {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: center;
  padding: 56px 0 8px;
}
.undir-hero h1 { font-size: clamp(34px, 4.8vw, 54px); line-height: 1.07; }
.undir-hero .lead { font-size: 18px; line-height: 1.65; margin-top: 18px; }
.undir-hero .haus-verd {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 18px;
  margin-top: 26px;
}
.undir-hero .haus-verd .verd {
  font-family: 'HAL Timezone', Georgia, serif;
  font-size: 28px;
  color: var(--ink);
}
.undir-hero .haus-verd .verd-skil { font-size: 15px; color: var(--ink-soft); }
.undir-hero-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 26px;
}
.undir-hero-actions .cta-sub { font-size: 14px; color: var(--ink-soft); }
.undir-hero-mynd img {
  width: 100%;
  height: auto;
  border-radius: 18px;
  display: block;
}
@media (max-width: 820px) {
  .undir-hero { grid-template-columns: 1fr; gap: 30px; padding-top: 36px; }
  .undir-hero-mynd { order: -1; }
  .undir-hero-mynd img { max-height: 320px; object-fit: cover; }
}

/* Mynd af kennaranum neðar á síðunni */
.kennari-rond {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 28px;
  align-items: center;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  background: var(--off);
  padding: 26px 28px;
  margin-top: 26px;
}
.kennari-rond img { width: 100%; height: auto; border-radius: 12px; display: block; }
.kennari-rond p { font-size: 17px; line-height: 1.68; margin: 0; }
@media (max-width: 620px) {
  .kennari-rond { grid-template-columns: 1fr; }
  .kennari-rond img { max-height: 260px; object-fit: cover; object-position: center 20%; }
}

/* Á síma er 20px of stórt í 311px dálki, línurnar verða of stuttar */
@media (max-width: 560px) {
  .grein-mal p, .grein-mal li { font-size: 18px; line-height: 1.68; }
}