/* andonov.cc — styles */
/* Font: Lora (free, included in the fonts folder; supports Bulgarian). */
@font-face { font-family: "Lora"; src: url("../fonts/lora-regular.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Lora"; src: url("../fonts/lora-italic.woff") format("woff"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Lora"; src: url("../fonts/lora-semibold.woff") format("woff"); font-weight: 700; font-display: swap; }

:root {
  --pad: clamp(18px, 4vw, 48px);
  --serif: "Lora", Georgia, "Times New Roman", serif;
}

/* Colour themes. The active one is set by data-theme on <html> (see README).
   bg = page, paper = panels, line = hairlines, accent = highlights and buttons,
   muted = secondary text, text = body text, ink = headings, foot = footer band. */
:root, [data-theme="sand"] {    /* warm sand and bronze */
  --bg: #f6f1e9; --paper: #e9dfcf; --line: #d6c8b2; --accent: #a17a4c; --muted: #7d6f5d; --text: #4a433a; --ink: #1d1813; --field: #fffdf9; --foot: #3b3128; --foot-text: #e9dfcf; --lb: #1d1813;
}
[data-theme="slate"] {          /* cool blue-grey, echoes the sea at dusk */
  --bg: #eef2f6; --paper: #dbe4ec; --line: #c1ceda; --accent: #46708f; --muted: #5f7080; --text: #3c4852; --ink: #131c24; --field: #fbfdff; --foot: #1f303e; --foot-text: #dbe4ec; --lb: #111a22;
}
[data-theme="dusk"] {           /* peach and terracotta, from the sunset photos */
  --bg: #fcf2ea; --paper: #f4dccd; --line: #e6c3ad; --accent: #b55c38; --muted: #8a6a5b; --text: #4f3f37; --ink: #24160f; --field: #fffaf6; --foot: #4a2a1e; --foot-text: #f4dccd; --lb: #22140e;
}
[data-theme="sage"] {           /* grey-green */
  --bg: #f0f4ec; --paper: #dde6d5; --line: #c4d1b9; --accent: #587550; --muted: #66755f; --text: #3f483b; --ink: #151b12; --field: #fcfdfb; --foot: #26331f; --foot-text: #dde6d5; --lb: #141a11;
}
[data-theme="classic"] {        /* plain white, like the reference site */
  --bg: #ffffff; --paper: #f4f4f2; --line: #e2e2df; --accent: #8a8a86; --muted: #7c7c78; --text: #4a4a4a; --ink: #111111; --field: #ffffff; --foot: #f4f4f2; --foot-text: #7c7c78; --lb: #111111;
}
[data-theme="charcoal"] {       /* dark gallery look */
  --bg: #121212; --paper: #1e1d1b; --line: #34312d; --accent: #c9b08a; --muted: #9a948b; --text: #cfcbc5; --ink: #f2f0ec; --field: #121212; --foot: #000000; --foot-text: #9a948b; --lb: #000000;
}
[data-theme="wine"] {           /* blush and deep burgundy */
  --bg: #f8efee; --paper: #eedad9; --line: #dfc0bf; --accent: #7e2b3a; --muted: #85666a; --text: #4b3a3c; --ink: #230f13; --field: #fffafa; --foot: #3b121a; --foot-text: #eedad9; --lb: #1c0b0e;
}
[data-theme="teal"] {           /* sea green, for the coast */
  --bg: #edf5f4; --paper: #d4e8e5; --line: #b5d3cf; --accent: #1d6f6a; --muted: #5a7672; --text: #374947; --ink: #0d1f1e; --field: #fbfefd; --foot: #103a37; --foot-text: #d4e8e5; --lb: #081a19;
}
[data-theme="plum"] {           /* soft lilac and plum */
  --bg: #f4f0f7; --paper: #e3d9ec; --line: #cdbedb; --accent: #6b4688; --muted: #74657f; --text: #443a4c; --ink: #1b1223; --field: #fdfbfe; --foot: #2d1c3c; --foot-text: #e3d9ec; --lb: #150d1c;
}
[data-theme="navy"] {           /* dark navy with gold */
  --bg: #0e1824; --paper: #172535; --line: #26384c; --accent: #d0a862; --muted: #8c9aab; --text: #c5cfdb; --ink: #f1f4f8; --field: #0e1824; --foot: #08101a; --foot-text: #8c9aab; --lb: #060c14;
}
[data-theme="forest"] {         /* dark green with brass */
  --bg: #111a14; --paper: #1a2820; --line: #2a3d31; --accent: #c2ad6b; --muted: #8fa093; --text: #c6d1c8; --ink: #f0f4f0; --field: #111a14; --foot: #0a110c; --foot-text: #8fa093; --lb: #070c08;
}
[data-theme="espresso"] {       /* dark brown with copper */
  --bg: #1b1512; --paper: #29201b; --line: #3d3029; --accent: #d39762; --muted: #a39386; --text: #d6cbc2; --ink: #f6f1ec; --field: #1b1512; --foot: #100c0a; --foot-text: #a39386; --lb: #0c0908;
}
[data-theme="charcoal"] .logo img, [data-theme="navy"] .logo img, [data-theme="forest"] .logo img, [data-theme="espresso"] .logo img, [data-theme="charcoal"] .gear-item .pic img[src$=".svg"], [data-theme="navy"] .gear-item .pic img[src$=".svg"], [data-theme="forest"] .gear-item .pic img[src$=".svg"], [data-theme="espresso"] .gear-item .pic img[src$=".svg"] { filter: invert(1); }
[data-theme="charcoal"] .gear-item .pic img, [data-theme="navy"] .gear-item .pic img, [data-theme="forest"] .gear-item .pic img, [data-theme="espresso"] .gear-item .pic img { mix-blend-mode: normal; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--serif);
  font-weight: 400; font-size: 18px; line-height: 1.6;
  min-height: 100vh; display: flex; flex-direction: column;
}
main { flex: 1; padding: 0 var(--pad) 80px; }
a { color: inherit; }
img { max-width: 100%; display: block; }

/* Header */
.site-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 30px var(--pad); gap: 24px;
}
.logo img { height: 42px; width: auto; }
.nav { display: flex; align-items: center; gap: 28px; }
.nav a, .lang, .menu-btn {
  font: inherit; font-size: 17px; font-weight: 400; letter-spacing: .01em;
  text-decoration: none; color: var(--text);
  background: none; border: 0; padding: 4px 0; cursor: pointer;
  border-bottom: 1px solid transparent; transition: color .2s, border-color .2s;
}
.nav a:hover, .lang:hover { color: var(--accent); }
.nav a.active { border-bottom: 2px solid var(--accent); color: var(--ink); }
.nav a.icon { border: 0; padding: 0; line-height: 0; }
.icon svg { width: 19px; height: 19px; }
.lang { border: 1px solid var(--accent); color: var(--accent); padding: 3px 10px; font-size: 14px; letter-spacing: .08em; }
.lang:hover { background: var(--accent); color: var(--bg); }
.menu-btn { display: none; }

@media (max-width: 760px) {
  .site-header { flex-wrap: wrap; padding: 22px var(--pad); }
  .logo img { height: 34px; }
  .menu-btn { display: block; }
  .nav {
    display: none; width: 100%; flex-direction: column; align-items: flex-start;
    gap: 18px; padding: 18px 0 8px; border-top: 1px solid var(--line);
  }
  .nav.open { display: flex; }
}

/* Gallery grid */
.grid { display: flex; gap: 14px; align-items: flex-start; }
.grid .col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.ph { margin: 0; cursor: zoom-in; }
.ph .frame { position: relative; background: var(--paper); overflow: hidden; }
.ph img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .5s ease, transform .6s ease;
}
.ph img.loaded { opacity: 1; }
.ph:hover img { transform: scale(1.015); }
.ph figcaption, .lb-caption {
  font-size: 13px; font-style: italic; letter-spacing: .01em; color: var(--muted); line-height: 1.4;
}
.ph figcaption { padding-top: 6px; }
.ph figcaption:empty { display: none; }
@media (max-width: 560px) { .grid, .grid .col { gap: 8px; } }

