/* ================================
   IMPORT GOOGLE FONT: SORA
   ================================ */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700&display=swap');

/* ================================
   APPLY FONT GLOBALLY
   ================================ */
html, body,
button, input, textarea,
.column, .drawer, .status,
.compose-form__publish-button,
.column-header__title,
.status__display-name,
.navigation-panel,
.drawer__header,
.account__header,
.notification__message {
  font-family: "Sora", system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 14px;
}

/* Make sure toot content also uses Sora */
.status__content,
.status__content p,
.status__content span {
  font-family: "Sora", sans-serif !important;
}

/* ================================
   COLOR VARIABLES
   ================================ */
:root {
  --brand-red: #C8102E;
  --brand-blue: #00205B;
}

/* ================================
   LINKS
   ================================ */
a {
  color: var(--brand-blue) !important;
}
a:hover {
  color: var(--brand-red) !important;
}

/* ================================
   HEADERS & TITLES
   ================================ */
.column-header__title,
.drawer__header,
.status__display-name strong {
  color: var(--brand-blue) !important;
}

/* ================================
   BUTTONS
   ================================ */
.button,
.compose-form__publish-button {
  background: var(--brand-red) !important;
  color: #ffffff !important;
  border: none !important;
}

.button:hover,
.compose-form__publish-button:hover {
  background: #e01f3c !important; /* slightly brighter red */
}

/* Secondary buttons */
.button--secondary {
  background: var(--brand-blue) !important;
  color: #ffffff !important;
}

.button--secondary:hover {
  background: #003b8f !important;
}

/* ================================
   INTERACTION ICONS
   ================================ */
.icon-button--favourite.active {
  color: var(--brand-red) !important;
}

.icon-button--boost.active {
  color: var(--brand-blue) !important;
}

/* ================================
   INPUT FIELDS (keep light, add accents)
   ================================ */
input:focus,
textarea:focus {
  border-color: var(--brand-blue) !important;
  box-shadow: 0 0 0 2px rgba(0, 32, 91, 0.25) !important;
}

/* ================================
   BORDERS & HIGHLIGHTS
   ================================ */
.column,
.drawer,
.status {
  border-color: rgba(0, 32, 91, 0.15) !important;
}

.column-header {
  border-bottom: 2px solid var(--brand-blue) !important;
}

/* Hiding Logo elements */
 /* Hide default logos */

.navigation-panel__logo svg,

.navigation-panel__logo img,

.column-link--logo svg,

.column-link--logo img,

.ui__header__logo svg,

.ui__header__logo img,

.logo {

display: none !important;

visibility: hidden !important;

}

/* Set custom background image for column link logo */

.column-link--logo,

.column-link--logo:hover,

.column-link--logo:focus,

.column-link--logo:active {

background-image: url("https://exapmle.com/logo.png") !important;

background-size: contain !important;

background-repeat: no-repeat !important;

background-position: center !important;

min-height: 40px; /* Adjust based on your logo height */

padding: 5px 10px; /* Optional: Add space */

margin: 5px; /* Optional: Adjust positioning */

}

/* Set custom background image for header logo */

.ui__header__logo {

background-image: url("https://raw.githubusercontent.com/exoboosters/webassets/refs/heads/main/metro.social-logo-tr.png") !important;

background-size: contain !important;

background-repeat: no-repeat !important;

background-position: center !important;

min-width: 104px; /* Adjust based on your logo width */

min-height: 30px; /* Adjust based on your logo height */

padding: 5px;

}