/*
Theme Name: Abstract Reminder Hub
Theme URI: https://example.com/abstract-reminder-hub
Author: Marnus Matthysen
Description: A customizable WordPress reminder dashboard theme with home reminders, sticky-note to-do list, calendar reminders, IMAP email intake, and daily summary support.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: abstract-reminder-hub
*/

:root {
    --arh-bg: #f5f2ff;
    --arh-card: #ffffff;
    --arh-text: #1f2230;
    --arh-muted: #687083;
    --arh-primary: #6f4cff;
    --arh-secondary: #00b8a9;
    --arh-accent: #ffb703;
    --arh-danger: #d62828;
    --arh-shadow: 0 20px 50px rgba(31,34,48,.12);
    --arh-radius: 24px;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Inter, Arial, sans-serif;
    background:
        radial-gradient(circle at top left, color-mix(in srgb, var(--arh-primary) 28%, transparent), transparent 34%),
        radial-gradient(circle at top right, color-mix(in srgb, var(--arh-secondary) 25%, transparent), transparent 30%),
        linear-gradient(135deg, var(--arh-bg), #fff);
    color: var(--arh-text);
    min-height: 100vh;
}

a {
    color: var(--arh-primary);
}

.arh-shell {
    width: min(1220px, calc(100% - 32px));
    margin: 0 auto;
}

.arh-header {
    padding: 24px 0;
}

.arh-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.arh-brand {
    font-weight: 800;
    font-size: 24px;
    letter-spacing: -.03em;
    color: var(--arh-text);
    text-decoration: none;
}

.arh-menu {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.arh-menu a {
    text-decoration: none;
    color: var(--arh-text);
    font-weight: 600;
    opacity: .85;
}

.arh-hero {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 28px;
    align-items: stretch;
    margin: 28px 0;
}

.arh-card {
    background: color-mix(in srgb, var(--arh-card) 94%, transparent);
    border: 1px solid rgba(255,255,255,.65);
    border-radius: var(--arh-radius);
    box-shadow: var(--arh-shadow);
    padding: 26px;
    backdrop-filter: blur(16px);
}

.arh-hero-title {
    font-size: clamp(36px, 6vw, 76px);
    line-height: .95;
    margin: 0 0 18px;
    letter-spacing: -.06em;
}

.arh-hero-title span {
    background: linear-gradient(135deg, var(--arh-primary), var(--arh-secondary), var(--arh-accent));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.arh-subtitle {
    color: var(--arh-muted);
    font-size: 18px;
    max-width: 650px;
}

.arh-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    margin: 24px 0;
}

.arh-section-title {
    margin: 0 0 18px;
    font-size: 26px;
}

.arh-task-list {
    display: grid;
    gap: 12px;
}

.arh-task {
    padding: 15px;
    border-radius: 18px;
    background: rgba(255,255,255,.72);
    border-left: 7px solid var(--arh-primary);
}

.arh-task.done {
    opacity: .58;
    text-decoration: line-through;
}

.arh-task-title {
    font-weight: 800;
}

.arh-task-body {
    margin: 7px 0 0;
    color: var(--arh-muted);
}

.arh-badge {
    display: inline-block;
    padding: 5px 9px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--arh-primary) 12%, white);
    color: var(--arh-primary);
    font-size: 12px;
    font-weight: 700;
}

.arh-button,
button.arh-button,
input[type="submit"].arh-button {
    background: linear-gradient(135deg, var(--arh-primary), var(--arh-secondary));
    color: white;
    border: 0;
    border-radius: 14px;
    padding: 11px 16px;
    font-weight: 800;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}

.arh-button.secondary {
    background: var(--arh-text);
}

.arh-button.danger {
    background: var(--arh-danger);
}

.arh-form input,
.arh-form textarea,
.arh-form select {
    width: 100%;
    padding: 12px 13px;
    margin: 7px 0 14px;
    border-radius: 14px;
    border: 1px solid #d9dce8;
    font: inherit;
}

.arh-form textarea {
    min-height: 110px;
}

.arh-sticky {
    background: linear-gradient(160deg, #fff3a1, #ffd166);
    transform: rotate(-1.2deg);
    box-shadow: 0 18px 40px rgba(0,0,0,.16);
    border-radius: 10px 10px 28px 10px;
    position: relative;
}

.arh-sticky:before {
    content: "";
    width: 60px;
    height: 18px;
    background: rgba(255,255,255,.58);
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%) rotate(2deg);
    border-radius: 3px;
}

.arh-sticky .arh-section-title {
    margin-top: 24px;
}

.arh-calendar {
    width: 100%;
    border-collapse: separate;
    border-spacing: 8px;
}

.arh-calendar th {
    color: var(--arh-muted);
    font-size: 13px;
}

.arh-calendar td {
    vertical-align: top;
    min-height: 90px;
    height: 110px;
    background: rgba(255,255,255,.74);
    border-radius: 16px;
    padding: 10px;
    width: 14.28%;
}

.arh-calendar-day {
    font-weight: 900;
}

.arh-calendar-item {
    margin-top: 7px;
    padding: 6px 8px;
    border-radius: 9px;
    background: color-mix(in srgb, var(--arh-secondary) 18%, white);
    font-size: 12px;
    font-weight: 700;
}

.arh-footer {
    color: var(--arh-muted);
    padding: 40px 0;
    text-align: center;
}

@media (max-width: 860px) {
    .arh-hero,
    .arh-grid {
        grid-template-columns: 1fr;
    }

    .arh-calendar td {
        height: 90px;
        padding: 7px;
    }
}