/*
Theme Name: Bricks and Fur
Theme URI: https://example.com
Author: Gail
Description: Bespoke theme for Bricks & Fur — bespoke commissions, print shop, and 2creativity events, all in one WordPress site.
Version: 0.1.0
Requires PHP: 7.4
Text Domain: bricksandfur
*/

/* ---------------------------------------------------
   Brand palette (locked) — CSS custom properties
   Update these once real fonts are confirmed from Canva.
--------------------------------------------------- */
:root {
  --bf-green-dark: #1E3D16;
  --bf-green-mid: #50694B;
  --bf-off-white: #E5EDE3;
  --bf-white: #FFFFFF;
  --bf-ink: #23281f;
  --bf-ink-muted: #5b6358;
  --bf-border: #d8e0d5;

  /* Warm 4th accent — placeholder light red, swap for the real gold
     once it's pulled from the Cheers 2 Creativity logo's ring accent.
     Also registered in theme.json (slug "bf-accent") so it's pickable
     in the block editor, not just here in raw CSS — keep both in sync
     if this changes again. */
  --bf-accent: #E0483A;
  --bf-accent-dark: #B93A2E; /* accent, darkened ~15% — hover state for accent buttons */

  /* Real fonts confirmed by Gail: DM Serif Display (heading/accent) and
     Amsterdam Four (script, used in the logo). Only DM Serif Display is
     wired in here — it's a proper open, freely-licensed Google Font
     (loaded via functions.php), safe to use as live web text. Amsterdam
     Four is NOT added as live text yet: it's commonly distributed
     through "free font" sites whose actual commercial/web-embedding
     license is often unclear even when the download itself is free —
     worth confirming where Adrian's copy came from and what it's
     licensed for before putting it on the live site as real (not just
     baked into a logo image) text. Body copy stays the plain system
     stack — DM Serif Display is a display face, not meant for body text
     at length. */
  --bf-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --bf-font-accent: 'DM Serif Display', Georgia, 'Times New Roman', serif;

  --bf-max-width: 1280px;
  --bf-radius: 6px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--bf-font-body);
  color: var(--bf-ink);
  background: var(--bf-white);
  line-height: 1.55;
}

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

a { color: var(--bf-green-mid); text-decoration: none; }
a:hover { color: var(--bf-green-dark); }

h1, h2, h3, h4, h5 { font-family: var(--bf-font-accent); line-height: 1.2; margin: 0 0 .5em; color: var(--bf-ink); }

.bf-container {
  max-width: var(--bf-max-width);
  margin: 0 auto;
  padding: 0 32px;
}

/* ---------------------------------------------------
   Header / primary nav — two rows: a centered wordmark row
   on a subtle dark-green gradient, then a nav row underneath
   separated by a hairline divider. Restructured from the old
   single-row header (Gail's steer: "the green bar is VERY
   boring"). header.php now outputs .bf-header-top (logo +
   cart + mobile toggle) and .bf-header-bottom (nav) as two
   separate rows instead of one flex row with everything in it.
--------------------------------------------------- */
.bf-header {
  /* Flat color, not a gradient — the gradient was showing through as a
     visible seam/mismatch around the logo (a plain .jpg, so it has its
     own flat background baked in, not transparent) since the shade
     behind it shifted depending on vertical position. */
  background: var(--bf-green-dark);
  color: var(--bf-white);
}

.bf-header-top-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 96px;
  padding-top: 16px;
  padding-bottom: 16px;
  gap: 16px;
}
.bf-logo {
  /* Absolutely centered regardless of how wide the actions on the right
     end up — simplest reliable way to center one flex child while
     others stay pinned to an edge, without needing an extra spacer
     element on the left to balance it. */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: var(--bf-white);
  font-family: var(--bf-font-accent);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.02em;
  z-index: 1;
  white-space: nowrap;
}
.bf-logo img {
  /* Real logo image (cropped-bricks-and-fur-logo.jpg). Bumped up from
     an initial 60px cap per Gail's ask for it bigger — paired with the
     .bf-header-top-inner min-height bump below, since the logo is
     absolutely positioned (for centering) and so doesn't push its own
     row taller on its own; without that pairing, a taller logo would
     just overflow the green bar's top/bottom edge instead of the bar
     growing to fit it. */
  max-height: 88px;
  width: auto;
}
.bf-logo:not(:has(img))::before {
  /* Decorative monogram watermark behind the wordmark — ONLY for the
     plain-text fallback (:not(:has(img))), so it won't show up
     underneath the real logo once that's active; a faint "BF" behind an
     actual logo photo would just be clutter, not a design element.
     This is a CSS-only placeholder built from plain text, NOT a real
     logo asset — the actual brand fonts are still pending (see project
     notes on Canva access). Safe to delete outright once the real logo
     is confirmed live and this fallback path is never hit. */
  content: "BF";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -55%);
  font-size: 68px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: rgba(255, 255, 255, 0.07);
  z-index: -1;
  pointer-events: none;
}

