/* ================================================================
   Bogdan Harstall Photography – main.css
   Replaces: bootstrap.css + style.css + responsive.css + touchTouch.css
   ================================================================ */

/* ---- Custom Fonts ---- */
@font-face {
  font-family: 'atwriter';
  src: url('atwriter.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'parkave';
  src: url('parkave.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Typography Times';
  src: url('Typography times.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Terrorplate';
  src: url('Terrorplate.ttf') format('truetype');
  font-display: swap;
}

/* ---- CSS Variables ---- */
:root {
  --color-accent:      #e85356;
  --color-text:        #333333;
  --color-text-light:  #7f7f7f;
  --color-bg:          #ffffff;
  --color-border:      #999999;
  --color-border-soft: #dddddd;
  --font-nav:          'atwriter', sans-serif;
  --font-heading:      'atwriter', sans-serif;
  --font-body:         'Open Sans', sans-serif;
  --transition-fast:   0.2s ease;
  --transition-std:    0.3s ease;
}

/* ---- Reset / Base ---- */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--color-text);
  background: var(--color-bg);
  margin: 0;
  padding: 0;
}

a[href^="tel:"] {
  color: inherit;
  text-decoration: none;
}

img { max-width: 100%; height: auto; }

/* ---- Page Loader ---- */
.page-loader {
  position: fixed;
  inset: 0;
  background: #fff url('../img/loader.gif') center center no-repeat;
  z-index: 9999;
  transition: opacity 0.5s ease;
}
.page-loader.loaded {
  opacity: 0;
  pointer-events: none;
}

/* ---- Header / Navbar ---- */
header {
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
  z-index: 100;
  position: relative;
}

.navbar {
  padding-top: 12px;
  padding-bottom: 12px;
}

.navbar-brand img {
  height: 63px;
  width: auto;
}

.navbar-nav .nav-link {
  font-family:    var(--font-nav);
  font-size:      18px;
  line-height:    22px;
  color:          var(--color-text);
  padding-top:    0.4rem;
  padding-bottom: 0.4rem;
  transition:     color var(--transition-fast);
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
  color: #aaaaaa;
}

.navbar-nav .nav-link.active {
  color: var(--color-text-light);
}

.lang-link {
  border-left: 1px solid var(--color-border);
  margin-left:  0.5rem;
  padding-left: 0.75rem !important;
}

.navbar-toggler {
  font-family: var(--font-nav);
  font-size:   16px;
  color:       var(--color-text);
  box-shadow:  none !important;
}

/* ---- Headings ---- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 400;
  color:       #000;
}

h1 { font-size: 4rem;   line-height: 1.1; }
h2 { font-size: 3rem;   line-height: 1.1; }
h3 { font-size: 1.6rem; line-height: 1.3; margin: 2rem 0 1rem; font-weight: normal; }
h4 { font-size: 2.5rem; line-height: 1.1; margin: 1.2rem 0; }
h5 { font-size: 1.1rem; color: var(--color-text-light); font-weight: 600; letter-spacing: -0.5px; }

p { padding-bottom: 1.5rem; margin: 0; }

/* ---- Main content area ---- */
.bg-content { background: var(--color-bg); }

#content { position: relative; }

/* ---- Portfolio Gallery ---- */
.portfolio {
  list-style: none;
  margin:     0;
  padding:    0;
  display:    grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap:        12px;
}

.portfolio li { margin: 0; }

/* Lightbox hover */
a.glightbox {
  display:  block;
  position: relative;
  overflow: hidden;
}

a.glightbox img {
  width:      100%;
  height:     auto;
  display:    block;
  transition: opacity var(--transition-std);
}

a.glightbox:hover img { opacity: 0.7; }

a.glightbox::after {
  content:    '';
  position:   absolute;
  inset:      0;
  background: url('../img/magnifier.png') center no-repeat rgba(0, 0, 0, 0.5);
  opacity:    0;
  transition: opacity var(--transition-std);
}

a.glightbox:hover::after { opacity: 0.6; }

/* ---- Carousel (homepage) ---- */
.carousel-item img {
  width:  100%;
  height: auto;
}

/* ---- Contact Page ---- */
.contact-form-wrap { padding-right: 2rem; }

#contact-form .form-field {
  margin-bottom: 1rem;
}

#contact-form input[type="text"],
#contact-form input[type="email"],
#contact-form input[type="tel"],
#contact-form textarea {
  font-family:   var(--font-body);
  font-size:     14px;
  color:         var(--color-text-light);
  background:    #fff;
  border:        1px solid var(--color-border-soft);
  border-radius: 0;
  box-shadow:    none;
  padding:       8px 18px;
  width:         100%;
  outline:       none;
  transition:    border-color var(--transition-fast), box-shadow var(--transition-fast);
}

#contact-form input:focus,
#contact-form textarea:focus {
  border-color: var(--color-accent);
  box-shadow:   0 0 0 2px rgba(232, 83, 86, 0.15);
}

#contact-form textarea {
  height:  220px;
  resize:  vertical;
}

.btn-send {
  background:      #666;
  color:           #fff;
  border:          none;
  padding:         8px 24px;
  cursor:          pointer;
  letter-spacing:  1px;
  font-family:     var(--font-nav);
  font-size:       16px;
  transition:      background var(--transition-std);
}

.btn-send:hover {
  background: var(--color-text);
  color:      #fff;
}

.msg-success {
  color:         #2a7a2a;
  padding:       0.5rem 0;
  margin-bottom: 1rem;
}

.msg-error {
  color:         var(--color-accent);
  padding:       0.5rem 0;
  margin-bottom: 1rem;
}

.captcha-label {
  font-size: 14px;
  color:     var(--color-text-light);
}

/* ---- Footer ---- */
footer {
  border-top: 1px solid var(--color-border-soft);
  background: var(--color-bg);
  padding:    0.75rem 0;
}

.footer-tags {
  font-size: 0.85rem;
  color:     var(--color-text-light);
}

.footer-tags a {
  color:           var(--color-text-light);
  text-decoration: none;
}

.footer-tags a:hover { color: var(--color-accent); }

.footer-legal a {
  color:           var(--color-text);
  text-decoration: none;
  font-size:       0.9rem;
}

.footer-legal a:hover { color: var(--color-accent); }

.footer-copy {
  font-size: 0.85rem;
  color:     var(--color-text-light);
}

/* ---- Utility ---- */
.clearfix::after {
  content: '';
  display: table;
  clear:   both;
}

/* ---- Responsive ---- */
@media (max-width: 991.98px) {
  .navbar-brand img { height: 50px; }
  .contact-form-wrap { padding-right: 0; }
}

@media (max-width: 767.98px) {
  .portfolio {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
  }

  h1 { font-size: 2.5rem; }
  h2 { font-size: 2rem; }

  .footer-inner {
    flex-direction: column;
    gap: 0.5rem;
  }

  .navbar-collapse {
    background: #fff;
    padding: 0.5rem 0 1rem;
  }
}

@media (max-width: 479.98px) {
  .portfolio {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }

  .navbar-brand img { height: 42px; }
}