/* ==========================================================================
   Components CSS - Buttons, Flash Messages, Topics, Articles, Forms (BEM)
   ========================================================================== */

/* ==========================================================================
   Button Block
   ========================================================================== */

a.btn,
a.Button {
    text-decoration: none;
    display: inline-block;
}

.btn,
.Button {
    font-family: 'Encode Sans Condensed', sans-serif;
    text-transform: uppercase;
    background: black;
    color: white;
    margin-top: 10px;
    padding: 10px 20px calc(10px - var(--borderWidth));
    border-radius: 1px;
    border: none;
    cursor: pointer;
    border-bottom: var(--borderWidth) solid transparent;
    letter-spacing: 0.05em;
}

.btn:hover,
.Button:hover {
    border-bottom: var(--borderWidth) solid var(--color-highlight);
}

.SiteFooter__newsletter .btn,
.Newsletter .Button {
    color: black;
    background-color: white;
}

.btn:disabled,
.Button--disabled {
    background: #ccc;
    cursor: not-allowed;
}

/* ==========================================================================
   Article Block
   ========================================================================== */

.Article {
    padding: var(--layout-site-gutter) 0;
}

.Article + .Article {
    border-top: 1px solid var(--color-muted);
}

.Article__title a {
    text-decoration: none;
}

.Article a:not(.ExternalLink):not(.Article__title a) {
    color: var(--color-highlight);
    text-decoration: underline;
}

.Article__featureImage {
    margin-bottom: var(--layout-site-gutter);
    margin-left: calc(-1 * var(--layout-site-gutter));
    margin-right: calc(-1 * var(--layout-site-gutter));
}

.Article__contentBlock {
    margin-bottom: var(--layout-site-gutter);
}

.Article__contentBlock:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   Topics Block
   ========================================================================== */

.Topics {
    display: flex;
    list-style: none;
    margin: var(--layout-site-gutter) 0;
    padding: 0;
}

.Topics__item {
    margin-right: 4px;
}

.Topics__link {
    background-color: var(--color-highlight);
    border-radius: 2px;
    color: white;
    font-family: var(--type-technical);
    padding: 2px 8px;
    text-transform: uppercase;
}

.Topics__link:hover {
    background-color: var(--color-base);
}

/* ==========================================================================
   About Block
   ========================================================================== */

.About {}

.About__photo {
    border-radius: 100%;
    height: 180px;
    margin: 0 auto var(--layout-site-gutter) auto;
    overflow: hidden;
    width: 180px;
}

/* ==========================================================================
   FlashMessage Block
   ========================================================================== */

.FlashMessage {
    margin-bottom: var(--layout-site-gutter);
    padding: 1rem;
    border-radius: 4px;
}

.FlashMessage--error {
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
}

.FlashMessage--notice,
.FlashMessage--success {
    background: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
}

.FlashMessage p {
    margin: 0;
}

.FlashMessage p + p {
    margin-top: 0.5rem;
}

/* ==========================================================================
   Form System - Generic form components
   ========================================================================== */

/* FormGroup - Label + Input wrapper */

.FormGroup {
    margin-bottom: 1.5rem;
}

.FormGroup__label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: bold;
}

.FormGroup__input,
.FormGroup input[type="text"],
.FormGroup input[type="email"],
.FormGroup input[type="password"],
.FormGroup textarea {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
    font-family: inherit;
    box-sizing: border-box;
}

.FormGroup__input:focus,
.FormGroup input[type="text"]:focus,
.FormGroup input[type="email"]:focus,
.FormGroup input[type="password"]:focus,
.FormGroup textarea:focus {
    outline: none;
    border-color: #000;
}

.FormGroup__input--error,
.FormGroup input.FormGroup__input--error {
    border-color: #dc3545 !important;
}

.FormGroup input[type="checkbox"] {
    width: auto;
    margin-right: 0.5rem;
}

.FormGroup__hint {
    display: block;
    margin-top: 0.25rem;
    color: #666;
    font-size: 0.875rem;
}

.FormGroup__errors {
    margin-top: 0.5rem;
    padding-left: 1.5rem;
    color: #dc3545;
    list-style: disc;
}

/* FormActions - Submit button container */

.FormActions {
    margin-top: 2rem;
    display: flex;
    gap: 1rem;
    align-items: center;
}

/* FormLinks - Links under form */

.FormLinks {
    margin-top: 1.5rem;
    text-align: center;
}

.FormLinks a {
    display: block;
    margin-top: 0.5rem;
    color: #666;
    text-decoration: none;
}

.FormLinks a:hover {
    text-decoration: underline;
}

/* FormError - Error message box */

.FormError {
    color: #dc3545;
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
}

/* FormSuccess - Success message box */

.FormSuccess {
    margin-bottom: 1.5rem;
    padding: 0.75rem;
    background: #d4edda;
    border: 1px solid #c3e6cb;
    border-radius: 4px;
    color: #155724;
}

.FormSuccess p {
    margin: 0;
}

/* SkipLink */

.SkipLink {
    color: #666;
    text-decoration: none;
}

.SkipLink:hover {
    text-decoration: underline;
}

/* ==========================================================================
   StatusMessage Block
   ========================================================================== */

.StatusMessage {
    border-radius: 4px;
    padding: 2rem;
    margin-bottom: 2rem;
    text-align: center;
}

.StatusMessage--success {
    background: #d4edda;
    border: 1px solid #c3e6cb;
}

.StatusMessage--success h1 {
    color: #155724;
    margin-bottom: 0.5rem;
}

.StatusMessage--pending {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
}

.StatusMessage--pending h1 {
    color: #856404;
    margin-bottom: 0.5rem;
}

.StatusMessage--error {
    background: #f8d7da;
    border: 1px solid #f5c6cb;
}

.StatusMessage--error h1 {
    color: #721c24;
    margin-bottom: 0.5rem;
}

/* ==========================================================================
   StatusBadge Block
   ========================================================================== */

.StatusBadge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-size: 0.85em;
    font-weight: 600;
    text-transform: uppercase;
}

.StatusBadge--paid {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.StatusBadge--pending {
    background: #fff3cd;
    color: #856404;
    border: 1px solid #ffeaa7;
}

.StatusBadge--open {
    background: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}

.StatusBadge--failed,
.StatusBadge--canceled,
.StatusBadge--expired {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* ==========================================================================
   ExternalLink Block
   ========================================================================== */

.ExternalLink {
    display: flex;
    align-items: stretch;
    gap: 1rem;
    border-radius: 8px;
    background: #fff;
    text-decoration: none;
    color: var(--color-base);
}

.ExternalLink__image {
    flex: 0 0 96px;
    border-radius: 6px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
}

.ExternalLink__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ExternalLink__content {
    flex: 1 1 auto;
    min-width: 0;
}

.ExternalLink__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-weight: 600;
    margin-bottom: 0.25rem;
    line-height: 1.4;
}

.ExternalLink__url {
    display: block;
    font-size: 0.875rem;
    color: var(--color-muted);
}

.ExternalLink + .ExternalLink {
    margin-top: 0.75rem;
}

@media (max-width: 768px) {
    .ExternalLink {
        gap: 0.75rem;
    }

    .ExternalLink__title {
        line-height: 1.2;
        font-size: 0.9rem;
    }

    .ExternalLink + .ExternalLink {
        margin-top: 0.5rem;
    }
}