/* =========================================================
   theme.css
   Page styles for /theme  (Automation Expo North 2026)

   Self-contained: this page loads menu.css, menu-fixes.css,
   responsive-fixes.css and footer.css only, so every rule the
   page body needs lives here. Prefix: .thm-
   ========================================================= */

:root {
    --thm-navy:      #01253f;
    --thm-navy-deep: #06304f;
    --thm-gold:      #ffca05;
    --thm-ink:       #0a1650;
    --thm-body:      #475569;
    --thm-line:      #e2e8f0;
    --thm-soft:      #f4f8fa;
    --thm-font:      "Roboto", Arial, sans-serif;
}

/*==========================================
   PRIMITIVES
==========================================*/

.thm-container {
    width: min(1320px, calc(100% - 40px));
    margin: 0 auto;
}

.thm-hero,
.thm-forces,
.thm-why {
    font-family: var(--thm-font);
}

.thm-hero h1,
.thm-forces h2,
.thm-forces h3,
.thm-why h2 {
    margin: 0;
    font-family: var(--thm-font);
    font-weight: 700;
    line-height: 1.18;
}

/*==========================================
   SCROLL REVEAL
   .is-in is added by the observer in the page.
==========================================*/

.thm-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s ease, transform .7s ease;
}

.thm-reveal.is-in {
    opacity: 1;
    transform: none;
}

/* Stagger the four cards so they cascade rather than pop together */
.thm-force-card:nth-child(2) { transition-delay: .10s; }
.thm-force-card:nth-child(3) { transition-delay: .20s; }
.thm-force-card:nth-child(4) { transition-delay: .30s; }

@media (prefers-reduced-motion: reduce) {
    .thm-reveal,
    .thm-force-card {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/*==========================================
   HERO
==========================================*/

.thm-hero {
    background: #ffffff;
    padding: 70px 0 60px;
}

.thm-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.thm-img-frame {
    position: relative;
    border: 5px solid #ffffff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 18px 45px rgba(1, 37, 63, .18);
    background: var(--thm-navy-deep);
    min-height: 320px;
}

.thm-img-frame img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
    object-fit: cover;
}

/* Shown until image/theme/theme-north-2026.webp is uploaded. The inline
   onerror adds .is-empty and removes the broken image, so the frame keeps
   its shape instead of showing a broken-image icon. Once the file exists
   this never triggers - nothing to undo later. */
.thm-img-frame.is-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--thm-navy-deep), #0a4570);
}

.thm-img-frame.is-empty::after {
    content: "\f03e";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 46px;
    color: rgba(255, 255, 255, .20);
}

.thm-tag {
    display: inline-flex;
    align-items: center;
    padding: 7px 16px;
    margin-bottom: 18px;
    border-radius: 50px;
    background: var(--thm-gold);
    color: #111111;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.thm-hero-copy h1 {
    font-size: clamp(30px, 3.4vw, 46px);
    color: var(--thm-ink);
    margin-bottom: 22px;
}

.thm-accent {
    color: #63005d;
}

.thm-hero-copy p {
    margin: 0 0 16px;
    color: var(--thm-body);
    font-size: 17px;
    line-height: 1.8;
}

.thm-hero-copy p:last-child {
    margin-bottom: 0;
}

/*==========================================
   FOUR FORCES
==========================================*/

.thm-forces {
    background: var(--thm-navy);
    padding: 64px 0;
}

.thm-section-title {
    max-width: 900px;
    margin: 0 auto 42px;
    text-align: center;
    color: #ffffff;
    font-size: clamp(24px, 2.6vw, 34px);
}

.thm-force-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 26px;
}

.thm-force-card {
    display: flex;
    flex-direction: column;
    background: #001524;
    border: 1px solid #2c2c2c;
    border-radius: 14px;
    overflow: hidden;
    transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease,
                opacity .7s ease;
}

.thm-force-card:hover {
    transform: translateY(-10px);
    border-color: #ffffff;
    box-shadow: 0 10px 25px rgba(255, 255, 255, .20);
}

