/**
 * Components — buttons, cards, forms, badges, alerts.
 *
 * @package CPM_Theme
 */

/* ============================================================
   BUTTONS
   ============================================================ */

.cpm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--cpm-space-sm);
    padding: var(--cpm-space-sm) var(--cpm-space-xl);
    min-height: 44px;
    font-family: var(--cpm-font-family);
    font-size: var(--cpm-font-size-sm);
    font-weight: 600;
    line-height: 1;
    border: 2px solid transparent;
    border-radius: var(--cpm-radius-sm);
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--cpm-transition-fast), color var(--cpm-transition-fast), border-color var(--cpm-transition-fast), box-shadow var(--cpm-transition-fast);
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
}

.cpm-btn:focus-visible {
    outline: 2px solid var(--cpm-primary);
    outline-offset: 2px;
}

/* Primary */
.cpm-btn--primary {
    background: var(--cpm-primary);
    color: var(--cpm-white);
    border-color: var(--cpm-primary);
}

.cpm-btn--primary:hover {
    background: var(--cpm-primary-dark);
    border-color: var(--cpm-primary-dark);
    color: var(--cpm-white);
    text-decoration: none;
}

/* Accent (red) */
.cpm-btn--accent {
    background: var(--cpm-white);
    color: var(--cpm-accent);
    border-color: var(--cpm-white);
}

.cpm-btn--accent:hover {
    background: rgba(255, 255, 255, 0.9);
    color: var(--cpm-accent);
    text-decoration: none;
}

/* Outline */
.cpm-btn--outline {
    background: transparent;
    color: var(--cpm-primary);
    border-color: var(--cpm-primary);
}

.cpm-btn--outline:hover {
    background: var(--cpm-primary);
    color: var(--cpm-white);
    text-decoration: none;
}

/* Ghost */
.cpm-btn--ghost {
    background: transparent;
    color: var(--cpm-text-primary);
    border-color: transparent;
}

.cpm-btn--ghost:hover {
    background: var(--cpm-gray-100);
    text-decoration: none;
}

/* Sizes */
.cpm-btn--sm {
    padding: var(--cpm-space-xs) var(--cpm-space-md);
    min-height: 36px;
    font-size: var(--cpm-font-size-xs);
}

.cpm-btn--lg {
    padding: var(--cpm-space-md) var(--cpm-space-2xl);
    min-height: 52px;
    font-size: var(--cpm-font-size-base);
}

/* Full width */
.cpm-btn--block {
    width: 100%;
}

/* ============================================================
   CARDS
   ============================================================ */

.cpm-card {
    background: var(--cpm-white);
    border-radius: var(--cpm-radius-md);
    box-shadow: var(--cpm-shadow-sm);
    overflow: hidden;
    transition: box-shadow var(--cpm-transition-normal);
}

.cpm-card:hover {
    box-shadow: var(--cpm-shadow-md);
}

.cpm-card__body {
    padding: var(--cpm-space-lg);
}

.cpm-card__title {
    font-size: var(--cpm-font-size-md);
    margin-bottom: var(--cpm-space-sm);
}

.cpm-card__text {
    font-size: var(--cpm-font-size-sm);
    color: var(--cpm-text-secondary);
}

/* ============================================================
   FORMS
   ============================================================ */

.cpm-form-group {
    margin-bottom: var(--cpm-space-md);
}

.cpm-label {
    display: block;
    margin-bottom: var(--cpm-space-xs);
    font-size: var(--cpm-font-size-sm);
    font-weight: 500;
    color: var(--cpm-text-primary);
}

.cpm-input,
.cpm-textarea,
.cpm-select {
    width: 100%;
    padding: var(--cpm-space-sm) var(--cpm-space-md);
    min-height: 44px;
    font-family: var(--cpm-font-family);
    font-size: var(--cpm-font-size-base);
    color: var(--cpm-text-primary);
    background: var(--cpm-white);
    border: 1px solid var(--cpm-gray-300);
    border-radius: var(--cpm-radius-sm);
    transition: border-color var(--cpm-transition-fast), box-shadow var(--cpm-transition-fast);
}