/* Photo protection */
.protect, .ph img, .lb img {
  -webkit-user-select: none; user-select: none;
  -webkit-user-drag: none; -webkit-touch-callout: none;
}

/* Lightbox */
.lb {
  position: fixed; inset: 0; z-index: 50; background: var(--lb, #111);
  display: none; align-items: center; justify-content: center;
}
.lb.open { display: flex; }
.lb-stage { position: relative; max-width: calc(100vw - 150px); max-height: calc(100vh - 110px); }
.lb img {
  max-width: calc(100vw - 150px); max-height: calc(100vh - 110px);
  width: auto; height: auto; transition: opacity .25s;
}
.lb-shield { position: absolute; inset: 0; }
.lb button {
  position: absolute; background: none; border: 0; cursor: pointer; color: rgba(255,255,255,.75);
  padding: 16px; line-height: 0; transition: color .2s;
}
.lb button:hover { color: #fff; }
.lb button svg { width: 26px; height: 26px; }
.lb-close { top: 10px; right: 12px; }
.lb-prev { left: 8px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 8px; top: 50%; transform: translateY(-50%); }
.lb-meta {
  position: absolute; left: 0; right: 0; bottom: 14px; text-align: center;
  display: flex; flex-direction: column; gap: 2px; padding: 0 20px;
}
.lb-count { font-size: 13px; letter-spacing: .08em; color: rgba(255,255,255,.5); }
.lb-caption { color: rgba(255,255,255,.8); }
.lb img { box-shadow: 0 10px 50px rgba(0,0,0,.5); }
@media (max-width: 760px) {
  .lb-stage, .lb img { max-width: 100vw; max-height: calc(100vh - 130px); }
  .lb-prev, .lb-next { top: auto; bottom: 2px; transform: none; z-index: 2; }
}

/* Text pages */
.page { max-width: 1080px; margin: 0 auto; padding-top: 30px; }
h1 {
  font-weight: 400; font-size: 34px; line-height: 1.2; color: var(--ink);
  margin: 0 0 34px; padding-bottom: 16px; border-bottom: 2px solid var(--accent);
}
h2 { font-weight: 400; font-size: 24px; color: var(--ink); margin: 54px 0 20px; }
.lead { font-size: 25px; line-height: 1.4; color: var(--ink); margin: 0 0 22px; }
.muted { color: var(--muted); }

.about { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 6vw, 80px); align-items: start; }
.about .portrait { background: var(--paper); }
@media (max-width: 760px) { .about { grid-template-columns: 1fr; } }

.gear { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.gear-item { background: var(--paper); padding: 26px 22px 22px; }
.gear-item .pic { height: 150px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.gear-item .pic img { max-height: 100%; max-width: 100%; width: auto; object-fit: contain; mix-blend-mode: multiply; }
.gear-item h3 { font-size: 18px; font-weight: 400; color: var(--ink); margin: 0 0 4px; line-height: 1.35; }
.gear-item p { margin: 0; font-size: 15px; color: var(--muted); line-height: 1.5; }

.contact { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: clamp(28px, 6vw, 80px); }
@media (max-width: 760px) { .contact { grid-template-columns: 1fr; } }
.contact-list { list-style: none; margin: 0 0 26px; padding: 0; }
.contact-list li { padding: 14px 0; border-bottom: 1px solid var(--line); }
.contact-list span { display: block; font-size: 14px; font-style: italic; color: var(--muted); }
.contact-list a { text-decoration: none; font-size: 21px; color: var(--ink); }
.contact-list a:hover { color: var(--accent); }
.social { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-size: 17px; }
.social svg { width: 26px; height: 26px; }
.social:hover { color: var(--accent); }

form { background: var(--paper); padding: clamp(22px, 4vw, 40px); }
label { display: block; font-size: 15px; font-style: italic; color: var(--muted); margin-bottom: 18px; }
input, textarea, select {
  display: block; width: 100%; margin-top: 6px; padding: 12px 14px;
  font: inherit; font-size: 17px; font-style: normal; color: var(--ink);
  background: var(--field); border: 1px solid var(--line); border-radius: 0; outline: none;
}
input:focus, textarea:focus, select:focus { border-color: var(--accent); }
textarea { min-height: 160px; resize: vertical; }
.btn {
  font: inherit; font-size: 16px; font-weight: 400; letter-spacing: .04em;
  background: var(--accent); color: var(--bg); border: 1px solid var(--accent); padding: 11px 34px; cursor: pointer;
  transition: background .2s, color .2s;
}
.btn:hover { background: transparent; color: var(--accent); }
.form-note { font-size: 16px; margin: 16px 0 0; min-height: 1.5em; }
.hp { position: absolute; left: -9999px; }

/* Footer */
.site-footer {
  background: var(--foot); padding: 26px var(--pad);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 15px; color: var(--foot-text);
}
.site-footer a { color: var(--foot-text); line-height: 0; }
.site-footer a:hover { color: var(--accent); }

/* Temporary colour picker (remove the THEME_PICKER line in js/i18n.js to hide it) */
.themes { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.themes button { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--foot); outline: 1px solid var(--foot-text); cursor: pointer; padding: 0; }
.themes button.on { outline: 3px solid var(--foot-text); }

/* Product photos on the dark theme sit on a white tile */
[data-theme="charcoal"] .gear-item .pic:has(img[src$=".jpg"]), [data-theme="navy"] .gear-item .pic:has(img[src$=".jpg"]), [data-theme="forest"] .gear-item .pic:has(img[src$=".jpg"]), [data-theme="espresso"] .gear-item .pic:has(img[src$=".jpg"]) { background: #fff; padding: 10px; }

form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 560px) { form .two { grid-template-columns: 1fr; } }
select, input[type="date"] { height: 49px; }