/* =========================================================
   RotoEdge — inner-page theme layer
   Brings every page other than home in line with the home page:
   one black canvas, red accents, Marcellus titles, Audiowide labels,
   red pill buttons, dark forms/FAQ/blog, and responsive clean-ups.
   (Home keeps its own section stylesheets; rules here are scoped to body:not(.home).)
========================================================= */

:root {
    --rs-red: #ff1f1f;
    --rs-bg: var(--e-global-color-primary, #000);
    --rs-panel: #0d0d0d;
    --rs-card: rgba(255, 255, 255, .035);
    --rs-line: rgba(255, 255, 255, .1);
    --rs-muted: rgba(255, 255, 255, .64);
}

/* ---------- one black canvas ---------- */
html body:not(.home) {
    background: var(--rs-bg) !important;
    color: var(--rs-muted);
}

/* Elementor section fills (#1E1E1E, #121212 …) become the canvas; background images are kept */
body:not(.home) #smooth-content .elementor .e-con.e-parent,
body:not(.home) #smooth-content .elementor .e-con.e-child:not([class*="-card"]) {
    background-color: transparent !important;
}

/* Elementor shape dividers (e.g. the white wedge under the About hero) take the canvas colour */
body:not(.home) .elementor-shape .elementor-shape-fill { fill: var(--rs-bg) !important; }

/* soft red glow behind the first screen, like the home hero */
body:not(.home) #smooth-content::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 720px;
    background: radial-gradient(ellipse 60% 70% at 50% 0%, rgba(255, 31, 31, .12), rgba(255, 31, 31, 0) 70%);
    pointer-events: none;
    z-index: 0;
}

body:not(.home) #smooth-content { position: relative; }
body:not(.home) #smooth-content > * { position: relative; z-index: 1; }

/* room for the fixed header so first headings never sit under it */
body:not(.home) #smooth-content > .elementor:first-child > .e-con:first-child,
body:not(.home) #smooth-content > section:first-child,
body:not(.home) #smooth-content > div:first-child > section:first-child {
    padding-top: max(var(--rs-top, 0px), 96px) !important;
}

/* ---------- typography ---------- */
body:not(.home) #smooth-content h1,
body:not(.home) #smooth-content h2,
body:not(.home) #smooth-content h3,
body:not(.home) #smooth-content h4,
body:not(.home) #smooth-content h5 {
    text-wrap: balance;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: manual;
}

body:not(.home) #smooth-content p { text-wrap: pretty; }

/* long single words in big titles (e.g. "Rotoscoping") scale down instead of splitting mid-word */
body:not(.home) #smooth-content .elementor-heading-title,
body:not(.home) #smooth-content .tp-section-title,
body:not(.home) #smooth-content .tp-hero-title { overflow-wrap: normal; word-break: keep-all; }

/* subtitle pills: same look as the home sections */
body:not(.home) .tp-section-subtitle-2 .tp-subtitle-text { color: #fff; }

/* ---------- buttons: red pill with an arrow chip, like "Start a Project" ---------- */
body:not(.home) #smooth-content a[class*="tp-btn"],
body:not(.home) #smooth-content button[class*="tp-btn"] {
    display: inline-flex !important;
    align-items: center;
    gap: 12px;
    min-height: 50px;
    padding: 0 10px 0 24px !important;
    border: 0 !important;
    border-radius: 40px !important;
    background: var(--rs-red) !important;
    font-family: "Audiowide", "Syne", sans-serif !important;
    font-size: 13px !important;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1 !important;
    color: #fff !important;
    box-shadow: 0 10px 28px rgba(255, 31, 31, .3);
    transition: background .3s ease, color .3s ease, transform .3s ease;
}

body:not(.home) #smooth-content a[class*="tp-btn"] > span,
body:not(.home) #smooth-content button[class*="tp-btn"] > span {
    display: inline-grid !important;
    place-items: center;
    width: 34px;
    height: 34px;
    margin: 0 !important;
    border-radius: 50%;
    background: #fff !important;
    color: #111 !important;
    overflow: hidden;
}

body:not(.home) #smooth-content a[class*="tp-btn"] > span svg,
body:not(.home) #smooth-content a[class*="tp-btn"] > span i { color: #111 !important; }

