/* fuji-components.css — Back-to-top, footer, utility classes, button system, form system */
/* STYLES FOR TOP BUTTON    ------------------------------------------------------------------- */
.back-to-top {
	display: none;
	position: fixed;
	bottom: 2rem;
	right: 1.5rem;
	z-index: 100;
	cursor: pointer;
	padding: 6px 10px;
	border-radius: var(--radius-md);
	color: var(--color-gray-300);
	font-size: var(--text-sm);
	letter-spacing: var(--tracking-wide);
}


/* STYLES FOR FOOTER     ---------------------------------------------------------------------- */
#footer {
	max-width: none;
	color: var(--color-footer-text);
}

#footer-menu li {
	display: inline-block;
	margin-right: var(--space-10);
}

#footer-menu li a:hover {
	color: var(--color-footer-text-hover);
}


/* =============================================================================
   Extracted from inline styles — PR 2.1
   ============================================================================= */

/* Captcha display — replaces inline style on .captcha-display divs */
.captcha-display {
    font-family: monospace;
    font-size: 1.4em;
    letter-spacing: 0.3em;
    background: var(--color-gray-200);
    display: inline-block;
    border: 1px solid var(--color-bg-header);
}

/* Modal UI */
.modal-shadow { box-shadow: var(--shadow-lg); }
.modal-header-primary {
    background: var(--color-primary);
    color: white;
}
.modal-header-success { background: var(--color-success); color: white; }
.modal-header-error   { background: var(--color-error);   color: white; }
.modal-header-mid     { background: var(--color-primary-mid); color: white; }
.modal-header-confirm { background: var(--color-primary-mid); color: white; border-radius: 0 0 var(--radius-xl) var(--radius-xl); }
.modal-content-padded { padding-bottom: 1em; border-bottom: 1px solid var(--color-gray-400); }
.modal-course-bg      { background: var(--color-gray-300); }
.modal-course-name    { color: var(--color-primary-mid); margin: 1em 0; }
/* Button variants defined in Button System section below */

