/*
Theme Name: Lock & Lace
Theme URI: https://lockandlace.com
Description: Child theme for Lock & Lace
Author: Mistress Krigar
Template: blocksy
Version: 1.1.2
*/

:root {
  --ll-base:      #0D0A0C;
  --ll-surface:   #161014;
  --ll-raised:    #1F1620;
  --ll-line:      #3A2430;
  --ll-accent:    #FF2D78;  /* helten — knapper og priser, brukt sparsomt */
  --ll-accent-hi: #FF4F8D;  /* hover */
  --ll-on-accent: #2A0A16;  /* tekst pa aksentflate: mork gir lesbar kontrast */
  --ll-rose:      #FF9EC4;
  --ll-gold:      #E8C06A;
  --ll-cream:     #FDF2F6;
  --ll-muted:     #B49AA6;
}

body {
  background: var(--ll-base);
  color: var(--ll-cream);
}

/* Georgia er valgt fordi den finnes pa alle maskiner. Riktig kuratert folelse
   uten at siden ma vente pa at en webfont lastes ned — merkbart pa mobil. */
h1, h2, h3, h4,
.woocommerce-loop-product__title,
.product_title {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--ll-cream);
}

/* Logoen er et bilde som allerede inneholder navnet. Blocksy viser i tillegg
   sidetittelen som tekst ved siden av, sa navnet kom to ganger. */
.site-title-container { display: none; }

/* Blocksy skalerer logoen ned til rundt 40 px som standard. Da forsvinner
   nokkelhullet i o-en, som er hele poenget med merket. */
.site-logo-container .default-logo {
  height: 70px;
  width: auto;
  max-width: 100%;
}

@media (max-width: 767px) {
  .site-logo-container .default-logo { height: 44px; }
}

a { color: var(--ll-rose); }
a:hover { color: var(--ll-cream); }

/* Prisen i gull — det lille glottet av luksus, akkurat der det teller. */
.woocommerce-Price-amount { color: var(--ll-gold); }

.button,
.wp-element-button,
button[type="submit"],
.woocommerce a.button,
.woocommerce button.button.alt {
  background: var(--ll-accent);
  color: var(--ll-on-accent);
  border: none;
  border-radius: 6px;
  letter-spacing: 0.02em;
}

.button:hover,
.wp-element-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button.alt:hover {
  background: var(--ll-accent-hi);
  color: var(--ll-on-accent);
}

/* Forsiden skal ikke vise sin egen tittel — den er et utstillingsvindu,
   ikke et dokument. */
.home .entry-header,
.home h1.page-title { display: none; }

/* --- Forsiden ------------------------------------------------------------ */

/* Hero: CSS-basert inntil et ekte stemningsbilde leveres. Den svake
   fuksia-gloden overst gir dybde uten et eneste bilde. */
.ll-hero {
  position: relative;
  /* Hoyden ma holde folge med bildets formatforhold. Er feltet mye flatere
     enn bildet, beskjaerer "cover" toppen bort — og modellen mister hodet.
     min() gjor at feltet aldri blir flatere enn ca. 2.3:1. */
  min-height: max(62vh, min(46vw, 760px));
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 90px 0 70px;
}

/* Gloden ma ligge i et eget lag som spenner hele skjermbredden. Legges den
   pa .ll-hero selv, klippes den til innholdsbredden og far synlige kanter
   — tydeligst pa mobil. */
.ll-hero::before {
  content: "";
  position: absolute;
  /* Strekkes opp bak headeren. Ligger senteret pa elementets egen topp, blir
     overste rad sterkest og gir en synlig vannrett kant. */
  top: -220px;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: calc(100% + 220px);
  /* To lag: et morkt slor som gjor teksten lesbar, og gloden over det.
     Sloret er sterkest til venstre der overskriften star, og slipper
     motivet fram til hoyre. Ligger mellom bildet og teksten. */
  background:
    linear-gradient(to right,
      rgba(13, 10, 12, 0.90) 0%,
      rgba(13, 10, 12, 0.72) 32%,
      rgba(13, 10, 12, 0.30) 58%,
      transparent 78%),
    radial-gradient(ellipse 85% 65% at 50% 12%,
      rgba(255, 45, 120, 0.20), transparent 68%);
  pointer-events: none;
  z-index: 0;
}

/* Selve forsidebildet. URL-en settes fra functions.php, sa bildet kan byttes
   i mediebiblioteket uten a rore temafilene.

   Ligger UNDER gloden (z-index -1 mot 0), slik at gloden fargelegger bildet
   i stedet for a bli dekket av det. */
.ll-hero::after {
  content: "";
  position: absolute;
  top: -220px;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: calc(100% + 220px);
  /* Forankret mot bunnen: da tas beskjaeringen fra tomrommet over kjeden,
     ikke fra modellens hode. */
  background-position: right bottom;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: -1;
  pointer-events: none;
}

/* Mobilen bruker et eget, staende bilde (settes i functions.php) der motivet
   alt er komponert for smal skjerm. Da trengs verken forskyvning eller
   nedtoning — bildet er laget for a ha teksten oppa seg. */
