/* ============================================================
   PEACH PANTHER 13 — MAIN TEMPLATE STYLESHEET
   Tattoo Artist: Amber Collins | peachpanther13.com

   Colors & key values are driven by CSS custom properties
   that are set from Template Options in the Joomla Admin.
   To change the look: Admin > System > Site Templates >
   Peachpanther13 > Options
   ============================================================ */

/* ── 1. DESIGN TOKENS (fallback values — override via Template Options) ─── */
:root {
    --color-accent:        #e8956d;   /* Warm peach — buttons, highlights */
    --color-secondary:     #d4a574;   /* Warm gold — hover states, accents */
    --color-bg:            #0d0d0d;   /* Near-black page background */
    --color-bg-card:       #1a1a1a;   /* Card/section background */
    --color-bg-nav:        #080808;   /* Navigation background */
    --color-text:          #f0ece4;   /* Warm off-white body text */
    --color-text-muted:    #9a9490;   /* Muted / secondary text */
    --color-border:        #2e2e2e;   /* Subtle border */
    --color-overlay:       rgba(0,0,0,0.55); /* Hero overlay (opacity from Template Options) */

    --hero-overlay-opacity: 0.55;     /* Overridden per-page by inline <style> from index.php */
    --hero-bg-image:       none;      /* Set by index.php when background image is uploaded */
    --inner-header-bg-image: none;    /* Optional inner page header bg */

    --font-heading:        'Playfair Display', Georgia, serif;
    --font-script:         'Great Vibes', cursive;
    --font-body:           'Open Sans', system-ui, sans-serif;

    --nav-height:          72px;
    --border-radius:       6px;
    --border-radius-lg:    12px;
    --transition-base:     0.3s ease;
    --container-max:       1200px;
    --section-padding:     5rem 1.5rem;
}

/* ── 2. RESET & BASE ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
    font-family:      var(--font-body);
    background-color: var(--color-bg);
    color:            var(--color-text);
    line-height:      1.7;
    min-height:       100vh;
    overflow-x:       hidden;
}

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

a {
    color:           var(--color-accent);
    text-decoration: none;
    transition:      color var(--transition-base);
}
a:hover, a:focus-visible {
    color: var(--color-secondary);
    text-decoration: underline;
}

ul, ol { list-style: none; }

/* ── 3. ACCESSIBILITY ───────────────────────────────────────────────────── */

/* Skip-to-main link (WCAG 2.1 SC 2.4.1) */
.skip-link {
    position:        absolute;
    top:             -100%;
    left:            1rem;
    z-index:         10000;
    background:      var(--color-accent);
    color:           #fff;
    padding:         0.75rem 1.5rem;
    border-radius:   0 0 var(--border-radius) var(--border-radius);
    font-weight:     700;
    font-size:       0.9rem;
    text-decoration: none;
    letter-spacing:  0.05em;
    transition:      top 0.2s;
}
.skip-link:focus {
    top: 0;
    outline: 3px solid #fff;
    outline-offset: 2px;
}

/* Screen-reader only utility */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* Focus ring for keyboard navigation */
:focus-visible {
    outline:        2px solid var(--color-accent);
    outline-offset: 3px;
    border-radius:  2px;
}

/* Respect user motion preferences */
@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;
    }
    .hero-scroll-indicator { display: none; }
}

/* ── 4. TYPOGRAPHY ──────────────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
    font-family:  var(--font-heading);
    line-height:  1.2;
    color:        var(--color-text);
    font-weight:  600;
}

h1 { font-size: clamp(2rem,   5vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 4vw, 2.5rem); }
h3 { font-size: clamp(1.2rem, 3vw, 1.75rem); }
h4 { font-size: 1.25rem; }

p { margin-bottom: 1rem; max-width: 72ch; }
p:last-child { margin-bottom: 0; }

strong { font-weight: 700; color: var(--color-text); }
em     { font-style: italic; }

/* Section headings with decorative underline */
.section-heading {
    text-align:    center;
    margin-bottom: 0.75rem;
    position:      relative;
}
.section-heading::after {
    content:          '';
    display:          block;
    width:            60px;
    height:           2px;
    background:       var(--color-accent);
    margin:           0.75rem auto 0;
    border-radius:    2px;
}
.section-subheading {
    text-align:    center;
    color:         var(--color-text-muted);
    font-size:     1rem;
    font-weight:   300;
    margin-bottom: 3rem;
}

