/* ==========================================================
   Silent Plains Africa Safaris — Site-Wide Custom Styles
   Brand colors: #693A1D (primary brown), #3B1A0E (deep brown),
   #F5C842 (gold accent), background: white
   ==========================================================
   This file intentionally contains only generic, reusable pieces —
   a container width, a visually-hidden utility, and button styles.
   Page-specific layout (packages, contact forms, etc.) belongs to
   whatever builds those pages, not this theme.
   ========================================================== */

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

/* Visually hidden but still readable by screen readers and search engine
   crawlers — useful for keeping proper heading hierarchy (h1 > h2 > h3)
   without forcing an extra visible heading where the design doesn't need one. */
.sp-visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* ---------- BUTTONS ---------- */
.sp-btn {
    display: inline-block;
    padding: 14px 32px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: background-color 0.2s ease;
    border: none;
    cursor: pointer;
    font-size: 14px;
}

.sp-btn-primary {
    background-color: var(--sp-brown, #693A1D);
    color: #fff;
}

.sp-btn-primary:hover {
    background-color: var(--sp-brown-dark, #3B1A0E);
    color: #fff;
}

.sp-btn-secondary {
    background-color: transparent;
    color: var(--sp-brown, #693A1D);
    border: 2px solid var(--sp-brown, #693A1D);
}

.sp-btn-secondary:hover {
    background-color: var(--sp-brown, #693A1D);
    color: #fff;
}