body:not(.home) #smooth-content a[class*="tp-btn"] > span svg path,
body:not(.home) #smooth-content a[class*="tp-btn"] > span svg circle { stroke: currentColor; }

body:not(.home) #smooth-content a[class*="tp-btn"]:hover,
body:not(.home) #smooth-content a[class*="tp-btn"]:focus-visible {
    background: #fff !important;
    color: #111 !important;
    transform: translateY(-2px);
}

body:not(.home) #smooth-content a[class*="tp-btn"]:hover > span { background: var(--rs-red) !important; color: #fff !important; }
body:not(.home) #smooth-content a[class*="tp-btn"]:hover > span svg { color: #fff !important; }

/* ---------- media: consistent rounded frames ---------- */
body:not(.home) #smooth-content .elementor-widget-image img,
body:not(.home) #smooth-content .elementor-widget-video .elementor-wrapper,
body:not(.home) #smooth-content .elementor-video,
body:not(.home) #smooth-content iframe[src*="youtube"] {
    border-radius: 18px;
}

body:not(.home) #smooth-content .elementor-widget-video .elementor-wrapper {
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(255, 31, 31, .3), 0 24px 60px rgba(0, 0, 0, .5);
}

/* ---------- lists in content: red dots ---------- */
body:not(.home) #smooth-content .elementor-icon-list-icon svg,
body:not(.home) #smooth-content .elementor-icon-list-icon i { fill: var(--rs-red); color: var(--rs-red); }

/* ---------- FAQ accordion ---------- */
body:not(.home) .accordion-items {
    margin-bottom: 12px;
    border: 1px solid var(--rs-line) !important;
    border-radius: 16px;
    background: var(--rs-card);
    overflow: hidden;
    transition: border-color .3s ease;
}

body:not(.home) .accordion-items:hover { border-color: rgba(255, 31, 31, .4) !important; }

body:not(.home) .accordion-buttons {
    padding: 20px 22px !important;
    font-size: clamp(16px, 1.4vw, 20px) !important;
    line-height: 1.35 !important;
    color: #fff !important;
}

body:not(.home) .accordion-buttons:not(.collapsed) { color: var(--rs-red) !important; }

body:not(.home) .accordion-body {
    padding: 0 22px 20px !important;
    font-size: 15px;
    line-height: 1.65;
    color: var(--rs-muted) !important;
}

/* ---------- forms (contact) ---------- */
body:not(.home) #smooth-content input[type="text"],
body:not(.home) #smooth-content input[type="email"],
body:not(.home) #smooth-content input[type="tel"],
body:not(.home) #smooth-content input[type="search"],
body:not(.home) #smooth-content textarea,
body:not(.home) #smooth-content select {
    width: 100%;
    padding: 14px 16px !important;
    border: 1px solid var(--rs-line) !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, .04) !important;
    font-size: 15px !important;
    color: #fff !important;
    transition: border-color .25s ease, box-shadow .25s ease;
}

body:not(.home) #smooth-content input::placeholder,
body:not(.home) #smooth-content textarea::placeholder { color: rgba(255, 255, 255, .4) !important; }

body:not(.home) #smooth-content input:focus,
body:not(.home) #smooth-content textarea:focus,
body:not(.home) #smooth-content select:focus {
    outline: none;
    border-color: var(--rs-red) !important;
    box-shadow: 0 0 0 3px rgba(255, 31, 31, .18);
}

body:not(.home) #smooth-content input[type="submit"],
body:not(.home) #smooth-content button[type="submit"],
body:not(.home) #smooth-content .wpcf7-submit {
    min-height: 52px;
    padding: 0 28px !important;
    border: 0 !important;
    border-radius: 40px !important;
    background: var(--rs-red) !important;
    font-family: "Audiowide", "Syne", sans-serif !important;
    font-size: 14px !important;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #fff !important;
    cursor: pointer;
    box-shadow: 0 10px 28px rgba(255, 31, 31, .3);
    transition: background .3s ease, color .3s ease;
}

body:not(.home) #smooth-content input[type="submit"]:hover,
body:not(.home) #smooth-content button[type="submit"]:hover,
body:not(.home) #smooth-content .wpcf7-submit:hover { background: #fff !important; color: #111 !important; }

