/* ==========================================================================
   White Oak Ceramics — style.css
   --------------------------------------------------------------------------
   Detta är webbplatsens enda CSS-fil. Den är indelad i tydliga sektioner:

     1. Designtokens (färger, typsnitt, avstånd)   -> ändra känslan här
     2. Grundstilar (reset, typografi)
     3. Layout (header, footer, container)
     4. Komponenter (knappar, produktkort, formulär)
     5. Sidspecifika sektioner (hero, produktsida, sök)
     6. Media queries (responsivitet)

   Skriv gärna nya klasser längst ner i respektive sektion, inte huller
   om buller mellan andra regler — det gör filen lättare att underhålla.
   ========================================================================== */


/* --------------------------------------------------------------------------
   0. EGNA TYPSNITT
   Typsnitt som inte finns på Google Fonts läggs in här med @font-face
   och pekar på filer i /fonts-mappen. Använd sedan namnet (font-family)
   var som helst i filen, t.ex. i .logo längre ner.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Hunting Star";
  src: url("../fonts/HuntingStar.woff") format("woff"),
       url("../fonts/HuntingStar.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap; /* visar reservtypsnittet direkt, byter mjukt när fonten laddat klart */
}


/* --------------------------------------------------------------------------
   1. DESIGNTOKENS
   Allt visuellt "DNA" samlat på ett ställe. Vill du t.ex. göra
   webbplatsen varmare eller kallare i tonen räcker det att ändra
   variablerna här — resten av filen använder bara dessa.
   -------------------------------------------------------------------------- */
:root {
  /* Färger — varma rosa/gråbeige toner byggda kring gammelrosa */
  --color-bg:          #faf6f5;  /* len off-white med rosa underton, sidans botten */
  --color-bg-soft:      #e8e6e4; /* varmgrå, mer neutral — mindre lax-rosa */
  --color-surface:      #ffffff; /* kort, ytor som ligger "ovanpå" */
  --color-text:         #332829; /* nästan svart, men varm */
  --color-text-muted:   #7a696a; /* brödtext, sekundär info */
  --color-line:         #e9d9d7; /* tunna linjer, kantlinjer */
  --color-accent:       #a08c8d; /* gammelrosa — knappar, länkar, accent */
  --color-accent-dark:  #83696a; /* hover-läge för accent */
  --color-sage:         #93a08a; /* sekundär accent, "nyhet"-etikett */

  /* Typografi */
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-body: "Work Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

  --fs-xs:   0.8rem;
  --fs-sm:   0.95rem;
  --fs-base: 1rem;
  --fs-md:   1.15rem;
  --fs-lg:   1.5rem;
  --fs-xl:   2.1rem;
  --fs-2xl:  3rem;
  --fs-3xl:  4rem;

  /* Avstånd — bygger på en 8px-skala för konsekvent luft */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4.5rem;
  --space-7: 7rem;

  /* Övrigt */
  --radius: 2px;              /* nästan raka hörn — stilrent, inte format-runt */
  --container-width: 1240px;
  --transition: 0.25s ease;
  --shadow-soft: 0 10px 30px -15px rgba(44, 40, 34, 0.25);
}


/* --------------------------------------------------------------------------
   2. GRUNDSTILAR
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; /* mobilmenyn ligger förskjuten utanför skärmen (translateX)
                          och skulle annars kunna orsaka en falsk horisontell scroll */
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.15;
  margin: 0 0 var(--space-2);
  color: var(--color-text);
}

h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-lg); }

p { margin: 0 0 var(--space-2); }

ul { margin: 0; padding: 0; list-style: none; }

button {
  font-family: inherit;
  cursor: pointer;
}

/* Tydlig fokusring för tangentbordsnavigering (tillgänglighet) */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* Skip-link för skärmläsare/tangentbord — hoppar förbi menyn */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--color-accent);
  color: #fff;
  padding: var(--space-1) var(--space-2);
  z-index: 100;
}
.skip-link:focus {
  left: var(--space-2);
  top: var(--space-2);
}


/* --------------------------------------------------------------------------
   3. LAYOUT
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--space-3);
}

/* --- Header ------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-accent); /* headern i accentfärg */
  border-bottom: 1px solid var(--color-accent-dark);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-2);
}

.logo {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-family: "Hunting Star", cursive;
  font-size: 1.15rem; /* Hunting Star, nedskalad efter feedback - mycket mindre än första försöket */
  letter-spacing: normal; /* bokstäverna i Hunting Star är gjorda för att flyta ihop, ingen extra spårning */
  white-space: nowrap;
  color: #fff; /* ljus text mot den färgade headern */
  position: relative;
  top: 4px; /* flyttar löv + text nedåt i headern. Öka för längre ner, minska/negativt för uppåt */
}

