/*
Theme Name: Kanberra Edition
Theme URI: https://instagram.com/nig.8t
Author: MAGS
Author URI: https://t.me/nig8tech
Description: Kanberra Edition — a blank, fully editable WordPress theme for travel service businesses including Umrah packages, flight ticket booking, visa services, hotel reservations, and complete travel solutions. Every element (header, footer, navigation, sections, colors, content, login screen, scrollbar) is editable from the WordPress admin dashboard. Includes 10 theme presets, logo size controls, per-section enable/disable toggles, custom login branding, and full multi-device responsiveness.
Version: 1.06.2026
Developer: MAGS
Author: Mohammed Abbas Gafur
Email: Telangana@Engineer.com
Instagram: nig.8t
Telegram: nig8tech
Requires at least: 5.5
Tested up to: 6.4
Requires PHP: 7.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: travel-services
Tags: travel, business, custom-colors, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, two-columns, three-columns, four-columns, right-sidebar, left-sidebar, full-width-template, theme-options, e-commerce
*/

/* ==========================================================================
   Table of Contents
   ==========================================================================
   1.  CSS Variables (Dynamic - controlled via Customizer)
   2.  Reset & Base
   3.  Typography
   4.  Layout & Containers
   5.  Header
   6.  Navigation
   7.  Hero Section
   8.  Services Section
   9.  Packages Section
   10. Testimonials Section
   11. Contact / CTA Section
   12. Footer
   13. Single Post / Page
   14. Archive / Blog
   15. Sidebar & Widgets
   16. Forms
   17. 404 Page
   18. Responsive
   19. Utilities
   ========================================================================== */

/* ==========================================================================
   1. CSS Variables — Overridden by Customizer inline styles
   ========================================================================== */
:root {
    --ts-primary: #0d6efd;
    --ts-primary-dark: #0a58ca;
    --ts-secondary: #f59f00;
    --ts-accent: #20c997;
    --ts-dark: #1a2332;
    --ts-light: #f8f9fa;
    --ts-text: #2c3e50;
    --ts-text-muted: #6c757d;
    --ts-border: #e9ecef;
    --ts-white: #ffffff;
    --ts-success: #198754;
    --ts-danger: #dc3545;
    --ts-font-heading: 'Poppins', 'Segoe UI', Tahoma, sans-serif;
    --ts-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --ts-container-width: 1200px;
    --ts-header-height: 80px;
    --ts-radius: 8px;
    --ts-radius-lg: 16px;
    --ts-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    --ts-shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.15);
    --ts-transition: all 0.3s ease;
}

/* ==========================================================================
   2. Reset & Base
   ========================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--ts-font-body);
    color: var(--ts-text);
    background-color: var(--ts-light);
    line-height: 1.6;
    font-size: 1rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--ts-primary);
    text-decoration: none;
    transition: var(--ts-transition);
}

a:hover {
    color: var(--ts-primary-dark);
    text-decoration: underline;
}

ul,
ol {
    list-style-position: inside;
}

/* ==========================================================================
   3. Typography
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--ts-font-heading);
    font-weight: 700;
    line-height: 1.25;
    color: var(--ts-dark);
    margin-bottom: 0.75em;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1.125rem; }

p {
    margin-bottom: 1.2em;
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
    margin-top: 1.5em;
}

/* ==========================================================================
   4. Layout & Containers
   ========================================================================== */
.ts-container {
    width: 100%;
    max-width: var(--ts-container-width);
    margin: 0 auto;
    padding: 0 20px;
}

.ts-content-area {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 60px 0;
}

.ts-content-area.has-sidebar {
    grid-template-columns: 1fr 320px;
}

@media (max-width: 992px) {
    .ts-content-area.has-sidebar {
        grid-template-columns: 1fr;
    }
}

.ts-section {
    padding: 80px 0;
}

.ts-section-title {
    text-align: center;
    margin-bottom: 50px;
}

.ts-section-title h2 {
    font-size: 2.25rem;
    margin-bottom: 12px;
    text-transform: capitalize;
}

.ts-section-title p {
    color: var(--ts-text-muted);
    font-size: 1.05rem;
    max-width: 600px;
    margin: 0 auto;
}

.ts-section-title .ts-divider {
    width: 60px;
    height: 4px;
    background: var(--ts-secondary);
    margin: 16px auto 0;
    border-radius: 2px;
}

/* ==========================================================================
   5. Header
   ========================================================================== */
.ts-header {
    position: relative;
    z-index: 1000;
    background: var(--ts-white);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.ts-topbar {
    background: var(--ts-dark);
    color: var(--ts-on-dark);
    font-size: 0.875rem;
    padding: 8px 0;
}

.ts-topbar-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.ts-topbar a {
    color: var(--ts-on-dark);
    margin-left: 16px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ts-topbar a:hover {
    color: var(--ts-secondary);
}

.ts-topbar .ts-topbar-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.ts-header-main {
    padding: 16px 0;
}

.ts-header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
}

.ts-site-branding {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ts-site-logo img {
    max-height: 60px;
    width: auto;
}

.ts-site-title-text .ts-site-name {
    font-family: var(--ts-font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ts-dark);
    margin: 0;
    line-height: 1.2;
}

.ts-site-title-text .ts-site-tagline {
    font-size: 0.8rem;
    color: var(--ts-text-muted);
    margin: 0;
}

.ts-header-cta {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ts-header-contact {
    display: flex;
    flex-direction: column;
    font-size: 0.875rem;
    text-align: right;
}

.ts-header-contact strong {
    color: var(--ts-dark);
    font-size: 1rem;
}

/* ==========================================================================
   6. Navigation
   ========================================================================== */
.ts-nav {
    background: var(--ts-primary);
    padding: 0;
}

.ts-nav .ts-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ts-nav .ts-menu > li > a {
    color: var(--ts-white);
    padding: 14px 20px;
    display: block;
    font-weight: 500;
    text-transform: capitalize;
    transition: var(--ts-transition);
}

.ts-nav .ts-menu > li > a:hover,
.ts-nav .ts-menu > li.current-menu-item > a {
    background: var(--ts-primary-dark);
    text-decoration: none;
}

.ts-nav .ts-menu ul {
    position: absolute;
    background: var(--ts-white);
    min-width: 220px;
    box-shadow: var(--ts-shadow);
    list-style: none;
    padding: 0;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: var(--ts-transition);
}

.ts-nav .ts-menu li {
    position: relative;
}

.ts-nav .ts-menu li:hover > ul {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.ts-nav .ts-menu ul a {
    color: var(--ts-text);
    padding: 10px 18px;
    display: block;
    border-bottom: 1px solid var(--ts-border);
}

.ts-nav .ts-menu ul a:hover {
    background: var(--ts-light);
    color: var(--ts-primary);
}

.ts-menu-toggle {
    display: none;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
}

.ts-menu-toggle span {
    display: block;
    width: 26px;
    height: 3px;
    background: var(--ts-dark);
    margin: 5px 0;
    transition: var(--ts-transition);
}

@media (max-width: 992px) {
    .ts-menu-toggle {
        display: block;
    }

    .ts-nav .ts-menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--ts-primary);
        flex-direction: column;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease;
    }

    .ts-nav.menu-open .ts-menu {
        max-height: 500px;
        overflow-y: auto;
    }
}

/* ==========================================================================
   7. Hero Section
   ========================================================================== */
.ts-hero {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #ffffff;
    padding: 120px 0;
    text-align: center;
}

/* Dark overlay only over actual image backgrounds — gradient heroes don't need it. */
.ts-hero.has-bg-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 1;
}

/* Gradient hero keeps the gradient fully visible. */
.ts-hero.has-bg-gradient::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.15);
    z-index: 1;
}

.ts-hero .ts-container {
    position: relative;
    z-index: 2;
}

.ts-hero h1 {
    color: var(--ts-white);
    font-size: 3rem;
    margin-bottom: 20px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.ts-hero p {
    font-size: 1.15rem;
    max-width: 720px;
    margin: 0 auto 30px;
    opacity: 0.95;
}

.ts-hero-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.ts-btn {
    display: inline-block;
    padding: 12px 30px;
    border-radius: var(--ts-radius);
    font-weight: 600;
    text-transform: capitalize;
    transition: var(--ts-transition);
    cursor: pointer;
    border: 2px solid transparent;
    font-size: 0.95rem;
}

.ts-btn-primary {
    background: var(--ts-primary);
    color: var(--ts-white);
    border-color: var(--ts-primary);
}

.ts-btn-primary:hover {
    background: var(--ts-primary-dark);
    border-color: var(--ts-primary-dark);
    color: var(--ts-white);
    transform: translateY(-2px);
    text-decoration: none;
}

.ts-btn-secondary {
    background: var(--ts-secondary);
    color: var(--ts-white);
    border-color: var(--ts-secondary);
}

.ts-btn-secondary:hover {
    background: #d48806;
    border-color: #d48806;
    color: var(--ts-white);
    transform: translateY(-2px);
    text-decoration: none;
}

.ts-btn-outline {
    background: transparent;
    color: var(--ts-white);
    border-color: var(--ts-white);
}

.ts-btn-outline:hover {
    background: var(--ts-white);
    color: var(--ts-primary);
    text-decoration: none;
}

/* ==========================================================================
   8. Services Section
   ========================================================================== */
.ts-services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.ts-service-card {
    background: var(--ts-white);
    border-radius: var(--ts-radius-lg);
    padding: 40px 30px;
    text-align: center;
    box-shadow: var(--ts-shadow);
    transition: var(--ts-transition);
    border: 1px solid var(--ts-border);
}

.ts-service-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--ts-shadow-hover);
}

.ts-service-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    background: linear-gradient(135deg, var(--ts-primary), var(--ts-accent));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--ts-white);
}

.ts-service-card h3 {
    font-size: 1.25rem;
    margin-bottom: 12px;
}

.ts-service-card p {
    color: var(--ts-text-muted);
    margin-bottom: 18px;
    font-size: 0.95rem;
}

/* ==========================================================================
   9. Packages Section
   ========================================================================== */
.ts-packages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
}

.ts-package-card {
    background: var(--ts-white);
    border-radius: var(--ts-radius-lg);
    overflow: hidden;
    box-shadow: var(--ts-shadow);
    transition: var(--ts-transition);
    border: 1px solid var(--ts-border);
}

.ts-package-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--ts-shadow-hover);
}

.ts-package-image {
    position: relative;
    height: 220px;
    overflow: hidden;
}

.ts-package-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--ts-transition);
}

.ts-package-card:hover .ts-package-image img {
    transform: scale(1.05);
}

.ts-package-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    background: var(--ts-secondary);
    color: var(--ts-white);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.ts-package-body {
    padding: 24px;
}

.ts-package-body h3 {
    font-size: 1.25rem;
    margin-bottom: 10px;
}

.ts-package-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 14px;
    font-size: 0.875rem;
    color: var(--ts-text-muted);
}

.ts-package-meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.ts-package-features {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
}

.ts-package-features li {
    padding: 6px 0;
    border-bottom: 1px dashed var(--ts-border);
    font-size: 0.9rem;
    position: relative;
    padding-left: 24px;
}

.ts-package-features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--ts-success);
    font-weight: bold;
}