.cpm-input:focus,
.cpm-textarea:focus,
.cpm-select:focus {
    border-color: var(--cpm-primary);
    box-shadow: 0 0 0 3px var(--cpm-primary-light);
    outline: none;
}

.cpm-input::placeholder,
.cpm-textarea::placeholder {
    color: var(--cpm-gray-500);
}

.cpm-textarea {
    min-height: 100px;
    resize: vertical;
}

/* ============================================================
   BADGES
   ============================================================ */

.cpm-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--cpm-space-sm);
    font-size: var(--cpm-font-size-xs);
    font-weight: 600;
    border-radius: var(--cpm-radius-full);
    white-space: nowrap;
}

.cpm-badge--primary {
    background: var(--cpm-primary-light);
    color: var(--cpm-primary);
}

.cpm-badge--success {
    background: #E8F5E9;
    color: var(--cpm-success);
}

.cpm-badge--warning {
    background: #FFF8E1;
    color: #F57F17;
}

.cpm-badge--danger {
    background: var(--cpm-accent-light);
    color: var(--cpm-danger);
}

/* ============================================================
   ALERTS
   ============================================================ */

.cpm-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--cpm-space-md);
    padding: var(--cpm-space-md) var(--cpm-space-lg);
    border-radius: var(--cpm-radius-md);
    margin-bottom: var(--cpm-space-lg);
    font-size: var(--cpm-font-size-sm);
}

.cpm-alert--info {
    background: var(--cpm-primary-light);
    color: var(--cpm-primary-dark);
    border: 1px solid var(--cpm-primary);
}

.cpm-alert--success {
    background: #E8F5E9;
    color: #2E7D32;
    border: 1px solid var(--cpm-success);
}

.cpm-alert--warning {
    background: #FFF8E1;
    color: #E65100;
    border: 1px solid var(--cpm-warning);
}

.cpm-alert--danger {
    background: var(--cpm-accent-light);
    color: var(--cpm-danger);
    border: 1px solid var(--cpm-danger);
}

/* ============================================================
   BLOCK ALIGNMENT — alignwide / alignfull
   ============================================================ */

.entry__content .alignwide {
    max-width: 1400px;
    margin-left: calc(50% - 700px);
    margin-right: calc(50% - 700px);
    width: auto;
}

.entry--has-fullwidth .entry__content .alignfull {
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: 100vw;
}

/* Ensure wide blocks don't overflow on small screens */
@media (max-width: 1432px) {
    .entry__content .alignwide {
        max-width: calc(100% + var(--cpm-container-padding) * 2);
        margin-left: calc(-1 * var(--cpm-container-padding));
        margin-right: calc(-1 * var(--cpm-container-padding));
    }
}

/* ============================================================
   ENTRIES (post/page content)
   ============================================================ */

.entry {
    background: var(--cpm-white);
    border-radius: var(--cpm-radius-md);
    box-shadow: var(--cpm-shadow-sm);
    padding: var(--cpm-space-xl);
}

.entry--has-fullwidth {
    overflow: visible;
}

.entry__header {
    margin-bottom: var(--cpm-space-xl);
}

.entry__title {
    font-size: var(--cpm-font-size-2xl);
}

.entry__meta {
    display: flex;
    align-items: center;
    gap: var(--cpm-space-sm);
    margin-top: var(--cpm-space-sm);
    font-size: var(--cpm-font-size-sm);
    color: var(--cpm-text-secondary);
}

.entry__thumbnail {
    margin-bottom: var(--cpm-space-xl);
    border-radius: var(--cpm-radius-md);
    overflow: hidden;
}

.entry__content {
    line-height: var(--cpm-line-height-relaxed);
}

.entry__content p {
    margin-bottom: var(--cpm-space-md);
}

.entry__content h2 {
    margin-top: var(--cpm-space-xl);
}

.entry__content h3 {
    margin-top: var(--cpm-space-lg);
}

.entry__content ul,
.entry__content ol {
    margin-bottom: var(--cpm-space-md);
    padding-left: var(--cpm-space-xl);
}

.entry__content blockquote {
    border-left: 4px solid var(--cpm-primary);
    padding: var(--cpm-space-md) var(--cpm-space-lg);
    background: var(--cpm-gray-50);
    margin: var(--cpm-space-lg) 0;
    border-radius: 0 var(--cpm-radius-sm) var(--cpm-radius-sm) 0;
}

