/* ==========================================================
   callouts.css
   Box-01 Callout + Modal Component System
   ----------------------------------------------------------
   Purpose:
   Reusable callout containers and small explanation modal boxes
   for selected webpages.

   Important:
   - This file intentionally avoids global selectors.
   - No bare element selectors such as body, a, h1, p, etc.
   - Link styling is scoped only inside Box-01 components.
   - Default font behavior inherits from the parent container.

   Primary callout alignment classes:
   - .box-01-callout-left
   - .box-01-callout-right
   - .box-01-callout-center

   Modal classes:
   - .box-01-modal-trigger
   - .box-01-modal-overlay
   - .box-01-modal-box
   - .box-01-modal-close
   - .box-01-modal-content

   Typical callout usage:
   <div class="box-01-callout-right box-01-blue">
     <span class="box-01-callout-title">Related note</span>
     <a class="box-01-callout-link" href="/example.shtml">View page</a>
   </div>

   Typical modal trigger usage:
   <a href="#hotel-stephenson-note"
      class="box-01-modal-trigger box-01-callout-link"
      data-box01-modal-target="hotel-stephenson-note">
      Why two Hotel Stephensons?
   </a>
   ========================================================== */


/* ==========================================================
   1. SHARED BASE CALLOUT RULES
   ========================================================== */

.box-01-callout-left,
.box-01-callout-right,
.box-01-callout-center {
  /* ------------------------------
     Core size and color variables
     ------------------------------ */
  --box01-width: min(420px, 92%);
  --box01-fill: #f2f2f2;
  --box01-text: inherit;

  /* ------------------------------
     Font variables
     Default is inherited from parent
     ------------------------------ */
  --box01-font-family: inherit;
  --box01-font-size: inherit;
  --box01-line-height: 1.45;
  --box01-font-style: normal;
  --box01-font-weight: normal;

  /* ------------------------------
     Left accent bar
     ------------------------------ */
  --box01-accent-color: #777777;
  --box01-accent-width: 6px;

  /* ------------------------------
     Standard border
     ------------------------------ */
  --box01-border-color: #d0d0d0;
  --box01-border-width: 1px;
  --box01-border-style: solid;

  /* ------------------------------
     Shape, spacing, and effects
     ------------------------------ */
  --box01-radius: 10px;
  --box01-padding: 14px 16px;
  --box01-margin-top: 1rem;
  --box01-margin-bottom: 1rem;
  --box01-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

  width: var(--box01-width);
  background: var(--box01-fill);
  color: var(--box01-text);

  font-family: var(--box01-font-family);
  font-size: var(--box01-font-size);
  line-height: var(--box01-line-height);
  font-style: var(--box01-font-style);
  font-weight: var(--box01-font-weight);

  border-top: var(--box01-border-width) var(--box01-border-style) var(--box01-border-color);
  border-right: var(--box01-border-width) var(--box01-border-style) var(--box01-border-color);
  border-bottom: var(--box01-border-width) var(--box01-border-style) var(--box01-border-color);
  border-left: var(--box01-accent-width) solid var(--box01-accent-color);

  border-radius: var(--box01-radius);
  padding: var(--box01-padding);
  box-shadow: var(--box01-shadow);
  box-sizing: border-box;

  margin-top: var(--box01-margin-top);
  margin-bottom: var(--box01-margin-bottom);
}


/* ==========================================================
   2. CALLOUT ALIGNMENT CLASSES
   ========================================================== */

.box-01-callout-left {
  margin-left: 0;
  margin-right: auto;
}

.box-01-callout-right {
  margin-left: auto;
  margin-right: 0;
}

.box-01-callout-center {
  margin-left: auto;
  margin-right: auto;
}


/* ==========================================================
   3. SCOPED LINK STYLING
   ----------------------------------------------------------
   These rules intentionally do NOT style all <a> elements.
   They only affect links inside Box-01 callout containers
   or links explicitly given the .box-01-callout-link class.

   Use class="box-01-callout-link" on links that should receive
   the dotted underline callout style.
   ========================================================== */

/* Reset common global site link decorations only inside callouts */
.box-01-callout-left a,
.box-01-callout-right a,
.box-01-callout-center a {
  color: inherit;
  text-decoration: none;
  border-bottom: none;
}

/* Preferred styled callout link, scoped to callout containers */
.box-01-callout-left a.box-01-callout-link,
.box-01-callout-right a.box-01-callout-link,
.box-01-callout-center a.box-01-callout-link {
  font-weight: bold;
  border-bottom: 1px dotted currentColor;
}

/* Preferred styled callout link, usable outside callouts */
.box-01-callout-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}

/* Hover state */
.box-01-callout-left a.box-01-callout-link:hover,
.box-01-callout-right a.box-01-callout-link:hover,
.box-01-callout-center a.box-01-callout-link:hover,
.box-01-callout-link:hover {
  border-bottom-style: solid;
}