.bf-header-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}
.bf-cart-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--bf-white);
  font-size: 14px;
  font-weight: 600;
}
.bf-cart-icon { flex-shrink: 0; }
.bf-cart-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--bf-accent);
  color: var(--bf-white);
  font-size: 11px;
  font-weight: 700;
}

.bf-header-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.12);
}
.bf-header-bottom .bf-container {
  display: flex;
  justify-content: center;
}

.bf-primary-nav ul {
  list-style: none;
  display: flex;
  gap: 28px;
  margin: 0;
  padding: 12px 0;
}
.bf-primary-nav a {
  color: var(--bf-white);
  font-size: 14px;
  font-weight: 500;
}
.bf-primary-nav a:hover,
.bf-primary-nav .current-menu-item > a { color: var(--bf-off-white); }

.bf-primary-nav li { position: relative; }
.bf-primary-nav ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--bf-white);
  min-width: 200px;
  padding: 8px 0;
  border-radius: var(--bf-radius);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  z-index: 20;
}
.bf-primary-nav li:hover > ul,
.bf-primary-nav li:focus-within > ul { display: block; }
.bf-primary-nav ul ul a {
  color: var(--bf-ink);
  padding: 8px 18px;
  display: block;
}
.bf-primary-nav ul ul a:hover,
.bf-primary-nav ul ul a:focus {
  /* Explicit color here, not just background — without this, the
     top-level ".bf-primary-nav a:hover" rule above (which needs to be
     near-white, since top-level links sit on the dark green bar) was
     winning on specificity for THESE links too, even though submenu
     links sit on a white dropdown. Result: near-white text on a white
     background on hover — unreadable, exactly what was reported. */
  color: var(--bf-green-dark);
  background: var(--bf-off-white);
}

.bf-menu-toggle {
  display: none;
  background: none;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 4px;
  color: var(--bf-white);
  padding: 8px 10px;
  font-size: 14px;
}

@media (max-width: 780px) {
  .bf-header-top-inner { justify-content: space-between; }
  .bf-logo {
    /* Back to sitting inline on mobile — absolute-centering a wordmark
       over a row that also needs to fit a cart icon and menu button
       gets cramped fast on a narrow screen. */
    position: static;
    transform: none;
    font-size: 18px;
  }
  .bf-logo::before { display: none; }

  .bf-header-bottom { display: none; }
  .bf-header-bottom:has(.bf-primary-nav.is-open) { display: block; }
  .bf-primary-nav ul { flex-direction: column; gap: 4px; padding: 12px 0; }
  .bf-primary-nav ul ul { position: static; box-shadow: none; padding-left: 12px; }
  .bf-menu-toggle { display: inline-block; }
}

/* ---------------------------------------------------
   Footer
--------------------------------------------------- */
.bf-footer {
  background: var(--bf-off-white);
  border-top: 1px solid var(--bf-border);
  padding: 48px 0 24px;
  margin-top: 64px;
}
.bf-footer-cols {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 24px;
}
.bf-footer-cols h5 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--bf-ink-muted);
  margin-bottom: 12px;
}
.bf-footer-cols ul { list-style: none; margin: 0; padding: 0; }
.bf-footer-cols li { margin-bottom: 8px; font-size: 13.5px; }
.bf-footer-newsletter {
  display: flex; gap: 16px; align-items: center; justify-content: space-between;
  flex-wrap: wrap; padding-bottom: 32px; margin-bottom: 32px; border-bottom: 1px dashed var(--bf-border);
}
.bf-footer-bottom { margin-top: 32px; padding-top: 16px; border-top: 1px dashed var(--bf-border); font-size: 12px; color: var(--bf-ink-muted); }

@media (max-width: 780px) {
  .bf-footer-cols { grid-template-columns: 1fr 1fr; }
}

