/*
Theme Name: Befofoto Child
Theme URI:  https://befofoto.claude.vmit.hu
Description: Editorial, minimalist child theme for Bekő József — photographer portfolio.
Author: Befofoto
Template: astra
Version: 1.0.0
Text Domain: befofoto-child
*/

/* ------------------------------------------------------------------
   Design tokens — monochrome, editorial
------------------------------------------------------------------ */
:root {
  --bf-ink:        #111111;
  --bf-ink-soft:   #3a3a3a;
  --bf-muted:      #8a8a8a;
  --bf-line:       #e6e3dd;
  --bf-paper:      #ffffff;
  --bf-cream:      #faf8f3;
  --bf-black:      #0a0a0a;
  --bf-white:      #ffffff;

  --bf-font-sans:  'Inter', 'Helvetica Neue', 'Arial', system-ui, -apple-system, sans-serif;
  --bf-font-display: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;

  --bf-tracking-wide: 0.22em;
  --bf-tracking-mid:  0.08em;
}

/* ------------------------------------------------------------------
   Base
------------------------------------------------------------------ */
body,
.ast-container,
.entry-content {
  font-family: var(--bf-font-sans);
  color: var(--bf-ink);
  background: var(--bf-paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--bf-font-display);
  color: var(--bf-ink);
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1.15;
}

h1 { font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 300; }
h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); font-weight: 400; }
h3 { font-size: 1.35rem; font-weight: 500; }

p  { line-height: 1.7; color: var(--bf-ink-soft); }

a  { color: var(--bf-ink); text-decoration: none; border-bottom: 1px solid var(--bf-line); transition: border-color .2s; }
a:hover { border-color: var(--bf-ink); }

/* ------------------------------------------------------------------
   Header / navigation
------------------------------------------------------------------ */
.site-header {
  background: var(--bf-paper);
  border-bottom: 1px solid var(--bf-line);
}

.ast-site-identity .site-title a,
.site-title a {
  font-family: var(--bf-font-display);
  font-weight: 400;
  letter-spacing: var(--bf-tracking-mid);
  color: var(--bf-ink) !important;
  border: none;
}

.main-header-menu .menu-item > a,
.main-navigation .menu-item > a,
#ast-desktop-header .main-header-menu a {
  font-family: var(--bf-font-sans);
  font-size: 0.75rem !important;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--bf-tracking-wide);
  color: var(--bf-ink) !important;
  border: none;
  padding: 1.6em 1.1em !important;
  transition: opacity .2s;
}
.main-header-menu .current-menu-item > a,
.main-header-menu .menu-item > a:hover {
  opacity: 0.55;
}

/* ------------------------------------------------------------------
   Kicker — small uppercase eyebrow used above H1s
------------------------------------------------------------------ */
.bf-kicker {
  font-family: var(--bf-font-sans);
  font-size: 0.7rem !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--bf-tracking-wide);
  color: var(--bf-muted) !important;
  margin-bottom: 1.2rem !important;
}

/* ------------------------------------------------------------------
   Hero
------------------------------------------------------------------ */
.bf-hero {
  min-height: 72vh !important;
  padding: 6rem 1.5rem !important;
  background: var(--bf-black);
}
.bf-hero .bf-kicker {
  color: rgba(255,255,255,0.65) !important;
}
.bf-hero-title {
  font-family: var(--bf-font-display);
  font-weight: 300;
  color: var(--bf-white) !important;
  font-size: clamp(2.6rem, 6vw, 5rem) !important;
  line-height: 1.05 !important;
  max-width: 18ch;
  margin: 0 auto 1.4rem !important;
}
.bf-hero-sub {
  color: rgba(255,255,255,0.85) !important;
  font-size: 1.15rem;
  font-style: italic;
  font-family: var(--bf-font-display);
  margin-bottom: 2.8rem !important;
}

/* ------------------------------------------------------------------
   Sections
------------------------------------------------------------------ */
.bf-section {
  padding: 6rem 1.5rem !important;
}
.bf-section h2 {
  margin-bottom: 2rem;
}
.bf-lead {
  max-width: 46rem;
  margin-left: auto !important;
  margin-right: auto !important;
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--bf-ink-soft) !important;
}

/* ------------------------------------------------------------------
   Buttons — thin, uppercase, letter-spaced
------------------------------------------------------------------ */
.wp-block-button .wp-block-button__link,
.bf-btn .wp-block-button__link {
  background: var(--bf-ink);
  color: var(--bf-white);
  border: 1px solid var(--bf-ink);
  border-radius: 0;
  padding: 1em 2.2em;
  font-family: var(--bf-font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--bf-tracking-wide);
  transition: background .2s, color .2s, border-color .2s;
}
.wp-block-button .wp-block-button__link:hover {
  background: transparent;
  color: var(--bf-ink);
}

.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent !important;
  color: inherit !important;
  border: 1px solid currentColor !important;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--bf-ink) !important;
  color: var(--bf-white) !important;
  border-color: var(--bf-ink) !important;
}
.has-black-background-color .wp-block-button.is-style-outline .wp-block-button__link {
  color: var(--bf-white) !important;
  border-color: rgba(255,255,255,0.8) !important;
}
.has-black-background-color .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--bf-white) !important;
  color: var(--bf-ink) !important;
  border-color: var(--bf-white) !important;
}

/* ------------------------------------------------------------------
   Cards (service teasers, "Miért válassz engem")
------------------------------------------------------------------ */
.bf-card {
  padding: 2.4rem 1.6rem;
  border: 1px solid var(--bf-line);
  background: var(--bf-paper);
  height: 100%;
  transition: border-color .2s, transform .2s;
}
.bf-card:hover {
  border-color: var(--bf-ink);
}
.bf-card-title {
  font-family: var(--bf-font-display);
  font-size: 1.25rem;
  margin-bottom: 0.8rem;
  font-weight: 500;
}

