/*
Theme Name: Tiigle
Theme URI: https://tiigle.fi
Author: Tiigle
Author URI: https://tiigle.fi
Description: Tiiglen oma teema. Tumma luksusilme, kultakorostukset ja itse isännöidyt fontit. Sisältää brändätyn "Tulossa pian" -sivun, joka kytketään päälle ja pois WooCommercen Sivuston näkyvyys -asetuksesta. WooCommerce-yhteensopiva.
Version: 2.2.3
Requires at least: 6.5
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tiigle
Tags: e-commerce, custom-colors, custom-logo, translation-ready
*/

/* ============================================================
   TIIGLE — perustyylit (kaikki sivut)

   Luettavuus: asiakaskunta on pääosin keski-ikäisiä, joilla voi
   olla lähinäön heikkenemää. Siksi tekstikoot on mitoitettu
   selvästi tavanomaista suuremmiksi ja rivivälit väljiksi.
   Perusleipäteksti on 17 px, ei 16 px.
   ============================================================ */

:root {
  --gold:        #C9A84C;
  --gold-light:  #E8D49A;
  --gold-dark:   #8B6914;
  --dark:        #1A1A18;
  --dark2:       #2C2C28;
  --text-muted:  #CFCEC5;
  --white:       #FFFFFF;
  --green:       #1F3D2A;
  --transition:  0.25s ease;

  --nav-h:       78px;    /* yläpalkin korkeus — käytetään ankkurivierityksessä */
  --wrap:        1160px;  /* sisällön maksimileveys */
  --gutter:      2.5rem;  /* sivureunus — SAMA navissa ja osioissa, jotta linjat osuvat */
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h);   /* ankkurit eivät jää palkin alle */
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: 'Jost', 'Apple Symbols', 'Segoe UI Symbol', system-ui, -apple-system, sans-serif;
  font-size: 1.0625rem;          /* 17 px */
  font-weight: 300;
  line-height: 1.7;
  background: var(--dark);
  color: var(--white);
  padding-top: var(--nav-h);

  /* HUOM: overflow-x: hidden RIKKOO position: sticky -kiinnityksen,
     koska se tekee bodystä vierityssäiliön. clip estää vaakavierityksen
     luomatta vierityssäiliötä. */
  overflow-x: clip;
}

h1, h2, h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  line-height: 1.18;
}

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

a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-light); }

:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ============================================================
   YLÄPALKKI
   ============================================================ */
.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  height: var(--nav-h);
  padding: 0 var(--gutter);
  background: var(--dark);
  border-bottom: 1px solid rgba(201, 168, 76, 0.2);
}

/* Sama maksimileveys ja keskitys kuin sisällöllä -> logo ja ostoskori
   ovat aina samassa linjassa hero-tekstin ja osioiden kanssa. */
.nav-inner {
  max-width: var(--wrap);
  height: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.nav-logo { display: flex; align-items: center; flex-shrink: 0; }
.nav-logo img { height: 54px; width: auto; }

.cart-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: var(--gold);
  color: var(--dark);
  border: none;
  padding: 0.7rem 1.5rem;
  font-family: 'Jost', 'Apple Symbols', 'Segoe UI Symbol', sans-serif;
  font-size: 0.95rem;            /* isompi kuin ennen (oli 0.8rem) */
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-radius: 2px;
  cursor: pointer;
  transition: background var(--transition);
}
.cart-btn:hover { background: var(--gold-light); color: var(--dark); }

.cart-count {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--dark);
  color: var(--gold);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0;
}

/* ============================================================
   OSIOIDEN PERUSTA
   ============================================================ */
.section-inner { max-width: var(--wrap); margin: 0 auto; width: 100%; }