/* ---------------------------------------------------
   Home page hero — full-bleed photo with a left-to-right dark gradient
   and white text sitting directly on the photo. Replaces the earlier
   "white card floating over a full-vibrancy, untinted photo" version
   (see the superseded design note this used to carry — that pattern
   was a deliberate pivot away from a dark-tinted overlay reading as
   "old man masculine"). Once the Find Me page got the gradient/photo-
   text treatment, side by side it read as more integrated with the
   photo than the white card did, which had started feeling a bit
   "lifted off" the image — so the hero moved to match. Buttons here
   use the warm accent color rather than the usual green specifically
   to keep some brightness back, since a dark scrim now sits over part
   of the photo where the old card version left it fully vivid.

   Unlike the Find Me hero (a hand-coded PHP template), this stays a
   real Cover block — front-page-hero-fix.html sets its overlay to the
   "bf-photo-scrim" gradient registered in theme.json, so the whole
   hero (photo, headline, copy, buttons) is still block-editable in
   wp-admin, same as before. The Cover's own layout is set to type
   "default" (plain flow, no auto-centering) rather than "constrained" —
   "constrained" is what caused the old card's left-alignment bug (see
   ALIGNMENT FIX note in git history if that ever needs re-deriving);
   staying on "default" avoids that mechanism entirely instead of
   fighting it with !important overrides again.
--------------------------------------------------- */
.bf-hero {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 620px;
  /* Left/right padding deliberately NOT flat — this is a full-width
     (alignfull) section, so its raw edges are the actual browser
     viewport, not the ~1280px content column the rest of the site
     (header, footer, "Three ways in" row) is centered in. This mirrors
     .bf-container's own max-width/centering formula so the text's left
     edge lines up with the content above and below it, instead of the
     raw viewport edge. */
  padding: 0 32px 0 max(32px, calc((100% - var(--bf-max-width)) / 2 + 32px));
}
.bf-hero .wp-block-cover__inner-container {
  /* Constrains the text to a readable column instead of it stretching
     across the full width of the photo. Narrower than the 480px this
     started at — see the note below on why that alone doesn't fully
     solve the overlap with Adrian, just reduces it. */
  max-width: 420px;
}
.bf-hero h1 {
  color: var(--bf-white);
  font-size: 48px;
  line-height: 1.12;
  margin: 0 0 20px;
}
.bf-hero .bf-hero-kicker {
  color: var(--bf-white);
  margin-bottom: 12px;
}
.bf-hero p:not(.bf-hero-kicker) {
  color: rgba(255, 255, 255, .92);
  font-size: 16px;
  line-height: 1.6;
  max-width: 420px;
}
.bf-hero .wp-block-buttons { margin-top: 8px; }

/* Buttons — the warm accent color instead of the usual green, scoped
   to this hero only (see the block comment above for why). The base
   button rules further down still set padding/sizing/etc; these only
   override color, and win on specificity (three classes vs. their
   two) without needing source order to break the tie. */
.bf-hero .wp-block-buttons .wp-block-button__link {
  background: var(--bf-accent) !important;
  color: var(--bf-white) !important;
}
.bf-hero .wp-block-buttons .wp-block-button__link:hover {
  background: var(--bf-accent-dark) !important;
}
.bf-hero .wp-block-buttons .is-style-outline .wp-block-button__link {
  background: transparent !important;
  color: var(--bf-white) !important;
  border-color: rgba(255, 255, 255, .7) !important;
}
.bf-hero .wp-block-buttons .is-style-outline .wp-block-button__link:hover {
  background: var(--bf-white) !important;
  color: var(--bf-green-dark) !important;
  border-color: var(--bf-white) !important;
}

@media (max-width: 780px) {
  /* A left-to-right gradient stops making sense once the text column
     is the full viewport width — the "bf-photo-scrim" gradient itself
     stays fixed (it's a static theme.json gradient, not responsive),
     but anchoring the text to the bottom at least keeps it over the
     gradient's darkest portion at narrow widths. */
  .bf-hero { min-height: 480px; align-items: flex-end; padding: 0 24px 36px; }
  .bf-hero h1 { font-size: 36px; }
  .bf-hero .wp-block-cover__inner-container { max-width: none; }
}

/* ---------------------------------------------------
   Core Gutenberg block styling — this is the main way
   pages actually get built (Home, About, Portraits, etc.)
   Style the blocks well, and most pages need no custom
   PHP template at all — see docs/sitemap.md.
--------------------------------------------------- */
.bf-content { padding: 48px 0; }