@media (max-width: 767px) {
  .ll-hero {
    min-height: 82vh;
    justify-content: flex-end;
    padding-bottom: 48px;
  }

  /* Ingen forlengelse oppover her. Pa PC gir de 220 ekstra pikslene en fin
     overgang bak headeren, men pa en smal skjerm gjor de bakgrunnsfeltet sa
     hoyt og trangt at "cover" ma forstorre bildet kraftig — og da beskjaeres
     en fjerdedel bort pa hver side. Modellen forsvinner forst. */
  .ll-hero::after {
    top: 0;
    height: 100%;
    /* Forankret mot hoyre: det som beskjaeres tas fra det morke tomrommet
       til venstre, ikke fra motivet. */
    background-position: right bottom;
  }

  /* Pa mobil star teksten NEDERST, ikke til venstre — sa sloret ma komme
     nedenfra i stedet. Ellers ligger overskriften midt i motivet. */
  .ll-hero::before {
    top: 0;
    height: 100%;
    background:
      linear-gradient(to top,
        rgba(13, 10, 12, 0.95) 0%,
        rgba(13, 10, 12, 0.86) 30%,
        rgba(13, 10, 12, 0.45) 58%,
        rgba(13, 10, 12, 0.15) 80%,
        transparent 100%),
      radial-gradient(ellipse 90% 45% at 50% 8%,
        rgba(255, 45, 120, 0.18), transparent 70%);
  }
}

.ll-hero > * { position: relative; z-index: 1; }

.ll-hero-kicker {
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ll-rose);
  margin: 0 0 18px;
}

.ll-hero-title {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.6rem, 7vw, 4.8rem);
  line-height: 1.05;
  margin: 0 0 22px;
}

.ll-hero-sub {
  max-width: 560px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ll-muted);
  margin: 0 0 34px;
}

.ll-hero-cta {
  font-size: 15px;
  padding: 14px 34px;
}

.ll-section { padding: 46px 0 8px; }

.ll-section-title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin: 0 0 26px;
}

/* Kategorikort */
.ll-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
}

.ll-cat-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 20px;
  border: 1px solid var(--ll-line);
  border-radius: 10px;
  background: var(--ll-surface);
  transition: border-color 300ms ease, transform 300ms ease;
}

.ll-cat-card:hover {
  border-color: var(--ll-accent);
  transform: translateY(-2px);
}

.ll-cat-name {
  font-family: Georgia, serif;
  font-size: 19px;
  color: var(--ll-cream);
}

.ll-cat-desc {
  font-size: 13px;
  color: var(--ll-muted);
}

/* Mistress-seksjonen */
.ll-mistress-text {
  max-width: 640px;
  font-size: 17px;
  line-height: 1.7;
}

.ll-link-more { font-size: 14px; letter-spacing: 0.04em; }

/* Tillitsstripen */
.ll-trust {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin: 54px 0 40px;
  padding-top: 34px;
  border-top: 1px solid var(--ll-line);
}

.ll-trust-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 13px;
  color: var(--ll-muted);
}

.ll-trust-head {
  font-size: 14px;
  color: var(--ll-cream);
  letter-spacing: 0.04em;
}

/* --- Produktkort (Task 17) ----------------------------------------------- */

/* Kvadratisk format med vilje: Etsy-omslagene har tekst bakt inn i bildet,
   og en 2:3-beskjaering ville kuttet den. Byttes til 2/3 nar Canva-serien
   uten innbakt tekst er klar. */
.woocommerce ul.products li.product img,
.wc-block-grid__product-image img {
  aspect-ratio: 1 / 1;
  width: 100%;
  object-fit: cover;
  border-radius: 8px;
  transition: transform 600ms ease, opacity 600ms ease;
}

/* Zoomen krever at rammen klipper bildet som vokser. */
.woocommerce ul.products li.product a > img,
.woocommerce ul.products li.product .ct-media-container,
.wc-block-grid__product-image {
  overflow: hidden;
  border-radius: 8px;
  display: block;
}

.woocommerce ul.products li.product:hover img,
.wc-block-grid__product:hover img {
  transform: scale(1.04);
  opacity: 0.92;
}

.woocommerce span.onsale {
  background: var(--ll-accent);
  color: var(--ll-on-accent);
}

/* Kategorimerkene under titlene: sma, luftige versaler. */
.woocommerce ul.products li.product .posted_in,
.woocommerce ul.products li.product .ct-product-category a,
li.product .wc-loop-product-category a {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Refusjonsvarselet i kassen: synlig men dempet. */
.ll-checkout-notice {
  font-size: 13px;
  color: var(--ll-muted);
  margin-bottom: 12px;
}

/* Juridiske lenker og copyright i footeren, stablet og dempet. */
.ll-legal,
.ll-copyright {
  display: block;
  font-size: 13px;
}

.ll-legal { margin-bottom: 6px; }

.ll-copyright { color: var(--ll-muted); }