/* ── 5. LAYOUT CONTAINERS ───────────────────────────────────────────────── */

.container {
    max-width:    var(--container-max);
    margin:       0 auto;
    padding-left:  1.5rem;
    padding-right: 1.5rem;
}

section {
    padding: var(--section-padding);
}

/* Content layout with optional sidebar */
.content-layout {
    max-width:    var(--container-max);
    margin:       0 auto;
    padding:      3rem 1.5rem;
    display:      grid;
    grid-template-columns: 1fr;
    gap:          2rem;
}
.content-layout.has-sidebar {
    grid-template-columns: 1fr 280px;
}
.content-layout.has-sidebar .sidebar-left ~ .component-area {
    order: 2;
}
.content-layout.has-sidebar .sidebar-left {
    order: 1;
}

.component-area {
    min-width: 0; /* prevent overflow in grid */
}

/* ── 6. BUTTONS ─────────────────────────────────────────────────────────── */

.btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             0.5rem;
    padding:         0.85rem 2.2rem;
    font-family:     var(--font-body);
    font-size:       0.9rem;
    font-weight:     700;
    letter-spacing:  0.12em;
    text-transform:  uppercase;
    border-radius:   var(--border-radius);
    cursor:          pointer;
    border:          2px solid transparent;
    transition:      background var(--transition-base),
                     color       var(--transition-base),
                     border-color var(--transition-base),
                     transform   var(--transition-base),
                     box-shadow  var(--transition-base);
    text-decoration: none;
    white-space:     nowrap;
}
.btn:hover, .btn:focus-visible {
    text-decoration: none;
    transform:       translateY(-2px);
}

.btn-primary {
    background:    var(--color-accent);
    color:         #fff;
    border-color:  var(--color-accent);
}
.btn-primary:hover, .btn-primary:focus-visible {
    background:   var(--color-secondary);
    border-color: var(--color-secondary);
    color:        #fff;
    box-shadow:   0 6px 20px rgba(232,149,109,0.35);
}

.btn-outline {
    background:   transparent;
    color:        var(--color-accent);
    border-color: var(--color-accent);
}
.btn-outline:hover, .btn-outline:focus-visible {
    background:   var(--color-accent);
    color:        #fff;
}

.btn-hero {
    padding:      1rem 2.8rem;
    font-size:    1rem;
    letter-spacing: 0.15em;
    margin-top:   2rem;
}

/* ── 7. NAVIGATION ──────────────────────────────────────────────────────── */

.site-header {
    position:   fixed;
    top:        0;
    left:       0;
    right:      0;
    z-index:    1000;
    height:     var(--nav-height);
    background: transparent;
    transition: background var(--transition-base),
                box-shadow  var(--transition-base);
}

/* Scrolled state added by JS */
.site-header.is-scrolled {
    background: var(--color-bg-nav);
    box-shadow: 0 2px 20px rgba(0,0,0,0.5);
}

/* On inner pages, nav is always dark (no hero behind it) */
.page-inner .site-header {
    background: var(--color-bg-nav);
}

.main-nav { height: 100%; }

.nav-container {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    max-width:       var(--container-max);
    margin:          0 auto;
    padding:         0 1.5rem;
    height:          100%;
}

/* Logo */
.site-logo {
    display:         flex;
    flex-direction:  column;
    align-items:     flex-start;
    line-height:     1;
    text-decoration: none;
    color:           var(--color-text);
    gap:             0;
}
.site-logo:hover, .site-logo:focus-visible {
    color:           var(--color-accent);
    text-decoration: none;
}
.logo-script {
    font-family:  var(--font-script);
    font-size:    1.35rem;
    color:        var(--color-accent);
    line-height:  1.1;
    display:      block;
}
.logo-name {
    font-family:    var(--font-body);
    font-size:      0.65rem;
    font-weight:    700;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color:          var(--color-text);
    display:        block;
    margin-top:     0.1rem;
}

