/* add styles for project controls here */

@import "/fontawesome/css/fontawesome.min.css";
@import "/fontawesome/css/regular.min.css";
@import "/fontawesome/css/solid.min.css";
@import url('./quill.css');

:root {
    --client-header-background-color: #00274C;
    --client-header-text-color: var(--gray-100);
    --client-header-menu-item-active-text-color: #00274C;
    --client-header-menu-item-active-background-color: #eab900;
    --client-header-menu-item-hover-text-color: #00274C;
    --client-header-menu-item-hover-background-color: #FFCB05;

    --client-header-submenu-text-color: var(--gray-100);
    --client-header-submenu-item-active-text-color: #00274C;
    --client-header-submenu-item-active-background-color: #eab900;
    --client-header-submenu-item-hover-text-color: #00274C;
    --client-header-submenu-item-hover-background-color: #FFCB05;
}

@font-face {
    font-family: 'OpenSans Regular';
    src: url('../fonts/OpenSans-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'OpenSans Bold';
    src: url('../fonts/OpenSans-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'OpenSans SemiBold';
    src: url('../fonts/OpenSans-SemiBold.ttf') format('truetype');
}

body {
    font-family: 'OpenSans Regular';
}
.text-button {
    font-family: 'OpenSans Regular';
}
.alert-button {
    font-family: 'OpenSans Regular';
}
.ScreenHeader-primaryButton {
    font-family: 'OpenSans Regular';
}
.button-button {
    font-family: 'OpenSans Regular';
}

.ScreenHeader-title {
    font-family: 'OpenSans Bold';
}

.title-root {
    font-family: 'OpenSans Bold';
}

.subtitle-root {
    font-family: 'OpenSans SemiBold';
}

.quill-container {
    font-family: system-ui;
}

.quill-editor em {
    font-style: italic;
}
.quill-editor strong {
    font-weight: bold;
}

.email-preview {
    border-top: 4px solid var(--divider-background-color);
    padding: 24px 0 0;
}
.email-preview p {
    padding: 0 0 1em;
    line-height: 1.25;
}
.email-preview em {
    font-style: italic;
}
.email-preview strong {
    font-weight: bold;
}

.player-tile .player-name {
    font-size: var(--text-4xl);
    border-bottom: 1px solid black;
    margin-bottom: 8px;
}
.player-tile .player-content {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}
.player-tile .player-photo {
    object-fit: cover;
    object-position: top;
    width: 150px;
    height: 150px;
}
.player-tile dl {
    display: inline-grid;
    grid-template-columns: auto auto;
    gap: 16px;
}
.player-tile dl dt {
    font-weight: 600;
}

/* Announcement Control Styles */
.announcement {
    margin-bottom: 16px;
}

.announcement-message {
    padding: 12px 16px;
    border-radius: 8px;
    border-left: 4px solid;
    font-weight: 500;
}

.announcement-red {
    background-color: var(--red-200);
    border-left-color: var(--red-500);
    color: var(--red-900);
}

.announcement-orange {
    background-color: var(--orange-200);
    border-left-color: var(--orange-500);
    color: var(--orange-900);
}

.announcement-yellow {
    background-color: var(--yellow-200);
    border-left-color: var(--yellow-500);
    color: var(--yellow-900);
}

.announcement-green {
    background-color: var(--green-200);
    border-left-color: var(--green-500);
    color: var(--green-900);
}

.announcement-teal {
    background-color: var(--teal-200);
    border-left-color: var(--teal-500);
    color: var(--teal-900);
}

.announcement-blue {
    background-color: var(--blue-200);
    border-left-color: var(--blue-500);
    color: var(--blue-900);
}

.announcement-indigo {
    background-color: var(--indigo-200);
    border-left-color: var(--indigo-500);
    color: var(--indigo-900);
}

.announcement-purple {
    background-color: var(--purple-200);
    border-left-color: var(--purple-500);
    color: var(--purple-900);
}

.announcement-pink {
    background-color: var(--pink-200);
    border-left-color: var(--pink-500);
    color: var(--pink-900);
}

.announcement-black {
    background-color: var(--gray-800);
    border-left-color: black;
    color: var(--gray-100);
}