/* Keyboard focus state for accessibility */
.box-01-callout-left a.box-01-callout-link:focus-visible,
.box-01-callout-right a.box-01-callout-link:focus-visible,
.box-01-callout-center a.box-01-callout-link:focus-visible,
.box-01-callout-link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-bottom-style: solid;
}


/* ==========================================================
   4. TEXT EMPHASIS UTILITY CLASSES
   ========================================================== */

.box-01-bold {
  --box01-font-weight: bold;
}

.box-01-italic {
  --box01-font-style: italic;
}

.box-01-normal-weight {
  --box01-font-weight: normal;
}

.box-01-normal-style {
  --box01-font-style: normal;
}


/* ==========================================================
   5. WIDTH UTILITY CLASSES
   ========================================================== */

.box-01-narrow {
  --box01-width: min(300px, 90%);
}

.box-01-standard {
  --box01-width: min(420px, 92%);
}

.box-01-wide {
  --box01-width: min(680px, 96%);
}

.box-01-full-soft {
  --box01-width: min(100%, 100%);
}


/* ==========================================================
   6. PRE-CANNED COLOR THEMES
   ========================================================== */

.box-01-soft {
  --box01-fill: #f8f8f8;
  --box01-accent-color: #aaaaaa;
  --box01-border-color: #dddddd;
}

.box-01-grey {
  --box01-fill: #f2f2f2;
  --box01-accent-color: #777777;
  --box01-border-color: #d0d0d0;
}

.box-01-blue {
  --box01-fill: #eef5fb;
  --box01-accent-color: #3578a8;
  --box01-border-color: #c8ddec;
}

.box-01-green {
  --box01-fill: #eef8f0;
  --box01-accent-color: #4b8b5a;
  --box01-border-color: #c8dfce;
}

.box-01-gold {
  --box01-fill: #fff7df;
  --box01-accent-color: #c99a24;
  --box01-border-color: #ead28e;
}

.box-01-red {
  --box01-fill: #fff0f0;
  --box01-accent-color: #a83d3d;
  --box01-border-color: #e3b9b9;
}

.box-01-purple {
  --box01-fill: #f4effa;
  --box01-accent-color: #7055a3;
  --box01-border-color: #d6c8e8;
}


/* ==========================================================
   7. PRE-CANNED PURPOSE CLASSES
   ========================================================== */

.box-01-note {
  --box01-fill: #f5f5f5;
  --box01-accent-color: #666666;
}

.box-01-related-link {
  --box01-fill: #eef5fb;
  --box01-accent-color: #3578a8;
  --box01-font-weight: normal;
}

.box-01-tip {
  --box01-fill: #eef8f0;
  --box01-accent-color: #4b8b5a;
}

.box-01-caution {
  --box01-fill: #fff7df;
  --box01-accent-color: #c99a24;
}

.box-01-important {
  --box01-fill: #fff0f0;
  --box01-accent-color: #a83d3d;
  --box01-font-weight: bold;
}


/* ==========================================================
   8. BORDER / SHADOW / SHAPE UTILITY CLASSES
   ========================================================== */

.box-01-no-shadow {
  --box01-shadow: none;
}

