/* Style Sheet Tweaks
------------------------------------------------------------------------------
   Legacy IE 8/9 fixes (harmless on modern browsers) + FI-SubIce opt-in
   utility classes for classic 3D bevel / inset / soft shadow.

   Apply these classes in templates (e.g. forum cards) — they do not alter
   vespera.css defaults until you add the class to an element.
------------------------------------------------------------------------------*/

/* IE 8 Tweaks (value)\9 equates to  IE <= 8
------------------------------------------------------------------------------*/

/* Clear float fix */
.inner, ul.linklist { zoom: 1\9; }

/* Align checkboxes/radio buttons nicely */
dd label input { vertical-align: text-bottom\9; }

/* Fixes header-avatar aspect-ratio */
.header-avatar img { height: 20px\9; }

/* IE8 often can't handle max-width in %, so we use px instead */
.postprofile .avatar img { max-width: 150px\9; }


/* IE 9 Tweaks
------------------------------------------------------------------------------*/

/* Border-radius bleed fix in IE9 */
.search-header, .search-header .inputbox, .search-header a.button {
	border-radius: 0;
}

.tabs .tab > a {
	border-radius: 0;
}


/* ==========================================================================
   FI-SubIce — classic 3D utility classes (opt-in)

   Tokens (FI palette):
     --fi-border       #98aab1  soft edge
     --fi-border-deep  #486386  stronger frame
     --fi-navy         #1C5280  primary
     --fi-orange       #FFA34F  accent (hover/unread helpers)

   Usage examples (forum cards):
     <li class="row vs-forum-card fi-bevel">
     <li class="row vs-forum-card fi-shadow fi-inset">
     <div class="forabg fi-bevel-strong">
   ========================================================================== */

:root {
	--fi-border: #98aab1;
	--fi-border-deep: #486386;
	--fi-navy: #1C5280;
	--fi-orange: #FFA34F;
	--fi-shadow: rgba(40, 55, 72, 0.22);
	--fi-shadow-soft: rgba(28, 82, 128, 0.14);
	--fi-inset-hi: rgba(255, 255, 255, 0.55);
	--fi-inset-lo: rgba(72, 99, 134, 0.12);
}

/* ---- Soft outer drop (Warez / FI panel lift) ---- */
.fi-shadow {
	box-shadow: 0 2px 8px var(--fi-shadow-soft);
}

.fi-shadow-md {
	box-shadow: 0 3px 10px var(--fi-shadow);
}

.fi-shadow-lg {
	box-shadow: 0 4px 14px rgba(40, 55, 72, 0.28);
}

/* ---- Inset lip only (top highlight + bottom recess) ---- */
.fi-inset {
	box-shadow:
		inset 0 1px 0 var(--fi-inset-hi),
		inset 0 -1px 0 var(--fi-inset-lo);
}

.fi-inset-strong {
	box-shadow:
		inset 0 2px 0 rgba(255, 255, 255, 0.72),
		inset 0 1px 0 rgba(255, 255, 255, 0.35),
		inset 0 -1px 0 var(--fi-inset-lo);
}

/* ---- Classic bevel: border + inset highlight + outer shadow ---- */
.fi-bevel {
	border: 1px solid var(--fi-border);
	border-radius: 0;
	box-shadow:
		inset 0 1px 0 var(--fi-inset-hi),
		inset 0 -1px 0 var(--fi-inset-lo),
		0 3px 10px var(--fi-shadow);
}

.fi-bevel-strong {
	border: 1px solid var(--fi-border-deep);
	border-radius: 0;
	box-shadow:
		inset 0 2px 0 rgba(255, 255, 255, 0.72),
		inset 0 1px 0 rgba(255, 255, 255, 0.35),
		0 4px 14px rgba(40, 55, 72, 0.28);
}

/* Pressed / recessed panel */
.fi-bevel-pressed {
	border: 1px solid var(--fi-border);
	border-radius: 0;
	box-shadow:
		inset 0 2px 4px rgba(40, 55, 72, 0.18),
		inset 0 1px 0 rgba(72, 99, 134, 0.16),
		0 1px 0 rgba(255, 255, 255, 0.35);
}

/* ---- Compose helpers for forum cards (no layout change) ---- */
.fi-card {
	border: 1px solid var(--fi-border);
	border-radius: 0;
	box-shadow:
		inset 0 1px 0 var(--fi-inset-hi),
		inset 0 -1px 0 var(--fi-inset-lo),
		0 2px 8px var(--fi-shadow-soft);
}

.fi-card:hover,
.fi-card.is-hover {
	border-color: var(--fi-border-deep);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.65),
		inset 0 -1px 0 var(--fi-inset-lo),
		0 4px 14px rgba(40, 55, 72, 0.22);
}

/* Unread accent: FI orange left lip (keeps bevel shadow) */
.fi-card-unread,
.fi-bevel.is-unread,
.vs-forum-card.fi-bevel.is-unread,
.vs-forum-card.fi-card.is-unread {
	box-shadow:
		inset 3px 0 0 var(--fi-orange),
		inset 0 1px 0 var(--fi-inset-hi),
		inset 0 -1px 0 var(--fi-inset-lo),
		0 3px 10px var(--fi-shadow);
}

/* Stackable pieces when you need shadow + inset without forcing border */
.fi-shadow.fi-inset {
	box-shadow:
		inset 0 1px 0 var(--fi-inset-hi),
		inset 0 -1px 0 var(--fi-inset-lo),
		0 2px 8px var(--fi-shadow-soft);
}

.fi-shadow-md.fi-inset {
	box-shadow:
		inset 0 1px 0 var(--fi-inset-hi),
		inset 0 -1px 0 var(--fi-inset-lo),
		0 3px 10px var(--fi-shadow);
}

.fi-shadow-lg.fi-inset-strong {
	box-shadow:
		inset 0 2px 0 rgba(255, 255, 255, 0.72),
		inset 0 1px 0 rgba(255, 255, 255, 0.35),
		0 4px 14px rgba(40, 55, 72, 0.28);
}

/* --------------------------------------------------------------------------
   Motion reinforce (loads after vespera) — lift + shadow on interactives
   -------------------------------------------------------------------------- */
a,
button,
.button,
input.button1,
input.button2,
input.button3,
li.row,
.vs-forum-card {
	transition: all 0.3s ease !important;
}

li.row:hover,
.vs-forum-card:hover,
.vs-category li.row.vs-forum-card:hover {
	transform: translateY(-2px) !important;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.36) !important;
}

.button:hover,
.button:focus,
a.button:hover,
input.button1:hover,
input.button2:hover,
input.button3:hover {
	transform: translateY(-2px) !important;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.34) !important;
}