/*
Theme Name: Pooja Bhattarai Portfolio
Author: WordPress Telex
Description: A refined, gallery-inspired WordPress block theme for architects and design professionals. Features a warm neutral palette with muted gold accents, elegant serif typography, and generous whitespace that treats every page like a curated exhibition space.
Version: 0.1.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
License: GPLv2 or later
Text Domain: pooja-bhattarai-portfolio
Tags: block-theme, full-site-editing, portfolio, one-column, custom-colors, custom-menu, editor-style, featured-images, wide-blocks
*/

/* === Equal Cards Layout === */
.equal-cards > .wp-block-column {
  display: flex;
  flex-direction: column;
  flex-grow: 0;
}

.equal-cards > .wp-block-column > .wp-block-group {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.equal-cards .cta-bottom {
  margin-top: auto;
  justify-content: center;
}

.wp-site-blocks > footer {
  margin-block-start: 0;
}

/* === Header Styling === */
.site-header {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.site-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 1px;
  background-color: #DADAD5;
}

/* === Navigation Links === */
.site-header .wp-block-navigation a {
  font-family: 'Cormorant Garamond', Garamond, serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #3A3A3A;
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  transition: border-color 0.3s ease, color 0.3s ease;
}

.site-header .wp-block-navigation a:hover,
.site-header .wp-block-navigation a:focus {
  color: #1E1E1E;
  border-bottom-color: #B09A5F;
}

/* === Portrait Frame === */
.portrait-frame {
  position: relative;
  border: 1px solid #DADAD5;
  padding: 20px;
  background-color: #FFFFFF;
  box-shadow:
    0 2px 4px rgba(30, 30, 30, 0.04),
    0 8px 16px rgba(30, 30, 30, 0.06),
    0 20px 40px rgba(30, 30, 30, 0.08),
    0 40px 80px rgba(30, 30, 30, 0.04);
  max-width: 340px;
  margin-left: auto;
  margin-right: auto;
}

.portrait-frame::before {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 12px;
  right: 12px;
  height: 6px;
  background: linear-gradient(to bottom, rgba(30, 30, 30, 0.06), transparent);
  border-radius: 0 0 2px 2px;
}

.portrait-frame::after {
  content: '';
  position: absolute;
  bottom: -12px;
  left: 24px;
  right: 24px;
  height: 6px;
  background: linear-gradient(to bottom, rgba(30, 30, 30, 0.03), transparent);
  border-radius: 0 0 2px 2px;
}

.portrait-frame img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* === Gold Divider === */
.gold-divider {
  width: 40px;
  height: 1px;
  background-color: #B09A5F;
  margin: 0 auto;
  border: none;
}

/* === Skills Bar === */
.skills-bar {
  font-family: 'Cormorant Garamond', Garamond, serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #DADAD5;
}

.skills-bar .wp-block-group__inner-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

/* === Section Divider Lines === */
.section-divider-line {
  width: 60px;
  height: 1px;
  background-color: #DADAD5;
  margin: 0 auto;
  border: none;
}

/* === Project Cards === */
.project-card {
  position: relative;
  overflow: hidden;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.project-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(30, 30, 30, 0.1);
}

.project-card img {
  transition: transform 0.6s ease;
}

.project-card:hover img {
  transform: scale(1.03);
}

/* === Service Cards === */
.service-card {
  border: 1px solid #DADAD5;
  padding: 2.5rem;
  transition: border-color 0.3s ease;
}

.service-card:hover {
  border-color: #B09A5F;
}

/* === Buttons === */
.wp-block-button.is-style-fill .wp-block-button__link,
.btn-gold {
  font-family: 'Cormorant Garamond', Garamond, serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  transition: background-color 0.3s ease;
}

.wp-block-button.is-style-outline .wp-block-button__link,
.btn-outline {
  font-family: 'Cormorant Garamond', Garamond, serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  transition: border-color 0.3s ease, color 0.3s ease;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
  border-color: #B09A5F;
  color: #1E1E1E;
}

/* === Scroll Fade Animation === */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-section {
  animation: fadeInUp 0.8s ease both;
}

.fade-in-section:nth-child(2) { animation-delay: 0.1s; }
.fade-in-section:nth-child(3) { animation-delay: 0.2s; }
.fade-in-section:nth-child(4) { animation-delay: 0.3s; }

/* === Philosophy Quote Styling === */
.philosophy-quote {
  position: relative;
}

.philosophy-quote::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: #B09A5F;
}

/* === Footer Styling === */
.site-footer a {
  color: #3A3A3A;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease;
}

.site-footer a:hover {
  border-bottom-color: #B09A5F;
}

/* === Responsive === */
@media (max-width: 768px) {
  .portrait-frame {
    max-width: 280px;
    padding: 14px;
  }

  .skills-bar {
    font-size: 11px;
    letter-spacing: 0.18em;
  }
}