.thm-force-img {
    position: relative;
    height: 300px;
    overflow: hidden;
    background: var(--thm-navy-deep);
}

.thm-force-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

.thm-force-card:hover .thm-force-img img {
    transform: scale(1.06);
}

/* Same graceful-degradation pattern as the hero frame */
.thm-force-img.is-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--thm-navy-deep), #0a4570);
}

.thm-force-img.is-empty::after {
    content: "\f03e";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 38px;
    color: rgba(255, 255, 255, .20);
}

.thm-force-num {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    padding: 6px 12px;
    border-radius: 50px;
    background: var(--thm-gold);
    color: #111111;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .5px;
}

.thm-force-body {
    padding: 22px 24px 26px;
}

.thm-force-body h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    color: #ffffff;
    font-size: 20px;
    font-weight: 600;
}

.thm-force-body h3 i {
    flex: 0 0 auto;
    font-size: 18px;
    color: var(--thm-gold);
}

.thm-force-body p {
    margin: 0;
    color: #d5d2d2;
    font-size: 15.5px;
    line-height: 1.75;
}

/*==========================================
   WHY THIS THEME MATTERS
==========================================*/

.thm-why {
    background: #ededed;
    padding: 60px 0;
}

.thm-why-box {
    background: #ffffff;
    border-radius: 14px;
    border-left: 6px solid #053365;
    padding: 34px 40px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, .08);
}

.thm-why-box h2 {
    margin-bottom: 18px;
    color: var(--thm-ink);
    font-size: clamp(24px, 2.6vw, 34px);
}

.thm-why-box p {
    margin: 0 0 14px;
    color: #333333;
    font-size: 17px;
    line-height: 1.8;
}

/*==========================================
   SHOW INFO STRIP
==========================================*/

.thm-showinfo {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 16px;
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid rgba(10, 22, 80, .15);
}

.thm-showinfo-name {
    font-size: 20px;
    font-weight: 700;
    color: var(--thm-ink);
}

.thm-showinfo-meta {
    font-size: 16px;
    color: #55636f;
}

.thm-showinfo-meta i {
    margin-right: 6px;
    color: #63005d;
}

.thm-showinfo-sep {
    margin: 0 10px;
    color: #c3cad3;
}

/*==========================================
   BUTTONS  (match the navbar CTA)
==========================================*/

.thm-btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
}

.thm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    min-width: 200px;
    padding: 0 28px;
    border: 2px solid var(--thm-gold);
    border-radius: 50px;
    background: var(--thm-gold);
    color: #111111;
    font-family: var(--thm-font);
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: all .3s ease;
}

.thm-btn:hover {
    background: #ffffff;
    border-color: #ffffff;
    color: #21145c;
    text-decoration: none;
    transform: translateY(-3px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, .25);
}

.thm-btn--ghost {
    background: transparent;
    border-color: var(--thm-ink);
    color: var(--thm-ink);
}

.thm-btn--ghost:hover {
    background: var(--thm-ink);
    border-color: var(--thm-ink);
    color: #ffffff;
}

/*==========================================
   RESPONSIVE
==========================================*/

@media (max-width: 992px) {
    .thm-hero-grid {
        grid-template-columns: 1fr;
        gap: 34px;
    }
    .thm-force-grid {
        grid-template-columns: 1fr;
    }
    .thm-why-box {
        padding: 28px 26px;
    }
}

@media (max-width: 768px) {
    .thm-hero {
        padding: 46px 0 40px;
    }
    .thm-forces,
    .thm-why {
        padding: 46px 0;
    }
    .thm-force-img {
        height: 250px;
    }
    .thm-hero-copy p,
    .thm-why-box p {
        font-size: 16px;
    }
    .thm-btn {
        width: 100%;
        min-width: 0;
        font-size: 16px;
        padding: 0 18px;
    }
}

@media (max-width: 575px) {
    .thm-showinfo {
        display: block;
    }
    .thm-showinfo-name {
        display: block;
        margin-bottom: 8px;
    }
    .thm-showinfo-sep {
        display: none;
    }
    .thm-showinfo-meta i {
        display: inline-block;
        margin-top: 6px;
    }
}