@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");

/* Removing this will mess with element sizing for the whole site*/
* {
  box-sizing: border-box;
}

body,
html {
  margin: 0;
  padding: 0;
  font-family: "Roboto", sans-serif; /* change the main font of the site here*/
}

html {
  scroll-behavior: smooth;
}

a {
  color: black;
}

a:visited {
  color: black;
}

/* General Styling*/
#header {
  /* Color and spacing */
  background-color: black;
  color: white;
  padding: 20px;
  /* Code below creates the sticky header, if you don't like that then delete this */
  position: sticky;
  top: 0;
  width: 100%;
}

#header h1 {
  text-align: center;
}

/* This is only spacing for the navigation links, don't edit unless you want to change that*/
#navLinks {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  flex-wrap: wrap;
  width: 100%;
}

/* to change the style of the navigation links, edit this:*/
#navLinks a {
  color: #bdbdbd;
  /* transition makes it so the link doesn't instantly change on hover. you can remove
  this or play with the timing. This is especially useful if you're changing the size or
  saturation of elements */
  transition: all 0.2s ease-out;
}

#navLinks a:hover {
  color: white;
  /* You can also do other things here, like make it bigger if you want:
  transform: scale(120%);*/
}

.main {
  padding: 0em 2em 1em 2em;
  margin: 0 auto; /* centers the main content */
  background-color: white;
  max-width: 1024px;
}

hr {
  margin: 2em 0;
}

#footer {
  text-align: center;
  padding: 15px;
}

/* Page specific */
.textPage {
  max-width: 800px; /*You can remove or not use this, I just think it looks better on bigger windows */
}

/* Touching any CSS below this can break the gallery. Proceed with caution */
.gallery {
  padding-top: 1em;
  /* base number of columns, can make this 1 to ?? at bigger numbers it'll look funny 
     if you edit this, you may want to update the columns in the mobile sizing starting on line 105
  */
  columns: auto 3;
  text-align: center;
}

.gallery img {
  border: 1px solid black; /* You can remove the border if you want */
  width: 100%;
}

figure {
  display: inline-block;
  margin: 0;
  margin-bottom: 15px;
}

.spotlightImage {
  display: block;
  margin: 0 auto;
}

/* Below changes the number of columns in the gallery for smaller screens
   If you changed the column number on line 85, you might have to edit it here too
   (it's not exactly mobile and tablet sizing)
    */
@media only screen and (max-width: 800px) {
  .gallery {
    columns: auto 2;
  }
}

@media only screen and (max-width: 500px) {
  .gallery {
    columns: auto 1;
  }
}
/* ====== Pipi Shrine custom layout (append to end) ====== */

/* Pehmem värvipalett */
:root{
  --bg: #fafafa;
  --paper: #ffffff;
  --ink: #222222;
  --muted-ink: #6b7280;   /* hallikas tekst */
  --accent: #444;         /* pehme tume aktsent */
  --border: #e8e8e8;
}

body{ background: var(--bg); color: var(--ink); }

/* Linkide toonid pehmemaks */
a{ color: var(--accent); }
a:hover{ color: #000; }

/* Ülariba – alguses läbipaistev, scrollides peen must riba */
.site-header{
  position: fixed;        /* üleval alati */
  top: 0; left: 0; right: 0;
  z-index: 999;
  background: transparent;
  transition: background 200ms ease, padding 200ms ease, box-shadow 200ms ease;
  padding: 18px 16px;     /* alguses veidi kõrgem, et hero peal ilus */
}
.site-header .header-inner{
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
}
.site-header .brand{
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: #f0f0f0;         /* hero pildi peal hele */
}
.site-header.scrolled{
  background: rgba(0,0,0,0.9); /* must riba */
  padding: 10px 16px;          /* peenem */
  box-shadow: 0 6px 14px rgba(0,0,0,0.2);
}
.site-header.scrolled .brand{ color: #ffffff; }

/* Menüü nupp paremal */
.menu-toggle{
  background: transparent;
  border: 1px solid rgba(255,255,255,0.6);
  color: #f0f0f0;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.site-header.scrolled .menu-toggle{
  border-color: #d1d5db;
  color: #f9fafb;
}
.menu-toggle:hover{ background: rgba(255,255,255,0.12); }
.site-header.scrolled .menu-toggle:hover{ background: rgba(255,255,255,0.08); }

/* Dropdown menüü */
.menu-panel{
  position: absolute;
  right: 16px;
  top: 100%;
  margin-top: 8px;
  background: #111;
  border: 1px solid #222;
  border-radius: 10px;
  padding: 8px;
  min-width: 150px;
  box-shadow: 0 12px 24px rgba(0,0,0,0.35);
}
.menu-panel a{
  display: block;
  color: #e5e7eb;
  text-decoration: none;
  padding: 8px 10px;
  border-radius: 6px;
}
.menu-panel a:hover{ background: rgba(255,255,255,0.08); }

/* Hero – täisekraan pilt + pealkiri */
.hero{
  height: 100svh;               /* full screen, safe on mobile */
  min-height: 520px;
  background-image: url("./images/image4.jpg"); /* muuda soovitud pildiks */
  background-size: cover;       /* ei lähe üüratuks, täidab proportsionaalselt */
  background-position: center;
  background-repeat: no-repeat;
  display: grid;
  place-items: center;
  position: relative;
  isolation: isolate;
}

/* pehme tumendus loetavuse jaoks */
.hero::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.45), rgba(0,0,0,0.25), rgba(0,0,0,0.55));
  z-index: -1;
}

