/* =========================================================
   Base
   ========================================================= */
* { text-align: left; }

/* =========================================================
   Custom bullet lists
   ========================================================= */
.listItem,
.listItemSecondLevel,
.listItemThirdLevel {
    position: relative;
    margin-bottom: 0.4em;
}

.listItem            { padding-left: 18px; }
.listItemSecondLevel { padding-left: 38px; }
.listItemThirdLevel  { padding-left: 58px; }

.listItem::before,
.listItemSecondLevel::before,
.listItemThirdLevel::before {
    position: absolute;
}

.listItem::before            { content: "•"; left: 2px; }
.listItemSecondLevel::before { content: "◦"; left: 22px; }
.listItemThirdLevel::before  { content: "▪"; left: 42px; }

/* =========================================================
   Inline icon prefixes
   ========================================================= */
.plainArrowBefore::before,
.plainRedArrowBefore::before,
.plainGreenArrowBefore::before,
.plainBlueArrowBefore::before,
.plainOrangeArrowBefore::before,
.greenArrowBefore::before,
.xBeforeText::before,
.cautionBefore::before,
.redCautionBefore::before,
.blueCautionBefore::before {
    margin-right: 6px;
}

.plainArrowBefore::before       { content: "✔"; }
.plainRedArrowBefore::before    { content: "✔"; color: red; }
.plainGreenArrowBefore::before  { content: "✔"; color: green; }
.plainBlueArrowBefore::before   { content: "✔"; color: blue; }
.plainOrangeArrowBefore::before { content: "✔"; color: orange; }
.greenArrowBefore::before       { content: "✅"; }
.xBeforeText::before            { content: "❌"; }

.cautionBefore::before,
.redCautionBefore::before,
.blueCautionBefore::before {
    content: "⚠";
    font-size: 1.4em;
}
.redCautionBefore::before  { color: red; }
.blueCautionBefore::before { color: blue; }

/* =========================================================
   Boxes: shared base
   ========================================================= */
.alertBox, .successBox, .warningBox, .infoBox, .errorBox,
.hintBox, .messageBox, .highlightBox,
.whiteBox, .redBox, .greenBox, .yellowBox, .blueBox,
.greyBox, .lightYellowBox, .tealBox, .purpleBox {
    --box-border: transparent;
    --box-bg: transparent;
    --box-fg: inherit;
    --box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.04);

    position: relative;
    box-sizing: border-box;
    margin: 1.25em 0 !important;
    padding: 0.9em 1.15em;
    border: 1px solid var(--box-border);
    border-left: 4px solid var(--box-fg);
    border-radius: 8px;
    background-color: var(--box-bg);
    color: var(--box-fg);
    box-shadow: var(--box-shadow);
    font-family: inherit;
    font-size: 1.1em;
    line-height: 1.55;
}

/* Remove stray paragraph/list margins inside boxes */
:is(.alertBox, .successBox, .warningBox, .infoBox, .errorBox,
    .hintBox, .messageBox, .highlightBox,
    .whiteBox, .redBox, .greenBox, .yellowBox, .blueBox,
    .greyBox, .lightYellowBox, .tealBox, .purpleBox) > :first-child { margin-top: 0; }
:is(.alertBox, .successBox, .warningBox, .infoBox, .errorBox,
    .hintBox, .messageBox, .highlightBox,
    .whiteBox, .redBox, .greenBox, .yellowBox, .blueBox,
    .greyBox, .lightYellowBox, .tealBox, .purpleBox) > :last-child { margin-bottom: 0; }

/* =========================================================
   Boxes with icons
   The icon uses the box's own font size and line height, so it
   always lines up with the first line of text. Its size is set
   with transform, which does not move it off that line.
   ========================================================= */
.alertBox, .successBox, .warningBox, .infoBox,
.errorBox, .hintBox, .messageBox, .highlightBox {
    padding-left: 2.9em !important;
}

.alertBox::before, .successBox::before, .warningBox::before, .infoBox::before,
.errorBox::before, .hintBox::before, .messageBox::before, .highlightBox::before {
    position: absolute;
    left: 0.85em;
    top: 0.9em;
    width: 1.3em;
    line-height: 1.55;
    text-align: center;
    color: var(--box-fg);
    transform: scale(var(--icon-scale, 1.15));
}