.section-label {
  color: var(--gold);
  font-size: 0.92rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.section-title {
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  margin-bottom: 0.45rem;
}

.section-center { text-align: center; }

/* Kultaerotin  ——●—— */
.gold-divider {
  display: flex; align-items: center; justify-content: center;
  gap: 1.2rem;
  padding: 0.9rem var(--gutter);
  background: var(--dark2);
}
.gold-divider.on-dark { background: var(--dark); }
.gd-line {
  flex: 1; max-width: 200px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 168, 76, 0.4));
}
.gd-line-r { background: linear-gradient(90deg, rgba(201, 168, 76, 0.4), transparent); }
.gd-gem {
  color: var(--gold);
  font-size: 1.1rem;
  letter-spacing: 4px;
  white-space: nowrap;
}

/* ============================================================
   PAINIKKEET
   ============================================================ */
.btn-primary {
  position: relative;
  display: inline-block;
  overflow: hidden;
  background: var(--gold);
  color: var(--dark);
  border: none;
  padding: 1.05rem 2.5rem;
  font-family: 'Jost', 'Apple Symbols', 'Segoe UI Symbol', sans-serif;
  font-size: 1rem;                /* isompi (oli 0.85rem) */
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-radius: 2px;
  cursor: pointer;
  transition: background var(--transition);
}
.btn-primary:hover { background: var(--gold-light); color: var(--dark); }

/* Kimallus */
.btn-primary::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 55%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  transform: skewX(-20deg);
  animation: shimmer 3.5s infinite 1.5s;
  pointer-events: none;
}
@keyframes shimmer {
  0%   { left: -100%; }
  45%  { left: 160%; }
  100% { left: 160%; }
}

/* ============================================================
   ALAPALKKI
   ============================================================ */
.site-footer {
  background: var(--dark2);
  border-top: 1px solid rgba(201, 168, 76, 0.2);
  padding: 3.5rem var(--gutter) 3rem;
  text-align: center;
}
.footer-logo { margin: 0 auto 1.6rem; }
.footer-logo img { height: 52px; width: auto; margin: 0 auto; }

.footer-contact {
  color: var(--text-muted);
  font-size: 1.0625rem;
  margin-bottom: 1.6rem;
}
.footer-contact a {
  color: var(--gold);
  border-bottom: 1px solid rgba(201, 168, 76, 0.35);
  padding-bottom: 1px;
}
.footer-contact a:hover { color: var(--gold-light); border-color: var(--gold-light); }

.footer-meta {
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.95rem;
  letter-spacing: 1px;
}

/* ============================================================
   YLEINEN SIVUPOHJA (artikkelit, sivut)
   ============================================================ */
.site-main {
  max-width: 820px;
  margin: 0 auto;
  padding: 4rem 1.5rem;
}
.entry-title { margin-bottom: 1.4rem; }
.entry-content > * + * { margin-top: 1.2rem; }

/* Paluu etusivulle info-sivujen lopussa. */
.entry-back {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(201, 168, 76, 0.2);
  text-align: center;
}
.back-home {
  display: inline-block;
  padding: 0.8rem 1.9rem;
  border: 1px solid var(--gold);
  border-radius: 3px;
  color: var(--gold);
  font-family: 'Jost', 'Apple Symbols', 'Segoe UI Symbol', sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease;
}
.back-home:hover { background: var(--gold); color: var(--dark); }

/* ============================================================
   PIENET NÄYTÖT
   ============================================================ */
@media (max-width: 860px) {
  :root {
    --nav-h: 70px;
    --gutter: 1.25rem;
  }
  .nav-logo img { height: 46px; }
  .cart-btn { padding: 0.6rem 1.1rem; font-size: 0.88rem; letter-spacing: 1px; }
  .gold-divider { display: none; }
  .site-footer { padding: 2.5rem var(--gutter); }
}

/* ============================================================
   WORDPRESSIN YLLÄPITOPALKKI

   Kirjautuneena WP lisää sivun ylälaitaan kiinteän palkin
   (32 px työpöydällä, 46 px kapeilla näytöillä). Kiinteä
   navigaatiomme pitää siirtää sen alle, muuten logon yläosa
   jää palkin taakse. Ei näy kirjautumattomille kävijöille.
   ============================================================ */
