main h2 {text-decoration-line: underline;}
img {border-style: double; color: darkgray}
figure {font-style: italic; color: darkgray; text-align:center;}
footer {border-top: 1px solid #ccc; text-align:center; font-style:italic; font-size: 0.9em;}

.img-popup {
    position: fixed;      /* Stays in place even if you scroll */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent black background */
    display: flex;        /* Helps center the image */
    justify-content: center;
    align-items: center;
    z-index: 9999;        /* Ensures it stays on top of the navbar and footer */
    cursor: pointer;     /* Shows the user they can click to close */
}

.img-popup img {
    max-width: 90%;       /* Prevents the image from being larger than the screen */
    max-height: 90%;
    border: 5px solid white;
    box-shadow: 0px 0px 20px rgba(0,0,0,0.5);
    display: block;
}

/* ================================================================
   Shared component library
   Canonical theme tokens used across all pages. Page CSS files
   load after this file and may override any rule here by repeating
   the same selector (later source order wins at equal specificity).
   ================================================================ */

/* --- Brand / logo header ------------------------------------ */
.brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 1.5rem;
}

.brand h1 {
    font-size: 2.4rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    background: linear-gradient(135deg, #b45f3a, #c97e5b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 2px 5px rgba(236, 156, 112, 0.2);
}

.paw-icon {
    font-size: 2.8rem;
    transform: rotate(-5deg);
    display: inline-block;
    filter: drop-shadow(2px 4px 6px #e0bc9a);
}

/* --- Subhead / page tagline --------------------------------- */
.subhead {
    text-align: center;
    color: #a07a60;
    font-weight: 500;
    font-size: 1rem;
    margin: 0 0 2rem;
    border-bottom: 2px dashed #f5d5bc;
    padding-bottom: 1rem;
    letter-spacing: 0.3px;
}

/* --- Flash / notification area ------------------------------ */
.notif-area {
    margin-bottom: 1.5rem;
}

/* --- Input system ------------------------------------------- */
.input-group {
    margin-bottom: 1.2rem;
    width: 100%;
}

input.input-field,
input[type="text"].input-field,
input[type="password"].input-field,
input[type="email"].input-field,
input[type="file"].input-field,
select.input-field,
textarea.input-field {
    width: 100%;
    padding: 0.9rem 1.2rem;
    font-size: 1rem;
    font-family: 'Quicksand', sans-serif;
    background: #fffbf5;
    border: 2px solid #eddacb;
    border-radius: 50px !important;
    outline: none;
    transition: all 0.25s ease;
    color: #3b2c21;
    -webkit-border-radius: 50px !important;
    -moz-border-radius: 50px !important;
    appearance: none;
    -webkit-appearance: none;
}

input[type="file"].input-field {
    padding: 0.7rem 1.2rem;
}

select.input-field {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23b45f3a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 1.2rem center;
    background-size: 16px;
}

textarea.input-field {
    border-radius: 30px !important;
    min-height: 120px;
    resize: vertical;
}

input.input-field:-webkit-autofill,
input.input-field:-webkit-autofill:hover,
input.input-field:-webkit-autofill:focus,
input.input-field:-webkit-autofill:active,
textarea.input-field:-webkit-autofill {
    -webkit-border-radius: 50px !important;
    border-radius: 50px !important;
    -webkit-box-shadow: 0 0 0 30px #fffbf5 inset !important;
    box-shadow: 0 0 0 30px #fffbf5 inset !important;
}

.input-field:focus {
    border-color: #f7b787;
    background: #ffffff;
    box-shadow: 0 0 0 5px #faeadc;
}

.input-field::placeholder {
    color: #c9b2a1;
    font-weight: 400;
    font-size: 0.95rem;
}

/* Character counter helper */
.char-count {
    display: block;
    text-align: right;
    font-size: 0.8rem;
    color: #b28b72;
    margin-top: 4px;
    margin-right: 10px;
}

/* --- Button group ------------------------------------------- */
.button-group {
    display: flex;
    gap: 1rem;
    margin: 2rem 0 1rem;
    flex-wrap: wrap;
}

/* --- Pet-quote / social-proof bar --------------------------- */
.pet-quote {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 2rem;
    background: #fff4e9;
    padding: 0.7rem 1rem;
    border-radius: 60px;
    color: #974f28; /* darkened from #a85e32 — WCAG AA on #fff4e9 */
    font-weight: 600;
    font-size: 0.95rem;
    border: 2px solid #ffe0cd;
}

.pet-quote span {
    font-size: 1.4rem;
}

/* --- Footer note -------------------------------------------- */
.footer-note {
    text-align: center;
    font-size: 0.75rem;
    margin-top: 1rem;
    color: #af907d;
}

/* --- Nav logout override ------------------------------------ */
/* Bootstrap .text-danger (#dc3545) fails WCAG AA on bg-dark (#212529).
   Both rules use !important so the higher-specificity one wins. */
.navbar .nav-link.text-danger { color: #ff8a7a !important; }

/* Suppress the form/input bottom margin inside the navbar search bar */
.navbar .input-group { margin-bottom: 0; }

/* --- Bootstrap carousel controls (warm accent) -------------- */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: rgba(244, 164, 124, 0.7);
    border-radius: 50%;
    padding: 20px;
}

.carousel-control-prev:hover .carousel-control-prev-icon,
.carousel-control-next:hover .carousel-control-next-icon {
    background-color: rgba(232, 126, 78, 0.9);
}

/* --- Tab navigation (profile / other-profile) --------------- */
.tab-container {
    margin: 2rem 0 1.5rem 0;
}

.tab-nav {
    display: flex;
    gap: 0.5rem;
    background: #fff4e9;
    padding: 0.5rem;
    border-radius: 60px;
    border: 2px solid #ffe0cd;
    max-width: 400px;
    margin: 0 auto;
}

.tab-btn {
    flex: 1;
    background: transparent;
    border: none;
    padding: 0.8rem 1rem;
    border-radius: 50px;
    font-family: 'Quicksand', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: #8b674d;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.tab-btn i {
    font-size: 1.2rem;
}

.tab-btn.active {
    background: linear-gradient(105deg, #e2976b, #d88253);
    color: white;
    box-shadow: 0 5px 10px -5px #b47b5f;
}

.tab-btn.active i {
    color: white;
}

.tab-btn:hover:not(.active) {
    background: #e7d2c2;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* --- Posts section (profile / other-profile pages) ---------- */
.posts-section {
    margin-top: 2rem;
}

.posts-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    background: #fff4e9;
    padding: 1rem 1.5rem;
    border-radius: 60px;
    border: 2px solid #ffe0cd;
}

.posts-header h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #b45f3a;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.posts-header h2 i {
    font-size: 1.8rem;
}

.posts-grid {
    max-width: 600px;
    margin: 0 auto;
}