/* =========================================================
   File: css/components/button.css
   Title: Invent City Button System (Outline Variants)
   Version: 2025-11-21
   Author: Invent City

   PURPOSE
   • Canonical outline buttons for Invent City content.
   • One universal .btn-p-outline that auto-inverts by section:
       - .area-light: white bg, black text/border,
                      hover → black bg, white text/border.
       - .area-dark:  transparent bg, white text/border,
                      hover → white bg, black text/border.
   • Grid-safe, typographic, and currentColor-aware.
========================================================= */


/* ---------------------------------------------------------
   1) BUTTON — H2 INLINE OUTLINE (SMALL TAG)
--------------------------------------------------------- */
.btn-h2-outline {
  display: inline-block;
  padding: 0.2em 0.2em;
  border: 0 solid var(--color-grey);
  border-radius: 0.5rem;
  color: var(--color-grey);
  font-weight: 300;
  font-size: 0.9em;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
}

.btn-h2-outline:hover,
.btn-h2-outline:focus {
  background-color: #000;
  color: #fff;
  font-weight: 600;
}


/* ---------------------------------------------------------
   2) BUTTON — PARAGRAPH OUTLINE (BASE)
   ---------------------------------------------------------
   BASE:
   • Neutral baseline that is then refined by .area-light
     and .area-dark context rules.
--------------------------------------------------------- */
.btn-p-outline {
  display: inline-block;
  padding: 0.1em 0.25em;
  margin: 0 0.25rem 0.75rem 0;

  background-color: #fff;
  color: #000;
  font: inherit;
  border: 1px solid currentColor;
  border-radius: 0;
  text-decoration: none;
  cursor: pointer;

  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease;
}


/* ---------------------------------------------------------
   3) CONTEXT LOGIC — AREA-LIGHT vs AREA-DARK
--------------------------------------------------------- */

/* ---------- LIGHT SECTIONS ---------- */
.area-light .btn-p-outline {
  background-color: #ffffff;
  color: #000000;
  border-color: #000000;
}

.area-light .btn-p-outline:hover,
.area-light .btn-p-outline:focus,
.area-light .btn-p-outline:active {
  background-color: #000000;
  color: #ffffff;
  border-color: #ffffff;
}

/* ---------- DARK SECTIONS ---------- */
.area-dark .btn-p-outline {
  background-color: transparent;
  color: #ffffff;
  border-color: #ffffff;
}

.area-dark .btn-p-outline:hover,
.area-dark .btn-p-outline:focus,
.area-dark .btn-p-outline:active {
  background-color: #ffffff;
  color: #000000;
  border-color: #000000;
}


/* ---------------------------------------------------------
   4) CARD TITLE VARIANT
--------------------------------------------------------- */
.btn-p-outline.card-title {
  display: inline-block !important;
  width: auto !important;
}


/* ---------------------------------------------------------
   5) CENTERING UTILITY
--------------------------------------------------------- */
.center-btn {
  display: flex;
  justify-content: center;
}


/* ---------------------------------------------------------
   6) UNIVERSAL CLOSE BUTTON (CIRCULAR)
--------------------------------------------------------- */
.close-circle {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.close-circle:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.6);
}

.close-circle:active {
  background: rgba(255, 255, 255, 0.5);
}


/* =========================================================
   END OF FILE — css/components/button.css
========================================================= */