body.admin-bar .site-nav { top: 32px; }

/* Ankkurivieritys ei saa jäädä palkin alle. */
html:has(body.admin-bar) { scroll-padding-top: calc(var(--nav-h) + 32px); }

@media screen and (max-width: 782px) {
  body.admin-bar .site-nav { top: 46px; }
  html:has(body.admin-bar) { scroll-padding-top: calc(var(--nav-h) + 46px); }
}

@media screen and (max-width: 600px) {
  /* Alle 600 px WP:n palkki ei ole kiinteä vaan vierii pois sivun mukana. */
  body.admin-bar .site-nav { top: 0; }
  html:has(body.admin-bar) { scroll-padding-top: var(--nav-h); }
}


/* ============================================================
   VÄHENNETTY LIIKE
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* Alatunnisteen linkit info-sivuille */
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 1.6rem;
  margin-bottom: 1.6rem;
}
.footer-nav a {
  color: var(--text-muted);
  font-size: 1rem;
  letter-spacing: 0.5px;
  transition: color var(--transition);
}
.footer-nav a:hover { color: var(--gold); }

@media (max-width: 860px) {
  .footer-nav { gap: 0.5rem 1.1rem; }
  .footer-nav a { font-size: 0.95rem; }
}

/* ============================================================
   Visma Pay -maksunapit kassalla
   Lisäosan oma valintakorostus (ohut vaalea reunus) hukkuu
   tummalla teemalla — valittu nappi saa kultareunuksen, hehkun
   ja valintamerkin, muut himmenevät hieman valinnan jälkeen.
   ============================================================ */

#visma-pay-bank-payments .bank-button {
  border: 2px solid transparent;
  border-radius: 4px;
  position: relative;
  transition: border-color 0.15s ease, box-shadow 0.15s ease,
              opacity 0.15s ease, transform 0.15s ease;
}

#visma-pay-bank-payments .bank-button:hover {
  border-color: rgba(201, 168, 76, 0.55);
  transform: translateY(-1px);
}

/* Valittu: kultareunus, hehku ja valintamerkki kulmassa */
#visma-pay-bank-payments .bank-button.selected {
  border-color: #C9A84C;
  box-shadow: 0 0 0 1px #C9A84C, 0 0 14px rgba(201, 168, 76, 0.45);
}

#visma-pay-bank-payments .bank-button.selected::after {
  content: "✓";
  position: absolute;
  top: -9px;
  right: -9px;
  width: 22px;
  height: 22px;
  line-height: 22px;
  border-radius: 50%;
  background: #C9A84C;
  color: #1A1A18;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

/* Kun jokin on valittu, muut väistyvät hieman taustalle */
#visma-pay-bank-payments:has(.bank-button.selected) .bank-button:not(.selected) {
  opacity: 0.55;
}
#visma-pay-bank-payments:has(.bank-button.selected) .bank-button:not(.selected):hover {
  opacity: 1;
}

/* ============================================================
   Visma Payn maksutapabanneri alatunnisteessa
   Pankkilogot on tehty vaalealle pohjalle — banneri saa vaalean
   laatan, joka istuu tumman alatunnisteen päälle hillitysti.
   ============================================================ */

.footer-payments {
  margin-top: 2rem;
  padding: 0.9rem 1.2rem;
  background: #F3F1EA;
  border-radius: 6px;
  display: inline-block;
  max-width: 100%;
}

.footer-payments img {
  display: block;
  max-width: 100%;
  height: auto;
}

@media (max-width: 860px) {
  .footer-payments { padding: 0.7rem 0.8rem; margin-top: 1.5rem; }
}

/* ============================================================
   Symbolit tekstimuodossa (♥ ♦ ♣ ♠ ☘)
   iOS näyttäisi nämä oletuksena värillisinä emojeina — kaiverrus
   on kuitenkin aina yksivärinen, joten myös sivun on näytettävä
   symbolit tekstimerkkeinä.
   ============================================================ */

body { font-variant-emoji: text; }