/* Menu module output styles */
.nav-menu-wrapper ul {
    display:         flex;
    align-items:     center;
    gap:             0.25rem;
    list-style:      none;
}
.nav-menu-wrapper ul li a,
.nav-menu-wrapper ul li span.nav-header {
    display:         inline-flex;
    align-items:     center;
    padding:         0.5rem 1rem;
    font-family:     var(--font-body);
    font-size:       0.85rem;
    font-weight:     600;
    letter-spacing:  0.1em;
    text-transform:  uppercase;
    color:           var(--color-text);
    text-decoration: none;
    border-radius:   var(--border-radius);
    transition:      color var(--transition-base), background var(--transition-base);
    white-space:     nowrap;
}
.nav-menu-wrapper ul li a:hover,
.nav-menu-wrapper ul li a:focus-visible,
.nav-menu-wrapper ul li.active > a,
.nav-menu-wrapper ul li.current > a {
    color:           var(--color-accent);
    text-decoration: none;
}

/* "Book Now" last menu item styled as button */
.nav-menu-wrapper ul li:last-child > a {
    background:   var(--color-accent);
    color:        #fff;
    padding:      0.5rem 1.2rem;
    border-radius: var(--border-radius);
}
.nav-menu-wrapper ul li:last-child > a:hover {
    background: var(--color-secondary);
    color:      #fff;
}

/* Mobile hamburger */
.nav-toggle {
    display:          none;
    flex-direction:   column;
    justify-content:  center;
    gap:              5px;
    background:       none;
    border:           none;
    cursor:           pointer;
    padding:          0.5rem;
    border-radius:    var(--border-radius);
    transition:       background var(--transition-base);
}
.nav-toggle:hover, .nav-toggle:focus-visible {
    background: rgba(255,255,255,0.08);
}
.hamburger-line {
    display:        block;
    width:          24px;
    height:         2px;
    background:     var(--color-text);
    border-radius:  2px;
    transition:     transform var(--transition-base), opacity var(--transition-base);
    transform-origin: center;
}
.nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── 8. HERO SECTION ────────────────────────────────────────────────────── */

.hero-section {
    position:        relative;
    min-height:      100vh;
    display:         flex;
    align-items:     center;
    justify-content: center;
    text-align:      center;
    padding:         calc(var(--nav-height) + 2rem) 1.5rem 4rem;
    /* Background image set via CSS variable from Template Options */
    background-image:    var(--hero-bg-image, none);
    background-size:     cover;
    background-position: center;
    background-repeat:   no-repeat;
    background-attachment: fixed;
    overflow: hidden;
}

/* Dark overlay (opacity controlled by Template Options → Hero Overlay Darkness) */
.hero-overlay {
    position: absolute;
    inset:    0;
    background: rgba(0, 0, 0, var(--hero-overlay-opacity));
    z-index:  1;
}

.hero-content,
.hero-module-content {
    position:   relative;
    z-index:    2;
    max-width:  700px;
    margin:     0 auto;
}

.hero-script {
    font-family:   var(--font-script);
    font-size:     clamp(2rem, 6vw, 3.5rem);
    color:         var(--color-accent);
    line-height:   1.1;
    margin-bottom: 0.25rem;
}

.hero-title {
    font-family:    var(--font-heading);
    font-size:      clamp(2.5rem, 8vw, 6rem);
    font-weight:    700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--color-text);
    margin-bottom:  0.5rem;
    text-shadow:    0 2px 30px rgba(0,0,0,0.6);
}

.hero-tagline {
    font-size:      clamp(0.9rem, 2vw, 1.1rem);
    font-weight:    300;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color:          var(--color-text-muted);
    margin-bottom:  0.5rem;
}

.hero-specialty {
    font-size:      clamp(0.85rem, 1.8vw, 1rem);
    font-weight:    400;
    letter-spacing: 0.15em;
    color:          var(--color-secondary);
    margin-bottom:  0;
}