/* Front page only: let a full-width hero sit flush against the header
   instead of inheriting .bf-content's default top spacer. WordPress adds
   the "home" body class on the front page regardless of whether it's a
   static page or the blog index, so this scopes cleanly without touching
   front-page.php. Other pages (About, Contact, Portraits, etc.) keep the
   normal 48px padding above their content. */
.home main.bf-content { padding-top: 0; }

/* Buttons — plain and standard, no animation, no pill shape.

   Root cause of the whole sizing saga, finally confirmed via DevTools:
   WordPress puts a button block's "additional CSS class" (bf-btn) on
   the OUTER wrapping <div class="wp-block-button bf-btn">, never on the
   inner <a class="wp-block-button__link"> that's actually the visible
   button. A bare ".bf-btn" selector matches that wrapper div too — so
   it was getting the same padding/background/radius as the link inside
   it, producing two nested green boxes (a bigger one behind a smaller
   one). Fixed by scoping every .bf-btn / .bf-btn-outline rule to
   "a.bf-btn" / "a.bf-btn-outline" — an element selector prefix, so it
   can only ever match an actual <a>, never the <div> wrapper. Kept
   these classes at all only in case a template elsewhere hand-writes
   a real <a class="bf-btn">; the actual homepage buttons are matched
   entirely via .wp-block-buttons .wp-block-button__link, which only
   ever exists on the real link anyway.

   Solid (.bf-btn) and outline (.is-style-outline) share one base rule
   with the SAME border width on both (1px — transparent on the solid
   one, colored on the outline one), so their box models are identical
   and they can't render at different sizes. Everything here is
   !important and scoped inside .wp-block-buttons so it out-specifies
   the per-instance <style> block WordPress writes once a button variant
   diverges from the default. */
.wp-block-buttons .wp-block-button__link,
a.bf-btn,
a.bf-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 26px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  border: 1px solid transparent !important;
  border-radius: var(--bf-radius) !important;
}

.wp-block-buttons .wp-block-button__link,
a.bf-btn {
  background: var(--bf-green-mid) !important;
  color: var(--bf-white) !important;
}
.wp-block-buttons .wp-block-button__link:hover,
a.bf-btn:hover {
  background: var(--bf-green-dark) !important;
}

.wp-block-buttons .is-style-outline .wp-block-button__link,
a.bf-btn-outline {
  background: transparent !important;
  color: var(--bf-green-mid) !important;
  border-color: var(--bf-green-mid) !important;
}
.wp-block-buttons .is-style-outline .wp-block-button__link:hover,
a.bf-btn-outline:hover {
  background: var(--bf-green-mid) !important;
  color: var(--bf-white) !important;
}

.wp-block-cover {
  border-radius: var(--bf-radius);
}
/* ...except a full-width one, like the homepage hero — rounding a
   section that spans the whole screen just shows page background
   peeking through at the corners instead of looking intentional. */
.wp-block-cover.alignfull {
  border-radius: 0;
}

.wp-block-columns { gap: 28px; }

.bf-card {
  border: 1px solid var(--bf-border);
  border-radius: 8px;
  overflow: hidden;
}
/* .bf-card-body's padding is a real block attribute now (it's its own
   nested Group block in the markup, not a hand-written div) — editable
   via Dimensions → Padding in wp-admin, same as .bf-hero-card above. */

/* ---------------------------------------------------
   WooCommerce — shop / product / cart, using the same
   palette. WooCommerce's own default templates render
   inside page.php via the wrapper hooks in
   inc/woocommerce-setup.php, so only light styling is
   needed here rather than full template overrides.
--------------------------------------------------- */
.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price { color: var(--bf-ink); }

