/*
 * Custom css for Sofia Linnea theme
*/

/* Add Fraunces as heading font - replacing Cal Sans (variable, covers 100–900) */
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/fraunces/fraunces-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/fraunces/fraunces-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* NEWSREADER */
/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(../fonts/newsreader/newsreader-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(../fonts/newsreader/newsreader-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* PLAYFAIR DISPLAY */
/* latin-ext */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(../fonts/playfair-display/playfair-display-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(../fonts/playfair-display/playfair-display-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

 /* Swap in Fraunces for display headings */
:root,
:root[data-theme="light"] {
  --pico-font-family-display:
    "Fraunces", "Inter", sans-serif;
  --q2-bg: #f5f5f4; /* override page canvas — a warmer stone-100 */
}

/* ---------- Override typography for serif headings ---------- */
h1, h2, h3, h4, h5, h6, .display, .h-display {
  font-feature-settings: normal;           /* drop Inter's cv11/ss01/ss03 */
  font-optical-sizing: auto;
}
h1, h2, h3, h4, .display, .h-display {
  font-variation-settings: "SOFT" 50, "WONK" 0;  /* more classical; raise SOFT for warmth */
}

h1 { font-weight: 500; letter-spacing: -0.015em; line-height: 1.1; }
h2 { font-weight: 600; letter-spacing: -0.01em;  line-height: 1.2; }
h3 { font-weight: 500; letter-spacing: 0;        line-height: 1.3; }
h4 { font-weight: 400; letter-spacing: 0; }
h5 { font-weight: 500; letter-spacing: 0; }

/* h5-h6 stay Inter */
h5, h6 { font-family: var(--pico-font-family-sans-serif); }

/* If you use the title pair */
.title-h1h2 h1 { font-weight: 400; }
.title-h1h2 h1 strong, .title-h1h2 h1 b { font-weight: 450; }
.title-h1h2 h1 + h2 { font-weight: 700; }

/* Styling for board grid */
.board-grid {
  display: grid;
  gap: clamp(1.25rem, 2vw, 1.75rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  align-items: stretch;
}

.board-card .card-image img {
  aspect-ratio: 1 / 1;      /* square portraits instead of the default 16:9 */
  object-position: center 20%;
}

.board-card .card-subtitle {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.board-card .card-footer a {
  display: block;
  color: var(--q2-text-muted);
  text-decoration: none;
}

.board-card .card-footer a:hover { color: var(--q2-text-strong); }

/* Paragraph labels (stadgar and similar charters) */
.paragraf {
  margin: 2.25rem 0 0.35rem;
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.01em;
}

.paragraf + p,
.paragraf + ul,
.paragraf + ol {
  margin-top: 0;
}
/* optional: accent the § number, needs <span> in the markup */
.paragraf span {
  color: var(--q2-accent);
  margin-right: 0.2em;
}

.paragraf .nr {
  font-size: 1.25em;
  font-weight: 800;
  color: var(--q2-accent); /* using theme accent color */
  margin-right: 0.3em;
  font-variant-numeric: tabular-nums;
}

/* Gradient div inspored by Tailwind gradients */
.ocean-gradient {
  position: relative;
  border-radius: 1rem; /* rounded-2xl */
  padding: 6rem; /* p-24 (24 * 0.25rem = 6rem) */
  
  /* The gradient equivalent */
  background-image: linear-gradient(to right, #0e7490, #3b82f6, #4f46e5);
}

/* ---------- Tweaks for modular pages ---------- */
/* ---------- Compact Hero ---------- */
.hero.hero-compact {
  min-height: auto;
  padding-block: clamp(1rem, 4vw, 2rem);
}
/* ---------- Less section padding ---------- */
.section {
    padding-block: clamp(1rem, 4vw, 3rem);
}