/**
 * Theme Name:   Blocksy Child
 * Description:  Mallard Digital — child theme & design system
 * Author:       Mallard Digital LLC
 * Template:     blocksy
 * Text Domain:  blocksy-child
 * Version:      1.0.0
 */

/*
 * Design language: "floating cards over a forest floor"
 *
 * The body carries the darkest forest green — the lake at dusk, the
 * canopy overhead, the shadow between trunks. Content sections are
 * rounded cards that float on top with box-shadow and border-radius.
 * Gaps between cards let that dark ground show through, giving the
 * page depth without a single image.
 *
 * All palette references use Blocksy CSS custom properties so the
 * Customizer color picker still controls the site globally.
 * Never hardcode hex values here — use the vars below.
 *
 * Palette reference:
 *   --theme-palette-color-1  #0B3D2E  Forest Green     (body bg, dark cards)
 *   --theme-palette-color-2  #5C4632  Bark Brown        (muted text on light)
 *   --theme-palette-color-4  #D9C7A3  Sleeping Bear Sand
 *   --theme-palette-color-5  #F4F4F2  Foggy Shore       (light cards, form bg)
 *   --theme-palette-color-6  #E0B600  Maple Gold        (eyebrows, accents)
 *   --theme-palette-color-7  #164A4D  Superior Teal     (secondary dark cards)
 */


/* ── 1. Site canvas ─────────────────────────────────────────────── */

body {
    background-color: var(--theme-palette-color-1);
}

/* Make every intermediate Blocksy wrapper transparent so the forest
   floor body background bleeds through between cards. */
.site-main,
#content,
.ct-container,
.ct-container-xl,
.ct-container-lg,
.entry-content {
    background: transparent !important;
}

/* Remove Blocksy's content-area max-width/padding so our cards
   control their own horizontal extent. */
.entry-content {
    padding-left:  0 !important;
    padding-right: 0 !important;
    max-width: none !important;
    width: 100% !important;
}


/* ── 2. Floating card ───────────────────────────────────────────── */

/*
 * Add className="site-card" to any wp:group block to make it float.
 *
 * The card:
 *   - clips its children with overflow:hidden + border-radius
 *   - casts a layered shadow onto the forest-floor body bg beneath it
 *   - sits inset from the viewport edges (body bg peeks in on sides)
 *   - stacks with a gap above/below (body bg shows between cards)
 *
 * Do NOT set a background here — the block's own inline style or a
 * card-* helper class below handles that.
 */
.site-card {
    --card-inset: clamp(12px, 3vw, 48px);

    border-radius: 14px;
    box-shadow:
        0 2px  6px rgba(0, 0, 0, 0.20),
        0 10px 48px rgba(0, 0, 0, 0.38);
    overflow: hidden;

    /* Inset from viewport edges — body bg peeks in on the sides */
    max-width: calc(100% - var(--card-inset) * 2);
    margin-left:  auto;
    margin-right: auto;

    /* Vertical gap between cards — body bg shows through here */
    margin-top:    clamp(10px, 1.5vw, 18px);
    margin-bottom: clamp(10px, 1.5vw, 18px);
}

/* A little more air at the very top and very bottom of the page */
.entry-content > .wp-block-group.site-card:first-child {
    margin-top:    clamp(24px, 3vw, 48px);
}
.entry-content > .wp-block-group.site-card:last-child {
    margin-bottom: clamp(24px, 3vw, 48px);
}


/* ── 3. Card color helpers ──────────────────────────────────────── */

/*
 * Add one of these alongside site-card for semantic coloring.
 * The block's own inline background-color takes precedence; these
 * classes are a convenience for targeting specific card types in CSS
 * and for cases where no inline style is set.
 *
 * Usage in block markup:
 *   className="site-card card-forest"   → dark green hero / CTA
 *   className="site-card card-teal"     → superior teal secondary
 *   className="site-card card-light"    → foggy shore forms / content
 *   className="site-card card-gold"     → maple gold accent
 */

.site-card.card-forest {
    background-color: var(--theme-palette-color-1);
    color:            var(--theme-palette-color-5);
}

.site-card.card-teal {
    background-color: var(--theme-palette-color-7);
    color:            var(--theme-palette-color-4);
}

.site-card.card-light {
    background-color: var(--theme-palette-color-5);
    color:            var(--theme-palette-color-1);
}

.site-card.card-gold {
    background-color: var(--theme-palette-color-6);
    color:            var(--theme-palette-color-1);
}


/* ── 4. Header / footer ─────────────────────────────────────────── */

/*
 * Give the header the same forest-floor color so it reads as part of
 * the canvas the cards float on top of. Footer matches.
 * Override if Blocksy customizer already handles this.
 */
.site-header {
    background-color: var(--theme-palette-color-1);
}

.site-footer {
    background-color: var(--theme-palette-color-1);
}


/* ── 5. Scrollbar ───────────────────────────────────────────────── */

:root {
    scrollbar-color: var(--theme-palette-color-7) var(--theme-palette-color-1);
    scrollbar-width: thin;
}


/* ── 6. Block editor — apply canvas bg in the iFrame ───────────── */

/*
 * Makes the editor canvas show the forest-floor background so what
 * you see in the editor matches the front end.
 */
.editor-styles-wrapper {
    background-color: var(--theme-palette-color-1) !important;
}

.editor-styles-wrapper .wp-block-group.site-card {
    border-radius: 14px;
    box-shadow:
        0 2px  6px rgba(0, 0, 0, 0.20),
        0 10px 48px rgba(0, 0, 0, 0.38);
    overflow: hidden;
    max-width: calc(100% - 96px);
    margin-left:  auto;
    margin-right: auto;
    margin-top:    16px;
    margin-bottom: 16px;
}