.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.woocommerce input.button {
  background: var(--bf-green-mid) !important;
  color: var(--bf-white) !important;
  border-radius: var(--bf-radius) !important;
  font-weight: 600 !important;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover { background: var(--bf-green-dark) !important; }

.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale {
  background: var(--bf-green-dark) !important;
}

/* ---------------------------------------------------
   Find Me hero — a tall, full-bleed editorial photo band: headline +
   subhead + rule + short description sitting over a left-to-right dark
   gradient, so the text side reads clearly while the photo stays fully
   vivid on the right (Ade's face, the artwork on display). This is
   plain hand-written CSS rather than a WordPress Cover block/theme.json
   gradient — deliberately, since theme.json doesn't register any
   gradients (custom + default gradients are both switched off there,
   same lockdown as the color palette) and a directional gradient like
   this isn't something the flat Cover-block "dim" setting can produce
   anyway. .bf-findme-hero-img is a plain absolutely-positioned <img>
   (not a CSS background-image) so it keeps a real alt attribute for
   SEO/accessibility, same reasoning as the homepage hero's photo.
--------------------------------------------------- */
.bf-findme-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 620px;
  overflow: hidden;
  /* The column-alignment padding lives here, on the full-bleed
     container — NOT on .bf-findme-hero-text below. That element also
     carries a fixed max-width, and everything in this stylesheet is
     box-sizing:border-box (padding counts against a box's own width) —
     putting a ~350px calculated left padding AND a 480px max-width on
     the same element left only ~100px of it for actual text, which is
     what was cramming "Find Me" onto two lines instead of one. */
  padding: 0 32px 0 max(32px, calc((100% - var(--bf-max-width)) / 2 + 32px));
}
.bf-findme-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Even a photo cropped for this hero's ~2:1 ratio still gets trimmed
     further at wider-than-2:1 viewports, and centered cropping was
     slicing into Ade's hat — biasing toward the top costs a little off
     the bottom (mostly the market stall/ground) instead. */
  object-position: center 12%;
}
.bf-findme-hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(10, 19, 7, .82) 0%, rgba(10, 19, 7, .55) 34%, rgba(10, 19, 7, 0) 64%);
}
.bf-findme-hero-text {
  position: relative;
  z-index: 1;
  max-width: 480px;
}
.bf-findme-hero-text h1 {
  color: var(--bf-white);
  font-size: 68px;
  line-height: 1.05;
  margin: 0 0 22px;
}
.bf-findme-hero-sub {
  font-family: var(--bf-font-accent);
  font-size: 25px;
  font-weight: 400;
  color: var(--bf-white);
  margin: 0 0 18px;
}
.bf-findme-hero-rule {
  width: 64px;
  height: 1px;
  background: rgba(255, 255, 255, .55);
  margin: 0 0 18px;
}
.bf-findme-hero-desc {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(255, 255, 255, .92);
  max-width: 300px;
  margin: 0;
}

@media (max-width: 780px) {
  /* A left-to-right gradient stops making sense once the text column is
     the full viewport width — switch to a bottom-anchored scrim/text
     instead, same idea as most full-bleed photo headers on mobile. */
  .bf-findme-hero { min-height: 480px; align-items: flex-end; padding: 0 24px 36px; }
  .bf-findme-hero-scrim {
    background: linear-gradient(180deg, rgba(10, 19, 7, .15) 0%, rgba(10, 19, 7, .85) 60%, rgba(10, 19, 7, .92) 100%);
  }
  .bf-findme-hero-text { max-width: none; }
  .bf-findme-hero-text h1 { font-size: 42px; margin-bottom: 14px; }
  .bf-findme-hero-sub { font-size: 19px; }
}

/* ---------------------------------------------------
   Find Me (Appearances) — the event list itself
--------------------------------------------------- */
.bf-findme-list { display: flex; flex-direction: column; gap: 0; }
.bf-findme-item {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid var(--bf-border);
}
.bf-findme-date {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bf-findme-date-day {
  font-weight: 700;
  color: var(--bf-green-dark);
  font-size: 15px;
}
.bf-findme-date-time {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--bf-ink-muted);
}
.bf-findme-body {
  overflow: hidden; /* contains the floated .bf-findme-photo below */
}
.bf-findme-body h3 { margin: 0 0 4px; font-size: 17px; }
.bf-findme-location { color: var(--bf-ink-muted); font-size: 14px; margin: 0 0 8px; }
.bf-findme-details { font-size: 14px; margin-bottom: 12px; }

.bf-findme-photo {
  float: right;
  width: 140px;
  margin: 0 0 12px 20px;
  border-radius: var(--bf-radius);
  overflow: hidden;
}
.bf-findme-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* The venue/more-info link stays a proper button (it's the one link
   per event that matters most); "Get Directions" and "Add to
   Calendar" are lighter-weight text links so three links per card
   doesn't turn into three competing buttons. */
.bf-findme-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 4px;
}
.bf-findme-link {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--bf-green-mid);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.bf-findme-link:hover { color: var(--bf-green-dark); }

@media (max-width: 600px) {
  .bf-findme-item { grid-template-columns: 1fr; gap: 4px; }
  .bf-findme-date { flex-direction: row; gap: 8px; align-items: baseline; }
  .bf-findme-photo { float: none; width: 100%; max-width: 220px; margin: 0 0 12px; }
}