/*************************
**  Our Tasmania Website
**  Buttons styles sheet
**  Build V. 0.2
**  Build Notes: Rebuild to dark page style from light slightly more modernised design and layout
**
**********************/
.btn-emerald {
    display: inline-flex; align-items: center; gap: .5rem;
    /* White on plain --emerald is 3.29:1; this mix gives 4.88 and still stands
       off the page (3.91) and cards (3.42). Light theme sets its own below. */
    background: color-mix(in srgb, var(--emerald) 55%, var(--emerald-drk)); color: #ffffff;
    font-family: var(--font-mono); font-size: .78rem;
    font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
    padding: .72rem 1.5rem .68rem; border-radius: var(--radius);
    text-decoration: none; border: none;
    transition: background .2s, transform .2s, box-shadow .2s;
}
.btn-emerald:hover {
    /* Darker on hover, not lighter: a paler green loses the white label. */
    background: color-mix(in srgb, var(--emerald) 45%, var(--emerald-drk)); color: #ffffff;
    transform: translateY(-1px); box-shadow: 0 8px 20px rgba(90,158,58,.28);
}
.btn-ghost {
    display: inline-flex; align-items: center; gap: .5rem;
    background: var(--parchment-dim); color: var(--ink-2);
    font-family: var(--font-mono); font-size: .78rem;
    letter-spacing: .06em; text-transform: uppercase;
    padding: .72rem 1.5rem .68rem; border-radius: var(--radius);
    text-decoration: none;
    transition: color .2s, background .2s;
}
.btn-ghost:hover {
    color: var(--emerald); background: var(--emerald-dim);
}

.btn-warn {
    display: inline-flex; align-items: center; gap: .5rem;
    background: rgb(251 63 63 / 23%); color: var(--ink-2);
    font-family: var(--font-mono); font-size: .78rem;
    letter-spacing: .06em; text-transform: uppercase;
    padding: .72rem 1.5rem .68rem; border-radius: var(--radius);
    text-decoration: none;
    transition: color .2s, background .2s;
}
.btn-warn:hover {
    color: var(--emerald); background: var(--emerald-dim);
}
html[data-theme="light"] .btn-emerald {
    background: var(--emerald);
    color: var(--white);
}
html[data-theme="light"] .btn-emerald:hover {
    background: var(--emerald-drk);
    color: var(--white);
    box-shadow: 0 8px 20px rgba(77,132,47,.24);
}
html[data-theme="light"] .btn-ghost {
    border-color: var(--parchment-rule);
    color: var(--ink-2);
}
html[data-theme="light"] .btn-ghost:hover {
    border-color: var(--emerald-rule);
    background: var(--emerald-dim);
    color: var(--emerald-drk);
}
/* These sit 70-90% down the hero, which in light theme is inside the parchment
   ::after feather, not over the photograph — the feather reaches opaque
   var(--bg) at the base. Ivory text measured 1.4-2.5:1 there. Dark ink instead,
   matching the .hero-scroll cue in styles-base.css, which sits in the same band
   and was corrected the same way. */
html[data-theme="light"] .ot-hero .btn-ghost {
    border-color: rgba(36,39,31,.65);
    color: #24271f;
}
html[data-theme="light"] .ot-hero .btn-ghost:hover {
    background: rgba(36,39,31,.08);
    border-color: #24271f;
    color: #24271f;
}
/* ═══════════════════════════════════════════════════════
    Show the love button
═══════════════════════════════════════════════════════ */
.btn-support {
    display: inline-flex; align-items: center; gap: .4rem;
    background: var(--emerald);
    color: var(--white) !important; font-family: var(--font-mono); font-size: .72rem;
    letter-spacing: .08em; padding: .5rem 1.2rem; border-radius: var(--radius);
    text-decoration: none; transition: all .2s; border: none;
}
/* White on --emerald was 3.3:1; the same deepened fills as .btn-emerald. */
.btn-support { background: color-mix(in srgb, var(--emerald) 55%, var(--emerald-drk)); }
.btn-support:hover { background: color-mix(in srgb, var(--emerald) 45%, var(--emerald-drk)); color: var(--white) !important; }
html[data-theme="light"] .btn-support {
    background: #31591e;
    color: #ffffff !important;
}
html[data-theme="light"] .btn-support:hover {
    background: #253e19;
    color: #ffffff !important;
}


/* ── Size modifiers ─────────────────────────────────────────────────────────
   The account pages were writing these out as style="" on every button —
   thirteen times on the club management page alone. Named with a double dash
   so nothing collides with Bootstrap's own .btn-sm. */
.btn--sm  { font-size: .8rem;  padding: .49rem 1rem .41rem; }
.btn--xs  { font-size: .8rem;  padding: .4rem .9rem; border:none; }
.btn--xxs { font-size: .75rem; padding: .85rem; }

/* Label-only tweaks, where the padding stays as it is. */
.btn--label    { font-size: .65rem; }
.btn--label-sm { font-size: .7rem; }

/* Destructive outline, on .btn-ghost. */
.btn--danger { border-color: var(--red-rule); color: var(--red); }
.btn--danger:hover { border-color: var(--red); color: var(--red); background: var(--red-dim); }

/* Share buttons — Facebook, X, Copy Link and similar.
   A fill, no edge: --teal-dim at rest, --emerald-dim on hover. Shared here so
   any page can use them; articles also carry these values in styles-x-news.css. */
.share-btns { display:flex; flex-direction:row; flex-wrap:wrap; gap:.5rem; }
.share-btn { display:flex; align-items:center; gap:.75rem; font-family:var(--font-mono); font-size:.65rem; letter-spacing:.1em; text-transform:uppercase; text-decoration:none; padding:.57rem .85rem .53rem; border-radius:var(--radius); border: none; color:var(--ink-2); background:var(--teal-dim); cursor:pointer; transition: color .2s, background .2s; }
.share-btn:hover { color:var(--emerald-lt); background:var(--emerald-dim); }
.share-btn:focus-visible { outline:2px solid var(--emerald-lt); outline-offset:2px; }
.share-btn i { width:16px; text-align:center; }
/* Light theme on the teal wash: --ink-2 labels measured 4.37:1, --emerald-drk hover 4.32. */
html[data-theme="light"] .share-btn { color:var(--ink); }
html[data-theme="light"] .share-btn:hover { color:var(--emerald-xdrk); }
html[data-theme="light"] .share-btn:focus-visible { outline-color:var(--emerald-drk); }