.logo__mark { width: 35px; height: 35px; flex-shrink: 0; object-fit: contain; }

.main-nav {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.main-nav ul {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.main-nav a {
  font-size: var(--fs-sm);
  letter-spacing: 0.02em;
  padding-block: var(--space-1);
  border-bottom: 1px solid transparent;
  color: rgba(255, 255, 255, 0.85); /* ljus, något dämpad text i vila */
  transition: border-color var(--transition), color var(--transition);
}

.main-nav a:hover,
.main-nav a[aria-current="page"] {
  border-color: #fff;
  color: #fff; /* full vit vid hover/aktiv sida */
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.search-toggle {
  background: none;
  border: none;
  padding: var(--space-1);
  display: inline-flex;
  color: #fff;
}
.search-toggle:hover { background: rgba(255, 255, 255, 0.18); }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  padding: var(--space-1);
  color: #fff;
}

/* --- Footer --------------------------------------------------------------*/
.site-footer {
  border-top: 1px solid var(--color-line);
  margin-top: var(--space-7);
  padding-block: var(--space-5);
  background: var(--color-bg-soft);
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
}

.site-footer nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.site-footer small {
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
}

.social-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.social-link svg { width: 20px; height: 20px; }


/* --------------------------------------------------------------------------
   4. KOMPONENTER
   -------------------------------------------------------------------------- */

/* --- Knappar -------------------------------------------------------------*/
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.85em 1.8em;
  font-size: var(--fs-sm);
  letter-spacing: 0.03em;
  border-radius: var(--radius);
  border: 1px solid var(--color-accent);
  transition: background var(--transition), color var(--transition), transform var(--transition);
}

.btn--primary {
  background: var(--color-accent);
  color: #fff;
}
.btn--primary:hover {
  background: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
}

/* --- Etiketter (nyhet / slutsåld) ----------------------------------------*/
.badge {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  background: var(--color-sage);
  color: #fff;
  font-size: var(--fs-xs);
  letter-spacing: 0.05em;
  padding: 0.3em 0.7em;
  border-radius: var(--radius);
  text-transform: uppercase;
}

.badge--sold-out {
  background: var(--color-text-muted);
}

/* --- Produktkort (används i alla produktlistor) --------------------------*/
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-4) var(--space-3);
}

.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
}

.product-card__image-wrap {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--color-bg-soft);
  border-radius: var(--radius);
}

/* Nyckeln till "en bild, alla format": bilden fyller alltid sin ruta
   utan att behöva beskäras manuellt eller sparas i flera storlekar. */
.product-card__image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.5s ease;
}

.product-card:hover .product-card__image-wrap img {
  transform: scale(1.04);
}

.product-card__body {
  padding-top: var(--space-2);
}

.product-card__name {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  margin-bottom: 0.2em;
}

.product-card__price {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

.product-card--unavailable .product-card__image-wrap img {
  filter: grayscale(40%);
  opacity: 0.7;
}

/* --- Filter/kategori-chips (används i sök & produktlistor) ---------------*/
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
}

.filter-chip {
  padding: 0.5em 1.1em;
  font-size: var(--fs-sm);
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: var(--color-surface);
  transition: all var(--transition);
}

