@import url(../css/all.min.css);

body { font-family: 'Barlow', sans-serif; }
h1, h2, h3, h4, h5, h6 { font-family: 'Cormorant Garamond', serif; }

/* -- Readability improvements (project-wide) --
   Scoped under `body` so they override Tailwind's base utilities
   (higher specificity) while staying below hover-state specificity
   (.hover\:text-*:hover), so link/icon hover colours still work.

   These are global on purpose, so they also apply to future markup.
   To opt a single element back out, use Tailwind's important prefix
   (`!italic`, `!font-light`, `!text-gray-600`) or an arbitrary value
   (`text-[#4b5563]`) — the generated !important wins for that element
   only, leaving the rest of the site fixed. */

/* Cormorant Garamond reads too thin at light weight — hard to read at
   small sizes and on the dark footer. Give serif + light text a readable
   medium weight while keeping the elegant serif look. */
body .font-serif.font-light { font-weight: 500; }

/* Darken secondary gray body text, labels and subtitles for stronger
   contrast (gray-600 ? gray-700). */
body .text-gray-600 { color: #374151; }

/* Drop decorative italics — the slanted serif is hard to read. This only
   affects the Tailwind `italic` utility, so genuine emphasis (<em>/<i>)
   inside article/editorial content stays italic. */
body .italic { font-style: normal; }

/* Custom Owl Carousel Stylings: Collections */
.collections-carousel .owl-nav {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    z-index: 10;
}

.collections-carousel .owl-nav button.owl-prev,
.collections-carousel .owl-nav button.owl-next {
    pointer-events: auto;
    width: 46px !important;
    height: 46px !important;
    background: #fff !important;
    color: #1c1917 !important; /* stone-900 */
    border-radius: 50% !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease !important;
    position: absolute;
}

.collections-carousel .owl-nav button.owl-prev:hover,
.collections-carousel .owl-nav button.owl-next:hover {
    background: #b45309 !important; /* amber-700 */
    color: #fff !important;
}

/* Offset positioning outside edges */
.collections-carousel .owl-nav button.owl-prev {
    left: -23px;
}
.collections-carousel .owl-nav button.owl-next {
    right: -23px;
}

/* Dot Tracker Design */
.collections-carousel .owl-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 32px !important;
}

.collections-carousel .owl-dots .owl-dot span {
    width: 8px !important;
    height: 8px !important;
    background: #e7e5e4 !important; /* stone-200 */
    border-radius: 50% !important;
    transition: all 0.3s ease !important;
    margin: 0 !important;
}

.collections-carousel .owl-dots .owl-dot.active span {
    background: #b45309 !important; /* amber-700 */
    width: 24px !important;
    border-radius: 4px !important;
}

/* -- Newsletter / Mailchimp Form -- */

/* Email input: amber focus ring matching brand */
#mce-EMAIL:focus {
    outline: none;
    border-color: #b45309; /* amber-700 */
    box-shadow: 0 0 0 2px rgba(180, 83, 9, 0.15);
}

/* Response message pill */
#mc-response-message {
    font-family: 'Barlow', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    min-height: 1.25rem;
    transition: opacity 0.25s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

/* Success state — amber brand pill */
#mc-response-message.is-success {
    color: #92400e;           /* amber-800 */
    background: #fef3c7;      /* amber-100 */
    border: 1px solid #fde68a;/* amber-200 */
    border-radius: 0.5rem;
    padding: 0.6rem 1.1rem;
    margin-top: 0.5rem;
}

/* Error state — soft red pill */
#mc-response-message.is-error {
    color: #991b1b;           /* red-800 */
    background: #fef2f2;      /* red-50 */
    border: 1px solid #fecaca;/* red-200 */
    border-radius: 0.5rem;
    padding: 0.6rem 1.1rem;
    margin-top: 0.5rem;
}

/* Neutral / loading state */
#mc-response-message.is-neutral {
    color: #78716c;           /* stone-500 */
}