.entry__content img {
    border-radius: var(--cpm-radius-sm);
}

.entry__footer {
    margin-top: var(--cpm-space-xl);
    padding-top: var(--cpm-space-lg);
    border-top: 1px solid var(--cpm-gray-200);
}

.entry__tags {
    font-size: var(--cpm-font-size-sm);
    color: var(--cpm-text-secondary);
}

/* ============================================================
   ARCHIVE ENTRIES
   ============================================================ */

.archive-entry {
    background: var(--cpm-white);
    border-radius: var(--cpm-radius-md);
    box-shadow: var(--cpm-shadow-sm);
    overflow: hidden;
}

.archive-entry__thumbnail img {
    width: 100%;
    height: auto;
    display: block;
}

.archive-entry__content {
    padding: var(--cpm-space-lg);
}

.archive-entry__title {
    font-size: var(--cpm-font-size-lg);
    margin-bottom: var(--cpm-space-sm);
}

.archive-entry__title a {
    color: var(--cpm-text-primary);
    text-decoration: none;
}

.archive-entry__title a:hover {
    color: var(--cpm-primary);
}

.archive-entry__meta {
    font-size: var(--cpm-font-size-sm);
    color: var(--cpm-text-secondary);
    margin-bottom: var(--cpm-space-sm);
}

.archive-entry__excerpt {
    font-size: var(--cpm-font-size-sm);
    color: var(--cpm-text-secondary);
    line-height: var(--cpm-line-height-relaxed);
}

/* ============================================================
   404
   ============================================================ */

.error-404__code {
    font-size: 6rem;
    font-weight: 800;
    color: var(--cpm-gray-200);
    line-height: 1;
    margin-bottom: var(--cpm-space-md);
}

.error-404__title {
    font-size: var(--cpm-font-size-xl);
    margin-bottom: var(--cpm-space-md);
}

.error-404__message {
    color: var(--cpm-text-secondary);
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--cpm-space-xl);
}

.error-404__actions {
    display: flex;
    gap: var(--cpm-space-md);
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: var(--cpm-space-xl);
}

/* ============================================================
   SEARCH FORM
   ============================================================ */

.search-form {
    display: flex;
    max-width: 400px;
    margin: var(--cpm-space-xl) auto 0;
}

.search-form .search-field {
    flex: 1;
    padding: var(--cpm-space-sm) var(--cpm-space-md);
    min-height: 44px;
    border: 1px solid var(--cpm-gray-300);
    border-radius: var(--cpm-radius-sm) 0 0 var(--cpm-radius-sm);
    font-size: var(--cpm-font-size-base);
    font-family: var(--cpm-font-family);
}

.search-form .search-field:focus {
    border-color: var(--cpm-primary);
    outline: none;
    box-shadow: 0 0 0 3px var(--cpm-primary-light);
}

.search-form .search-submit {
    padding: var(--cpm-space-sm) var(--cpm-space-lg);
    min-height: 44px;
    background: var(--cpm-primary);
    color: var(--cpm-white);
    border: 1px solid var(--cpm-primary);
    border-radius: 0 var(--cpm-radius-sm) var(--cpm-radius-sm) 0;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--cpm-transition-fast);
}

.search-form .search-submit:hover {
    background: var(--cpm-primary-dark);
}

/* ============================================================
   POST NAVIGATION
   ============================================================ */

.post-navigation {
    margin-top: var(--cpm-space-xl);
    padding-top: var(--cpm-space-lg);
    border-top: 1px solid var(--cpm-gray-200);
    display: flex;
    justify-content: space-between;
    gap: var(--cpm-space-md);
}

.post-navigation a {
    font-size: var(--cpm-font-size-sm);
}

/* ============================================================
   SITE BRANDING
   ============================================================ */

.site-branding {
    flex-shrink: 0;
}

.site-branding__link {
    display: block;
}

.site-branding__logo-img {
    height: 40px;
    width: auto;
}

.site-branding .custom-logo-link img {
    height: 40px;
    width: auto;
}