/* =====================================================
   BLOOM PORTFOLIO THEME — theme.css
   Additional theme-level styles (header, footer, blog,
   archive, 404, etc.) layered on top of blocks.css
   ===================================================== */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body, 'DM Sans', sans-serif);
  color: var(--clr-text, #3a1a26);
  background: var(--clr-bg, #fffafb);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a   { color: var(--clr-accent, #e91e8c); text-decoration: none; }
a:hover { color: var(--clr-deep, #c2185b); }

/* ── Main content offset for fixed header ─────────── */
.bloom-main-content { min-height: 60vh; }

/* ── WordPress alignment classes ──────────────────── */
.alignwide  { max-width: 100%; }
.alignfull  { width: 100vw; margin-left: calc(50% - 50vw); }
.aligncenter { text-align: center; margin-left: auto; margin-right: auto; }
.alignleft  { float: left; margin-right: 2em; }
.alignright { float: right; margin-left: 2em; }

/* ── Skip Link ────────────────────────────────────── */
.skip-link {
  position: absolute; top: -100px; left: 16px;
  background: var(--clr-hot, #e91e8c); color: #fff;
  padding: 10px 20px; border-radius: 0 0 12px 12px;
  font-weight: 600; font-size: .9rem; z-index: 99999;
  transition: top .2s;
}
.skip-link:focus { top: 0; }

/* ── Archive / Blog List ──────────────────────────── */
.bloom-archive {
  padding: 80px 0;
  background: var(--clr-bg, #fffafb);
}
.bloom-archive-header {
  text-align: center; margin-bottom: 56px;
}
.bloom-archive-header h1 {
  font-family: var(--font-display, 'Playfair Display', serif);
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--clr-text);
  font-weight: 700; margin-bottom: 12px;
}
.bloom-archive-header p {
  color: var(--clr-text-light, #b07090);
  font-size: 1rem; max-width: 480px; margin: 0 auto;
}
.bloom-archive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 28px;
}
.bloom-archive-card {
  background: #fff;
  border: 1px solid var(--clr-border, rgba(244,143,177,.3));
  border-radius: var(--radius-md, 20px);
  overflow: hidden;
  transition: transform .28s, box-shadow .28s;
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(194,24,91,.07));
}
.bloom-archive-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg, 0 16px 56px rgba(194,24,91,.18));
}
.bloom-archive-card-thumb {
  height: 200px; overflow: hidden; background: var(--clr-blush, #fce4ec);
  display: flex; align-items: center; justify-content: center;
  font-size: 4rem;
}
.bloom-archive-card-thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .4s;
}
.bloom-archive-card:hover .bloom-archive-card-thumb img {
  transform: scale(1.05);
}
.bloom-archive-card-body { padding: 24px; }
.bloom-archive-card-cat {
  font-size: .72rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--clr-hot, #e91e8c);
  margin-bottom: 8px; display: block;
}
.bloom-archive-card-body h2 {
  font-family: var(--font-display, 'Playfair Display', serif);
  font-size: 1.1rem; font-weight: 700;
  color: var(--clr-primary, #8b2252);
  margin: 0 0 10px; line-height: 1.4;
}
.bloom-archive-card-body h2 a { color: inherit; }
.bloom-archive-card-body h2 a:hover { color: var(--clr-hot, #e91e8c); }
.bloom-archive-card-excerpt {
  font-size: .875rem; color: var(--clr-text-light, #b07090);
  line-height: 1.65; margin-bottom: 16px;
}
.bloom-archive-card-meta {
  display: flex; align-items: center; justify-content: space-between;
  font-size: .78rem; color: var(--clr-text-light);
  padding-top: 14px; border-top: 1px solid var(--clr-border);
}
.bloom-read-more {
  font-size: .82rem; font-weight: 600; color: var(--clr-hot, #e91e8c);
}
.bloom-read-more:hover { color: var(--clr-deep, #c2185b); }

/* ── Pagination ───────────────────────────────────── */
.bloom-pagination {
  display: flex; justify-content: center; gap: 8px;
  margin-top: 56px; flex-wrap: wrap;
}
.bloom-pagination a,
.bloom-pagination span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  font-size: .88rem; font-weight: 600;
  background: var(--clr-petal, #fdf0f5);
  color: var(--clr-text-mid, #7b3f5e);
  border: 1.5px solid var(--clr-border);
  transition: all .2s;
}
.bloom-pagination a:hover,
.bloom-pagination .current {
  background: var(--clr-hot, #e91e8c);
  color: #fff; border-color: var(--clr-hot);
}

/* ── 404 page ─────────────────────────────────────── */
.bloom-404 {
  min-height: 70vh; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 80px 32px;
  background: linear-gradient(135deg, var(--clr-petal, #fdf0f5), var(--clr-blush, #fce4ec));
}
.bloom-404-number {
  font-family: var(--font-display, 'Playfair Display', serif);
  font-size: clamp(6rem, 20vw, 12rem);
  font-weight: 700; color: var(--clr-rose, #f48fb1);
  line-height: 1; margin-bottom: 0;
}
.bloom-404-script {
  font-family: var(--font-script, 'Great Vibes', cursive);
  font-size: 2rem; color: var(--clr-hot, #e91e8c);
  display: block; margin-bottom: 20px;
}
.bloom-404 p {
  color: var(--clr-text-light, #b07090);
  font-size: 1.05rem; max-width: 400px;
  margin: 0 auto 32px;
}

/* ── Search Results ───────────────────────────────── */
.bloom-search-header {
  background: linear-gradient(135deg, var(--clr-petal), var(--clr-blush));
  padding: 60px 32px; text-align: center;
}
.bloom-search-header h1 {
  font-family: var(--font-display, 'Playfair Display', serif);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  color: var(--clr-text); font-weight: 700;
}
.bloom-search-header .bloom-search-term {
  color: var(--clr-hot, #e91e8c); font-style: italic;
}

/* ── Gutenberg block overrides (when NOT using bloom-blocks plugin) */
.wp-block-heading { font-family: var(--font-display, 'Playfair Display', serif); }
.wp-block-quote {
  border-left: 3px solid var(--clr-rose, #f48fb1);
  padding: 16px 24px;
  background: var(--clr-petal, #fdf0f5);
  border-radius: 0 var(--radius-sm, 12px) var(--radius-sm, 12px) 0;
}
.wp-block-button__link {
  background: var(--clr-hot, #e91e8c) !important;
  border-radius: var(--radius-full, 9999px) !important;
  font-family: var(--font-body, 'DM Sans', sans-serif) !important;
}
.wp-block-separator { border-color: var(--clr-rose, #f48fb1); }

/* ── Customizer live-preview transitions ──────────── */
.bloom-site-header,
.bloom-footer,
.bloom-block { transition: background .4s, color .4s; }

/* ── Accessibility: focus styles ─────────────────── */
:focus-visible {
  outline: 3px solid var(--clr-hot, #e91e8c);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Scroll-to-top button ─────────────────────────── */
#bloom-scroll-top {
  position: fixed; bottom: 28px; right: 28px;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--clr-hot, #e91e8c); color: #fff;
  border: none; cursor: pointer; font-size: 1.2rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(233,30,140,.35);
  opacity: 0; pointer-events: none;
  transition: opacity .3s, transform .3s;
  z-index: 9000;
}
#bloom-scroll-top.bloom-visible {
  opacity: 1; pointer-events: auto;
}
#bloom-scroll-top:hover { transform: translateY(-4px); }

/* ── Responsive ───────────────────────────────────── */
@media (max-width: 640px) {
  .bloom-archive-grid { grid-template-columns: 1fr; }
  .bloom-404-number   { font-size: 8rem; }
}