.alertBox     { --box-border: #f5c2c7; --box-bg: #f8d7da; --box-fg: #842029; }
.successBox   { --box-border: #badbcc; --box-bg: #d1e7dd; --box-fg: #0f5132; }
.warningBox   { --box-border: #ffecb5; --box-bg: #fff3cd; --box-fg: #664d03; --icon-scale: 1.35; }
.infoBox      { --box-border: #b6d4fe; --box-bg: #cfe2ff; --box-fg: #084298; }
.errorBox     { --box-border: #f5c2c7; --box-bg: #f8d7da; --box-fg: #842029; --icon-scale: 0.95; }
.hintBox      { --box-border: #cfe0fc; --box-bg: #e7f1ff; --box-fg: #0a3d62; }
.messageBox   { --box-border: #d1d5db; --box-bg: #f3f4f6; --box-fg: #1f2937; }
.highlightBox { --box-border: #ffe58f; --box-bg: #fff9db; --box-fg: #794c00; --icon-scale: 1; }

/* Slightly stronger shadow, as in the original */
.alertBox, .successBox, .warningBox, .infoBox, .errorBox, .highlightBox {
    --box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 6px 16px rgba(0, 0, 0, 0.06);
}

.alertBox::before     { content: "⚠"; }
.successBox::before   { content: "✔"; }
.warningBox::before   { content: "⚠"; }
.infoBox::before      { content: "ℹ"; }
.errorBox::before     { content: "❌"; }
.hintBox::before      { content: "💡"; }
.messageBox::before   { content: "✉"; }
.highlightBox::before { content: "⭐"; }

/* =========================================================
   Plain coloured boxes
   ========================================================= */
.whiteBox       { --box-border: #d1d5db; --box-bg: #ffffff; --box-fg: #1f2937; }
.redBox         { --box-border: #f5c2c7; --box-bg: #f8d7da; --box-fg: #842029; }
.greenBox       { --box-border: #badbcc; --box-bg: #d1e7dd; --box-fg: #0f5132; }
.yellowBox      { --box-border: #ffecb5; --box-bg: #fff3cd; --box-fg: #664d03; }
.blueBox        { --box-border: #b6d4fe; --box-bg: #cfe2ff; --box-fg: #084298; }
.greyBox        { --box-border: #d1d5db; --box-bg: #f3f4f6; --box-fg: #1f2937; }
.lightYellowBox { --box-border: #ffe58f; --box-bg: #fff9db; --box-fg: #794c00; }
.tealBox        { --box-border: #cfe0fc; --box-bg: #e7f1ff; --box-fg: #0a3d62; }
.purpleBox      { --box-border: #e0c3ff; --box-bg: #f3e8ff; --box-fg: #5b2c6f; }

/* =========================================================
   Text utilities
   !important so they win over element styles such as the
   article heading rules.
   ========================================================= */
.boldText        { font-weight: bold !important; }
.italicText      { font-style: italic !important; }
.smallerText     { font-size: 0.75em !important; }
.codeFont        { font-family: ui-monospace, 'Cascadia Code', Consolas, 'Courier New', Courier, monospace !important; }
.handWritingFont { font-family: 'Patrick Hand', 'Comic Sans MS', cursive !important; }

.blueText   { color: #006699 !important; }
.greenText  { color: green !important; }
.orangeText { color: orange !important; }
.redText    { color: red !important; }
.greyText   { color: #666 !important; }
.purpleText { color: purple !important; }

.authorAttribution {
    font-size: 0.8em;
    font-style: italic;
    color: #666;
    letter-spacing: 0.01em;
}

/* =========================================================
   Text alignment (the :has() rules are needed because of the * rule above)
   ========================================================= */
.leftAlignText     { text-align: left !important; }
.textCenterAligned { text-align: center !important; }
.rightAlignText    { text-align: right !important; }

div:has(> .leftAlignText)     { text-align: left !important; }
div:has(> .textCenterAligned) { text-align: center !important; }
div:has(> .rightAlignText)    { text-align: right !important; }

/* =========================================================
   Element alignment
   ========================================================= */
.elementCenterAligned { display: block; width: auto; margin: 0 auto; }
.leftAlignElement     { margin: 0 auto 0 0; }
.rightAlignElement    { margin: 0 0 0 auto; }

/* =========================================================
   Widths (max-width stops overflow on small screens)
   ========================================================= */
.width25, .width50, .width75, .width100,
.width100px, .width200px, .width300px, .width400px, .width500px {
    box-sizing: border-box;
    max-width: 100%;
}

.width25  { width: 25%;  min-width: 200px; }
.width50  { width: 50%;  min-width: 300px; }
.width75  { width: 75%;  min-width: 300px; }
.width100 { width: 100%; min-width: 400px; }

.width100px { width: 100px; }
.width200px { width: 200px; }
.width300px { width: 300px; }
.width400px { width: 400px; }
.width500px { width: 500px; }

/* =========================================================
   Borders and shadows
   ========================================================= */
.lightGreyBorder { border: 1px solid #ccc; }
.darkGreyBorder  { border: 1px solid #333; }
.whiteBorder     { border: 1px solid #333; }

.dropShadowLight { box-shadow: 0 1px 3px rgba(99, 99, 99, 0.12), 0 4px 12px rgba(99, 99, 99, 0.14); }
.dropShadowHeavy { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 8px 20px rgba(0, 0, 0, 0.18); }

/* =========================================================
   Page summary
   ========================================================= */
.pageSummary {
    display: block;
    width: 100%;
    max-width: 600px;
    margin: 0 auto 30px auto;
    font-size: 0.9em !important;
    line-height: 1.6;
    color: #666;
    text-align: center;
}