.ts-package-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--ts-border);
    padding-top: 16px;
    margin-top: 16px;
}

.ts-package-price {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ts-primary);
}

.ts-package-price small {
    font-size: 0.8rem;
    color: var(--ts-text-muted);
    font-weight: 400;
}

/* ==========================================================================
   10. Testimonials Section
   ========================================================================== */
.ts-testimonials {
    background: var(--ts-dark);
    color: var(--ts-on-dark);
}

.ts-testimonials .ts-section-title h2 {
    color: var(--ts-on-dark);
}

.ts-testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.ts-testimonial-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--ts-radius-lg);
    padding: 30px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.ts-testimonial-text {
    font-style: italic;
    margin-bottom: 20px;
    opacity: 0.9;
}

.ts-testimonial-author {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ts-testimonial-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--ts-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--ts-white);
}

.ts-testimonial-author-info strong {
    display: block;
    color: var(--ts-white);
}

.ts-testimonial-author-info span {
    font-size: 0.85rem;
    opacity: 0.7;
}

/* ==========================================================================
   11. Contact / CTA Section
   ========================================================================== */
.ts-cta {
    background: linear-gradient(135deg, var(--ts-primary), var(--ts-primary-dark));
    color: var(--ts-white);
    text-align: center;
    padding: 70px 0;
}

.ts-cta h2 {
    color: var(--ts-white);
    font-size: 2.25rem;
    margin-bottom: 16px;
}

.ts-cta p {
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto 28px;
    opacity: 0.95;
}

/* ==========================================================================
   12. Footer
   ========================================================================== */
.ts-footer {
    background: var(--ts-dark);
    color: var(--ts-white);
    padding: 60px 0 0;
}

.ts-footer-widgets {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    margin-bottom: 40px;
}

/* When only some columns are populated, the empty ones still take a slot.
   Use the body class .ts-footer-cols-N to balance the layout. */
body.ts-footer-cols-1 .ts-footer-widgets { grid-template-columns: 1fr; }
body.ts-footer-cols-2 .ts-footer-widgets { grid-template-columns: repeat(2, 1fr); }
body.ts-footer-cols-3 .ts-footer-widgets { grid-template-columns: repeat(3, 1fr); }
body.ts-footer-cols-4 .ts-footer-widgets { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 768px) {
    body.ts-footer-cols-2 .ts-footer-widgets,
    body.ts-footer-cols-3 .ts-footer-widgets,
    body.ts-footer-cols-4 .ts-footer-widgets {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .ts-footer-widgets {
        grid-template-columns: 1fr !important;
    }
}

.ts-footer-col.is-empty {
    min-height: 1px;
}

.ts-footer-widgets .widget {
    margin: 0;
}

.ts-footer-widgets .widget-title {
    color: var(--ts-white);
    font-size: 1.1rem;
    margin-bottom: 18px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--ts-primary);
    display: inline-block;
}

.ts-footer-widgets ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ts-footer-widgets ul li {
    padding: 6px 0;
}

.ts-footer-widgets a {
    color: rgba(255, 255, 255, 0.75);
}

.ts-footer-widgets a:hover {
    color: var(--ts-secondary);
}

.ts-footer-widgets p {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.9rem;
}

.ts-social-icons {
    display: flex;
    gap: 10px;
    margin-top: 14px;
}

.ts-social-icons a {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ts-white);
    transition: var(--ts-transition);
}

.ts-social-icons a:hover {
    background: var(--ts-secondary);
    color: var(--ts-white);
    transform: translateY(-3px);
}

.ts-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 20px 0;
    text-align: center;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
}

.ts-footer-bottom a {
    color: var(--ts-secondary);
}

/* ==========================================================================
   13. Single Post / Page
   ========================================================================== */
.ts-single {
    background: var(--ts-white);
    border-radius: var(--ts-radius-lg);
    padding: 40px;
    box-shadow: var(--ts-shadow);
}

.ts-single .entry-header {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--ts-border);
}

.ts-single .entry-title {
    font-size: 2rem;
    margin-bottom: 12px;
}

.ts-single .entry-meta {
    color: var(--ts-text-muted);
    font-size: 0.875rem;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.ts-single .entry-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ts-single .post-thumbnail {
    margin-bottom: 30px;
    border-radius: var(--ts-radius);
    overflow: hidden;
}

.ts-single .entry-content {
    line-height: 1.8;
}

.ts-single .entry-content p {
    margin-bottom: 1.5em;
}

.ts-single .entry-content img {
    border-radius: var(--ts-radius);
    margin: 20px 0;
}

.ts-single .entry-content blockquote {
    border-left: 4px solid var(--ts-primary);
    padding: 16px 24px;
    margin: 20px 0;
    background: var(--ts-light);
    border-radius: 0 var(--ts-radius) var(--ts-radius) 0;
    font-style: italic;
}

/* ==========================================================================
   14. Archive / Blog
   ========================================================================== */
.ts-archive-header {
    background: var(--ts-dark);
    color: var(--ts-on-dark);
    padding: 50px 0;
    text-align: center;
    margin-bottom: 40px;
}

.ts-archive-header h1 {
    color: var(--ts-on-dark);
    margin-bottom: 8px;
}

.ts-archive-header .breadcrumb {
    color: var(--ts-on-dark);
    opacity: 0.75;
    font-size: 0.9rem;
}

.ts-archive-header .breadcrumb a {
    color: var(--ts-secondary);
}

.ts-post-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
}

.ts-post-card {
    background: var(--ts-white);
    border-radius: var(--ts-radius-lg);
    overflow: hidden;
    box-shadow: var(--ts-shadow);
    transition: var(--ts-transition);
}

.ts-post-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--ts-shadow-hover);
}

.ts-post-card .post-thumbnail {
    height: 200px;
    overflow: hidden;
}

.ts-post-card .post-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ts-post-card .ts-post-body {
    padding: 22px;
}

.ts-post-card .entry-title {
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.ts-post-card .entry-meta {
    font-size: 0.825rem;
    color: var(--ts-text-muted);
    margin-bottom: 12px;
}

/* ==========================================================================
   15. Sidebar & Widgets
   ========================================================================== */
.ts-sidebar .widget {
    background: var(--ts-white);
    border-radius: var(--ts-radius);
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: var(--ts-shadow);
}

.ts-sidebar .widget-title,
.widget-title {
    font-size: 1.15rem;
    margin-bottom: 18px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--ts-border);
    color: var(--ts-dark);
}

.ts-sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ts-sidebar ul li {
    padding: 8px 0;
    border-bottom: 1px solid var(--ts-border);
}

.ts-sidebar ul li:last-child {
    border-bottom: none;
}

/* ==========================================================================
   16. Forms
   ========================================================================== */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
textarea,
select {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--ts-border);
    border-radius: var(--ts-radius);
    font-family: inherit;
    font-size: 0.95rem;
    background: var(--ts-white);
    transition: var(--ts-transition);
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--ts-primary);
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15);
}

textarea {
    min-height: 120px;
    resize: vertical;
}

/* ==========================================================================
   17. 404 Page
   ========================================================================== */
.ts-404 {
    text-align: center;
    padding: 100px 20px;
}

.ts-404 h1 {
    font-size: 8rem;
    color: var(--ts-primary);
    margin-bottom: 10px;
    line-height: 1;
}

.ts-404 h2 {
    font-size: 1.75rem;
    margin-bottom: 16px;
}

.ts-404 p {
    color: var(--ts-text-muted);
    max-width: 500px;
    margin: 0 auto 28px;
}

/* ==========================================================================
   Pagination
   ========================================================================== */
.ts-pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 50px;
}

.ts-pagination .page-numbers {
    padding: 10px 16px;
    border: 1px solid var(--ts-border);
    border-radius: var(--ts-radius);
    background: var(--ts-white);
    color: var(--ts-text);
    transition: var(--ts-transition);
}

.ts-pagination .page-numbers.current,
.ts-pagination .page-numbers:hover {
    background: var(--ts-primary);
    color: var(--ts-white);
    border-color: var(--ts-primary);
    text-decoration: none;
}

/* ==========================================================================
   18. Responsive
   ========================================================================== */
@media (max-width: 992px) {
    h1 { font-size: 2rem; }
    h2 { font-size: 1.75rem; }
    .ts-hero h1 { font-size: 2.25rem; }
    .ts-section { padding: 60px 0; }
    .ts-header-cta .ts-header-contact { display: none; }
}

@media (max-width: 768px) {
    .ts-topbar-inner {
        flex-direction: column;
        text-align: center;
    }
    .ts-topbar-right { flex-wrap: wrap; justify-content: center; }
    .ts-header-inner {
        flex-direction: column;
        text-align: center;
    }
    .ts-hero { padding: 80px 0; }
    .ts-hero h1 { font-size: 1.85rem; }
    .ts-hero p { font-size: 1rem; }
    .ts-hero-buttons { flex-direction: column; }
    .ts-hero-buttons .ts-btn { width: 100%; }
    .ts-404 h1 { font-size: 5rem; }
    .ts-single { padding: 24px; }
}

@media (max-width: 480px) {
    .ts-section-title h2 { font-size: 1.5rem; }
    .ts-package-footer { flex-direction: column; gap: 12px; align-items: stretch; }
    .ts-package-footer .ts-btn { text-align: center; }
}

/* ==========================================================================
   19. Utilities
   ========================================================================== */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }
.mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; }
.mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; }
.pt-1 { padding-top: 8px; } .pt-2 { padding-top: 16px; } .pt-3 { padding-top: 24px; }
.pb-1 { padding-bottom: 8px; } .pb-2 { padding-bottom: 16px; } .pb-3 { padding-bottom: 24px; }
.d-none { display: none; }
.d-block { display: block; }
.d-flex { display: flex; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: 8px; } .gap-2 { gap: 16px; } .gap-3 { gap: 24px; }

.alignleft { float: left; margin-right: 1.5em; margin-bottom: 1em; }
.alignright { float: right; margin-left: 1.5em; margin-bottom: 1em; }
.aligncenter { display: block; margin: 1.5em auto; }

.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 0.85rem; color: var(--ts-text-muted); text-align: center; margin-top: 6px; }

.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--ts-primary);
    color: var(--ts-white);
    padding: 10px 20px;
    z-index: 9999;
}

.skip-link:focus {
    left: 0;
    color: var(--ts-white);
}

.sticky { display: block; }
.bypostauthor { display: block; }

/* ==========================================================================
   20. AUTOMATIC CONTRAST — Dark backgrounds get light text & vice versa
   ==========================================================================
   The --ts-on-* variables are computed in functions.php based on the
   luminance of each base color. We use them everywhere a background is
   set from a palette color so text is ALWAYS readable.
   ========================================================================== */

.ts-topbar,
.ts-topbar a,
.ts-topbar span,
.ts-topbar a:hover {
    color: var(--ts-on-dark);
}

.ts-footer,
.ts-footer p,
.ts-footer li,
.ts-footer span {
    color: var(--ts-on-dark);
}

.ts-footer a {
    color: var(--ts-on-dark);
    opacity: 0.85;
}
.ts-footer a:hover {
    opacity: 1;
    color: var(--ts-secondary);
}

.ts-footer .widget-title {
    color: var(--ts-on-dark);
}