/* Kui soovid kasutada <img> hero sees, kasuta seda klassi: */
/*
.hero img{
  width: min(1200px, 90vw);
  height: auto;
  border-radius: 14px;
  display: block;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}
*/

.hero-content{
  text-align: center;
  color: white;
  padding: 0 1rem;
}
.hero h1{
  font-size: clamp(28px, 6vw, 56px);
  line-height: 1.05;
  margin: 0 0 6px 0;
  text-shadow: 0 2px 30px rgba(0,0,0,0.6);
}
.hero-sub{
  margin: 0 0 18px 0;
  color: #f3f4f6;
  opacity: 0.9;
}
.hero-cta{
  display: inline-block;
  text-decoration: none;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.14);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.35);
}
.hero-cta:hover{ background: rgba(255,255,255,0.22); }

/* Main sisu pehmema “papri” peal */
.main.soft{
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 2rem 1.25rem;
  margin-top: -40px;           /* tõmbab paberit hero peale */
  box-shadow: 0 12px 40px rgba(0,0,0,0.08);
}

/* Sektsioonid */
.section{
  max-width: 900px;
  margin: 0 auto 3rem auto;
}
.section h2{
  font-size: clamp(22px, 3.2vw, 34px);
  margin-bottom: 10px;
}
.nice-list{
  margin: 0.5rem 0 0 1rem;
}
.footnote{
  color: var(--muted-ink);
  font-size: 0.9rem;
}

/* Pehmenda galerii välimust */
.gallery{
  columns: auto 3; /* sinu algne säilib; tuletame meelde */
  column-gap: 16px;
}
.gallery img{
  border: 1px solid var(--border);
  border-radius: 12px;
  width: 100%;
  display: block;
}
figure{ margin-bottom: 16px; }
figcaption{
  font-size: 0.9rem;
  color: var(--muted-ink);
  margin-top: 6px;
}

/* Footer */
#footer{
  color: var(--muted-ink);
  padding: 40px 12px;
}

/* Väikesed ekraanid */
@media (max-width: 800px){
  .gallery{ columns: auto 2; }
}
@media (max-width: 500px){
  .gallery{ columns: auto 1; }
  .site-header .brand{ font-size: 14px; }
}
/* About page väike hero */
.page-hero{
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  isolation: isolate;
}
.page-hero--short{
  min-height: 42svh;
  display: grid;
  place-items: center;
}
.page-hero__veil{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.45), rgba(0,0,0,0.25));
  z-index:-1;
}
.page-hero__content{
  text-align:center;
  color:#fff;
  padding: 0 1rem;
}
.page-hero__content h1{
  font-size: clamp(26px, 5vw, 44px);
  margin: 0 0 6px 0;
}
.hero {
  position: relative;
  height: 100vh;
  display: grid;
  place-items: center;
}

.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;  /* pilt täidab ala proportsionaalselt */
  z-index: -1;        /* pilt jääb teksti taha */
}

.hero-content {
  text-align: center;
  max-width: 700px;
  padding: 0 20px;
}
.hero-content { text-align:center; padding: 0 20px; }