/* Text / colour utilities */
.text-float-error   { color: var(--color-error); float: right; padding: 1em; }
.text-link-blue     { color: var(--color-primary); }
.text-login-link    { color: #006911; }
.text-required-hint { color: var(--color-gray-500); }
.support-contact    { color: var(--color-primary); font-weight: bold; }
.event-prompt       { color: var(--color-gray-900); margin: .5em 0; }

/* Word-export legacy (legal document pages) */
.font-symbol  { font-family: Symbol; }
.word-blue    { color: #2E74B5; }
.word-bold    { font-weight: bold; }
.word-heading-lg { font-size: 19px; line-height: 107%; }
.word-heading-sm { font-size: 11px; line-height: 107%; }
.word-para    {
    margin: 0 0 8pt 0;
    line-height: 107%;
    font-size: 15px;
    font-family: var(--font-heading);
}

/* List styles */
.list-disc          { list-style-type: disc; }
.list-disc-indent   { list-style-type: disc; margin-left: 30px; margin-bottom: 8pt; }
.list-lower-latin   { list-style: lower-latin; margin-left: 20px; }
.list-item-spaced   { margin-bottom: 8px; }

/* Borders & structure */
.border-top-dark      { border-top: 1px solid black; }
.border-top-left-dark { border-top: 1px solid black; border-left: 1px solid black; }
.hr-medium {    background: var(--color-gray-500);}
.display-grid-row     { display: grid; border-top: 1px solid black; }
.supply-cell-top      { margin-top: 1.75em; }
.heading-no-bg        { background-image: none; margin-top: 0; }
.map-embed            { border: 0; }
.col-padding-none     { padding-left: 0; }

/* Visibility */
.visibility-hidden { visibility: hidden; }
.overlay-active    { opacity: 1; }

/* Word-export link colour variant */
.word-blue-link { color: #0070C0; }

/* Misc layout */
.scrollable-block { margin-bottom: 1em; overflow-y: auto; display: block; }
.spacer-150       { width: 150px; }
.table-70         { width: 70%; }
.col-109          { width: 109px; }
.img-max-146      { max-height: 146px; }
.min-w-150        { min-width: 150px; }

/* ==========================================================================
   BUTTON SYSTEM — overrides Bootstrap btn defaults with design tokens
   ========================================================================== */

/* Base overrides */
.btn {
    border-radius: var(--btn-radius);
    font-family: var(--font-body);
    font-size: var(--btn-font-size);
    font-weight: var(--btn-font-weight);
    letter-spacing: var(--btn-letter-spacing);
    transition: var(--btn-transition);
}

/* Prevent the global a:hover reset (specificity 0,1,1) from overriding
   button styles on <a class="btn"> elements. */
a.btn:hover,
a.btn:focus,
a.btn:visited,
a.btn:active {
    font-size: var(--btn-font-size);
    text-decoration: none;
}

/* The global `a, a:visited { color: inherit }` rule (specificity 0,1,1) beats
   Bootstrap's CSS-variable-based color on <a class="btn-primary">.
   Explicit color declarations at (0,2,1) restore the correct button text color. */
a.btn-primary,
a.btn-primary:hover,
a.btn-primary:focus,
a.btn-primary:visited,
a.btn-primary:active {
    color: #fff;
}

/* .sub-page-link uses font-size: 1em (16px in context) while --btn-font-size
   is 14px — override the a.btn:hover fix above so size stays stable. */
a.sub-page-link:hover,
a.sub-page-link:focus-visible {
    font-size: 1em;
}

.btn:focus-visible {
    outline: 3px solid var(--color-primary-light);
    outline-offset: 2px;
    box-shadow: none;
}

/* Primary — Fuji brand blue */
.btn-primary {
    --bs-btn-color:                 #fff;
    --bs-btn-bg:                    var(--color-primary);
    --bs-btn-border-color:          var(--color-primary);
    --bs-btn-hover-bg:              var(--color-primary-dark);
    --bs-btn-hover-border-color:    var(--color-primary-dark);
    --bs-btn-active-bg:             var(--color-primary-dark);
    --bs-btn-active-border-color:   var(--color-primary-dark);
    --bs-btn-disabled-bg:           var(--color-primary);
    --bs-btn-disabled-border-color: var(--color-primary);
    --bs-btn-focus-shadow-rgb:      0, 64, 152;
}

/* Secondary — neutral gray, for supporting/cancel actions */
.btn-secondary {
    --bs-btn-color:                 var(--color-gray-700);
    --bs-btn-bg:                    var(--color-gray-200);
    --bs-btn-border-color:          var(--color-gray-300);
    --bs-btn-hover-color:           var(--color-gray-900);
    --bs-btn-hover-bg:              var(--color-gray-300);
    --bs-btn-hover-border-color:    var(--color-gray-500);
    --bs-btn-active-color:          var(--color-gray-900);
    --bs-btn-active-bg:             var(--color-gray-300);
    --bs-btn-disabled-color:        var(--color-gray-500);
    --bs-btn-disabled-bg:           var(--color-gray-200);
    --bs-btn-disabled-border-color: var(--color-gray-300);
}

/* Tertiary — ghost, for low-priority actions (e.g. modal close/ok) */
.btn-tertiary {
    --bs-btn-color:                 var(--color-gray-700);
    --bs-btn-bg:                    transparent;
    --bs-btn-border-color:          var(--color-gray-300);
    --bs-btn-hover-color:           var(--color-gray-900);
    --bs-btn-hover-bg:              var(--color-gray-100);
    --bs-btn-hover-border-color:    var(--color-gray-500);
    --bs-btn-active-color:          var(--color-gray-900);
    --bs-btn-active-bg:             var(--color-gray-200);
    --bs-btn-disabled-color:        var(--color-gray-500);
    --bs-btn-disabled-bg:           transparent;
    --bs-btn-disabled-border-color: var(--color-gray-300);
}

/* Error — destructive confirm only */
.btn-error {
    --bs-btn-color:                 #fff;
    --bs-btn-bg:                    var(--color-error);
    --bs-btn-border-color:          var(--color-error);
    --bs-btn-hover-color:           #fff;
    --bs-btn-hover-bg:              var(--color-error-hover);
    --bs-btn-hover-border-color:    var(--color-error-hover);
    --bs-btn-disabled-bg:           var(--color-error);
    --bs-btn-disabled-border-color: var(--color-error);
}

/* ==========================================================================
   FORM SYSTEM — overrides Bootstrap form defaults with design tokens
   ========================================================================== */

/* Labels */
label,
.form-label {
    font-size: var(--label-font-size);
    font-weight: var(--label-font-weight);
    color: var(--label-color);
    margin-bottom: var(--label-gap);
}

/* Fieldset legend for radio/checkbox groups — resets Bootstrap 5 reboot defaults
   (float: left, oversized font) so it visually matches a form-label */
.form-legend {
    float: none;
    width: auto;
    font-size: var(--text-base);
    font-weight: normal;
    color: var(--label-color);
    padding: 0;
    margin-bottom: var(--space-2);
}

/* Input and select base */
.form-control,
.form-select {
    font-family: var(--font-body);
    font-size: var(--input-font-size);
    color: var(--input-color);
    border-radius: var(--input-radius);
    border: var(--input-border);
    background-color: var(--input-bg);
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

/* Focus ring — replaces Bootstrap's default blue glow.
   outline is transparent (invisible normally) but shows in Windows High Contrast Mode
   where box-shadow is suppressed. */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--input-focus-border);
    box-shadow: var(--input-focus-shadow);
    outline: 2px solid transparent;
    outline-offset: 2px;
}

/* Disabled state */
.form-control:disabled,
.form-select:disabled {
    background-color: var(--input-bg-disabled);
    cursor: not-allowed;
}