/* contact card: glass panel instead of a flat grey box */
body:not(.home) #smooth-content form {
    color: var(--rs-muted);
}

body:not(.home) #smooth-content form label { color: #fff; font-size: 13px; letter-spacing: .04em; }

/* ---------- blog, archives and post pages (were a light theme) ---------- */
body:not(.home) .tp-postbox-area,
body:not(.home) .postbox__area,
body:not(.home) .tp-blog-area,
body:not(.home) .tp-blog-list-wrap { background: transparent !important; }

body:not(.home) .tp-postbox-item,
body:not(.home) .postbox__item,
body:not(.home) article.format-standard {
    padding: clamp(16px, 2vw, 24px);
    border: 1px solid var(--rs-line);
    border-radius: 22px;
    background: var(--rs-card);
}

body:not(.home) .tp-postbox-thumb img,
body:not(.home) .postbox__thumb img,
body:not(.home) .blog-details-thumb img { border-radius: 16px; }

body:not(.home) .tp-postbox-title a,
body:not(.home) .postbox__title a,
body:not(.home) .tp-postbox-title,
body:not(.home) .postbox__title,
body:not(.home) .blog-details-title,
body:not(.home) .tp-sidebar-widget-title,
body:not(.home) .sidebar__widget-title,
body:not(.home) .tp-sidebar-widget h3,
body:not(.home) .tp-sidebar-widget h4,
body:not(.home) .widget-title,
body:not(.home) .wp-block-heading {
    font-family: "Marcellus", serif !important;
    font-weight: 400 !important;
    color: #fff !important;
}

body:not(.home) .tp-postbox-title a:hover,
body:not(.home) .postbox__title a:hover { color: var(--rs-red) !important; }

body:not(.home) .tp-postbox-meta span,
body:not(.home) .tp-postbox-meta a,
body:not(.home) .postbox__meta span,
body:not(.home) .postbox__meta a,
body:not(.home) .blog-details-top-meta span,
body:not(.home) .tp-postbox-content p,
body:not(.home) .postbox__text p,
body:not(.home) .blog-details-content p,
body:not(.home) .tp-sidebar-widget,
body:not(.home) .tp-sidebar-widget a,
body:not(.home) .sidebar__widget a {
    color: var(--rs-muted) !important;
}

body:not(.home) .tp-sidebar-widget a:hover,
body:not(.home) .sidebar__widget a:hover { color: #fff !important; }

body:not(.home) .tp-sidebar-widget,
body:not(.home) .sidebar__widget {
    padding: 22px;
    border: 1px solid var(--rs-line);
    border-radius: 18px;
    background: var(--rs-card);
}

body:not(.home) .tagcloud a,
body:not(.home) .tag-cloud-link {
    display: inline-block;
    margin: 0 6px 8px 0;
    padding: 6px 12px !important;
    border: 1px solid rgba(255, 31, 31, .35) !important;
    border-radius: 30px;
    background: rgba(255, 31, 31, .06) !important;
    font-size: 12px !important;
    color: #fff !important;
}

body:not(.home) .tagcloud a:hover { background: var(--rs-red) !important; }

/* search button next to the sidebar field */
body:not(.home) .tp-sidebar-search-input button,
body:not(.home) .wp-block-search__button,
body:not(.home) .search-form button {
    border-radius: 12px !important;
    background: var(--rs-red) !important;
    color: #fff !important;
}

/* ---------- archive / portfolio post lists ---------- */
body:not(.home) .tp-blog-list-title-sm,
body:not(.home) .tp-blog-list-title-sm a { color: #fff !important; font-family: "Marcellus", serif !important; }

/* ---------- responsive clean-ups ---------- */
body:not(.home) #smooth-content .elementor img { max-width: 100%; height: auto; }

@media (max-width: 1024px) {
    body:not(.home) #smooth-content .elementor-heading-title { overflow-wrap: anywhere; word-break: normal; }
}

@media (max-width: 767px) {
    body:not(.home) #smooth-content > .elementor:first-child > .e-con:first-child,
    body:not(.home) #smooth-content > section:first-child,
    body:not(.home) #smooth-content > div:first-child > section:first-child { padding-top: 84px !important; }

    /* keep side gutters on edge-to-edge Elementor rows */
    body:not(.home) #smooth-content .e-con.e-parent { --padding-left: 16px; --padding-right: 16px; }

    body:not(.home) #smooth-content a[class*="tp-btn"] { min-height: 46px; }

    body:not(.home) .accordion-buttons { padding: 16px 18px !important; }
    body:not(.home) .accordion-body { padding: 0 18px 16px !important; }
}

/* ---------- poster carousel (same 2:3 cards as the home page) ---------- */
body:not(.home) .tp-gallery-area .tp-gallery-shape-1,
body:not(.home) .tp-gallery-area .tp-gallery-shape-2 { display: none; }

body:not(.home) .tp-gallery-area { padding: clamp(24px, 4vw, 56px) 0; }

body:not(.home) .tp-gallery-slider-active .tp-gallery-item {
    overflow: hidden;
    border-radius: 12px;
    background: #1a1a1a;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .55);
}

body:not(.home) .tp-gallery-slider-active .tp-gallery-item img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    object-position: center top;
    border-radius: 0;
}

/* ---------- contact page ---------- */
body:not(.home) .elementor-widget-google_maps .elementor-custom-embed {
    overflow: hidden;
    border: 1px solid var(--rs-line);
    border-radius: 22px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}

body:not(.home) .elementor-widget-google_maps iframe {
    display: block;
    border-radius: 22px;
    filter: grayscale(.35) contrast(1.05);
}

body:not(.home) .cn-contactform-wrap {
    padding: clamp(24px, 3vw, 40px);
    border: 1px solid rgba(255, 31, 31, .28);
    border-radius: 22px;
    background:
        radial-gradient(ellipse 80% 60% at 100% 0%, rgba(255, 31, 31, .14), rgba(255, 31, 31, 0) 70%),
        linear-gradient(160deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015));
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}