/* Social icons row */
.hero-social {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             1rem;
    margin-top:      2rem;
}
.hero-social .social-link {
    display:          flex;
    align-items:      center;
    justify-content:  center;
    width:            44px;
    height:           44px;
    border:           1px solid rgba(240,236,228,0.25);
    border-radius:    50%;
    color:            var(--color-text);
    text-decoration:  none;
    transition:       border-color var(--transition-base),
                      color        var(--transition-base),
                      background   var(--transition-base);
}
.hero-social .social-link:hover,
.hero-social .social-link:focus-visible {
    border-color: var(--color-accent);
    color:        var(--color-accent);
    background:   rgba(232,149,109,0.1);
}

/* Scroll indicator */
.hero-scroll-indicator {
    position:        absolute;
    bottom:          2rem;
    left:            50%;
    transform:       translateX(-50%);
    z-index:         2;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    gap:             0.5rem;
    color:           var(--color-text-muted);
    font-size:       0.65rem;
    letter-spacing:  0.2em;
    text-transform:  uppercase;
    animation:       scrollBounce 2s ease-in-out infinite;
}
.scroll-text { display: block; }
.scroll-line {
    display:          block;
    width:            1px;
    height:           40px;
    background:       linear-gradient(to bottom, var(--color-accent), transparent);
    animation:        scrollLine 2s ease-in-out infinite;
}

@keyframes scrollBounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%       { transform: translateX(-50%) translateY(6px); }
}
@keyframes scrollLine {
    0%   { opacity: 0; transform: scaleY(0); transform-origin: top; }
    50%  { opacity: 1; transform: scaleY(1); transform-origin: top; }
    100% { opacity: 0; transform: scaleY(1); transform-origin: bottom; }
}

/* ── 9. INNER PAGE HEADER BANNER ────────────────────────────────────────── */

.page-header-banner {
    position:        relative;
    min-height:      300px;
    display:         flex;
    align-items:     flex-end;
    padding:         calc(var(--nav-height) + 2rem) 1.5rem 3rem;
    background-image:    var(--inner-header-bg-image, none);
    background-size:     cover;
    background-position: center;
    background-color:    #111;
}
.page-header-overlay {
    position:   absolute;
    inset:      0;
    background: linear-gradient(to top, rgba(13,13,13,0.9) 0%, rgba(0,0,0,0.4) 100%);
}
.page-header-content {
    position:   relative;
    z-index:    1;
    max-width:  var(--container-max);
    margin:     0 auto;
    width:      100%;
}
.page-header-title {
    font-size:    clamp(2rem, 5vw, 3.5rem);
    font-weight:  700;
    color:        var(--color-text);
    position:     relative;
}
.page-header-title::after {
    content:      '';
    display:      block;
    width:        60px;
    height:       3px;
    background:   var(--color-accent);
    margin-top:   0.75rem;
    border-radius: 2px;
}

/* ── 10. HOME SECTION MODULES ───────────────────────────────────────────── */

/* These sections are populated by modules in the Module Manager */

.home-showcase-section {
    background: var(--color-bg);
    padding:    5rem 0;
}

.home-about-section {
    background: var(--color-bg-card);
    padding:    5rem 0;
}

.home-cta-section {
    background: linear-gradient(135deg, #1a1108 0%, #0d0d0d 100%);
    padding:    5rem 0;
    text-align: center;
}

/* ── 11. PORTFOLIO / GALLERY GRID ───────────────────────────────────────── */
/* Joomla Category Blog override produces .portfolio-grid with .portfolio-item children */

.portfolio-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap:                   1rem;
    max-width:             var(--container-max);
    margin:                0 auto;
    padding:               0 1.5rem;
}

.portfolio-item {
    position:     relative;
    overflow:     hidden;
    border-radius: var(--border-radius);
    background:   #111;
    aspect-ratio: 1 / 1;
    cursor:       pointer;
}
.portfolio-item a {
    display:  block;
    height:   100%;
}
.portfolio-item img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: transform 0.5s ease, filter 0.3s ease;
    filter:     brightness(0.9);
}
.portfolio-item:hover img {
    transform: scale(1.06);
    filter:    brightness(1);
}

