/* SchoolCMS – Buttons
   Placeholder styling driven by the brand tokens in tokens.css. Restyle
   per site from the Figma button component via /build – the template's
   Components section draws this grid (Colour × Style × State) twice, once
   on a light ground and once on a dark one.

   Two axes, one class per value, combined freely:

   Colour – the brand colour the button is drawn in
   .button          – black (the bare class)
   .button.orange   – orange
   .button.white    – white
   Style – solid (the bare class) or ghost
   .button.ghost    – transparent, a 1px rule and the label in the colour;
                      hover fills with that colour and the label takes the
                      ground's ink (Farringtons' pattern, 2026-09-25)

   WHICH GROUND A COLOUR SITS ON is the rule, and it is not a class: black
   – solid or ghost – goes on light grounds only (the page, cream, teal);
   white goes on dark grounds only (a black band, a scrimmed photo, the
   nav bar); orange goes on either. A black button on a black band, or a
   white one on the page, has no edge to read by.

   Hover: a solid button re-fills in the accent – black and white go
   orange, orange goes orange-dark (the hover tone tokens.css sets aside
   for it, so it still reads on both grounds) – and the label stays white;
   a ghost fills with its own colour. Every button carries the 1px rule,
   a solid one in its own fill, so solid and ghost share one box and
   nothing shifts when a class changes or a state does.

   .button-plus     – 52px circle, orange, thin +

   Deliberately FLAT (no native nesting): this file goes through
   add_editor_style(), whose .editor-styles-wrapper prefixing is what
   lets .button beat wp-admin's .wp-core-ui .button and the editor's
   content resets inside block previews – keep it transform-safe. */

.button, a.button, button.button {
    display:          inline-block;
    background:       var(--color-black);
    color:            var(--color-white);
    padding:          9px 23px;
    font:             var(--text-16or-button);
    border:           1px solid var(--color-black);
    border-radius:    var(--border-radius-md);
    text-decoration:  none;
    cursor:           pointer;
    transition:       background var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}

.button:hover, a.button:hover, button.button:hover,
.button:focus-visible, a.button:focus-visible, button.button:focus-visible {
    background:      var(--color-orange);
    border-color:    var(--color-orange);
    color:           var(--color-white);
    text-decoration: none;
}

/* Colour=Orange – light or dark grounds. The hover steps down to the
   darker orange rather than across to black, which would vanish on a
   black band. */
.button.orange, a.button.orange, button.button.orange {
    background:   var(--color-orange);
    border-color: var(--color-orange);
    color:        var(--color-white);
}

.button.orange:hover, a.button.orange:hover, button.button.orange:hover,
.button.orange:focus-visible, a.button.orange:focus-visible, button.button.orange:focus-visible {
    background:   var(--color-orange-dark);
    border-color: var(--color-orange-dark);
    color:        var(--color-white);
}

/* Colour=White – dark grounds only. */
.button.white, a.button.white, button.button.white {
    background:   var(--color-white);
    border-color: var(--color-white);
    color:        var(--color-black);
}

.button.white:hover, a.button.white:hover, button.button.white:hover,
.button.white:focus-visible, a.button.white:focus-visible, button.button.white:focus-visible {
    background:   var(--color-orange);
    border-color: var(--color-orange);
    color:        var(--color-white);
}

/* Style=Ghost – the rule and the label in the colour, nothing behind
   them; the hover fills with that colour. These come after the colour
   rules on purpose: at equal specificity the later rule wins, so a ghost
   button's resting state overrides its solid colour's hover, and its own
   hover, one class more specific, then overrides both. */
.button.ghost, a.button.ghost, button.button.ghost {
    background: transparent;
    color:      var(--color-black);
}

.button.ghost:hover, a.button.ghost:hover, button.button.ghost:hover,
.button.ghost:focus-visible, a.button.ghost:focus-visible, button.button.ghost:focus-visible {
    background:   var(--color-black);
    border-color: var(--color-black);
    color:        var(--color-white);
}

.button.ghost.orange, a.button.ghost.orange, button.button.ghost.orange {
    background:   transparent;
    border-color: var(--color-orange);
    color:        var(--color-orange);
}

.button.ghost.orange:hover, a.button.ghost.orange:hover, button.button.ghost.orange:hover,
.button.ghost.orange:focus-visible, a.button.ghost.orange:focus-visible, button.button.ghost.orange:focus-visible {
    background:   var(--color-orange);
    border-color: var(--color-orange);
    color:        var(--color-white);
}

/* The white ghost is the nav bar's CTA (template-parts/nav/) – a white
   rule on the dark chrome, filling white with black ink on hover. */
.button.ghost.white, a.button.ghost.white, button.button.ghost.white {
    background:   transparent;
    border-color: var(--color-white);
    color:        var(--color-white);
}

.button.ghost.white:hover, a.button.ghost.white:hover, button.button.ghost.white:hover,
.button.ghost.white:focus-visible, a.button.ghost.white:focus-visible, button.button.ghost.white:focus-visible {
    background:   var(--color-white);
    border-color: var(--color-white);
    color:        var(--color-black);
}

/* Circular plus control – the markup carries a literal "+" for accessibility
   and copy-paste, but the drawn glyph is the two pseudo-element bars below:
   a font glyph rides its line box's baseline, which left the plus optically
   off the disc's centre and made every rotation sweep around it. The bars
   are geometrically centred, so all states and animations share one axis. */
.button-plus, a.button-plus, button.button-plus {
    position:         relative;
    display:          inline-flex;
    width:            52px;
    height:           52px;
    /* keep the circle circular inside flex parents */
    flex-shrink:      0;
    background:       var(--color-orange);
    color:            var(--color-white);
    /* the text node is screen-reader/clipboard content only */
    font-size:        0;
    border:           none;
    border-radius:    50%;
    text-decoration:  none;
    cursor:           pointer;
    transition:       background var(--transition-base), transform var(--transition-base);
}

.button-plus::before, a.button-plus::before, button.button-plus::before,
.button-plus::after, a.button-plus::after, button.button-plus::after {
    content:       '';
    position:      absolute;
    top:           50%;
    left:          50%;
    /* the drawn cross: strokes at ~40% of the disc */
    width:         40%;
    height:        3px;
    background:    currentColor;
    transform:     translate(-50%, -50%);
}

.button-plus::after, a.button-plus::after, button.button-plus::after {
    transform: translate(-50%, -50%) rotate(90deg);
}