body:not(.home) .cn-contactform-2-title {
    margin-bottom: 22px !important;
    font-family: "Audiowide", "Syne", sans-serif !important;
    font-size: clamp(20px, 2vw, 28px) !important;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #fff !important;
}

/* stray headings that fell back to the system font use the section title face */
body:not(.home) #smooth-content .elementor-widget-heading .elementor-heading-title[class*="elementor-size"] {
    font-family: "Marcellus", serif;
}

/* contact map + form row keeps side gutters */
body:not(.home) .elementor-widget-google_maps { padding: 0 clamp(0px, 1vw, 12px); }

/* ---------- blog sidebar search: compact button ---------- */
body:not(.home) .tp-sidebar-widget button,
body:not(.home) .sidebar__widget button,
body:not(.home) #smooth-content .tp-sidebar-wrapper button[type="submit"],
body:not(.home) #smooth-content .tp-sidebar-wrapper input[type="submit"] {
    min-height: 44px;
    padding: 0 16px !important;
    font-family: inherit !important;
    font-size: 13px !important;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    box-shadow: none;
}

/* ---------- Innovation: feature columns become glass cards ---------- */
.elementor-page-15778 #smooth-content .e-con.e-child:has(> .elementor-widget-tp-list) {
    padding: clamp(22px, 2.4vw, 32px) !important;
    border: 1px solid var(--rs-line);
    border-radius: 22px;
    background-image: linear-gradient(160deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015)) !important;
    transition: transform .4s cubic-bezier(.2, .8, .2, 1), border-color .4s ease, box-shadow .4s ease;
}

.elementor-page-15778 #smooth-content .e-con.e-child:has(> .elementor-widget-tp-list):hover {
    transform: translateY(-4px);
    border-color: rgba(255, 31, 31, .45);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .45), 0 0 34px rgba(255, 31, 31, .12);
}

/* inner-page lists: red dot + soft divider, like the home cards */
body:not(.home) .ab-about-category-list ul { margin: 0; padding: 0; list-style: none; }

body:not(.home) .ab-about-category-list li {
    position: relative;
    padding: 8px 0 8px 20px;
    border-bottom: 1px dashed rgba(255, 255, 255, .08);
    color: #fff;
}

body:not(.home) .ab-about-category-list li:last-child { border-bottom: 0; }

body:not(.home) .ab-about-category-list li::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 2px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--rs-red);
    box-shadow: 0 0 8px rgba(255, 31, 31, .7);
    transform: translateY(-50%);
}