.ts-footer-bottom,
.ts-footer-bottom p,
.ts-footer-bottom a {
    color: var(--ts-on-dark);
    opacity: 0.75;
}
.ts-footer-bottom a:hover {
    opacity: 1;
    color: var(--ts-secondary);
}

.ts-archive-header,
.ts-archive-header h1,
.ts-archive-header .breadcrumb,
.ts-archive-header .breadcrumb a,
.ts-archive-header .breadcrumb span {
    color: var(--ts-on-dark);
}

.ts-testimonials,
.ts-testimonials .ts-section-title h2,
.ts-testimonials .ts-testimonial-author-info strong {
    color: var(--ts-on-dark);
}

.ts-testimonials .ts-testimonial-text,
.ts-testimonials .ts-testimonial-author-info span {
    color: var(--ts-on-dark);
    opacity: 0.85;
}

.ts-cta,
.ts-cta h2,
.ts-cta p {
    color: var(--ts-primary);
}

/* Force hero text to be white on dark overlay regardless of preset. */
.ts-hero h1,
.ts-hero p,
.ts-hero a {
    color: #ffffff;
}

/* Buttons always use contrast-aware text. */
.ts-btn-primary,
.ts-btn-primary:hover {
    color: var(--ts-on-primary);
}
.ts-btn-secondary,
.ts-btn-secondary:hover {
    color: var(--ts-on-secondary);
}

/* Stats section uses primary background — text always contrast-safe. */
.ts-stats-section,
.ts-stats-section div,
.ts-stats-section span {
    color: #ffffff;
}

/* Top bar social icons always light on dark background. */
.ts-topbar-social a {
    color: var(--ts-on-dark);
    opacity: 0.9;
}
.ts-topbar-social a:hover {
    opacity: 1;
    color: var(--ts-secondary);
}

/* Footer social icons stay readable on dark footer. */
.ts-footer .ts-social-icons a {
    color: var(--ts-on-dark);
}

/* ==========================================================================
   21. HEADER STYLE VARIANTS (light / dark / transparent / glass)
   ========================================================================== */

/* Light header (default) — dark text on white background. */
body.ts-header-light .ts-header {
    background: var(--ts-white);
    color: var(--ts-text);
}
body.ts-header-light .ts-site-title-text .ts-site-name,
body.ts-header-light .ts-site-title-text .ts-site-name a {
    color: var(--ts-dark);
}
body.ts-header-light .ts-site-title-text .ts-site-tagline {
    color: var(--ts-text-muted);
}
body.ts-header-light .ts-header-contact a {
    color: var(--ts-text);
}
body.ts-header-light .ts-header-contact strong {
    color: var(--ts-dark);
}
body.ts-header-light .ts-menu-toggle span {
    background: var(--ts-dark);
}

/* Dark header — light text on dark background. */
body.ts-header-dark .ts-header {
    background: var(--ts-dark);
    color: var(--ts-on-dark);
}
body.ts-header-dark .ts-site-title-text .ts-site-name,
body.ts-header-dark .ts-site-title-text .ts-site-name a {
    color: var(--ts-on-dark);
}
body.ts-header-dark .ts-site-title-text .ts-site-tagline {
    color: var(--ts-on-dark);
    opacity: 0.7;
}
body.ts-header-dark .ts-header-contact,
body.ts-header-dark .ts-header-contact a,
body.ts-header-dark .ts-header-contact strong {
    color: var(--ts-on-dark);
}
body.ts-header-dark .ts-menu-toggle span {
    background: var(--ts-on-dark);
}
body.ts-header-dark .ts-nav {
    background: rgba(0, 0, 0, 0.2);
}

/* Transparent header — used when hero has dark background. */
body.ts-header-transparent .ts-header {
    background: transparent;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    box-shadow: none;
}
body.ts-header-transparent .ts-site-title-text .ts-site-name,
body.ts-header-transparent .ts-site-title-text .ts-site-name a,
body.ts-header-transparent .ts-header-contact,
body.ts-header-transparent .ts-header-contact a,
body.ts-header-transparent .ts-header-contact strong {
    color: #ffffff;
}
body.ts-header-transparent .ts-site-title-text .ts-site-tagline {
    color: rgba(255, 255, 255, 0.85);
}
body.ts-header-transparent .ts-menu-toggle span {
    background: #ffffff;
}
body.ts-header-transparent .ts-nav {
    background: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(8px);
}

/* Glass header — frosted glass effect (Modern Gradient preset). */
body.ts-header-glass .ts-header {
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(14px) saturate(180%);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--ts-text);
}
body.ts-header-glass .ts-site-title-text .ts-site-name,
body.ts-header-glass .ts-site-title-text .ts-site-name a {
    color: var(--ts-dark);
}
body.ts-header-glass .ts-site-title-text .ts-site-tagline {
    color: var(--ts-text-muted);
}
body.ts-header-glass .ts-header-contact a {
    color: var(--ts-text);
}
body.ts-header-glass .ts-header-contact strong {
    color: var(--ts-dark);
}
body.ts-header-glass .ts-menu-toggle span {
    background: var(--ts-dark);
}

/* ==========================================================================
   22. FOOTER STYLE VARIANTS (dark / light / gradient / minimal)
   ========================================================================== */

body.ts-footer-dark .ts-footer {
    background: var(--ts-dark);
    color: var(--ts-on-dark);
}

body.ts-footer-light .ts-footer {
    background: var(--ts-white);
    color: var(--ts-text);
    border-top: 1px solid var(--ts-border);
}
body.ts-footer-light .ts-footer a,
body.ts-footer-light .ts-footer p,
body.ts-footer-light .ts-footer li,
body.ts-footer-light .ts-footer span {
    color: var(--ts-text-muted);
}
body.ts-footer-light .ts-footer .widget-title {
    color: var(--ts-dark);
}
body.ts-footer-light .ts-footer a:hover {
    color: var(--ts-primary);
}
body.ts-footer-light .ts-footer-bottom {
    border-top: 1px solid var(--ts-border);
    color: var(--ts-text-muted);
}
body.ts-footer-light .ts-footer-bottom,
body.ts-footer-light .ts-footer-bottom p,
body.ts-footer-light .ts-footer-bottom a {
    color: var(--ts-text-muted);
    opacity: 1;
}
body.ts-footer-light .ts-social-icons a {
    background: var(--ts-light);
    color: var(--ts-dark);
}

body.ts-footer-gradient .ts-footer {
    background: linear-gradient(135deg, var(--ts-primary) 0%, var(--ts-accent) 100%);
    color: var(--ts-on-primary);
}
body.ts-footer-gradient .ts-footer a,
body.ts-footer-gradient .ts-footer p,
body.ts-footer-gradient .ts-footer li,
body.ts-footer-gradient .ts-footer span {
    color: var(--ts-on-primary);
    opacity: 0.9;
}
body.ts-footer-gradient .ts-footer .widget-title {
    color: var(--ts-on-primary);
    border-bottom-color: rgba(255, 255, 255, 0.3);
}
body.ts-footer-gradient .ts-footer a:hover {
    opacity: 1;
}
body.ts-footer-gradient .ts-footer-bottom {
    border-top-color: rgba(255, 255, 255, 0.2);
}

body.ts-footer-minimal .ts-footer {
    background: #ffffff;
    color: var(--ts-text);
    border-top: 1px solid var(--ts-border);
    padding-top: 40px;
}
body.ts-footer-minimal .ts-footer .widget-title {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.85rem;
    font-weight: 700;
    border-bottom: none;
    color: var(--ts-dark);
}
body.ts-footer-minimal .ts-footer a,
body.ts-footer-minimal .ts-footer p {
    color: var(--ts-text-muted);
}
body.ts-footer-minimal .ts-social-icons a {
    background: transparent;
    border: 1px solid var(--ts-border);
    color: var(--ts-dark);
}

/* ==========================================================================
   23. NAVIGATION STYLE VARIANTS (solid / pill / underline / side)
   ========================================================================== */

/* Solid nav (default). */
body.ts-nav-solid .ts-nav {
    background: var(--ts-primary);
}
body.ts-nav-solid .ts-nav .ts-menu > li > a {
    color: var(--ts-on-primary);
}
body.ts-nav-solid .ts-nav .ts-menu > li > a:hover,
body.ts-nav-solid .ts-nav .ts-menu > li.current-menu-item > a {
    background: var(--ts-primary-dark);
}

/* Pill nav — pills highlight active/hover items. */
body.ts-nav-pill .ts-nav {
    background: var(--ts-white);
    border-bottom: 1px solid var(--ts-border);
}
body.ts-nav-pill .ts-nav .ts-menu > li > a {
    color: var(--ts-text);
    margin: 8px 4px;
    padding: 8px 18px;
    border-radius: 24px;
    transition: var(--ts-transition);
}
body.ts-nav-pill .ts-nav .ts-menu > li > a:hover,
body.ts-nav-pill .ts-nav .ts-menu > li.current-menu-item > a {
    background: var(--ts-primary);
    color: var(--ts-on-primary);
}

/* Underline nav — minimal underline indicator. */
body.ts-nav-underline .ts-nav {
    background: var(--ts-white);
    border-bottom: 2px solid var(--ts-border);
}
body.ts-nav-underline .ts-nav .ts-menu > li > a {
    color: var(--ts-text);
    position: relative;
    padding: 18px 22px;
}
body.ts-nav-underline .ts-nav .ts-menu > li > a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 3px;
    background: var(--ts-primary);
    transition: var(--ts-transition);
    transform: translateX(-50%);
}
body.ts-nav-underline .ts-nav .ts-menu > li > a:hover::after,
body.ts-nav-underline .ts-nav .ts-menu > li.current-menu-item > a::after {
    width: 60%;
}
body.ts-nav-underline .ts-nav .ts-menu > li > a:hover {
    color: var(--ts-primary);
    background: transparent;
}
body.ts-nav-underline .ts-nav .ts-menu > li.current-menu-item > a {
    color: var(--ts-primary);
    background: transparent;
}

/* Side nav — vertical bar (rare; mainly for the gradient preset feel). */
body.ts-nav-side .ts-nav .ts-menu {
    flex-direction: column;
    align-items: stretch;
}
body.ts-nav-side .ts-nav .ts-menu > li > a {
    padding: 12px 20px;
    border-left: 3px solid transparent;
}
body.ts-nav-side .ts-nav .ts-menu > li > a:hover,
body.ts-nav-side .ts-nav .ts-menu > li.current-menu-item > a {
    border-left-color: var(--ts-secondary);
    background: rgba(255, 255, 255, 0.1);
}

/* ==========================================================================
   24. SHADOW STRENGTH VARIANTS
   ========================================================================== */
body.ts-shadow-none .ts-service-card,
body.ts-shadow-none .ts-package-card,
body.ts-shadow-none .ts-post-card,
body.ts-shadow-none .ts-sidebar .widget,
body.ts-shadow-none .ts-single {
    box-shadow: none;
    border: 1px solid var(--ts-border);
}