.box-01-soft-shadow {
  --box01-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.box-01-strong-shadow {
  --box01-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
}

.box-01-no-border {
  --box01-border-width: 0;
}

.box-01-thin-border {
  --box01-border-width: 1px;
}

.box-01-thick-border {
  --box01-border-width: 2px;
}

.box-01-dashed-border {
  --box01-border-style: dashed;
}

.box-01-dotted-border {
  --box01-border-style: dotted;
}

.box-01-square {
  --box01-radius: 0;
}

.box-01-rounded {
  --box01-radius: 10px;
}

.box-01-extra-rounded {
  --box01-radius: 18px;
}


/* ==========================================================
   9. ACCENT BAR UTILITY CLASSES
   ========================================================== */

.box-01-no-accent {
  --box01-accent-width: 0;
}

.box-01-thin-accent {
  --box01-accent-width: 3px;
}

.box-01-standard-accent {
  --box01-accent-width: 6px;
}

.box-01-heavy-accent {
  --box01-accent-width: 10px;
}


/* ==========================================================
   10. SPACING UTILITY CLASSES
   ========================================================== */

.box-01-tight {
  --box01-padding: 9px 12px;
}

.box-01-roomy {
  --box01-padding: 18px 22px;
}

.box-01-extra-roomy {
  --box01-padding: 24px 28px;
}

.box-01-no-top-margin {
  --box01-margin-top: 0;
}

.box-01-no-bottom-margin {
  --box01-margin-bottom: 0;
}


/* ==========================================================
   11. OPTIONAL INTERNAL CALLOUT ELEMENT CLASSES
   ========================================================== */

.box-01-callout-title {
  display: block;
  font-weight: bold;
  margin: 0 0 0.35em 0;
}

.box-01-callout-small {
  display: block;
  font-size: 0.9em;
  opacity: 0.88;
}

.box-01-callout-footer {
  display: block;
  font-size: 0.85em;
  opacity: 0.75;
  margin-top: 0.6em;
}


/* ==========================================================
   12. BOX-01 MODAL SYSTEM
   ----------------------------------------------------------
   Lightweight explanation overlay/popup boxes.

   Design:
   - Plain white modal box
   - Narrow black border
   - X close button
   - Optional muted overlay behind box

   This system also avoids globals.
   ========================================================== */

.box-01-modal-overlay {
  --box01-modal-overlay-fill: rgba(0, 0, 0, 0.38);
  --box01-modal-width: min(520px, 92vw);
  --box01-modal-fill: #ffffff;
  --box01-modal-text: inherit;
  --box01-modal-border: 1px solid #000000;
  --box01-modal-radius: 0;
  --box01-modal-padding: 22px;
  --box01-modal-shadow: 0 8px 30px rgba(0, 0, 0, 0.22);
  --box01-modal-z-index: 9999;
  --box01-modal-line-height: 1.5;
  --box01-modal-font-family: inherit;
  --box01-modal-font-size: inherit;

  display: none;
  position: fixed;
  inset: 0;
  z-index: var(--box01-modal-z-index);
  background: var(--box01-modal-overlay-fill);
  align-items: center;
  justify-content: center;
  padding: 18px;
  box-sizing: border-box;
}

/* JS-opened modal state */
.box-01-modal-overlay.box-01-modal-is-active {
  display: flex;
}

/* CSS-only fallback using :target */
.box-01-modal-overlay:target {
  display: flex;
}

.box-01-modal-box {
  width: var(--box01-modal-width);
  max-height: min(80vh, 720px);
  overflow: auto;
  position: relative;
  background: var(--box01-modal-fill);
  color: var(--box01-modal-text);
  border: var(--box01-modal-border);
  border-radius: var(--box01-modal-radius);
  padding: var(--box01-modal-padding);
  box-shadow: var(--box01-modal-shadow);
  box-sizing: border-box;
  font-family: var(--box01-modal-font-family);
  font-size: var(--box01-modal-font-size);
  line-height: var(--box01-modal-line-height);
}

/* Close button as a button */
.box-01-modal-close {
  position: absolute;
  top: 6px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75em;
  height: 1.75em;
  padding: 0;
  margin: 0;
  background: #ffffff;
  color: #000000;
  border: 1px solid #000000;
  border-radius: 0;
  font: inherit;
  font-weight: bold;
  line-height: 1;
  cursor: pointer;
}

/* Close button as a link for CSS-only fallback */
.box-01-modal-close-link {
  position: absolute;
  top: 6px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75em;
  height: 1.75em;
  padding: 0;
  margin: 0;
  background: #ffffff;
  color: #000000;
  border: 1px solid #000000;
  border-radius: 0;
  text-decoration: none;
  font: inherit;
  font-weight: bold;
  line-height: 1;
  cursor: pointer;
}

.box-01-modal-close:hover,
.box-01-modal-close-link:hover {
  background: #eeeeee;
}

.box-01-modal-close:focus-visible,
.box-01-modal-close-link:focus-visible {
  outline: 2px solid #000000;
  outline-offset: 2px;
}

.box-01-modal-content {
  margin-top: 12px;
  padding-right: 1.65em;
}

.box-01-modal-title {
  display: block;
  margin: 0 0 0.6em 0;
  font-weight: bold;
  font-size: 1.08em;
}

.box-01-modal-small {
  display: block;
  font-size: 0.9em;
  opacity: 0.82;
  margin-top: 0.75em;
}

.box-01-modal-footer {
  display: block;
  border-top: 1px solid #dddddd;
  margin-top: 1em;
  padding-top: 0.75em;
  font-size: 0.9em;
  opacity: 0.82;
}

/* Modal size variants */
.box-01-modal-narrow {
  --box01-modal-width: min(380px, 92vw);
}

.box-01-modal-standard {
  --box01-modal-width: min(520px, 92vw);
}

.box-01-modal-wide {
  --box01-modal-width: min(760px, 94vw);
}

/* Modal style variants */
.box-01-modal-plain {
  --box01-modal-fill: #ffffff;
  --box01-modal-border: 1px solid #000000;
  --box01-modal-radius: 0;
}

.box-01-modal-soft {
  --box01-modal-fill: #ffffff;
  --box01-modal-border: 1px solid #999999;
  --box01-modal-radius: 8px;
}

.box-01-modal-no-overlay {
  --box01-modal-overlay-fill: rgba(255, 255, 255, 0.01);
}


/* ==========================================================
   13. RESPONSIVE BEHAVIOR
   ========================================================== */

@media (max-width: 650px) {
  .box-01-callout-left,
  .box-01-callout-right,
  .box-01-callout-center {
    width: 96%;
    margin-left: auto;
    margin-right: auto;
  }

  .box-01-modal-box {
    width: 94vw;
    max-height: 84vh;
  }
}