/**
 * Theme Name: Blocksy Child
 * Description: Blocksy Child theme
 * Author: Creative Themes
 * Template: blocksy
 * Text Domain: blocksy
 */

/* ── MAJB palette (2026-08-17) ─────────────────────────────────────────────
   Mock-up palette: off-white cream page, wood-brown as ACCENT only.
   The inherited Photo Studio template was orange (#fd5a37) on dark brown —
   both are overridden at the Blocksy palette variables, so buttons, links,
   header and footer all follow without touching the customizer.
   Provisional: the real build re-does this in the Timber theme's tokens. */

:root {
  --majb-brown: #4a3428;        /* accent — buttons, rules, footer */
  --majb-brown-deep: #33231a;   /* accent hover */
  --majb-ink: #2b211b;          /* headings */
  --majb-body: #4c4239;         /* body copy */
  --majb-line: #ddd0bd;         /* hairlines */
  --majb-cream-deep: #efe5d6;   /* banded section */
  --majb-cream: #faf5ec;        /* page background */
  --majb-white: #fffdf9;

  --theme-palette-color-1: var(--majb-brown);
  --theme-palette-color-2: var(--majb-brown-deep);
  --theme-palette-color-3: var(--majb-ink);
  --theme-palette-color-4: var(--majb-body);
  --theme-palette-color-5: var(--majb-line);
  --theme-palette-color-6: var(--majb-cream-deep);
  --theme-palette-color-7: var(--majb-cream);
  --theme-palette-color-8: var(--majb-white);

  --theme-link-initial-color: var(--majb-brown);
  --theme-link-hover-color: var(--majb-brown-deep);
  --theme-button-background-initial-color: var(--majb-brown);
  --theme-button-background-hover-color: var(--majb-brown-deep);
  --theme-button-text-initial-color: var(--majb-cream);
  --theme-button-text-hover-color: var(--majb-white);
  --theme-content-background: var(--majb-cream);
  --theme-headings-color: var(--majb-ink);
  --theme-text-color: var(--majb-body);
}

/* Page canvas.
   NOTE: scoped to the main container only. Painting `.ct-container` globally
   also painted the FOOTER's inner container cream, which left cream text on a
   cream field with only the brown gutters showing. */
body,
#main-container,
#main-container > .ct-container,
[data-prefix="single_page"] .entry-content {
  background-color: var(--majb-cream);
  color: var(--majb-body);
}

/* Header — cream, not the template's dark bar */
header#header [data-row] {
  background-color: var(--majb-cream) !important;
  border-bottom: 1px solid var(--majb-line);
}
header#header a,
header#header .ct-toggle,
header#header [data-id="text"] {
  color: var(--majb-ink) !important;
}
/* Wordmark at 2× the template's 24px slot (David, 2026-08-17). */
header#header .site-logo-container img {
  max-height: 92px !important;
  height: auto !important;
  width: auto !important;
}

/* Buttons — brown, never orange */
.wp-block-button__link,
.wp-element-button,
button,
input[type="submit"],
.ct-button {
  background-color: var(--majb-brown) !important;
  color: var(--majb-cream) !important;
  border-color: var(--majb-brown) !important;
  border-radius: 2px;
}
.wp-block-button__link:hover,
.wp-element-button:hover,
.ct-button:hover {
  background-color: var(--majb-brown-deep) !important;
}
/* Header CTA reads as a quiet outline, not a shout */
header#header .ct-button,
header#header .wp-element-button {
  background-color: transparent !important;
  color: var(--majb-ink) !important;
  border: 1px solid var(--majb-brown) !important;
}

/* Footer — the one deliberate brown field */
footer#footer,
footer#footer [data-row],
footer#footer .ct-container,
footer#footer .ct-container-fluid {
  background-color: var(--majb-brown) !important;
  color: var(--majb-cream);
}
footer#footer a,
footer#footer p,
footer#footer li,
footer#footer h1, footer#footer h2, footer#footer h3, footer#footer h4 {
  color: var(--majb-cream) !important;
}
footer#footer a:hover { opacity: .75; }
footer#footer .wp-element-button {
  background-color: var(--majb-cream) !important;
  color: var(--majb-brown) !important;
}
/* The commissions column is right-aligned; its button was not following. */
footer#footer .ct-widget:last-child .wp-block-buttons,
footer#footer [id^="block-12"] .wp-block-buttons,
footer#footer [id^="block-13"] .wp-block-buttons {
  justify-content: flex-end;
}

/* Editorial image treatment.
   Portrait-format photographs (figures, wood spirits) were rendering several
   thousand pixels tall at full width, so height is capped and the image is
   centred rather than stretched. */
.majb-hero-figure { margin: 0 0 2rem; text-align: center; }
.majb-hero-figure img {
  max-width: 100%;
  max-height: 560px;
  width: auto;
  height: auto;
  display: inline-block;
}
.wp-block-column .majb-hero-figure img { max-height: 420px; }
.majb-hero-figure figcaption {
  font-size: 13px; color: var(--majb-body); opacity: .75;
  margin-top: .6rem; line-height: 1.5;
}

/* Headings */
h1, h2, h3, h4, h5, h6 { color: var(--majb-ink); }

/* Last two template strings live in Blocksy customizer options, which have no
   REST surface — masked here so the word "Photo Studio" does not migrate with
   the site. Both get set properly in the customizer (or die with the Timber
   rebuild); this is a mock-up-grade cover, not a fix. */
footer#footer [data-id="copyright"] p { font-size: 0; margin: 0; }
footer#footer [data-id="copyright"] p::after {
  content: "© 2026 Mary-Ann Jack-Bleach Woodcarving · London, Ontario";
  font-size: 14px;
  color: var(--majb-cream);
  opacity: .8;
}
header#header [data-id="button"] { display: none !important; }

/* Section rhythm for the mock-up's alternating bands */
.majb-band { background-color: var(--majb-cream-deep) !important; }
.majb-rule {
  width: 64px; height: 2px; background: var(--majb-brown);
  margin: 0 0 1.25rem; border: 0;
}
.majb-eyebrow {
  text-transform: uppercase; letter-spacing: .18em;
  font-size: 13px; color: var(--majb-brown); margin-bottom: .5rem;
}