@import url('custom-typography.css');

/* ==========================================================================
   Custom CSS for RyanBoyd.com
   ========================================================================== */

/* Color definitions */
:root {
    --accent-color-1: #E74C3C;
    --accent-color-1-hover: #C0392B;   /* Darker for hover states */
    --accent-color-1-active: #A93226;  /* Darkest for active/pressed */
    --border-subtle: #EEF0F3;   /* Header divider, light borders */
    --border-form: #bcc3ce;     /* Form field borders */
}


/* ==========================================================================
   Header & Navigation
   ========================================================================== */

#header .logo svg path {
    fill: var(--accent-color-1) !important;
}

.header-dark #header:not(.scrolled) .logo svg path {
    fill: #fff !important;
}

/* Menu hover/active states */
.dropmenu ul li a.active,
.dropmenu ul li a:focus,
.dropmenu ul li a:hover {
    color: var(--accent-color-1) !important;
}

/* Mobile menu hamburger color */
.mobile-menu .button_container span {
    background: #999999;
}

/* Mobile menu item height */
.overlay-menu .treemenu li {
    padding: 10px 0 !important;
}

/* Header bottom border */
#header {
    border-bottom-color: var(--border-subtle);
}


/* ==========================================================================
   Forms - Universal Styling
   ========================================================================== */

/* Form field styling */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="zip"],
textarea,
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: #fff !important;
    border: 1px solid var(--border-form) !important;
    border-radius: 8px !important;
    outline: none;
    padding: 0.5rem 0.75rem !important;
    font-size: 16px !important;  /* Prevents iOS Safari auto-zoom on focus */
}

/* Form field focus state */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="zip"]:focus,
textarea:focus,
select:focus {
    border-color: var(--accent-color-1) !important;
}

/* Form button styling */
button[type="submit"],
input[type="submit"],
.button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--accent-color-1) !important;
    border: none !important;
    border-radius: 8px !important;
    color: #fff !important;
    cursor: pointer;
    padding: 0.6rem 1.5rem !important;
    font-weight: 500;
    font-size: inherit;
    height: auto !important;
    line-height: 1.4 !important;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    box-sizing: border-box;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

/* Form button hover - works in Chrome/Firefox, unreliable in Safari */
button[type="submit"]:hover,
input[type="submit"]:hover,
.button:hover {
    background-color: var(--accent-color-1-hover) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25) !important;
}

/* Form button active/pressed - works everywhere */
button[type="submit"]:active,
input[type="submit"]:active,
.button:active {
    background-color: var(--accent-color-1-active) !important;
    box-shadow: none !important;
}


/* ==========================================================================
   Forms - Mailchimp/Contact Specific
   ========================================================================== */

#mc_embed_signup {
    font-size: 14px;
}

#mc_embed_signup .clear {
    text-align: center;
}

#mc_embed_signup label {
    font-weight: bold;
}

/* Standardized button spacing from field above */
#mc_embed_signup button[type="submit"],
#mc_embed_signup input[type="submit"] {
    margin-top: 20px;
}