/* RN Costa Rica App Styles */
:root {
    /* Light theme inspired by the RN Costa Rica logo.  The interface uses
       a clean white background with deep red highlights.  Text is dark
       for readability and cards sit on very light panels to create
       separation. */
    --bg-color: #ffffff;        /* fondo claro para toda la página */
    --primary-color: #ff0000;   /* rojo brillante tomado del logo oficial */
    --accent-color: #d10000;    /* rojo más oscuro para botones y acciones */
    --text-color: #333333;      /* texto oscuro para legibilidad */
    --card-bg: #ffffff;         /* fondo de tarjetas claro para armonizar con rojo y blanco */
    --input-bg: #ffffff;        /* input fields background */
    --border-radius: 12px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

html, body {
    margin: 0;
    padding: 0;
    background-color: var(--bg-color);
    color: var(--text-color);
    min-height: 100%;
}

a {
    color: var(--accent-color);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Ensure header navigation links remain white on the red background */
header nav a {
    color: #ffffff;
    font-weight: 500;
}
header nav a:hover {
    text-decoration: underline;
}

header {
    background-color: var(--primary-color);
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #ffffff;
}

/* Ensure navigation links in the header remain readable on the red
   background.  Override the global link colour so that all nav links
   appear white by default and underline on hover. */
header nav a {
    color: #ffffff;
}
header nav a:hover {
    text-decoration: underline;
}

header img.logo {
    height: 40px;
}

nav ul {
    list-style: none;
    display: flex;
    gap: 15px;
    margin: 0;
    padding: 0;
}

nav li {
    display: inline;
}

.container {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Card styling */
.card {
    background-color: var(--card-bg);
    border-radius: var(--border-radius);
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

form input,
form select,
form textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: var(--border-radius);
    border: 1px solid #cccccc; /* subtle border colour */
    background-color: var(--input-bg);
    color: var(--text-color);
    box-sizing: border-box;
}

form button {
    background-color: var(--accent-color);
    color: #ffffff;
    border: none;
    padding: 10px 20px;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

form button:hover {
    background-color: #b00000;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

.stats-grid .stat {
    background-color: var(--card-bg);
    padding: 15px;
    border-radius: var(--border-radius);
    text-align: center;
}

.icon-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    /* Remove the card background for a cleaner circular icon look */
    background-color: transparent;
    padding: 10px;
    border-radius: var(--border-radius);
    margin: 10px;
    width: 110px;
    cursor: pointer;
    transition: transform 0.2s ease;
    color: #ffffff;
}

.icon-button:hover {
    transform: translateY(-2px);
}

/* Icon within dashboard buttons */
.icon-button img {
    width: 48px;
    height: 48px;
    margin-bottom: 8px;
    /* Place icons on a coloured circle */
    background-color: var(--primary-color);
    padding: 10px;
    border-radius: 50%;
    object-fit: contain;
}

/* Text below icons should be white to contrast the red circles */
.icon-button span {
    color: #ffffff;
    font-weight: 500;
}

footer {
    background-color: var(--primary-color);
    padding: 10px;
    text-align: center;
    font-size: 0.9em;
}

/* User profile avatar displayed in header */
/* Profile avatars appear in the header and forum.  Previously these
   avatars were quite large relative to the navigation bar.  Reduce
   their footprint so the header looks more balanced on both desktop
   and mobile. */
.profile-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--accent-color);
}

/* Verse text inside icon buttons */
.icon-button .verse {
    font-size: 0.75em;
    margin-top: 4px;
    color: var(--text-color);
    text-align: center;
}

/* Responsive */
@media (max-width: 600px) {
    nav ul {
        flex-direction: column;
        align-items: flex-start;
    }
    .icon-button {
        width: 100%;
    }
}