/* Blissfully Blended Custom Color Scheme */
/* Based on brand logo colors */

:root {
    --brand-teal: #2d6a5f;
    --brand-beige: #c9a896;
    --brand-teal-light: #3d7a6f;
    --brand-teal-dark: #1d5a4f;
    --brand-beige-light: #d9b8a6;
    --brand-beige-dark: #b99886;
}

/* Override primary accent color throughout site */
.wrapper.style1 {
    background: var(--brand-teal) url("images/overlay.png") !important;
}

.wrapper.style1 .title {
    background: var(--brand-teal) url("images/overlay.png") !important;
}

/* Buttons */
input[type="button"],
input[type="submit"],
input[type="reset"],
button,
.button {
    background: var(--brand-teal) url("images/overlay.png") !important;
}

input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
button:hover,
.button:hover {
    background-color: var(--brand-teal-light) !important;
}

input[type="button"].style1,
input[type="submit"].style1,
input[type="reset"].style1,
button.style1,
.button.style1 {
    background: var(--brand-teal) url("images/overlay.png") !important;
}

input[type="button"].style1:hover,
input[type="submit"].style1:hover,
input[type="reset"].style1:hover,
button.style1:hover,
.button.style1:hover {
    background-color: var(--brand-teal-light) !important;
}

input[type="button"].style1:active,
input[type="submit"].style1:active,
input[type="reset"].style1:active,
button.style1:active,
.button.style1:active {
    background-color: var(--brand-teal-dark) !important;
}

/* Feature list headings */
.feature-list h3 {
    color: var(--brand-teal) !important;
}

.feature-list h3:before {
    background: var(--brand-teal) url("images/overlay.png") !important;
}

/* Highlights section */
#highlights .highlight h3 {
    color: var(--brand-teal) !important;
}

/* Links */
a {
    color: var(--brand-teal);
}

a:hover {
    color: var(--brand-teal-light);
}

/* Header/Logo area - use beige background */
#header {
    background: var(--brand-beige) url("images/overlay.png");
    padding-top: 0.5em !important;
}

#logo h1 {
    color: var(--brand-teal) !important;
}

#logo p {
    color: var(--brand-teal);
    opacity: 0.8;
}

/* Nav - match original template positioning */
#nav {
    position: absolute;
    display: block;
    top: 2.5em;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    max-width: 1120px;
    text-align: center;
}

#nav > ul {
    display: inline-block;
    border-radius: 0.35em;
    box-shadow: inset 0px 0px 1px 1px rgba(255, 255, 255, 0.25);
    padding: 0 1.5em;
}

/* Header on non-home pages - shorter with centered navbar */
body:not(.homepage) #header {
    padding: 0 !important;
    height: 180px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

body:not(.homepage) #nav {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
}

/* Navigation */
#nav > ul > li > a,
#nav > ul > li > span {
    color: var(--brand-teal) !important;
    font-size: 0.9em !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
}

#nav > ul > li:hover > a,
#nav > ul > li.active > a,
#nav > ul > li.active > span {
    color: var(--brand-teal-dark) !important;
}

/* Intro section */
#intro {
    background: var(--brand-beige) url("images/overlay.png");
}

#intro p.style1 {
    color: #fff !important;
}

#intro p.style2 {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.1);
}

#intro p.style3 {
    color: #fff !important;
}

/* Footer - keep dark but accent with teal */
#footer {
    background: #282b34 url("images/overlay.png");
}

#footer .button {
    background: var(--brand-teal) url("images/overlay.png") !important;
}

/* Footer social icons - display in a row without bullets */
#footer .icons {
    list-style: none !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: center !important;
    gap: 1.5em !important;
}

#footer .icons li {
    display: inline-block !important;
}

/* Sidebar recent posts - remove indentation, full width */
#sidebar .style2 li {
    padding-left: 0 !important;
}

#sidebar .style2 li article {
    padding-left: 0 !important;
}

#sidebar .style2 li article h3,
#sidebar .style2 li article p {
    margin-left: 0 !important;
    padding-left: 0 !important;
    max-width: 100% !important;
}

/* Footer form - ensure name and email fields have same height */
#footer input[type="text"],
#footer input[type="email"] {
    height: 2.75em !important;
    line-height: 2.75em !important;
}

#footer .button:hover {
    background-color: var(--brand-teal-light) !important;
}

/* Blog post metadata */
.post-meta {
    color: var(--brand-teal);
}

/* Category badges */
.category-badge {
    background: var(--brand-teal);
    color: white;
}

/* Accent elements */
.accent-color {
    color: var(--brand-teal) !important;
}

.accent-bg {
    background-color: var(--brand-teal) !important;
}

.accent-border {
    border-color: var(--brand-teal) !important;
}

/* Page title inside content area */
.page-title {
    color: var(--brand-teal) !important;
    font-size: 2em;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin: 0 0 0.75em 0;
    padding-bottom: 0.5em;
    border-bottom: 2px solid var(--brand-beige);
}