body:not(.home) .ab-about-category-list li > span,
body:not(.home) .ab-about-category-list li > i,
body:not(.home) .ab-about-category-list li > svg { display: none; }

/* big closing lines stay readable on phones */
@media (max-width: 767px) {
    body:not(.home) #smooth-content .elementor-widget-heading .elementor-heading-title.elementor-size-default {
        font-size: min(1em, 9vw);
    }
}

.elementor-page-15778 #smooth-content .e-con.e-parent:has(.elementor-widget-tp-list) {
    --padding-left: clamp(16px, 3vw, 48px);
    --padding-right: clamp(16px, 3vw, 48px);
    --gap: clamp(14px, 1.6vw, 24px);
    gap: clamp(14px, 1.6vw, 24px);
    padding-left: clamp(16px, 3vw, 48px) !important;
    padding-right: clamp(16px, 3vw, 48px) !important;
}

/* =========================================================
   Rhythm, balance and motion — taken from the home page
========================================================= */

/* section rhythm: home sections use ~32–56px per side, so neighbours sit ≤112px apart */
body:not(.home) #smooth-content .e-con.e-parent {
    --padding-top: clamp(28px, 3vw, 48px);
    --padding-bottom: clamp(28px, 3vw, 48px);
    --margin-top: 0px;
    --margin-bottom: 0px;
}

/* the theme's oversized spacing utilities */
body:not(.home) #smooth-content .pt-120,
body:not(.home) #smooth-content .pt-170 { padding-top: clamp(32px, 3.5vw, 56px) !important; }

body:not(.home) #smooth-content .pb-80,
body:not(.home) #smooth-content .pb-120,
body:not(.home) #smooth-content .pb-170 { padding-bottom: clamp(32px, 3.5vw, 56px) !important; }

body:not(.home) #smooth-content .mb-80,
body:not(.home) #smooth-content .mb-100,
body:not(.home) #smooth-content .mb-115 { margin-bottom: clamp(24px, 3vw, 40px) !important; }

body:not(.home) #smooth-content .mb-45,
body:not(.home) #smooth-content .mb-50 { margin-bottom: clamp(18px, 2.2vw, 30px) !important; }

/* section titles: the home size, not the theme's 90px display type */
body:not(.home) #smooth-content .tp-section-title-90,
body:not(.home) #smooth-content .tp-portfolio-9-title {
    font-family: "Marcellus", serif !important;
    font-weight: 400 !important;
    font-size: clamp(32px, 3.8vw, 58px) !important;
    line-height: 1.08 !important;
    letter-spacing: 0 !important;
}

body:not(.home) #smooth-content .tp-section-subtitle-2 { margin-bottom: 14px; }

/* body copy: one comfortable measure everywhere */
body:not(.home) #smooth-content .elementor-widget-text-editor,
body:not(.home) #smooth-content .elementor-widget-text-editor p,
body:not(.home) #smooth-content .elementor-widget-tp-heading p,
body:not(.home) #smooth-content .tp-el-content {
    font-size: clamp(15px, 1.05vw, 16.5px);
    line-height: 1.7;
    color: var(--rs-muted);
}

/* small bold labels the theme set in Title Case at heavy weight read as clutter — calmer eyebrow style */
body:not(.home) #smooth-content .elementor-widget-heading h2.elementor-heading-title.elementor-size-default:only-child {
    text-wrap: balance;
}

/* consistent gaps inside rows */
body:not(.home) #smooth-content .e-con { --widgets-spacing: 16px 16px; --widgets-spacing-row: 16px; }

/* scroll motion lives in css/re-chrome.css ("Motion") */

@media (max-width: 767px) {
    body:not(.home) #smooth-content .e-con.e-parent {
        --padding-top: 28px;
        --padding-bottom: 28px;
    }
}

/* Our Work: the project divider bar uses the brand red instead of the theme's purple gradient */
body:not(.home) .tp-project-3-border,
body:not(.home) .tp-el-portfolio-gradient-border {
    background: linear-gradient(90deg, rgba(255, 31, 31, 0), var(--rs-red) 50%, rgba(255, 31, 31, 0)) !important;
    box-shadow: 0 0 14px rgba(255, 31, 31, .45);
}