/* Portfolio item overlay on hover */
.portfolio-item-overlay {
    position:    absolute;
    inset:       0;
    background:  rgba(13,13,13,0);
    display:     flex;
    align-items: flex-end;
    padding:     1.25rem;
    transition:  background var(--transition-base);
}
.portfolio-item:hover .portfolio-item-overlay {
    background: rgba(13,13,13,0.65);
}
.portfolio-item-title {
    font-family:    var(--font-heading);
    font-size:      0.95rem;
    color:          #fff;
    opacity:        0;
    transform:      translateY(8px);
    transition:     opacity 0.3s ease, transform 0.3s ease;
}
.portfolio-item:hover .portfolio-item-title {
    opacity:   1;
    transform: translateY(0);
}

/* Portfolio filters (category filter buttons — added by JS) */
.portfolio-filters {
    display:         flex;
    flex-wrap:       wrap;
    justify-content: center;
    gap:             0.5rem;
    max-width:       var(--container-max);
    margin:          0 auto 2.5rem;
    padding:         0 1.5rem;
}
.filter-btn {
    padding:      0.5rem 1.25rem;
    font-size:    0.8rem;
    font-weight:  600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border:       1px solid var(--color-border);
    border-radius: 50px;
    background:   transparent;
    color:        var(--color-text-muted);
    cursor:       pointer;
    transition:   all var(--transition-base);
}
.filter-btn:hover,
.filter-btn.active,
.filter-btn:focus-visible {
    border-color: var(--color-accent);
    color:        var(--color-accent);
    background:   rgba(232,149,109,0.08);
}

/* ── 12. ARTICLE CONTENT ────────────────────────────────────────────────── */

/* Joomla article content wrapper */
.item-page,
.blog,
article.article-full {
    max-width: 820px;
}

/* Article text body */
.article-fulltext,
.article-intro,
div.entry-content {
    font-size:   1rem;
    line-height: 1.8;
    color:       var(--color-text);
}
.article-fulltext h2,
.article-fulltext h3,
.article-intro h2,
.article-intro h3 {
    margin:      2rem 0 1rem;
    color:       var(--color-text);
}
.article-fulltext p,
.article-intro p {
    margin-bottom: 1.25rem;
}
.article-fulltext img,
.article-intro img {
    border-radius: var(--border-radius);
    margin:        1.5rem 0;
}
.article-fulltext ul,
.article-fulltext ol {
    list-style:  disc;
    padding-left: 1.5rem;
    margin-bottom: 1.25rem;
}
.article-fulltext ol { list-style: decimal; }
.article-fulltext li { margin-bottom: 0.5rem; }

/* Joomla pagination */
.pagination {
    display:         flex;
    flex-wrap:       wrap;
    gap:             0.5rem;
    justify-content: center;
    padding:         2rem 0;
}
.pagination a,
.pagination span {
    display:      inline-flex;
    align-items:  center;
    justify-content: center;
    min-width:    44px;
    height:       44px;
    padding:      0 0.75rem;
    border:       1px solid var(--color-border);
    border-radius: var(--border-radius);
    font-size:    0.9rem;
    color:        var(--color-text-muted);
    text-decoration: none;
    transition:   all var(--transition-base);
}
.pagination a:hover,
.pagination .active span {
    background:  var(--color-accent);
    border-color: var(--color-accent);
    color:       #fff;
}

/* ── 13. CONTACT / BOOKING ──────────────────────────────────────────────── */

