/*
Theme Name: Anja Strömbäck
Theme URI: https://anjastromback.se
Description: Barntema till Twenty Twenty-Five. Mörk fotohero, serif med rosa kursiv accent, ljusa kort mot dimgrå bakgrund.
Author: Anja Strömbäck
Template: twentytwentyfive
Version: 1.0
Text Domain: anja-stromback
*/

/* =========================================================
   1. ÖGONBRYN — små versaler ovanför rubriker
   ========================================================= */
.as-eyebrow {
  font-size: .73rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--wp--preset--color--steel);
  margin-bottom: 18px;
}
.as-eyebrow-pink { color: var(--wp--preset--color--blush); }

/* =========================================================
   2. KURSIVA ORDET I RUBRIKEN
   ========================================================= */
h1 em, h2 em { font-style: italic; font-weight: 300; }
.as-hero h1 em { color: var(--wp--preset--color--blush-light); }
.as-section h2 em { color: var(--wp--preset--color--steel); }

/* =========================================================
   3. HERO — helbred bild med text i vänsterkanten
   ========================================================= */
.as-hero.wp-block-cover {
  min-height: 78vh;
  align-items: center;
}
.as-hero .wp-block-cover__inner-container {
  max-width: 1240px;
  margin: 0 auto;
  width: 100%;
  padding: 0 32px;
}
.as-hero .as-hero-text { max-width: 620px; }
.as-hero p { color: var(--wp--preset--color--cloud); }

/* Vit outline-knapp på fotot */
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  border: 1px solid rgba(255,255,255,.55);
  color: #fff;
  font-weight: 400;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: rgba(255,255,255,.12);
  border-color: #fff;
}
.wp-block-button__link { transition: .22s; }
.wp-block-button__link:hover { transform: translateY(-1px); }

/* Rosa textlänk med pil */
.as-arrow a {
  color: var(--wp--preset--color--blush-light);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: .2s;
}
.as-arrow a:hover { border-bottom-color: var(--wp--preset--color--blush-light); }

/* =========================================================
   4. CITATBANDET — rosa prick mellan två streck
   ========================================================= */
.as-dash {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 40px;
}
.as-dash i { width: 46px; height: 1.5px; background: var(--wp--preset--color--blush); opacity: .45; }
.as-dash b { width: 11px; height: 11px; border-radius: 50%; background: var(--wp--preset--color--blush); margin: 0 5px; }

.as-quote .wp-block-quote {
  border: 0;
  padding: 0;
  max-width: 22ch;
  margin: 0 auto 24px;
}
.as-quote cite {
  font-style: normal;
  font-size: .9rem;
  color: var(--wp--preset--color--ink-faint);
  font-family: var(--wp--preset--font-family--sans);
}

/* =========================================================
   5. TRE KORT — mittenkortet mörkt
   ========================================================= */
.as-card {
  background: #fff;
  border-radius: 16px;
  padding: 40px 34px 36px;
  box-shadow: 0 18px 44px -26px rgba(34,48,60,.30);
  height: 100%;
  transition: .25s;
}
.as-card:hover { transform: translateY(-4px); box-shadow: 0 26px 54px -26px rgba(34,48,60,.36); }
.as-card-dark { background: var(--wp--preset--color--ink); }
.as-card-dark h3 { color: #fff; }
.as-card-dark p { color: rgba(255,255,255,.76); }
.as-card-dark .as-eyebrow { color: var(--wp--preset--color--blush-light); }
.as-card-dark a { color: var(--wp--preset--color--blush-light); }
.as-card a {
  color: var(--wp--preset--color--blush);
  font-size: .95rem;
  border-bottom: 1px solid transparent;
  transition: .2s;
}
.as-card a:hover { border-bottom-color: currentColor; }

/* Gör att korten blir lika höga */
.as-cards.wp-block-columns { align-items: stretch; }
.as-cards .wp-block-column { display: flex; }

/* =========================================================
   6. HEADER — logotyp med underrad
   ========================================================= */
.as-brand { line-height: 1.15; }
.as-brand .as-brand-name {
  font-family: var(--wp--preset--font-family--serif);
  font-size: 1.34rem;
  font-weight: 400;
  letter-spacing: -.015em;
  display: block;
}
.as-brand .as-brand-role {
  font-size: .67rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--wp--preset--color--ink-faint);
  display: block;
  margin-top: 3px;
}

/* =========================================================
   7. MOBIL
   ========================================================= */
@media (max-width: 900px) {
  .as-hero.wp-block-cover { min-height: 72vh; }
  .as-card { padding: 30px 24px 28px; }
  .as-quote .wp-block-quote { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .wp-block-button__link, .as-card { transition: none; }
}