/*
Theme Name: Bella Noir
Theme URI: https://bellanoirbeauty.com/
Author: Bella Noir
Description: A refined editorial WordPress block theme for Bella Noir, designed for Places, At Home, Style, Leisure, After Five, and a curated Beauty Archive.
Version: 1.6.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
Text Domain: bella-noir
*/


:root {
  --bn-ink:#11100f;
  --bn-cream:#f6f0e8;
  --bn-paper:#fcfaf6;
  --bn-taupe:#e9ded0;
  --bn-muted:#645d55;
  --bn-line:#d8cec2;
  --bn-canvas:#f2eee8;
}

html { scroll-behavior:smooth; }
* { box-sizing:border-box; }
body {
  margin:0;
  padding:clamp(0px,2vw,28px);
  background:var(--bn-canvas);
  color:var(--bn-ink);
}
.wp-site-blocks {
  max-width:1480px;
  margin-inline:auto;
  background:var(--bn-paper);
  box-shadow:0 16px 48px rgba(48,37,28,.08);
  overflow:hidden;
}
img { max-width:100%; height:auto; }
.wp-block-image img,
.wp-block-post-featured-image img { display:block; max-width:100%; height:auto; }
.is-layout-constrained > .alignwide,
.wp-block-group.alignwide,
.wp-block-query.alignwide {
  width:calc(100% - clamp(36px,7vw,104px));
  max-width:1180px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
a { text-underline-offset:.18em; }
.bn-eyebrow { letter-spacing:.16em; text-transform:uppercase; font-size:.72rem; }
.bn-rule { border-top:1px solid var(--bn-line); }
.bn-card img { width:100%; aspect-ratio:4/3; object-fit:cover; }
.bn-hero { position:relative; min-height:560px; overflow:hidden; }
.bn-hero img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.bn-hero-copy { position:relative; z-index:2; max-width:360px; background:rgba(255,253,250,.94); padding:2.2rem; margin:6rem 0 6rem 6vw; }
.bn-feature-strip img { width:100%; aspect-ratio:4/3; object-fit:cover; }
.bn-newsletter { background:linear-gradient(90deg,#f4efe7,#faf7f2); border:1px solid var(--bn-line); }
.bn-beauty-archive { border-top:1px solid var(--bn-line); border-bottom:1px solid var(--bn-line); }
.bn-post-shell { max-width:1180px; margin-inline:auto; }
.bn-post-body { max-width:720px; }
.bn-post-body > * + * { margin-block-start:1.35em; }
.bn-post-body p { font-size:1.09rem; line-height:1.82; }
.bn-archive-filter { display:flex; flex-wrap:wrap; gap:.5rem; margin:2rem 0; }
.bn-archive-filter button { border:1px solid var(--bn-ink); background:transparent; padding:.6rem .9rem; font:inherit; cursor:pointer; text-transform:uppercase; letter-spacing:.12em; font-size:.68rem; }
.bn-archive-filter button.is-active { background:var(--bn-ink); color:white; }
.bn-archive-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.6rem; }
.bn-archive-item { border-top:1px solid var(--bn-line); padding-top:1rem; }
.bn-archive-item img { width:100%; aspect-ratio:4/3; object-fit:cover; }
.bn-archive-item.is-hidden { display:none; }
.wp-block-post-title a { text-decoration:none; }
.wp-block-post-featured-image img { width:100%; object-fit:cover; }

@media (max-width: 900px) {
  .bn-hero { min-height:500px; }
  .bn-hero-copy { margin:10rem 1.25rem 2rem; max-width:calc(100% - 2.5rem); }
  .bn-archive-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width: 620px) {
  .bn-hero { min-height:520px; }
  .bn-hero-copy { padding:1.5rem; }
  .bn-archive-grid { grid-template-columns:1fr; }
}

.bn-archive-empty { grid-column:1 / -1; padding:2rem; background:var(--bn-cream); border:1px solid var(--bn-line); }
.bn-archive-empty code { background:#eee8de; padding:.1rem .3rem; }


/* Bella Noir layout resilience */
.bn-feature-strip .wp-block-columns { gap:clamp(18px,2vw,30px); align-items:flex-start; }
.bn-feature-strip .wp-block-column { min-width:0; }
.bn-newsletter { gap:24px; }
.bn-newsletter > * { min-width:0; }
.bn-footer-socials .wp-block-social-link a,
.bn-header-socials .wp-block-social-link a { color:inherit; }
.bn-footer-socials .wp-block-social-links,
.bn-header-socials .wp-block-social-links { gap:.45rem; }
.wp-block-post-template.is-layout-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(20px,2.4vw,32px); }
.wp-block-post-template.is-layout-grid > li { min-width:0; }

@media (max-width: 980px) {
  .wp-block-post-template.is-layout-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .bn-feature-strip .wp-block-columns { flex-wrap:wrap !important; }
  .bn-feature-strip .wp-block-column { flex-basis:calc(50% - 15px) !important; flex-grow:0; }
}

@media (max-width: 700px) {
  body { padding:0; }
  .wp-site-blocks { box-shadow:none; }
  .is-layout-constrained > .alignwide,
  .wp-block-group.alignwide,
  .wp-block-query.alignwide { width:calc(100% - 28px); }
  .wp-block-post-template.is-layout-grid { grid-template-columns:1fr; }
  .bn-feature-strip .wp-block-column { flex-basis:100% !important; }
  .bn-feature-strip img { aspect-ratio:16/10; }
  .bn-newsletter { display:block !important; padding:24px 20px !important; }
  .bn-newsletter .wp-block-buttons { margin-top:18px; }
  .bn-beauty-archive { display:block !important; padding-inline:0 !important; }
  .bn-beauty-archive .bn-eyebrow { margin-top:14px; }
  .bn-header-utility { padding-left:16px !important; padding-right:16px !important; gap:12px; }
  .bn-header-utility > .bn-eyebrow { display:none; }
  .bn-header-socials { margin-right:auto; }
  footer .wp-block-columns { gap:22px; }
}


/* v1.3 image sizing: WordPress may store originals at any pixel size, but the theme controls display size. */
.bn-feature-strip figure.wp-block-image { margin:0; width:100%; overflow:hidden; }
.bn-feature-strip figure.wp-block-image img { width:100% !important; height:auto !important; aspect-ratio:4/3; object-fit:cover; display:block; }
.bn-promo-columns { margin:0 !important; gap:0 !important; }
.bn-promo-columns > .wp-block-column { min-width:0; }
.bn-promo-copy { padding:clamp(24px,3vw,48px); }
.bn-promo-image { margin:0 !important; width:100%; height:100%; overflow:hidden; }
.bn-promo-image img { display:block; width:100% !important; height:100% !important; aspect-ratio:16/9; object-fit:cover; }
.bn-newsletter, .bn-beauty-archive { overflow:hidden; }

@media (max-width:700px) {
  .bn-promo-columns { display:block !important; }
  .bn-promo-columns > .wp-block-column { width:100% !important; flex-basis:auto !important; }
  .bn-promo-image img { aspect-ratio:16/10; height:auto !important; }
  .bn-promo-copy { padding:24px 20px; }
  .bn-feature-strip figure.wp-block-image img { aspect-ratio:16/10; }
}

/* v1.5 editorial inline links: visible without introducing browser-blue link styling. */
.bn-post-body p a:not(.wp-element-button),
.bn-post-body li a:not(.wp-element-button),
.bn-post-body blockquote a:not(.wp-element-button),
.bn-post-body figcaption a:not(.wp-element-button),
.single-post .wp-block-post-content p a:not(.wp-element-button),
.single-post .wp-block-post-content li a:not(.wp-element-button),
.single-post .wp-block-post-content blockquote a:not(.wp-element-button),
.single-post .wp-block-post-content figcaption a:not(.wp-element-button) {
  color:var(--bn-ink);
  text-decoration-line:underline;
  text-decoration-color:rgba(17,16,15,.55);
  text-decoration-thickness:1px;
  text-underline-offset:.2em;
  text-decoration-skip-ink:auto;
  transition:color .18s ease, text-decoration-color .18s ease, text-decoration-thickness .18s ease;
}
.bn-post-body p a:visited:not(.wp-element-button),
.bn-post-body li a:visited:not(.wp-element-button),
.single-post .wp-block-post-content p a:visited:not(.wp-element-button),
.single-post .wp-block-post-content li a:visited:not(.wp-element-button) {
  color:var(--bn-ink);
}
.bn-post-body p a:hover:not(.wp-element-button),
.bn-post-body li a:hover:not(.wp-element-button),
.bn-post-body blockquote a:hover:not(.wp-element-button),
.bn-post-body figcaption a:hover:not(.wp-element-button),
.single-post .wp-block-post-content p a:hover:not(.wp-element-button),
.single-post .wp-block-post-content li a:hover:not(.wp-element-button),
.single-post .wp-block-post-content blockquote a:hover:not(.wp-element-button),
.single-post .wp-block-post-content figcaption a:hover:not(.wp-element-button) {
  color:var(--bn-muted);
  text-decoration-color:var(--bn-muted);
  text-decoration-thickness:2px;
}
.bn-post-body a:focus-visible,
.single-post .wp-block-post-content a:focus-visible {
  outline:2px solid var(--bn-ink);
  outline-offset:3px;
}