/* Joomla contact component overrides */
.contact-form .control-group,
.contact-form .form-group {
    margin-bottom: 1.25rem;
}
.contact-form label {
    display:        block;
    margin-bottom:  0.4rem;
    font-size:      0.85rem;
    font-weight:    600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color:          var(--color-text-muted);
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea,
.contact-form select {
    width:            100%;
    padding:          0.9rem 1.1rem;
    background:       #1e1e1e;
    border:           1px solid var(--color-border);
    border-radius:    var(--border-radius);
    color:            var(--color-text);
    font-family:      var(--font-body);
    font-size:        1rem;
    transition:       border-color var(--transition-base), box-shadow var(--transition-base);
    -webkit-appearance: none;
}
.contact-form input:focus,
.contact-form textarea:focus {
    outline:      none;
    border-color: var(--color-accent);
    box-shadow:   0 0 0 3px rgba(232,149,109,0.15);
}
.contact-form textarea {
    min-height:  140px;
    resize:      vertical;
}
.contact-form .btn,
.contact-form input[type="submit"],
.contact-form button[type="submit"] {
    width:          auto;
    min-width:      180px;
    margin-top:     0.5rem;
    padding:        0.85rem 2.2rem;
    background:     var(--color-accent);
    color:          #fff;
    border:         none;
    border-radius:  var(--border-radius);
    font-family:    var(--font-body);
    font-size:      0.9rem;
    font-weight:    700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor:         pointer;
    transition:     background var(--transition-base), transform var(--transition-base);
}
.contact-form .btn:hover,
.contact-form input[type="submit"]:hover,
.contact-form button[type="submit"]:hover {
    background: var(--color-secondary);
    transform:  translateY(-2px);
}

/* Booking info callout box */
.booking-info-box {
    background:    var(--color-bg-card);
    border:        1px solid var(--color-border);
    border-left:   4px solid var(--color-accent);
    border-radius: var(--border-radius);
    padding:       2rem;
}
.booking-info-box h3 {
    margin-bottom: 1rem;
    color:         var(--color-accent);
}
.booking-info-box .phone-link {
    font-size:   1.5rem;
    font-weight: 700;
    color:       var(--color-text);
    display:     inline-block;
    margin:      0.5rem 0 1rem;
}
.booking-info-box .phone-link:hover {
    color: var(--color-accent);
}

/* ── 14. CARDS (module chrome) ──────────────────────────────────────────── */

/* pp13card chrome — used for sidebar modules */
.pp13card {
    background:    var(--color-bg-card);
    border:        1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding:       1.5rem;
    margin-bottom: 1.5rem;
}
.pp13card .module-title {
    font-family:    var(--font-heading);
    font-size:      1.1rem;
    font-weight:    600;
    color:          var(--color-text);
    margin-bottom:  1rem;
    padding-bottom: 0.75rem;
    border-bottom:  1px solid var(--color-border);
}

/* ── 15. FOOTER ─────────────────────────────────────────────────────────── */

.site-footer {
    background:    #060606;
    border-top:    1px solid var(--color-border);
    padding-top:   4rem;
}
.footer-container {
    max-width:    var(--container-max);
    margin:       0 auto;
    padding:      0 1.5rem;
}
.footer-columns {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   3rem;
    padding-bottom:        3rem;
    border-bottom:         1px solid var(--color-border);
}
.footer-col h3,
.footer-col .footer-heading {
    font-family:    var(--font-body);
    font-size:      0.8rem;
    font-weight:    700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color:          var(--color-text-muted);
    margin-bottom:  1.25rem;
}
.footer-col p,
.footer-col li {
    font-size:     0.9rem;
    color:         var(--color-text-muted);
    line-height:   1.7;
    margin-bottom: 0.5rem;
}
.footer-col a {
    color:     var(--color-text-muted);
    font-size: 0.9rem;
}
.footer-col a:hover {
    color: var(--color-accent);
}

.footer-bottom {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    flex-wrap:       wrap;
    gap:             1rem;
    padding:         1.75rem 0;
}
.footer-copyright {
    font-size:     0.8rem;
    color:         var(--color-text-muted);
    letter-spacing: 0.04em;
    margin:        0;
    max-width:     none;
}
.footer-social {
    display:     flex;
    align-items: center;
    gap:         0.75rem;
}
.footer-social .social-link {
    display:        flex;
    align-items:    center;
    justify-content: center;
    color:          var(--color-text-muted);
    transition:     color var(--transition-base);
}
.footer-social .social-link:hover {
    color: var(--color-accent);
}

/* ── 16. JOOMLA SYSTEM MESSAGES ─────────────────────────────────────────── */

.system-unpublished,
#system-message-container,
.alert {
    max-width:     var(--container-max);
    margin:        1.5rem auto;
    padding:       0 1.5rem;
}
.alert {
    padding:       1rem 1.5rem;
    border-radius: var(--border-radius);
    border:        1px solid var(--color-border);
    background:    var(--color-bg-card);
    color:         var(--color-text);
    font-size:     0.95rem;
}
.alert-success { border-color: #4caf50; }
.alert-warning { border-color: #ff9800; }
.alert-danger,
.alert-error   { border-color: #f44336; }
.alert-info    { border-color: var(--color-accent); }

/* ── 17. MISCELLANEOUS JOOMLA COMPONENTS ────────────────────────────────── */

/* Breadcrumbs */
.breadcrumb {
    display:      flex;
    flex-wrap:    wrap;
    gap:          0.25rem;
    align-items:  center;
    padding:      1rem 0;
    font-size:    0.8rem;
    color:        var(--color-text-muted);
    list-style:   none;
}
.breadcrumb .divider { color: var(--color-border); }
.breadcrumb a { color: var(--color-text-muted); }
.breadcrumb a:hover { color: var(--color-accent); }
.breadcrumb .active { color: var(--color-text); }

/* Tag lists */
.article-tags { margin-top: 1.5rem; }
.article-tags .tag-name a {
    display:       inline-block;
    padding:       0.3rem 0.8rem;
    border:        1px solid var(--color-border);
    border-radius: 50px;
    font-size:     0.75rem;
    color:         var(--color-text-muted);
    margin:        0.2rem;
    transition:    all var(--transition-base);
}
.article-tags .tag-name a:hover {
    border-color: var(--color-accent);
    color:        var(--color-accent);
}

/* Read more link */
.readmore a {
    color:         var(--color-accent);
    font-size:     0.85rem;
    font-weight:   600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ── 18. RESPONSIVE ─────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
    .footer-columns {
        grid-template-columns: repeat(2, 1fr);
    }
    .footer-columns .footer-col:last-child {
        grid-column: 1 / -1;
    }
    .portfolio-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    }
}

@media (max-width: 768px) {
    :root {
        --section-padding: 3.5rem 1.25rem;
        --nav-height:      60px;
    }

    /* Mobile navigation */
    .nav-toggle { display: flex; }
    .nav-menu-wrapper {
        position:   absolute;
        top:        var(--nav-height);
        left:       0;
        right:      0;
        background: var(--color-bg-nav);
        border-top: 1px solid var(--color-border);
        padding:    1rem 1.5rem 1.5rem;
        box-shadow: 0 8px 24px rgba(0,0,0,0.4);
        /* Hidden by default; shown by JS */
        display:    none;
    }
    .nav-menu-wrapper.is-open { display: block; }
    .nav-menu-wrapper ul {
        flex-direction: column;
        align-items:    stretch;
        gap:            0.25rem;
    }
    .nav-menu-wrapper ul li a {
        padding: 0.85rem 1rem;
        font-size: 0.9rem;
    }
    .nav-menu-wrapper ul li:last-child > a {
        margin-top:   0.5rem;
        text-align:   center;
    }

    /* Hero adjustments */
    .hero-section {
        background-attachment: scroll; /* Parallax off on mobile */
        min-height: 100svh;
    }
    .hero-scroll-indicator { display: none; }

    /* Content layout */
    .content-layout.has-sidebar {
        grid-template-columns: 1fr;
    }
    .content-layout.has-sidebar .sidebar-left,
    .content-layout.has-sidebar .sidebar-right {
        order: 99;
    }

    /* Footer */
    .footer-columns {
        grid-template-columns: 1fr;
        gap:                   2rem;
    }
    .footer-bottom {
        flex-direction: column;
        text-align:     center;
    }

    /* Portfolio */
    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
}

@media (max-width: 480px) {
    .portfolio-grid {
        grid-template-columns: 1fr;
    }
    .hero-title { letter-spacing: 0.05em; }
    .btn-hero { width: 100%; }
}

/* ── 19. PRINT STYLES ───────────────────────────────────────────────────── */

@media print {
    .site-header,
    .site-footer,
    .hero-section,
    .page-header-banner,
    .nav-toggle,
    .hero-social,
    .btn,
    .skip-link { display: none !important; }

    body {
        background: #fff;
        color:      #000;
    }
    a { color: #000; text-decoration: underline; }
}