/* Theme: SatiRom
   Design: Paul Dandos
   Copyright (c) 2025
*/

:root{
  --font: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  --display:"Patrick Hand SC","Patrick Hand","Trebuchet MS","Arial Rounded MT Bold","Comic Sans MS",var(--font);
  --text:"Patrick Hand","Trebuchet MS","Arial Rounded MT Bold","Comic Sans MS",var(--font);
  --ink:#000;
  --bg:#fff;
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--text);
}

/* Links */
a,a:visited{color:inherit;text-decoration:none}
a:hover{text-decoration:none}

/* Layout */
.wrap{
  max-width:980px;
  margin:0 auto;
  padding:18px 14px 40px;
}

/* ===== HEADER ===== */
.header{
  text-align:center;
  padding-top:12px;
}

.logo-link{display:inline-block}

.logo-img{
  display:block;
  margin:0 auto;
  max-width:760px;
  width:94%;
  height:auto;
}

.domains{
  margin-top:10px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:22px;
}

.domains a{
  font-family:var(--display);
  font-size:52px;
  font-weight:900;
  letter-spacing:.06em;
  line-height:1;
}

/* Desktop menu */
.navbar{
  margin-top:14px;
  display:flex;
  justify-content:center;
  gap:26px;
  font-size:15px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-family:var(--display);
}

/* Burger */
.burger{
  display:none;
  margin:14px auto 0;
  background:none;
  border:0;
  cursor:pointer;
}

.burger span{
  display:block;
  width:28px;
  height:3px;
  background:#000;
  margin:5px 0;
  border-radius:999px;
}

/* Mobile menu */
.mobile-menu{
  display:none;
  margin-top:12px;
  flex-direction:column;
  align-items:center;
  gap:10px;
  font-family:var(--display);
  font-weight:900;
  text-transform:uppercase;
}
.mobile-menu.open{display:flex}

/* ===== FRAMES ===== */
.frame{
  margin:22px auto 0;
  padding:42px 34px 44px;
  background:#fff;
  border:3px solid #000;
  border-radius:24px;
  box-shadow:4px 6px 0 #000;
}

/* Panels (ALL raka) */
.panel,
.partner-card,
.field{
  background:#fff;
  border:3px solid #000;
  border-radius:6px;
  box-shadow:3px 3px 0 #000;
  transform:none !important;
}

/* Accordion */
.panel{
  margin:18px 0;
  padding:18px;
}

.panel .head{
  display:flex;
  justify-content:space-between;
  cursor:pointer;
  gap:16px;
}

.panel .title{
  font-family:var(--display);
  font-size:34px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.panel .toggle{
  font-size:28px;
  font-weight:900;
  line-height:1;
}

.panel .preview{
  margin-top:10px;
  font-size:17px;
  line-height:1.55;
  max-width:66ch;
  margin-left:auto;
  margin-right:auto;
}

.panel .body{
  max-height:0;
  overflow:hidden;
  transition:max-height .25s ease;
}

.panel.open .body{max-height:1800px}

.panel .body p{
  margin:10px auto 0;
  max-width:66ch;
  font-size:17px;
  line-height:1.55;
}

/* Read more / less */
.moreline,
.lessline{
  margin-top:12px;
  font-family:var(--display);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:14px;
  max-width:66ch;
  margin-left:auto;
  margin-right:auto;
}

.lessline{display:none}
.panel.open .moreline{display:none}
.panel.open .lessline{display:block}

.readmore,.readless{cursor:pointer}

/* Pages */
.page-panel h2,
.page-title{
  margin:0 0 14px;
  font-family:var(--display);
  font-size:26px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.10em;
}

.page-panel p{
  font-size:17px;
  line-height:1.55;
  max-width:66ch;
  margin-left:auto;
  margin-right:auto;
}

/* Partners */
.partners-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:14px;
  margin-top:12px;
}

.partner-card{padding:14px}

.partner-logo{
  width:100%;
  height:70px;
  object-fit:contain;
  display:block;
  margin:4px 0 10px;
}

.partner-name{
  font-family:var(--display);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:12px;
  margin-bottom:6px;
}

/* Forms */
.form-row{margin:10px 0}

label{
  display:block;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:12px;
  margin-bottom:6px;
  font-family:var(--display);
}

.field{padding:6px}

input,textarea{
  width:100%;
  border:0;
  background:none;
  padding:10px;
  font-family:var(--text);
  font-size:16px;
  outline:none;
}

button.submit{
  border:0;
  background:transparent;
  cursor:pointer;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.10em;
  font-size:16px;
  padding:10px 14px;
  font-family:var(--display);
}
button.submit:hover{text-decoration:underline}

/* Footer */
.footer{
  margin-top:18px;
  font-size:14px;
}

/* ===== .COM ring (dubbel, tight, animerad) ===== */
.domain-com .scribble{
  position:relative;
  display:inline-block;
  padding:0 6px;
  line-height:1;
  isolation:isolate;
}

.domain-com .scribble-svg{
  position:absolute;
  left:50%;
  top:65%;
  transform:translate(-50%,-50%);
  width:162%;
  height:180%;
  pointer-events:none;
  z-index:-1;
}

.domain-com .scribble-path{
  fill:none;
  stroke:#000;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;

  /* rita upp */
  stroke-dasharray:900;
  stroke-dashoffset:900;
  animation: scribbleDraw 700ms ease-out forwards;
}

.domain-com .scribble-path-2{
  stroke-width:1.7;
  opacity:.95;
  animation-delay:120ms;
}

@keyframes scribbleDraw{
  to{ stroke-dashoffset:0; }
}

/* Mobile */
@media(max-width:720px){
  .navbar{display:none}
  .burger{display:block}
  .domains a{font-size:46px}
}

/* SEO H1 hidden */
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
}

/* Magazine blocks (om du använder dessa klasser) */
.mag-block{ margin: 10px 0 24px; }
.mag-title{
  margin: 0 0 10px;
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing:.10em;
}
.mag-list{ display:grid; gap:14px; }
.mag-item-title{
  font-family: var(--display);
  font-weight:900;
  letter-spacing:.08em;
  text-transform: uppercase;
  margin-bottom:6px;
}
.mag-item-excerpt{ font-family: var(--text); }
.mag-more a{
  font-family: var(--display);
  font-weight:900;
  text-transform: uppercase;
  letter-spacing:.08em;
}