.filter-chip[aria-pressed="true"] {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

/* --- Sökformulär ----------------------------------------------------------*/
.search-form {
  display: flex;
  gap: var(--space-1);
  max-width: 480px;
}

.search-form input[type="search"] {
  flex: 1;
  padding: 0.8em 1em;
  font-size: var(--fs-base);
  font-family: inherit;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
}

/* Sökpanel som fälls ut från headern */
.search-panel {
  position: fixed;
  inset: 0;
  background: rgba(44, 40, 34, 0.4);
  z-index: 90;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
}

.search-panel.is-open { display: flex; }

.search-panel__box {
  background: var(--color-bg);
  padding: var(--space-4);
  width: min(560px, 90vw);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}

.search-panel__close {
  background: none;
  border: none;
  float: right;
  font-size: var(--fs-lg);
  line-height: 1;
  color: var(--color-text-muted);
}

/* Tomt tillstånd (t.ex. "inga produkter i den här kategorin ännu") */
.empty-state {
  text-align: center;
  padding: var(--space-6) var(--space-2);
  color: var(--color-text-muted);
}

.empty-state svg { width: 48px; height: 48px; margin-bottom: var(--space-2); opacity: 0.6; }


/* --------------------------------------------------------------------------
   5. SIDSPECIFIKA SEKTIONER
   -------------------------------------------------------------------------- */

/* --- Hero (startsidan) ----------------------------------------------------*/
.hero {
  padding-block: var(--space-4) var(--space-6);
}

.hero__collage {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.hero__collage img {
  aspect-ratio: 3 / 4;
  object-fit: cover;
  width: 100%;
  height: 100%;
  border-radius: var(--radius);
}

.hero__collage li:nth-child(2) { margin-top: var(--space-4); }
.hero__collage li:nth-child(4) { margin-top: var(--space-2); }

.hero__intro {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
}

.hero__intro .eyebrow {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: var(--fs-xs);
  color: var(--color-accent-dark);
  margin-bottom: var(--space-2);
}

.hero__intro p {
  color: var(--color-text-muted);
  font-size: var(--fs-md);
}

/* --- Sektionsrubrik med tunn avdelarlinje ---------------------------------*/
.section-heading {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.section-heading .leaf-divider {
  flex: 1;
  height: 1px;
  background: var(--color-line);
}

section + section,
.page-section {
  margin-bottom: var(--space-6);
}

/* --- Om/introtext på startsidan -------------------------------------------*/
.about-block {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-5);
  align-items: center;
  background: var(--color-bg-soft);
  padding: var(--space-5);
  border-radius: var(--radius);
}

.about-block img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
}

/* --- Sidhuvud för kategori-/söksidor ---------------------------------------*/
.page-header {
  padding-block: var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--color-line);
  margin-bottom: var(--space-4);
}

.page-header p {
  color: var(--color-text-muted);
  max-width: 60ch;
}

.breadcrumbs {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
.breadcrumbs a:hover { color: var(--color-accent-dark); }

/* --- Produktsida -----------------------------------------------------------*/
.product-page {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-5);
  align-items: start;
}

.product-gallery__main {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--color-bg-soft);
}

.product-gallery__main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-gallery__thumbs {
  display: flex;
  gap: var(--space-1);
  margin-top: var(--space-2);
}

.product-gallery__thumbs button {
  width: 72px;
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  overflow: hidden;
  background: none;
}

.product-gallery__thumbs button[aria-current="true"] {
  border-color: var(--color-accent);
}

.product-gallery__thumbs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-info__price {
  font-size: var(--fs-lg);
  color: var(--color-accent-dark);
  margin-bottom: var(--space-3);
}

.product-info__specs {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-line);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.product-info__specs dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.4em 1em;
}

.product-info__specs dt { color: var(--color-text); }

.product-info__actions {
  margin-top: var(--space-4);
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.stock-note {
  font-size: var(--fs-sm);
  margin-top: var(--space-1);
}
.stock-note--available { color: var(--color-sage); }
.stock-note--unavailable { color: var(--color-text-muted); }

/* --- Relaterade produkter --------------------------------------------------*/
.related {
  margin-top: var(--space-7);
}


/* --------------------------------------------------------------------------
   6. MEDIA QUERIES — responsivitet
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .about-block,
  .product-page {
    grid-template-columns: 1fr;
  }

  .hero__collage { grid-template-columns: repeat(2, 1fr); }
  .hero__collage li:nth-child(3),
  .hero__collage li:nth-child(4) { display: none; }
}

@media (max-width: 720px) {
  h1 { font-size: var(--fs-2xl); }
  h2 { font-size: var(--fs-xl); }

  /* Hunting Star tar mer plats i bredd än det gamla typsnittet -
     krymp loggan lite på smala skärmar så headern inte svämmar över. */
  .logo { font-size: 0.95rem; }

  .main-nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(320px, 85vw);
    height: 100vh;
    background: var(--color-bg);
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-6) var(--space-4);
    transform: translateX(100%);
    transition: transform var(--transition);
    box-shadow: var(--shadow-soft);
  }

  .main-nav.is-open { transform: translateX(0); }

  /* Mobilmenyns panel har ljus bakgrund (till skillnad från den nu
     accentfärgade headern), så länktexten måste vara mörk här igen. */
  .main-nav a { color: var(--color-text); }
  .main-nav a:hover,
  .main-nav a[aria-current="page"] {
    color: var(--color-accent-dark);
    border-color: var(--color-accent);
  }

  .main-nav ul {
    flex-direction: column;
    gap: var(--space-3);
    font-size: var(--fs-md);
  }

  .nav-toggle { display: inline-flex; }

  .about-block { padding: var(--space-3); }
}

@media (max-width: 480px) {
  .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--space-3) var(--space-2);
  }
}

/* Utskriftsvänligt (frivilligt, men billigt att lägga till) */
@media print {
  .site-header, .site-footer, .search-panel { display: none; }
}