/*
Theme Name: Signature Mall Theme
Author: Cleartwo
Theme URI: https://cleartwo.co.uk/
Description: Custom ACF-based theme for Signature Mall, Bradford. Built by Cleartwo.
Version: 1.0
*/

@import url('https://fonts.googleapis.com/css2?family=Taviraj:wght@400;500;600&family=Inter:wght@400;500;600;700&display=swap');

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Inter', sans-serif;
    color: #232323;
}

h1, h2, h3, h4 {
    font-family: 'Taviraj', serif;
    font-weight: 500;
    margin: 0;
}

a { text-decoration: none; color: inherit; }

.wrapper {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ---- Topbar ---- */
.topbar {
    background: #181818;
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    padding: 6px 0;
    text-align: center;
}

/* ---- Header ---- */
.sm-header {
    background: #ffffff;
    padding: 18px 0;
}
.sm-header .wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.sm-header__logo img { max-height: 56px; }
.sm-header__menu {
    display: flex;
    list-style: none;
    gap: 28px;
    margin: 0;
    padding: 0;
}
.sm-header__menu a {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #181818;
}
.sm-header__actions {
    display: flex;
    align-items: center;
    gap: 18px;
}
.sm-header__search { background: none; border: none; cursor: pointer; }
.sm-header__search img { width: 20px; height: 20px; }
.sm-header__phone {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #181818;
}
.sm-header__phone img { width: 18px; height: 18px; }
.sm-header__cta {
    background: #D4AF37;
    color: #1E1E1E;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 12px 24px;
    border-radius: 4px;
    white-space: nowrap;
}
.side_toggle { display: none; background: none; border: none; }
.mobile_menu { display: none; }

/* ---- Footer ---- */
.sm-footer {
    background: #181818;
    color: #ffffff;
    padding: 60px 0 0;
}
.sm-footer__grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap: 32px;
    padding-bottom: 40px;
}
.sm-footer__brand img { max-height: 48px; margin-bottom: 16px; }
.sm-footer__brand p {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255,255,255,0.7);
}
.sm-footer .widget-title, .sm-footer h4 {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #D4AF37;
    margin-bottom: 16px;
}
.sm-footer ul { list-style: none; margin: 0; padding: 0; }
.sm-footer ul li { margin-bottom: 10px; font-size: 14px; }
.sm-footer ul a:hover { color: #D4AF37; }

.copyright-area {
    border-top: 1px solid rgba(255,255,255,0.15);
    padding: 20px 0;
    font-size: 13px;
    color: rgba(255,255,255,0.6);
}
.copyright-area a { color: #D4AF37; }

/* ---- Responsive ---- */
@media (max-width: 991px) {
    .sm-header__menu { display: none; }
    .sm-header__phone span { display: none; }
    .side_toggle { display: block; }
    .sm-footer__grid { grid-template-columns: 1fr 1fr; }
    .sm-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
    .sm-footer__grid { grid-template-columns: 1fr; }
    .sm-header__cta { padding: 10px 16px; font-size: 12px; }
}

/* ==== Homepage sections ==== */

.sm-btn {
    display: inline-block;
    background: #D4AF37;
    color: #1E1E1E;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 14px 28px;
    border-radius: 4px;
}

.sm-eyebrow {
    display: block;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #D4AF37;
    margin-bottom: 10px;
}

/* Hero */
.sm-hero {
    background-color: #1E1E1E;
    background-size: cover;
    background-position: center;
    color: #ffffff;
    padding: 120px 0;
}
.sm-hero__inner { max-width: 700px; }
.sm-hero__inner h1 { font-size: 48px; margin-bottom: 16px; }
.sm-hero__inner p { font-size: 18px; margin-bottom: 28px; }

/* Stats strip */
.sm-stats { background: #232323; color: #ffffff; padding: 40px 0; }
.sm-stats__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    text-align: center;
    gap: 20px;
}
.sm-stats__item h2 { font-size: 36px; color: #D4AF37; margin-bottom: 6px; }
.sm-stats__item p { margin: 0; font-size: 14px; }

/* Intro */
.sm-intro { padding: 80px 0; }
.sm-intro__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}
.sm-intro__text h2 { font-size: 34px; margin-bottom: 18px; }
.sm-intro__copy { font-size: 15px; line-height: 1.7; }
.sm-intro__image img { width: 100%; border-radius: 6px; }

/* Signature Experiences */
.sm-experiences { padding: 80px 0; background: #F7F5EF; }
.sm-experiences h2 { font-size: 32px; margin-bottom: 32px; text-align: center; }
.sm-experiences__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.sm-experiences__card { display: block; text-align: center; }
.sm-experiences__card img { width: 100%; border-radius: 6px; margin-bottom: 12px; }
.sm-experiences__card span { font-weight: 600; font-size: 15px; }

/* Brand strip */
.sm-brands { padding: 50px 0; border-top: 1px solid #eee; border-bottom: 1px solid #eee; }
.sm-brands__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px;
}
.sm-brands__item img { max-height: 40px; opacity: 0.8; }

/* Complete Destination */
.sm-destination { padding: 80px 0; }
.sm-destination h2 { font-size: 32px; text-align: center; margin-bottom: 40px; }
.sm-destination__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}
.sm-destination__card { text-align: center; }
.sm-destination__card img { width: 48px; height: 48px; margin-bottom: 16px; }
.sm-destination__card h3 { font-size: 20px; margin-bottom: 10px; }
.sm-destination__card p { font-size: 14px; line-height: 1.6; }

/* Map */
.sm-map { padding: 80px 0; background: #232323; color: #ffffff; }
.sm-map__inner { display: grid; grid-template-columns: 1fr 1.4fr; gap: 40px; align-items: center; }
.sm-map__text h2 { font-size: 30px; margin-bottom: 14px; }
.sm-map__embed iframe { width: 100%; height: 320px; border: 0; border-radius: 6px; }

/* Latest */
.sm-latest { padding: 80px 0; }
.sm-latest h2 { font-size: 32px; text-align: center; margin-bottom: 40px; }
.sm-latest__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.sm-latest__card img { width: 100%; border-radius: 6px; margin-bottom: 14px; }
.sm-latest__card h3 { font-size: 18px; font-family: 'Inter', sans-serif; font-weight: 600; }

/* Instagram */
.sm-instagram { padding: 80px 0; }
.sm-instagram h2 { font-size: 32px; text-align: center; margin-bottom: 32px; }
.sm-instagram__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.sm-instagram__grid img { width: 100%; aspect-ratio: 1/1; object-fit: cover; }

@media (max-width: 991px) {
    .sm-intro__inner { grid-template-columns: 1fr; }
    .sm-experiences__grid { grid-template-columns: repeat(2, 1fr); }
    .sm-destination__grid { grid-template-columns: 1fr; }
    .sm-map__inner { grid-template-columns: 1fr; }
    .sm-latest__grid { grid-template-columns: 1fr; }
    .sm-instagram__grid { grid-template-columns: repeat(3, 1fr); }
    .sm-stats__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .sm-hero { padding: 70px 0; }
    .sm-hero__inner h1 { font-size: 30px; }
    .sm-experiences__grid { grid-template-columns: 1fr; }
    .sm-instagram__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ==== Category page (Shop & Brands, Food, Fashion, Jewellery, Beauty) ==== */

.sm-cat-hero {
    background-color: #1E1E1E;
    background-size: cover;
    background-position: center;
    color: #ffffff;
    padding: 100px 0;
    text-align: center;
}
.sm-cat-hero h1 { font-size: 42px; }

.sm-cat-intro { padding: 80px 0; }
.sm-cat-intro__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}
.sm-cat-intro__image img { width: 100%; border-radius: 6px; }
.sm-cat-intro__text h2 { font-size: 34px; margin-bottom: 18px; }
.sm-cat-intro__copy { font-size: 15px; line-height: 1.7; margin-bottom: 24px; }

.sm-cat-brands { padding: 60px 0; background: #F7F5EF; }
.sm-cat-brands h2 { text-align: center; font-size: 28px; margin-bottom: 32px; }
.sm-cat-brands__row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 40px;
}
.sm-cat-brands__item img { max-height: 44px; opacity: 0.85; }

.sm-cat-find { padding: 80px 0; }
.sm-cat-find h2 { text-align: center; font-size: 32px; margin-bottom: 40px; }
.sm-cat-find__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.sm-cat-find__card { text-align: center; }
.sm-cat-find__number {
    display: inline-block;
    font-family: 'Taviraj', serif;
    font-size: 32px;
    color: #D4AF37;
    margin-bottom: 12px;
}
.sm-cat-find__card h3 { font-size: 20px; margin-bottom: 10px; }
.sm-cat-find__card p { font-size: 14px; line-height: 1.6; }

.sm-cat-feature { padding: 80px 0; background: #232323; color: #ffffff; }
.sm-cat-feature__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}
.sm-cat-feature__text h2 { font-size: 32px; margin-bottom: 18px; }
.sm-cat-feature__copy { font-size: 15px; line-height: 1.7; margin-bottom: 24px; color: rgba(255,255,255,0.85); }
.sm-cat-feature__image img { width: 100%; border-radius: 6px; }

@media (max-width: 991px) {
    .sm-cat-intro__inner { grid-template-columns: 1fr; }
    .sm-cat-find__grid { grid-template-columns: 1fr; }
    .sm-cat-feature__inner { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .sm-cat-hero { padding: 60px 0; }
    .sm-cat-hero h1 { font-size: 28px; }
}

/* ==== Visit Us ==== */

.sm-visit-hero {
    background: #1E1E1E;
    color: #ffffff;
    padding: 80px 0;
    text-align: center;
}
.sm-visit-hero h1 { font-size: 40px; }

.sm-visit-tabs { padding: 60px 0; }
.sm-visit-tabs__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    border-bottom: 1px solid #eee;
    margin-bottom: 40px;
}
.sm-visit-tabs__btn {
    background: none;
    border: none;
    padding: 12px 4px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #232323;
    cursor: pointer;
    border-bottom: 3px solid transparent;
}
.sm-visit-tabs__btn.is-active { color: #D4AF37; border-bottom-color: #D4AF37; }

.sm-visit-tabs__panel { display: none; }
.sm-visit-tabs__panel.is-active { display: block; }
.sm-visit-tabs__panel h2 { font-size: 28px; margin-bottom: 20px; }

#tab-getting-here .sm-visit-tabs__panel-inner {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 40px;
}
.sm-visit__map iframe { width: 100%; height: 320px; border: 0; border-radius: 6px; }

.sm-visit__hours { width: 100%; max-width: 480px; border-collapse: collapse; }
.sm-visit__hours td { padding: 10px 0; border-bottom: 1px solid #eee; font-size: 15px; }
.sm-visit__hours td:first-child { font-weight: 600; }

.sm-visit__socials { list-style: none; margin: 0; padding: 0; }
.sm-visit__socials li { margin-bottom: 12px; }
.sm-visit__socials a {
    display: inline-block;
    font-weight: 600;
    color: #232323;
}
.sm-visit__socials a:hover { color: #D4AF37; }

@media (max-width: 767px) {
    #tab-getting-here .sm-visit-tabs__panel-inner { grid-template-columns: 1fr; }
    .sm-visit-tabs__nav { gap: 6px 16px; }
}

/* ==== Text fallbacks when no image/logo uploaded yet ==== */

.sm-brands__name,
.sm-cat-brands__name {
    display: inline-block;
    font-weight: 600;
    font-size: 15px;
    color: #232323;
    padding: 8px 18px;
    border: 1px solid #e2ded0;
    border-radius: 4px;
    background: #ffffff;
}

.sm-experiences__card--noimg {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 140px;
    background: #232323;
    color: #ffffff;
    border-radius: 6px;
    padding: 20px;
}
.sm-experiences__card--noimg span { font-weight: 600; font-size: 16px; }