/* ------------------------------------------------------------------
   Stats
------------------------------------------------------------------ */
.bf-stats { display: grid; grid-template-columns: auto 1fr; gap: 0.6rem 1.4rem; align-items: baseline; }
.bf-stat-num {
  font-family: var(--bf-font-display);
  font-size: 2.2rem !important;
  font-weight: 300;
  color: var(--bf-ink) !important;
  margin: 0 !important;
  line-height: 1 !important;
}
.bf-stat-label {
  font-family: var(--bf-font-sans);
  font-size: 0.8rem !important;
  text-transform: uppercase;
  letter-spacing: var(--bf-tracking-mid);
  color: var(--bf-muted) !important;
  margin: 0 !important;
}

.bf-stats-band { padding: 4.5rem 1.5rem !important; }
.bf-stat-num-lg {
  font-family: var(--bf-font-display);
  font-size: clamp(2.8rem, 5vw, 4.2rem) !important;
  font-weight: 300;
  color: var(--bf-white) !important;
  margin: 0 !important;
  line-height: 1 !important;
}
.bf-stats-band .bf-stat-label {
  color: rgba(255,255,255,0.7) !important;
  margin-top: 0.8rem !important;
}

/* ------------------------------------------------------------------
   Package cards (Szolgáltatások)
------------------------------------------------------------------ */
.bf-package {
  padding: 2.8rem 2rem;
  border: 1px solid var(--bf-line);
  background: var(--bf-paper);
  height: 100%;
  display: flex !important;
  flex-direction: column;
}
.bf-package-featured {
  border: 1px solid var(--bf-ink);
  background: var(--bf-cream);
}
.bf-package-tier {
  font-size: 0.7rem !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--bf-tracking-wide);
  color: var(--bf-muted) !important;
  margin-bottom: 0.6rem !important;
}
.bf-package-title {
  font-size: 1.5rem;
  margin-bottom: 1.4rem;
  font-family: var(--bf-font-display);
}
.bf-package-list {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0 0 1.6rem 0 !important;
}
.bf-package-list li {
  padding: 0.5em 0;
  border-bottom: 1px solid var(--bf-line);
  font-size: 0.95rem;
  color: var(--bf-ink-soft);
}
.bf-package-list li:last-child { border-bottom: 0; }

/* ------------------------------------------------------------------
   Gallery category tiles
------------------------------------------------------------------ */
.bf-gallery-grid .bf-cat {
  aspect-ratio: 4 / 5;
  border: 1px solid var(--bf-line);
  background: var(--bf-cream);
  display: flex !important;
  align-items: center;
  justify-content: center;
  transition: background .2s, color .2s;
  cursor: pointer;
}
.bf-gallery-grid .bf-cat:hover {
  background: var(--bf-ink);
}
.bf-gallery-grid .bf-cat:hover .bf-cat-title {
  color: var(--bf-white);
}
.bf-cat-title {
  font-family: var(--bf-font-display);
  font-size: 1.5rem;
  font-weight: 400;
  text-align: center;
  margin: 0;
  transition: color .2s;
}

/* ------------------------------------------------------------------
   Testimonials
------------------------------------------------------------------ */
.bf-quote {
  border-left: 2px solid var(--bf-ink) !important;
  padding-left: 1.4rem !important;
  font-style: normal !important;
}
.bf-quote p {
  font-family: var(--bf-font-display);
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.55;
}
.bf-quote cite {
  display: block;
  margin-top: 0.8rem;
  font-family: var(--bf-font-sans);
  font-style: normal;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: var(--bf-tracking-wide);
  color: var(--bf-muted);
}

/* ------------------------------------------------------------------
   Contact cards
------------------------------------------------------------------ */
.bf-contact-card {
  padding: 2rem 1.5rem;
  border: 1px solid var(--bf-line);
  text-align: center;
  height: 100%;
}
.bf-contact-label {
  font-size: 0.7rem !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--bf-tracking-wide);
  color: var(--bf-muted) !important;
  margin-bottom: 0.8rem !important;
}
.bf-contact-value {
  font-family: var(--bf-font-display);
  font-size: 1.15rem !important;
  color: var(--bf-ink) !important;
  margin: 0 !important;
}
.bf-contact-value a { border: none; }

/* ------------------------------------------------------------------
   Dark CTA band
------------------------------------------------------------------ */
.bf-cta {
  padding: 6rem 1.5rem !important;
}
.bf-cta h2 {
  color: var(--bf-white) !important;
  font-weight: 300;
}
.bf-cta .bf-lead {
  color: rgba(255,255,255,0.8) !important;
}

/* ------------------------------------------------------------------
   Footer
------------------------------------------------------------------ */
.site-footer,
.footer-sml-layout-1,
[data-section="section-footer-builder"] {
  background: var(--bf-cream);
  color: var(--bf-ink-soft);
  border-top: 1px solid var(--bf-line);
}
.site-footer a { color: var(--bf-ink); }

/* ------------------------------------------------------------------
   Responsive polish
------------------------------------------------------------------ */
@media (max-width: 768px) {
  .bf-section { padding: 4rem 1.25rem !important; }
  .bf-hero    { padding: 4rem 1.25rem !important; min-height: 60vh !important; }
  .bf-stats   { grid-template-columns: 1fr 1fr; gap: 0.4rem 1rem; }
}

/* Wider content area — photography sites like to breathe */
.site-content .ast-container,
.ast-plain-container .entry-content {
  max-width: 1280px;
}