body.ts-shadow-soft .ts-service-card,
body.ts-shadow-soft .ts-package-card,
body.ts-shadow-soft .ts-post-card,
body.ts-shadow-soft .ts-sidebar .widget {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

body.ts-shadow-medium .ts-service-card,
body.ts-shadow-medium .ts-package-card,
body.ts-shadow-medium .ts-post-card,
body.ts-shadow-medium .ts-sidebar .widget {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

body.ts-shadow-strong .ts-service-card,
body.ts-shadow-strong .ts-package-card,
body.ts-shadow-strong .ts-post-card,
body.ts-shadow-strong .ts-sidebar .widget {
    box-shadow: 0 16px 50px rgba(0, 0, 0, 0.18);
}

/* ==========================================================================
   25. PRESET-SPECIFIC OVERRIDES — 10 themes
   ========================================================================== */

/* --- 1. Crimson Royal --- */
body.ts-preset-classic .ts-service-icon {
    background: linear-gradient(135deg, #9b1c2e, #d4af37);
}
body.ts-preset-classic .ts-package-badge {
    background: #d4af37;
    color: #2a0a10;
}
body.ts-preset-classic .ts-section-title .ts-divider {
    background: #d4af37;
}
body.ts-preset-classic .ts-section-title h2,
body.ts-preset-classic .ts-archive-header h1 {
    font-family: 'Playfair Display', serif;
}

/* --- 2. Sahara Oasis --- */
body.ts-preset-desert {
    background-color: var(--ts-light);
}
body.ts-preset-desert .ts-service-icon {
    background: linear-gradient(135deg, #2ca6a4, #ff7e6b);
}
body.ts-preset-desert .ts-package-badge {
    background: #ff7e6b;
    color: #ffffff;
}
body.ts-preset-desert .ts-section-title .ts-divider {
    background: #2ca6a4;
}

/* --- 3. Emerald Makkah --- */
body.ts-preset-emerald .ts-service-icon {
    background: linear-gradient(135deg, #006a4e, #d4af37);
}
body.ts-preset-emerald .ts-package-badge {
    background: #d4af37;
    color: #013220;
}
body.ts-preset-emerald .ts-section-title .ts-divider {
    background: #d4af37;
}

/* --- 4. Velvet Indigo --- */
body.ts-preset-royal .ts-service-icon {
    background: linear-gradient(135deg, #3a1f7a, #e8a0bf);
}
body.ts-preset-royal .ts-single {
    border-top: 4px solid var(--ts-primary);
}
body.ts-preset-royal .ts-section-title h2,
body.ts-preset-royal .ts-archive-header h1 {
    font-family: 'Cormorant Garamond', serif;
}

/* --- 5. Volcanic Onyx (dark mode) --- */
body.ts-preset-midnight {
    background-color: var(--ts-dark);
    color: var(--ts-text);
}
body.ts-preset-midnight .ts-section,
body.ts-preset-midnight .ts-services-section,
body.ts-preset-midnight .ts-packages-section,
body.ts-preset-midnight .ts-blog-section,
body.ts-preset-midnight .ts-contact-section {
    background: var(--ts-dark);
}
body.ts-preset-midnight .ts-services-section,
body.ts-preset-midnight .ts-blog-section {
    background: var(--ts-light);
}
body.ts-preset-midnight .ts-service-card,
body.ts-preset-midnight .ts-package-card,
body.ts-preset-midnight .ts-post-card,
body.ts-preset-midnight .ts-single,
body.ts-preset-midnight .ts-sidebar .widget {
    background: #1c1814;
    color: var(--ts-text);
    border: 1px solid var(--ts-border);
}
body.ts-preset-midnight .ts-service-card h3,
body.ts-preset-midnight .ts-package-card h3,
body.ts-preset-midnight .ts-post-card .entry-title,
body.ts-preset-midnight .ts-single .entry-title,
body.ts-preset-midnight .ts-sidebar .widget-title {
    color: #ffffff;
}
body.ts-preset-midnight .ts-service-card p,
body.ts-preset-midnight .ts-package-card p,
body.ts-preset-midnight .ts-post-card .entry-meta,
body.ts-preset-midnight .ts-sidebar .widget {
    color: var(--ts-text-muted);
}
body.ts-preset-midnight .ts-service-icon {
    background: linear-gradient(135deg, #ff4500, #ffaa00);
    box-shadow: 0 0 20px rgba(255, 69, 0, 0.5);
}
body.ts-preset-midnight .ts-section-title h2 {
    color: #ffffff;
}
body.ts-preset-midnight .ts-section-title p {
    color: var(--ts-text-muted);
}
body.ts-preset-midnight .ts-hero::before {
    background: rgba(13, 10, 8, 0.75);
}
body.ts-preset-midnight input,
body.ts-preset-midnight textarea,
body.ts-preset-midnight select {
    background: #0d0a08;
    color: var(--ts-text);
    border-color: var(--ts-border);
}
body.ts-preset-midnight .ts-btn-primary {
    background: #ff4500;
    color: #ffffff;
}
body.ts-preset-midnight .ts-btn-primary:hover {
    background: #d93a00;
}

/* --- 6. Cherry Blossom --- */
body.ts-preset-sunset .ts-service-icon {
    background: linear-gradient(135deg, #e8a0b8, #8fb386);
}
body.ts-preset-sunset .ts-package-badge {
    background: #e8a0b8;
    color: #4a2f35;
}
body.ts-preset-sunset .ts-section-title .ts-divider {
    background: #8fb386;
}

/* --- 7. Tropical Paradise --- */
body.ts-preset-ocean .ts-service-icon {
    background: linear-gradient(135deg, #00b4a6, #ff9e2c);
}
body.ts-preset-ocean .ts-section-title .ts-divider {
    background: #ff5e8a;
}
body.ts-preset-ocean .ts-btn-primary {
    background: #00b4a6;
}
body.ts-preset-ocean .ts-btn-primary:hover {
    background: #009488;
}

/* --- 8. Glacier Steel --- */
body.ts-preset-minimal .ts-service-card,
body.ts-preset-minimal .ts-package-card,
body.ts-preset-minimal .ts-post-card,
body.ts-preset-minimal .ts-sidebar .widget,
body.ts-preset-minimal .ts-single {
    box-shadow: none;
    border: 1px solid var(--ts-border);
    border-radius: 2px;
}
body.ts-preset-minimal .ts-service-icon {
    background: transparent;
    color: var(--ts-dark);
    border: 2px solid var(--ts-dark);
}
body.ts-preset-minimal .ts-section-title .ts-divider {
    background: var(--ts-secondary);
    width: 40px;
    height: 2px;
}
body.ts-preset-minimal .ts-btn-primary {
    background: var(--ts-dark);
    border-color: var(--ts-dark);
    color: var(--ts-on-dark);
}
body.ts-preset-minimal .ts-btn-primary:hover {
    background: var(--ts-secondary);
    border-color: var(--ts-secondary);
    color: var(--ts-on-secondary);
}
body.ts-preset-minimal .ts-section-title h2 {
    font-weight: 600;
}

/* --- 9. Imperial Plum --- */
body.ts-preset-gold .ts-service-icon {
    background: linear-gradient(135deg, #d4af37, #5b2a4e);
    color: #2a0e22;
}
body.ts-preset-gold .ts-package-badge {
    background: #d4af37;
    color: #2a0e22;
}
body.ts-preset-gold .ts-btn-primary {
    background: #d4af37;
    border-color: #d4af37;
    color: #2a0e22;
}
body.ts-preset-gold .ts-btn-primary:hover {
    background: #b8962f;
    border-color: #b8962f;
    color: #2a0e22;
}
body.ts-preset-gold .ts-section-title .ts-divider {
    background: #d4af37;
}
body.ts-preset-gold .ts-section-title h2 {
    letter-spacing: 2px;
    text-transform: uppercase;
}
body.ts-preset-gold .ts-archive-header h1,
body.ts-preset-gold .ts-section-title h2 {
    font-family: 'Cormorant Garamond', serif;
}
/* Imperial Plum has a dark header — gold text on dark plum */
body.ts-preset-gold .ts-header {
    background: #2a0e22;
}
body.ts-preset-gold .ts-site-title-text .ts-site-name,
body.ts-preset-gold .ts-site-title-text .ts-site-name a,
body.ts-preset-gold .ts-header-contact,
body.ts-preset-gold .ts-header-contact a,
body.ts-preset-gold .ts-header-contact strong {
    color: #d4af37;
}
body.ts-preset-gold .ts-site-title-text .ts-site-tagline {
    color: rgba(212, 175, 55, 0.7);
}
body.ts-preset-gold .ts-menu-toggle span {
    background: #d4af37;
}
body.ts-preset-gold .ts-nav {
    background: #2a0e22;
}
body.ts-preset-gold .ts-nav .ts-menu > li > a {
    color: #d4af37;
}
body.ts-preset-gold .ts-nav .ts-menu > li > a:hover,
body.ts-preset-gold .ts-nav .ts-menu > li.current-menu-item > a {
    background: #d4af37;
    color: #2a0e22;
}
body.ts-preset-gold .ts-footer {
    background: #2a0e22;
    color: #d4af37;
}
body.ts-preset-gold .ts-footer-widgets a,
body.ts-preset-gold .ts-footer-widgets p,
body.ts-preset-gold .ts-footer-widgets li {
    color: rgba(212, 175, 55, 0.85);
}
body.ts-preset-gold .ts-footer-widgets .widget-title {
    color: #d4af37;
}
body.ts-preset-gold .ts-footer-widgets a:hover {
    color: #ffffff;
}

/* --- 10. Aurora Borealis --- */
body.ts-preset-gradient .ts-service-icon {
    background: linear-gradient(135deg, #00f5a0, #a855f7);
    box-shadow: 0 8px 24px rgba(0, 245, 160, 0.4);
}
body.ts-preset-gradient .ts-btn-primary {
    background: linear-gradient(135deg, #00f5a0, #a855f7);
    border: none;
    color: #0a0e27;
}
body.ts-preset-gradient .ts-btn-primary:hover {
    background: linear-gradient(135deg, #00d488, #9333ea);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 245, 160, 0.4);
}
body.ts-preset-gradient .ts-hero::before {
    background: linear-gradient(135deg, rgba(0, 245, 160, 0.5), rgba(168, 85, 247, 0.5), rgba(59, 130, 246, 0.4));
}
body.ts-preset-gradient .ts-section-title .ts-divider {
    background: linear-gradient(90deg, #00f5a0, #a855f7);
}
body.ts-preset-gradient .ts-service-card:hover,
body.ts-preset-gradient .ts-package-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(0, 245, 160, 0.25);
}
body.ts-preset-gradient .ts-cta {
    background: linear-gradient(135deg, #00f5a0 0%, #a855f7 50%, #3b82f6 100%);
}
body.ts-preset-gradient .ts-cta h2,
body.ts-preset-gradient .ts-cta p {
    color: #ffffff;
}

/* ==========================================================================
   26. COMPONENT / SYMBOL VARIANTS PER PRESET
   ========================================================================== */

/* Icon symbols — different icon styles per preset */
body.ts-preset-minimal .ts-service-icon i,
body.ts-preset-gold .ts-service-icon i {
    font-weight: 900;
}

/* Section title divider style varies by preset */
body.ts-preset-classic .ts-section-title .ts-divider,
body.ts-preset-desert .ts-section-title .ts-divider,
body.ts-preset-emerald .ts-section-title .ts-divider,
body.ts-preset-royal .ts-section-title .ts-divider,
body.ts-preset-sunset .ts-section-title .ts-divider,
body.ts-preset-ocean .ts-section-title .ts-divider {
    height: 4px;
    border-radius: 2px;
}

body.ts-preset-minimal .ts-section-title .ts-divider {
    height: 2px;
    border-radius: 0;
}

body.ts-preset-gradient .ts-section-title .ts-divider {
    height: 4px;
    border-radius: 2px;
}

/* Card border radius varies per preset (set via --ts-radius CSS variable) */
body.ts-preset-minimal .ts-service-card,
body.ts-preset-minimal .ts-package-card,
body.ts-preset-minimal .ts-post-card {
    border-radius: 2px;
}

body.ts-preset-gold .ts-service-card,
body.ts-preset-gold .ts-package-card,
body.ts-preset-gold .ts-post-card {
    border-radius: 4px;
}

body.ts-preset-sunset .ts-service-card,
body.ts-preset-sunset .ts-package-card,
body.ts-preset-sunset .ts-post-card {
    border-radius: 16px;
}

body.ts-preset-gradient .ts-service-card,
body.ts-preset-gradient .ts-package-card,
body.ts-preset-gradient .ts-post-card {
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Midnight dark mode — link colors */
body.ts-preset-midnight a {
    color: var(--ts-accent);
}
body.ts-preset-midnight a:hover {
    color: var(--ts-secondary);
}
body.ts-preset-midnight .ts-package-price {
    color: var(--ts-secondary);
}
body.ts-preset-midnight .ts-btn-primary {
    background: var(--ts-primary);
    color: #ffffff;
}
body.ts-preset-midnight .ts-pagination .page-numbers {
    background: #1f2640;
    color: var(--ts-text);
    border-color: var(--ts-border);
}

/* ==========================================================================
   27. DARK MODE AUTODETECT — If the active preset is dark, override surfaces
   ========================================================================== */

/* For midnight preset, even user-overridden light backgrounds need dark text. */
body.ts-preset-midnight .ts-footer {
    background: #050810;
    color: #e8eaf6;
}
body.ts-preset-midnight .ts-footer-widgets .widget-title {
    color: #ffffff;
}
body.ts-preset-midnight .ts-footer-widgets a,
body.ts-preset-midnight .ts-footer-widgets p,
body.ts-preset-midnight .ts-footer-widgets li {
    color: #b8c0e8;
}

/* Gold preset — header & footer are black with gold accents */
body.ts-preset-gold .ts-header {
    background: #0a0a0a;
}
body.ts-preset-gold .ts-site-title-text .ts-site-name,
body.ts-preset-gold .ts-site-title-text .ts-site-name a,
body.ts-preset-gold .ts-header-contact,
body.ts-preset-gold .ts-header-contact a,
body.ts-preset-gold .ts-header-contact strong {
    color: #d4af37;
}
body.ts-preset-gold .ts-site-title-text .ts-site-tagline {
    color: rgba(212, 175, 55, 0.7);
}
body.ts-preset-gold .ts-menu-toggle span {
    background: #d4af37;
}
body.ts-preset-gold .ts-nav {
    background: #0a0a0a;
}
body.ts-preset-gold .ts-nav .ts-menu > li > a {
    color: #d4af37;
}
body.ts-preset-gold .ts-nav .ts-menu > li > a:hover,
body.ts-preset-gold .ts-nav .ts-menu > li.current-menu-item > a {
    background: #d4af37;
    color: #0a0a0a;
}
body.ts-preset-gold .ts-footer {
    background: #0a0a0a;
    color: #d4af37;
}
body.ts-preset-gold .ts-footer-widgets a,
body.ts-preset-gold .ts-footer-widgets p,
body.ts-preset-gold .ts-footer-widgets li {
    color: rgba(212, 175, 55, 0.85);
}
body.ts-preset-gold .ts-footer-widgets .widget-title {
    color: #d4af37;
}
body.ts-preset-gold .ts-footer-widgets a:hover {
    color: #ffffff;
}

/* ==========================================================================
   28. RESPONSIVE TWEAKS FOR HEADER PRESETS
   ========================================================================== */
@media (max-width: 992px) {
    body.ts-header-transparent .ts-header,
    body.ts-header-glass .ts-header {
        position: relative;
        background: var(--ts-dark);
    }
    body.ts-header-transparent .ts-site-title-text .ts-site-name,
    body.ts-header-transparent .ts-site-title-text .ts-site-name a,
    body.ts-header-transparent .ts-header-contact,
    body.ts-header-transparent .ts-header-contact a,
    body.ts-header-glass .ts-site-title-text .ts-site-name,
    body.ts-header-glass .ts-site-title-text .ts-site-name a,
    body.ts-header-glass .ts-header-contact,
    body.ts-header-glass .ts-header-contact a {
        color: var(--ts-on-dark);
    }
}

/* ==========================================================================
   29. PRINT STYLES
   ========================================================================== */
@media print {
    .ts-header,
    .ts-footer,
    .ts-topbar,
    .ts-sidebar,
    .ts-cta,
    .ts-whatsapp-float,
    #ts-back-to-top {
        display: none !important;
    }
    body {
        background: #fff !important;
        color: #000 !important;
    }
    .ts-single {
        box-shadow: none;
        border: none;
        padding: 0;
    }
}


/* ==========================================================================
   30. COMPREHENSIVE MULTI-DEVICE RESPONSIVE OVERRIDES (Kanberra Edition)
   ==========================================================================
   Breakpoints:
     - 1366px  : Large desktop down to laptop
     - 1200px  : Laptop / small desktop
     - 1024px  : Tablet landscape
     - 992px   : Tablet portrait
     - 768px   : Mobile landscape / small tablet
     - 600px   : Mobile portrait
     - 480px   : Small phone
     - 400px   : Tiny phone
   ========================================================================== */

/* ----- Large desktop (≤1366px) — minor tweaks ----- */
@media (max-width: 1366px) {
    .ts-container { max-width: 1170px; }
    .ts-hero h1 { font-size: 2.75rem; }
}

/* ----- Laptop / small desktop (≤1200px) ----- */
@media (max-width: 1200px) {
    .ts-container { max-width: 960px; padding: 0 30px; }
    .ts-hero h1 { font-size: 2.5rem; }
    .ts-hero p { font-size: 1.1rem; }
    .ts-section-title h2 { font-size: 2rem; }
    .ts-packages-grid,
    .ts-services-grid { gap: 24px; }
    .ts-package-image { height: 200px; }
}

/* ----- Tablet landscape (≤1024px) ----- */
@media (max-width: 1024px) {
    .ts-container { max-width: 100%; padding: 0 24px; }
    .ts-content-area.has-sidebar {
        grid-template-columns: 1fr 280px;
        gap: 30px;
    }
    .ts-services-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
    .ts-packages-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
    .ts-post-list { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
    .ts-footer-widgets { gap: 30px; }
}

/* ----- Tablet portrait (≤992px) ----- */
@media (max-width: 992px) {
    body { font-size: 15px; }
    h1 { font-size: 2rem; }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.5rem; }
    .ts-section { padding: 60px 0; }
    .ts-section-title { margin-bottom: 40px; }
    .ts-section-title h2 { font-size: 1.85rem; }
    .ts-hero { padding: 100px 0; }
    .ts-hero h1 { font-size: 2.25rem; }

    /* Collapse sidebar to below content on tablet portrait. */
    .ts-content-area.has-sidebar {
        grid-template-columns: 1fr;
    }
    .ts-content-area.has-sidebar .ts-sidebar {
        margin-top: 30px;
    }

    /* Header: hide the inline header contact, keep button. */
    .ts-header-cta .ts-header-contact { display: none; }

    /* Package single — stack booking sidebar below content. */
    .ts-package-layout,
    .ts-ticket-layout {
        grid-template-columns: 1fr !important;
    }
    .ts-package-booking,
    .ts-ticket-booking {
        position: static !important;
        order: -1;
    }

    /* About section stacks vertically. */
    .ts-about-section > .ts-container > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }

    /* Stats section — 2x2 on tablet. */
    .ts-stats-section > .ts-container > div[style*="grid-template-columns"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Contact section — stack contact info + form. */
    .ts-contact-section > .ts-container > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }

    /* Footer widgets — 2 columns on tablet portrait. */
    body.ts-footer-cols-4 .ts-footer-widgets,
    body.ts-footer-cols-3 .ts-footer-widgets {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ----- Mobile landscape / small tablet (≤768px) ----- */
@media (max-width: 768px) {
    body { font-size: 14px; }
    h1 { font-size: 1.85rem; }
    h2 { font-size: 1.6rem; }
    h3 { font-size: 1.35rem; }
    h4 { font-size: 1.15rem; }
    h5 { font-size: 1.05rem; }

    .ts-container { padding: 0 20px; }

    /* Topbar — stack vertically. */
    .ts-topbar-inner {
        flex-direction: column;
        text-align: center;
        gap: 6px;
    }
    .ts-topbar-left a { margin: 0 8px; }
    .ts-topbar-right {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }

    /* Header — center everything. */
    .ts-header-main { padding: 12px 0; }
    .ts-header-inner {
        flex-direction: column;
        text-align: center;
        gap: 14px;
    }
    .ts-site-branding {
        flex-direction: column;
        gap: 8px;
    }
    .ts-site-logo img,
    .custom-logo { max-height: 50px !important; }
    .ts-site-title-text .ts-site-name { font-size: 1.3rem; }
    .ts-site-title-text .ts-site-tagline { font-size: 0.75rem; }
    .ts-header-cta { justify-content: center; flex-wrap: wrap; gap: 10px; }

    /* Hero section — slimmer, stacked buttons. */
    .ts-hero { padding: 70px 0; }
    .ts-hero h1 { font-size: 1.85rem; line-height: 1.2; }
    .ts-hero p { font-size: 1rem; }
    .ts-hero-buttons {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .ts-hero-buttons .ts-btn {
        width: 100%;
        text-align: center;
    }

    /* Sections — smaller padding. */
    .ts-section { padding: 50px 0; }
    .ts-section-title { margin-bottom: 30px; }
    .ts-section-title h2 { font-size: 1.65rem; }
    .ts-section-title p { font-size: 0.95rem; }

    /* Grids — single column on mobile. */
    .ts-services-grid,
    .ts-packages-grid,
    .ts-post-list,
    .ts-testimonials-grid {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }

    /* Card image heights — smaller on mobile. */
    .ts-package-image,
    .ts-post-card .post-thumbnail { height: 180px; }

    /* Single article padding — tighter. */
    .ts-single { padding: 20px; }
    .ts-single .entry-title { font-size: 1.6rem; }

    /* Author bio — stack. */
    .ts-author-bio {
        flex-direction: column !important;
        text-align: center;
    }

    /* Archive header — slimmer. */
    .ts-archive-header { padding: 30px 0; }
    .ts-archive-header h1 { font-size: 1.5rem; }

    /* Stats — single column on mobile. */
    .ts-stats-section > .ts-container > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }
    .ts-stats-section .ts-stat-item > div:first-child { font-size: 2.25rem !important; }

    /* Footer widgets — single column on mobile. */
    body.ts-footer-cols-1 .ts-footer-widgets,
    body.ts-footer-cols-2 .ts-footer-widgets,
    body.ts-footer-cols-3 .ts-footer-widgets,
    body.ts-footer-cols-4 .ts-footer-widgets {
        grid-template-columns: 1fr !important;
    }
    .ts-footer { padding: 40px 0 0; }

    /* 404 page — smaller. */
    .ts-404 h1 { font-size: 5rem; }
    .ts-404 h2 { font-size: 1.5rem; }

    /* Floating buttons — slightly smaller and repositioned. */
    .ts-whatsapp-float {
        width: 50px !important;
        height: 50px !important;
        font-size: 1.5rem !important;
        bottom: 20px !important;
        left: 20px !important;
    }
    #ts-back-to-top {
        width: 42px !important;
        height: 42px !important;
        font-size: 0.95rem !important;
        bottom: 20px !important;
        right: 20px !important;
    }

    /* Search form — stack. */
    .search-form {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .search-form .search-submit { width: 100%; }

    /* Contact section — stack. */
    .ts-contact-section > .ts-container > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }

    /* Route display on ticket single — stack. */
    .ts-route-display {
        flex-direction: column !important;
        text-align: center;
    }

    /* Comments — indent avatars less. */
    .comment-list .children { padding-left: 20px; }

    /* Hide topbar social row on very small (already shown in footer). */
    .ts-topbar-social { display: none; }
}

/* ----- Mobile portrait (≤600px) ----- */
@media (max-width: 600px) {
    .ts-container { padding: 0 16px; }
    h1 { font-size: 1.6rem; }
    h2 { font-size: 1.4rem; }
    .ts-hero { padding: 50px 0; }
    .ts-hero h1 { font-size: 1.6rem; }
    .ts-section { padding: 40px 0; }
    .ts-section-title h2 { font-size: 1.4rem; }

    /* Hero buttons — full width, stacked. */
    .ts-hero-buttons .ts-btn { padding: 10px 20px; font-size: 0.9rem; }

    /* Service card padding reduced. */
    .ts-service-card { padding: 28px 20px; }
    .ts-service-icon { width: 64px; height: 64px; font-size: 1.6rem; }

    /* Package body padding reduced. */
    .ts-package-body { padding: 20px; }
    .ts-package-footer {
        flex-direction: column;
        align-items: stretch !important;
        gap: 12px;
    }
    .ts-package-footer .ts-btn { text-align: center; width: 100%; }

    /* Booking sidebar padding reduced. */
    .ts-package-booking,
    .ts-ticket-booking { padding: 20px; }

    /* Single article — even tighter. */
    .ts-single { padding: 16px; border-radius: 10px; }
    .ts-single .entry-title { font-size: 1.4rem; }

    /* Footer bottom — stack. */
    .ts-footer-bottom p { display: block; margin: 4px 0; }

    /* Admin bar — push below on small screens. */
    body.admin-bar .ts-header { top: 0 !important; }
}

/* ----- Small phone (≤480px) ----- */
@media (max-width: 480px) {
    body { font-size: 13px; }
    h1 { font-size: 1.45rem; }
    h2 { font-size: 1.3rem; }
    .ts-hero h1 { font-size: 1.45rem; }
    .ts-section-title h2 { font-size: 1.25rem; }

    /* Topbar — hide non-essential info on tiny screens. */
    .ts-topbar-left a { font-size: 0.8rem; }
    .ts-topbar-right .ts-topbar-hours { display: none; }

    /* Site title — smaller. */
    .ts-site-title-text .ts-site-name { font-size: 1.1rem; }

    /* Package image — even smaller. */
    .ts-package-image,
    .ts-post-card .post-thumbnail { height: 160px; }

    /* Buttons — full width. */
    .ts-btn {
        display: block;
        width: 100%;
        text-align: center;
        padding: 10px 18px;
        font-size: 0.875rem;
    }

    /* Hero buttons — already stacked, just smaller text. */
    .ts-hero-buttons .ts-btn { padding: 10px 16px; }

    /* 404 — smaller. */
    .ts-404 h1 { font-size: 4rem; }
    .ts-404 h2 { font-size: 1.25rem; }

    /* Hide back-to-top on tiny screens to save space. */
    #ts-back-to-top { display: none !important; }

    /* Pagination — wrap nicely. */
    .ts-pagination { flex-wrap: wrap; }
    .ts-pagination .page-numbers { padding: 8px 12px; font-size: 0.85rem; }
}

/* ----- Tiny phone (≤400px) ----- */
@media (max-width: 400px) {
    .ts-container { padding: 0 12px; }
    .ts-hero h1 { font-size: 1.3rem; line-height: 1.25; }
    .ts-hero p { font-size: 0.9rem; }
    .ts-section-title h2 { font-size: 1.15rem; }
    .ts-service-card { padding: 22px 16px; }
    .ts-package-body { padding: 16px; }
    .ts-single { padding: 14px; }

    /* Topbar — hide on tiny screens to save vertical space. */
    .ts-topbar { padding: 6px 0; }
    .ts-topbar-left a:last-child { display: none; }
}

/* ==========================================================================
   31. TOUCH-FRIENDLY TAP TARGETS (mobile devices)
   ========================================================================== */
@media (hover: none) and (pointer: coarse) {
    /* Increase tap target size for touch devices. */
    .ts-menu > li > a,
    .ts-btn,
    .ts-pagination .page-numbers,
    .ts-package-features li,
    .ts-sidebar ul li a {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    /* Disable hover effects that don't translate to touch. */
    .ts-service-card:hover,
    .ts-package-card:hover,
    .ts-post-card:hover {
        transform: none;
    }

    /* Make mobile menu toggle button larger. */
    .ts-menu-toggle {
        padding: 14px;
        min-width: 44px;
        min-height: 44px;
    }
}

/* ==========================================================================
   32. PRINT STYLES (already added above — keeping for reference)
   ========================================================================== */

/* ==========================================================================
   33. ACCESSIBILITY — Focus states for keyboard navigation
   ========================================================================== */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus,
.ts-menu-toggle:focus {
    outline: 2px solid var(--ts-primary);
    outline-offset: 2px;
}

/* Visible focus on skip link. */
.skip-link:focus {
    background: var(--ts-primary);
    color: var(--ts-on-primary);
    padding: 10px 20px;
    z-index: 9999;
}

/* Reduced motion preference. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   34. RESPONSIVE TABLES
   ========================================================================== */
.ts-single table,
.entry-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.ts-single th,
.ts-single td,
.entry-content th,
.entry-content td {
    padding: 10px 14px;
    border: 1px solid var(--ts-border);
    text-align: left;
}

/* Flight info table — make scrollable on mobile. */
.ts-flight-info-table table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ==========================================================================
   35. RESPONSIVE EMBEDS / VIDEOS
   ========================================================================== */
.entry-content iframe,
.entry-content video,
.entry-content embed,
.ts-single iframe,
.ts-single video {
    max-width: 100%;
    height: auto;
}

.wp-block-embed,
.wp-block-embed-wordpress,
.wp-block-embed-youtube {
    position: relative;
    overflow: hidden;
    max-width: 100%;
}

/* FitVids-style responsive wrapper. */
.entry-content .wp-block-embed__wrapper::before {
    content: '';
    display: block;
    padding-top: 56.25%;
}

.entry-content .wp-block-embed__wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/* ==========================================================================
   36. NEW NAVIGATION STYLES (4 additional — total 8)
   ========================================================================== */

/* --- 5. Centered nav — logo left, menu centered, CTA right --- */
body.ts-nav-centered .ts-nav {
    background: var(--ts-primary);
}
body.ts-nav-centered .ts-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
body.ts-nav-centered .ts-nav-logo {
    flex-shrink: 0;
}
body.ts-nav-centered .ts-nav .ts-menu {
    flex: 1;
    justify-content: center;
}
body.ts-nav-centered .ts-nav .ts-menu > li > a {
    color: var(--ts-on-primary);
}
body.ts-nav-centered .ts-nav .ts-menu > li > a:hover,
body.ts-nav-centered .ts-nav .ts-menu > li.current-menu-item > a {
    background: var(--ts-primary-dark);
}
body.ts-nav-centered .ts-menu-toggle {
    margin-left: auto;
}

/* --- 6. Split nav — menu split around center logo --- */
body.ts-nav-split .ts-nav {
    background: var(--ts-primary);
}
body.ts-nav-split .ts-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
body.ts-nav-split .ts-nav-logo {
    order: 2;
    flex-shrink: 0;
}
body.ts-nav-split .ts-nav .ts-menu {
    order: 1;
    flex: 1;
    justify-content: flex-end;
    padding-right: 20px;
}
body.ts-nav-split .ts-nav .ts-menu > li > a {
    color: var(--ts-on-primary);
}
body.ts-nav-split .ts-nav .ts-menu > li > a:hover,
body.ts-nav-split .ts-nav .ts-menu > li.current-menu-item > a {
    background: var(--ts-primary-dark);
}
body.ts-nav-split .ts-menu-toggle {
    order: 3;
}

/* --- 7. Mega nav — bold uppercase with large dropdowns --- */
body.ts-nav-mega .ts-nav {
    background: var(--ts-dark);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
body.ts-nav-mega .ts-nav .ts-menu > li > a {
    color: var(--ts-on-dark);
    text-transform: uppercase !important;
    font-weight: 700 !important;
    letter-spacing: 1px;
    padding: 18px 22px !important;
}
body.ts-nav-mega .ts-nav .ts-menu > li > a:hover,
body.ts-nav-mega .ts-nav .ts-menu > li.current-menu-item > a {
    background: var(--ts-primary);
    color: var(--ts-on-primary);
}
body.ts-nav-mega .ts-nav .ts-menu ul {
    min-width: 280px;
    padding: 10px 0;
}
body.ts-nav-mega .ts-nav .ts-menu ul a {
    padding: 12px 20px;
    font-size: 0.95rem;
}

/* --- 8. Floating nav — pill nav floating below header --- */
body.ts-nav-floating .ts-nav {
    background: transparent;
    padding: 12px 0;
    box-shadow: none;
}
body.ts-nav-floating .ts-nav-inner {
    background: var(--ts-white);
    border-radius: 50px;
    padding: 6px 10px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.12);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    max-width: 90%;
    margin: 0 auto;
}
body.ts-nav-floating .ts-nav-logo {
    flex-shrink: 0;
    padding-left: 10px;
}
body.ts-nav-floating .ts-nav .ts-menu {
    flex: 1;
    justify-content: flex-end;
}
body.ts-nav-floating .ts-nav .ts-menu > li > a {
    color: var(--ts-text);
    padding: 8px 18px !important;
    border-radius: 24px;
}
body.ts-nav-floating .ts-nav .ts-menu > li > a:hover,
body.ts-nav-floating .ts-nav .ts-menu > li.current-menu-item > a {
    background: var(--ts-primary);
    color: var(--ts-on-primary);
}

/* ==========================================================================
   37. NEW THEME PRESETS — 10 additional (11-20)
   ========================================================================== */

/* --- 11. Plasma Pink (dark mode) --- */
body.ts-preset-neon {
    background-color: var(--ts-dark);
    color: var(--ts-text);
}
body.ts-preset-neon .ts-section,
body.ts-preset-neon .ts-services-section,
body.ts-preset-neon .ts-packages-section,
body.ts-preset-neon .ts-blog-section,
body.ts-preset-neon .ts-contact-section { background: var(--ts-dark); }
body.ts-preset-neon .ts-services-section,
body.ts-preset-neon .ts-blog-section { background: var(--ts-light); }
body.ts-preset-neon .ts-service-card,
body.ts-preset-neon .ts-package-card,
body.ts-preset-neon .ts-post-card,
body.ts-preset-neon .ts-single,
body.ts-preset-neon .ts-sidebar .widget {
    background: var(--ts-light);
    color: var(--ts-text);
    border: 1px solid var(--ts-border);
}
body.ts-preset-neon .ts-service-card h3,
body.ts-preset-neon .ts-package-card h3,
body.ts-preset-neon .ts-post-card .entry-title,
body.ts-preset-neon .ts-section-title h2 { color: #ffffff; }
body.ts-preset-neon .ts-service-icon {
    background: linear-gradient(135deg, #ec4899, #a855f7);
    box-shadow: 0 0 20px rgba(236, 72, 153, 0.6);
}
body.ts-preset-neon .ts-btn-primary {
    background: linear-gradient(135deg, #ec4899, #a855f7);
    color: #ffffff;
}
body.ts-preset-neon .ts-hero::before { background: rgba(13, 4, 20, 0.75); }
body.ts-preset-neon input,
body.ts-preset-neon textarea,
body.ts-preset-neon select {
    background: #1f0a28;
    color: var(--ts-text);
    border-color: var(--ts-border);
}

/* --- 12. Lavender Mist --- */
body.ts-preset-pastel .ts-service-icon {
    background: linear-gradient(135deg, #9d8ec4, #a3b899);
}
body.ts-preset-pastel .ts-package-badge {
    background: #9d8ec4;
    color: #ffffff;
}
body.ts-preset-pastel .ts-section-title .ts-divider { background: #9d8ec4; }
body.ts-preset-pastel .ts-section-title h2 { font-family: 'Quicksand', sans-serif; font-weight: 700; }

/* --- 13. Burgundy Wine --- */
body.ts-preset-terra .ts-service-icon {
    background: linear-gradient(135deg, #6b1f2a, #d4af37);
}
body.ts-preset-terra .ts-package-badge {
    background: #d4af37;
    color: #2d0d12;
}
body.ts-preset-terra .ts-section-title .ts-divider { background: #d4af37; }
body.ts-preset-terra .ts-section-title h2,
body.ts-preset-terra .ts-archive-header h1 {
    font-family: 'Playfair Display', serif;
}

/* --- 14. Cyber Blue (KEPT — unchanged) --- */
body.ts-preset-cyberblue .ts-service-icon {
    background: linear-gradient(135deg, #0066ff, #00d4ff);
    box-shadow: 0 8px 24px rgba(0, 102, 255, 0.3);
}
body.ts-preset-cyberblue .ts-btn-primary {
    background: #0066ff;
}
body.ts-preset-cyberblue .ts-section-title .ts-divider { background: #00d4ff; }

/* --- 15. Sapphire Royale (dark mode) --- */
body.ts-preset-luxerose {
    background-color: var(--ts-dark);
    color: var(--ts-text);
}
body.ts-preset-luxerose .ts-section,
body.ts-preset-luxerose .ts-services-section,
body.ts-preset-luxerose .ts-packages-section,
body.ts-preset-luxerose .ts-blog-section,
body.ts-preset-luxerose .ts-contact-section { background: var(--ts-dark); }
body.ts-preset-luxerose .ts-services-section,
body.ts-preset-luxerose .ts-blog-section { background: var(--ts-light); }
body.ts-preset-luxerose .ts-service-card,
body.ts-preset-luxerose .ts-package-card,
body.ts-preset-luxerose .ts-post-card,
body.ts-preset-luxerose .ts-single,
body.ts-preset-luxerose .ts-sidebar .widget {
    background: var(--ts-light);
    color: var(--ts-text);
    border: 1px solid var(--ts-border);
}
body.ts-preset-luxerose .ts-service-card h3,
body.ts-preset-luxerose .ts-package-card h3,
body.ts-preset-luxerose .ts-post-card .entry-title,
body.ts-preset-luxerose .ts-section-title h2 { color: #ffffff; }
body.ts-preset-luxerose .ts-service-icon {
    background: linear-gradient(135deg, #0f3460, #c0c0c0);
}
body.ts-preset-luxerose .ts-package-badge {
    background: #c0c0c0;
    color: #0f3460;
}
body.ts-preset-luxerose .ts-section-title h2 {
    font-family: 'Cormorant Garamond', serif;
    letter-spacing: 1px;
}
body.ts-preset-luxerose .ts-section-title .ts-divider { background: #c0c0c0; }
body.ts-preset-luxerose .ts-btn-primary {
    background: #0f3460;
    border-color: #0f3460;
    color: #ffffff;
}
body.ts-preset-luxerose .ts-btn-primary:hover {
    background: #0a2748;
}
body.ts-preset-luxerose .ts-hero::before { background: rgba(10, 25, 41, 0.7); }
body.ts-preset-luxerose input,
body.ts-preset-luxerose textarea,
body.ts-preset-luxerose select {
    background: #0a1929;
    color: var(--ts-text);
    border-color: var(--ts-border);
}

/* --- 16. Citrus Splash --- */
body.ts-preset-lime .ts-service-icon {
    background: linear-gradient(135deg, #f97316, #facc15);
    color: #451a03;
}
body.ts-preset-lime .ts-package-badge {
    background: #f97316;
    color: #ffffff;
}
body.ts-preset-lime .ts-btn-primary {
    background: #f97316;
    border-color: #f97316;
    color: #ffffff;
}
body.ts-preset-lime .ts-btn-primary:hover {
    background: #ea580c;
    border-color: #ea580c;
}
body.ts-preset-lime .ts-section-title .ts-divider { background: #f97316; }

/* --- 17. Coral Reef --- */
body.ts-preset-arctic .ts-service-icon {
    background: linear-gradient(135deg, #ff6b6b, #4ecdc4);
}
body.ts-preset-arctic .ts-package-badge {
    background: #ff6b6b;
    color: #ffffff;
}
body.ts-preset-arctic .ts-section-title .ts-divider { background: #4ecdc4; }
body.ts-preset-arctic .ts-btn-primary {
    background: #ff6b6b;
    border-color: #ff6b6b;
}
body.ts-preset-arctic .ts-btn-primary:hover {
    background: #e85555;
}

/* --- 18. Twilight Mauve --- */
body.ts-preset-sunrise .ts-service-icon {
    background: linear-gradient(135deg, #9e7b8a, #d4a5a5);
}
body.ts-preset-sunrise .ts-package-badge {
    background: #9e7b8a;
    color: #ffffff;
}
body.ts-preset-sunrise .ts-btn-primary {
    background: #9e7b8a;
    border-color: #9e7b8a;
    color: #ffffff;
}
body.ts-preset-sunrise .ts-btn-primary:hover {
    background: #836171;
}
body.ts-preset-sunrise .ts-section-title .ts-divider { background: #b8a9c9; }
body.ts-preset-sunrise .ts-section-title h2,
body.ts-preset-sunrise .ts-archive-header h1 {
    font-family: 'Lora', serif;
}

/* --- 19. Forest Whisper --- */
body.ts-preset-noirgreen .ts-service-icon {
    background: linear-gradient(135deg, #2d5016, #d4a017);
}
body.ts-preset-noirgreen .ts-package-badge {
    background: #d4a017;
    color: #2d5016;
}
body.ts-preset-noirgreen .ts-section-title .ts-divider { background: #d4a017; }
body.ts-preset-noirgreen .ts-section-title h2,
body.ts-preset-noirgreen .ts-archive-header h1 {
    font-family: 'Merriweather', serif;
}

/* --- 20. Onyx Bronze (dark mode) --- */
body.ts-preset-monochrome {
    background-color: var(--ts-dark);
    color: var(--ts-text);
}
body.ts-preset-monochrome .ts-section,
body.ts-preset-monochrome .ts-services-section,
body.ts-preset-monochrome .ts-packages-section,
body.ts-preset-monochrome .ts-blog-section,
body.ts-preset-monochrome .ts-contact-section { background: var(--ts-dark); }
body.ts-preset-monochrome .ts-services-section,
body.ts-preset-monochrome .ts-blog-section { background: var(--ts-light); }
body.ts-preset-monochrome .ts-service-card,
body.ts-preset-monochrome .ts-package-card,
body.ts-preset-monochrome .ts-post-card,
body.ts-preset-monochrome .ts-single,
body.ts-preset-monochrome .ts-sidebar .widget {
    background: var(--ts-light);
    color: var(--ts-text);
    border: 1px solid var(--ts-border);
}
body.ts-preset-monochrome .ts-service-card h3,
body.ts-preset-monochrome .ts-package-card h3,
body.ts-preset-monochrome .ts-post-card .entry-title,
body.ts-preset-monochrome .ts-section-title h2 { color: #ffffff; }
body.ts-preset-monochrome .ts-service-icon {
    background: linear-gradient(135deg, #cd7f32, #8b6914);
    color: #0a0a0a;
}
body.ts-preset-monochrome .ts-package-badge {
    background: #cd7f32;
    color: #0a0a0a;
}
body.ts-preset-monochrome .ts-btn-primary {
    background: #cd7f32;
    border-color: #cd7f32;
    color: #0a0a0a;
}
body.ts-preset-monochrome .ts-btn-primary:hover {
    background: #a86623;
}
body.ts-preset-monochrome .ts-section-title .ts-divider { background: #cd7f32; }
body.ts-preset-monochrome .ts-section-title h2 {
    font-family: 'Oswald', sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
}
body.ts-preset-monochrome .ts-hero::before { background: rgba(10, 10, 10, 0.75); }
body.ts-preset-monochrome input,
body.ts-preset-monochrome textarea,
body.ts-preset-monochrome select {
    background: #1a1a1a;
    color: var(--ts-text);
    border-color: var(--ts-border);
}
/* Onyx Bronze dark header — bronze text on black */
body.ts-preset-monochrome .ts-header {
    background: #0a0a0a;
}
body.ts-preset-monochrome .ts-site-title-text .ts-site-name,
body.ts-preset-monochrome .ts-site-title-text .ts-site-name a,
body.ts-preset-monochrome .ts-header-contact,
body.ts-preset-monochrome .ts-header-contact a,
body.ts-preset-monochrome .ts-header-contact strong {
    color: #cd7f32;
}
body.ts-preset-monochrome .ts-site-title-text .ts-site-tagline {
    color: rgba(205, 127, 50, 0.7);
}
body.ts-preset-monochrome .ts-menu-toggle span {
    background: #cd7f32;
}
body.ts-preset-monochrome .ts-nav {
    background: #0a0a0a;
}
body.ts-preset-monochrome .ts-nav .ts-menu > li > a {
    color: #cd7f32;
}
body.ts-preset-monochrome .ts-nav .ts-menu > li > a:hover,
body.ts-preset-monochrome .ts-nav .ts-menu > li.current-menu-item > a {
    background: #cd7f32;
    color: #0a0a0a;
}
body.ts-preset-monochrome .ts-footer {
    background: #0a0a0a;
    color: #cd7f32;
}
body.ts-preset-monochrome .ts-footer-widgets a,
body.ts-preset-monochrome .ts-footer-widgets p,
body.ts-preset-monochrome .ts-footer-widgets li {
    color: rgba(205, 127, 50, 0.85);
}
body.ts-preset-monochrome .ts-footer-widgets .widget-title {
    color: #cd7f32;
}
body.ts-preset-monochrome .ts-footer-widgets a:hover {
    color: #ffffff;
}

/* ==========================================================================
   38. NAV LOGO + NAV INNER LAYOUT
   ========================================================================== */
.ts-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}
.ts-nav-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.ts-nav-logo a {
    display: inline-flex;
    align-items: center;
}
.ts-nav-logo img {
    display: block;
    width: auto;
    height: auto;
}
@media (max-width: 992px) {
    .ts-nav-logo { display: none; }
    body.ts-nav-centered .ts-nav-inner,
    body.ts-nav-split .ts-nav-inner,
    body.ts-nav-floating .ts-nav-inner {
        justify-content: flex-start;
    }
}

/* ==========================================================================
   39. MOBILE APP MODE — applies only below the configured breakpoint
   ========================================================================== */

/* Smooth scrolling (iOS-style momentum). */
body.ts-mobile-app-smooth-scroll {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
}

/* App-mode styles only kick in below the breakpoint. */
@media (max-width: 768px) {
    body.ts-mobile-app-mode {
        /* App-like fixed header. */
        padding-top: 56px;
    }
    body.ts-mobile-app-mode .ts-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 999;
        box-shadow: 0 2px 12px rgba(0,0,0,0.1);
    }
    body.ts-mobile-app-mode .ts-topbar { display: none; }
    body.ts-mobile-app-mode .ts-header-main { padding: 8px 0 !important; }
    body.ts-mobile-app-mode .ts-site-logo img,
    body.ts-mobile-app-mode .custom-logo { max-height: 38px !important; }
    body.ts-mobile-app-mode .ts-site-title-text .ts-site-name { font-size: 1.1rem; }
    body.ts-mobile-app-mode .ts-site-title-text .ts-site-tagline { display: none; }
    body.ts-mobile-app-mode .ts-header-cta .ts-btn { padding: 6px 14px; font-size: 0.8rem; }
    body.ts-mobile-app-mode .ts-header-contact { display: none !important; }

    /* Nav bar hidden in app mode (replaced by bottom tab bar). */
    body.ts-mobile-app-mode.ts-mobile-app-bottom-nav .ts-nav { display: none; }
    body.ts-mobile-app-mode.ts-mobile-app-bottom-nav .ts-menu-toggle { display: none; }

    /* Cards become full-width, app-like. */
    body.ts-mobile-app-mode .ts-services-grid,
    body.ts-mobile-app-mode .ts-packages-grid,
    body.ts-mobile-app-mode .ts-post-list,
    body.ts-mobile-app-mode .ts-testimonials-grid {
        grid-template-columns: 1fr !important;
        gap: 12px;
    }
    body.ts-mobile-app-mode .ts-service-card,
    body.ts-mobile-app-mode .ts-package-card,
    body.ts-mobile-app-mode .ts-post-card {
        border-radius: 12px;
        margin: 0;
    }

    /* Sections — tighter spacing like an app. */
    body.ts-mobile-app-mode .ts-section { padding: 30px 0; }
    body.ts-mobile-app-mode .ts-section-title { margin-bottom: 20px; }
    body.ts-mobile-app-mode .ts-section-title h2 { font-size: 1.4rem; }
    body.ts-mobile-app-mode .ts-container { padding: 0 14px; }

    /* Hero — slimmer, app-like. */
    body.ts-mobile-app-mode .ts-hero { padding: 40px 0; }
    body.ts-mobile-app-mode .ts-hero h1 { font-size: 1.5rem; }
    body.ts-mobile-app-mode .ts-hero p { font-size: 0.95rem; }

    /* Add bottom padding so floating buttons don't cover content. */
    body.ts-mobile-app-mode.ts-mobile-app-bottom-nav {
        padding-bottom: 70px;
    }

    /* Hide back-to-top in app mode (bottom bar replaces it). */
    body.ts-mobile-app-mode.ts-mobile-app-bottom-nav #ts-back-to-top { display: none !important; }

    /* WhatsApp float repositioned to not conflict with bottom bar. */
    body.ts-mobile-app-mode.ts-mobile-app-bottom-nav .ts-whatsapp-float {
        bottom: 80px !important;
        left: 14px !important;
        width: 46px !important;
        height: 46px !important;
        font-size: 1.4rem !important;
    }

    /* Disable hover transforms (no hover on touch). */
    body.ts-mobile-app-mode .ts-service-card:hover,
    body.ts-mobile-app-mode .ts-package-card:hover,
    body.ts-mobile-app-mode .ts-post-card:hover {
        transform: none;
    }

    /* Forms — bigger tap targets. */
    body.ts-mobile-app-mode input,
    body.ts-mobile-app-mode textarea,
    body.ts-mobile-app-mode select {
        padding: 14px 16px;
        font-size: 16px; /* prevents iOS zoom */
    }
    body.ts-mobile-app-mode .ts-btn {
        padding: 14px 24px;
        font-size: 1rem;
    }
}

/* ==========================================================================
   40. MOBILE APP BOTTOM TAB BAR
   ========================================================================== */
.ts-app-bottom-nav {
    display: none;
}
body.ts-mobile-app-mode.ts-mobile-app-bottom-nav .ts-app-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--ts-white);
    border-top: 1px solid var(--ts-border);
    box-shadow: 0 -2px 12px rgba(0,0,0,0.08);
    z-index: 998;
    padding: 6px 0;
    padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
    justify-content: space-around;
    align-items: center;
}
.ts-app-bottom-nav a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px 2px;
    color: var(--ts-text-muted);
    text-decoration: none;
    font-size: 0.7rem;
    font-weight: 600;
    transition: color 0.2s;
    min-height: 50px;
}
.ts-app-bottom-nav a i {
    font-size: 1.25rem;
    margin-bottom: 2px;
}
.ts-app-bottom-nav a:hover,
.ts-app-bottom-nav a.active {
    color: var(--ts-primary);
}
.ts-app-bottom-nav a span {
    line-height: 1;
}


/* ==========================================================================
   41. NEW HEADER STYLES (centered + minimal — total 6)
   ========================================================================== */

/* --- 5. Centered header — logo centered above nav --- */
body.ts-header-centered .ts-header {
    text-align: center;
}
body.ts-header-centered .ts-header-inner {
    flex-direction: column;
    text-align: center;
    gap: 14px;
}
body.ts-header-centered .ts-site-branding {
    flex-direction: column;
    gap: 8px;
}
body.ts-header-centered .ts-header-cta {
    justify-content: center;
}
body.ts-header-centered .ts-nav .ts-menu {
    justify-content: center;
}

/* --- 6. Minimal header — ultra-clean, logo + toggle only --- */
body.ts-header-minimal .ts-header {
    background: var(--ts-white);
    box-shadow: none;
    border-bottom: 1px solid var(--ts-border);
}
body.ts-header-minimal .ts-topbar {
    display: none;
}
body.ts-header-minimal .ts-header-main {
    padding: 10px 0;
}
body.ts-header-minimal .ts-header-inner {
    gap: 14px;
}
body.ts-header-minimal .ts-header-contact,
body.ts-header-minimal .ts-site-title-text .ts-site-tagline {
    display: none;
}
body.ts-header-minimal .ts-site-title-text .ts-site-name {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -0.5px;
}
body.ts-header-minimal .ts-header-cta .ts-btn {
    padding: 6px 16px;
    font-size: 0.8rem;
}
body.ts-header-minimal .ts-nav {
    background: transparent;
    border-bottom: 1px solid var(--ts-border);
}

/* ==========================================================================
   42. NEW FOOTER STYLES (boxed + transparent — total 6)
   ========================================================================== */

/* --- 5. Boxed footer — footer in a contained card --- */
body.ts-footer-boxed .ts-footer {
    background: var(--ts-white);
    color: var(--ts-text);
    border-top: none;
    padding: 0 0 30px;
}
body.ts-footer-boxed .ts-footer .ts-container {
    max-width: calc(var(--ts-container-width) - 40px);
    margin: 30px auto;
    background: var(--ts-light);
    border-radius: var(--ts-radius-lg);
    padding: 40px;
    box-shadow: var(--ts-shadow);
    border: 1px solid var(--ts-border);
}
body.ts-footer-boxed .ts-footer a,
body.ts-footer-boxed .ts-footer p,
body.ts-footer-boxed .ts-footer li,
body.ts-footer-boxed .ts-footer span {
    color: var(--ts-text-muted);
}
body.ts-footer-boxed .ts-footer .widget-title {
    color: var(--ts-dark);
    border-bottom-color: var(--ts-border);
}
body.ts-footer-boxed .ts-footer a:hover {
    color: var(--ts-primary);
}
body.ts-footer-boxed .ts-footer-bottom,
body.ts-footer-boxed .ts-footer-bottom p,
body.ts-footer-boxed .ts-footer-bottom a {
    color: var(--ts-text-muted);
    opacity: 1;
    border-top: 1px solid var(--ts-border);
    margin-top: 20px;
    padding-top: 20px;
}
body.ts-footer-boxed .ts-social-icons a {
    background: var(--ts-white);
    color: var(--ts-dark);
    border: 1px solid var(--ts-border);
}

/* --- 6. Transparent footer — shows body background --- */
body.ts-footer-transparent .ts-footer {
    background: transparent;
    color: var(--ts-text);
    border-top: 1px solid var(--ts-border);
    padding: 40px 0 0;
}
body.ts-footer-transparent .ts-footer a,
body.ts-footer-transparent .ts-footer p,
body.ts-footer-transparent .ts-footer li,
body.ts-footer-transparent .ts-footer span {
    color: var(--ts-text-muted);
}
body.ts-footer-transparent .ts-footer .widget-title {
    color: var(--ts-dark);
    border-bottom-color: var(--ts-border);
}
body.ts-footer-transparent .ts-footer a:hover {
    color: var(--ts-primary);
}
body.ts-footer-transparent .ts-footer-bottom,
body.ts-footer-transparent .ts-footer-bottom p,
body.ts-footer-transparent .ts-footer-bottom a {
    color: var(--ts-text-muted);
    opacity: 1;
}
body.ts-footer-transparent .ts-social-icons a {
    background: var(--ts-light);
    color: var(--ts-dark);
}

/* ==========================================================================
   43. BLANK MODE — minimal styling for the blank canvas
   ========================================================================== */
body.ts-mode-blank .ts-header {
    box-shadow: none;
    border-bottom: 1px solid var(--ts-border);
}
body.ts-mode-blank .ts-topbar {
    display: none;
}
body.ts-mode-blank .ts-blank-mode .ts-single {
    box-shadow: none;
    border: none;
    padding: 0;
    max-width: 900px;
    margin: 0 auto;
}
body.ts-mode-blank .ts-blank-mode .entry-content {
    line-height: 1.8;
}