/*
Theme Name: Jackson+Jackson
Theme URI: https://jackson-law.net/
Author: Jackson+Jackson
Author URI: https://jackson-law.net/
Description: A faithful, modern rebuild of the original Blogolife-based Jackson+Jackson design. PHP 8+ compatible. Red brand header, dark navigation bar with dropdowns, hero banner, two-column layout with right sidebar, and red section title/sidebar banners.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jacksonjackson
Tags: two-columns, right-sidebar, custom-menu, custom-logo, featured-images, threaded-comments
*/

/* =========================================================
   Design tokens (matched to the original site screenshot)
   ========================================================= */
:root{
    --jj-red:        #c2262c;   /* brand red used in nav + banners */
    --jj-red-dark:   #a01a20;   /* darker red for active tab / hover */
    --jj-red-soft:   #f6dcde;   /* soft pink for the content title band */
    --jj-nav:        #2b2b2b;   /* dark accents / icon block */
    --jj-text:       #333333;
    --jj-muted:      #6d6d6d;
    --jj-line:       #e4e4e4;
    --jj-bg:         #ffffff;

    --jj-font-serif: Georgia, "Times New Roman", Times, serif;
    --jj-font-sans:  "PT Sans", "Helvetica Neue", Arial, sans-serif;

    --jj-container:  1200px;
}

/* =========================================================
   Reset / base
   ========================================================= */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
    margin:0;
    font-family:var(--jj-font-sans);
    font-size:16px;
    line-height:1.65;
    color:var(--jj-text);
    background:var(--jj-bg);
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--jj-red); text-decoration:none; }
a:hover, a:focus{ color:var(--jj-red-dark); text-decoration:underline; }

.container{
    max-width:var(--jj-container);
    margin:0 auto;
    padding:0 24px;
}

.screen-reader-text{
    position:absolute !important;
    clip:rect(1px,1px,1px,1px);
    width:1px; height:1px; overflow:hidden;
}

/* =========================================================
   Top thin bar (subtle light divider)
   ========================================================= */
.site-topbar{
    height:2px;
    background:transparent;
}

/* =========================================================
   Site header — white with brand block on the left, logo right
   ========================================================= */
.site-header{
    background:#fff;
    padding:28px 0 22px;
    border-bottom:1px solid var(--jj-line);
}
.site-header .header-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
}
.site-branding .site-title{
    margin:0;
    font-family:var(--jj-font-serif);
    font-weight:700;
    font-size:44px;
    line-height:1.05;
    color:var(--jj-red);
}
.site-branding .site-title a{ color:inherit; text-decoration:none; }
.site-branding .site-description{
    margin:8px 0 0;
    color:var(--jj-muted);
    font-size:18px;
    letter-spacing:.02em;
}
.site-logo img{ max-height:96px; width:auto; }

/* =========================================================
   Primary navigation — solid red bar, white text
   Active tab is a darker red block.
   ========================================================= */
.site-nav{
    background:var(--jj-red);
}
.site-nav .container{ padding:0 24px; }
.site-nav ul{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-wrap:wrap;
}
.site-nav li{ position:relative; }
.site-nav a{
    display:block;
    color:#fff;
    padding:14px 24px;
    font-size:16px;
    font-weight:400;
    letter-spacing:.01em;
    text-decoration:none;
    transition:background-color .15s ease;
}
.site-nav > ul > li > a:hover,
.site-nav > ul > li > a:focus,
.site-nav > ul > li.current-menu-item > a,
.site-nav > ul > li.current-menu-parent > a,
.site-nav > ul > li.current-menu-ancestor > a,
.site-nav > ul > li:focus-within > a{
    background:var(--jj-red-dark);
    color:#fff;
}

/* Dropdown caret for items with children */
.site-nav .menu-item-has-children > a::after,
.site-nav li.has-children > a::after{
    content:"";
    display:inline-block;
    width:0;
    height:0;
    margin-left:8px;
    vertical-align:middle;
    border-left:5px solid transparent;
    border-right:5px solid transparent;
    border-top:5px solid #fff;
}

/* Dropdown submenus */
.site-nav ul ul{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    min-width:230px;
    background:var(--jj-red);
    flex-direction:column;
    box-shadow:0 6px 18px rgba(0,0,0,.15);
    z-index:50;
}
.site-nav li:hover > ul,
.site-nav li:focus-within > ul{ display:flex; }
.site-nav ul ul a{
    padding:12px 20px;
    border-top:1px solid rgba(255,255,255,.12);
    font-size:15px;
    color:#fff;
}
.site-nav ul ul a:hover,
.site-nav ul ul a:focus{ background:var(--jj-red-dark); }

/* Mobile nav toggle */
.nav-toggle{
    display:none;
    background:transparent;
    border:0;
    color:#fff;
    font-size:18px;
    padding:14px 4px;
    cursor:pointer;
}

/* =========================================================
   Hero banner (full-width image just below the nav)
   ========================================================= */
.site-hero{
    background:#000 center/cover no-repeat;
    min-height:260px;
}
.site-hero.has-image{ min-height:320px; }
@media (max-width:768px){
    .site-hero{ min-height:160px; }
    .site-hero.has-image{ min-height:200px; }
}

/* =========================================================
   Main layout — content + right sidebar
   ========================================================= */
.site-main{
    padding:36px 0 60px;
}
.site-main .layout{
    display:grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap:40px;
}
.site-main.full-width .layout{
    grid-template-columns: minmax(0, 1fr);
}
@media (max-width:900px){
    .site-main .layout{ grid-template-columns:1fr; }
}

/* =========================================================
   Content title bar — modern flat bar, no ribbon/tab.
   ========================================================= */
.entry-title-band{
    position:relative;
    display:flex;
    align-items:center;
    background:#ffffff;
    color:var(--jj-text);
    margin:0 0 26px;
    border-bottom:2px solid var(--jj-red);
    min-height:56px;
    padding:0;
}
.entry-title-band .band-icon{
    display:none;
}
.entry-title-band h1,
.entry-title-band h2{
    margin:0;
    padding:14px 0;
    font-size:26px;
    font-weight:700;
    letter-spacing:.005em;
    color:var(--jj-text);
    font-family:var(--jj-font-serif);
}

/* =========================================================
   Entry content typography
   ========================================================= */
.entry-content h1{
    font-size:26px;
    color:var(--jj-red);
    text-transform:uppercase;
    letter-spacing:.03em;
    margin:24px 0 14px;
    font-weight:700;
}
.entry-content h2{
    font-size:20px;
    color:var(--jj-muted);
    margin:26px 0 10px;
    font-weight:600;
}
.entry-content a{ color:var(--jj-red); text-decoration:underline; }
.entry-content ul li{ margin-bottom:4px; }
.entry-content h3{
    font-size:18px;
    color:var(--jj-text);
    margin:20px 0 8px;
    font-weight:700;
}
.entry-content p{ margin:0 0 14px; }
.entry-content ul, .entry-content ol{ margin:0 0 16px 22px; }
.entry-content strong{ color:var(--jj-text); }

/* =========================================================
   Sidebar — red banner with folded-tab notch on the left
   ========================================================= */
.site-sidebar{ min-width:0; }
.widget{
    margin-bottom:28px;
    font-size:15px;
    line-height:1.55;
}
.widget-title,
.widget h2.widget-title,
.widget h3.widget-title{
    position:relative;
    background:var(--jj-red);
    color:#fff;
    margin:0 0 18px;
    padding:14px 20px;
    font-size:18px;
    font-weight:700;
    letter-spacing:.02em;
}
.widget-title::after{ content:none; display:none; }
.widget .office{
    padding:0 4px 14px;
    border-bottom:1px solid var(--jj-line);
    margin-bottom:14px;
    color:var(--jj-text);
}
.widget .office:last-child{ border-bottom:0; margin-bottom:0; }
.widget .office .office-name{
    font-weight:400;
    color:var(--jj-text);
    margin-bottom:4px;
}
.widget .office a{
    color:var(--jj-text);
    text-decoration:underline;
    text-decoration-color:#c9c9c9;
    text-underline-offset:2px;
}
.widget .office a:hover{ color:var(--jj-red); text-decoration-color:var(--jj-red); }
.widget .office p{ margin:0 0 2px; }
.widget ul{ list-style:none; padding:0; margin:0; }
.widget ul li{
    padding:8px 4px;
    border-bottom:1px solid var(--jj-line);
}
.widget ul li:last-child{ border-bottom:0; }
.widget .email-block a{
    display:block;
    background:#0f0f10;
    color:#e5e5e5;
    padding:6px 10px;
    text-decoration:none;
    font-size:14px;
    margin-top:4px;
    border-bottom:1px solid #333;
}
.widget .email-block a:last-child{ border-bottom:0; }
.widget .email-block a:hover{ color:#fff; background:#000; }

/* =========================================================
   Footer
   ========================================================= */
.site-footer{
    background:var(--jj-nav);
    color:#d5d5d5;
    padding:34px 0 24px;
    margin-top:40px;
    font-size:14px;
}
.site-footer a{ color:#fff; }
.site-footer .footer-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0,1fr));
    gap:28px;
    margin-bottom:22px;
}
.site-footer .footer-col h4{
    color:#fff;
    margin:0 0 8px;
    font-size:15px;
    text-transform:uppercase;
    letter-spacing:.06em;
}
.site-footer .footer-col p{ margin:0 0 4px; }
.site-footer .footer-bottom{
    border-top:1px solid rgba(255,255,255,.15);
    padding-top:14px;
    text-align:center;
    color:#bdbdbd;
    font-size:13px;
}
@media (max-width:820px){
    .site-footer .footer-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:520px){
    .site-footer .footer-grid{ grid-template-columns:1fr; }
}

/* =========================================================
   Homepage practice-area cards (front-page.php)
   ========================================================= */
.practice-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:22px;
    margin:10px 0 20px;
}
.practice-card{
    border:1px solid var(--jj-line);
    padding:20px;
    background:#fff;
    transition:box-shadow .15s ease, transform .15s ease;
}
.practice-card:hover{ box-shadow:0 6px 18px rgba(0,0,0,.06); transform:translateY(-2px); }
.practice-card h3{
    margin:0 0 8px;
    color:var(--jj-red);
    font-size:18px;
    text-transform:uppercase;
    letter-spacing:.02em;
}
.practice-card p{ margin:0; color:var(--jj-text); font-size:15px; }
.practice-card a.more{
    display:inline-block;
    margin-top:10px;
    font-weight:700;
}
@media (max-width:520px){ .practice-grid{ grid-template-columns:1fr; } }

/* =========================================================
   Mobile navigation
   ========================================================= */
@media (max-width:820px){
    .nav-toggle{ display:block; }
    .site-nav > .container > ul{
        display:none;
        flex-direction:column;
    }
    .site-nav > .container > ul.is-open{ display:flex; }
    .site-nav ul ul{
        position:static;
        box-shadow:none;
        display:none;
    }
    .site-nav li.has-children.open > ul{ display:flex; }
    .site-branding .site-title{ font-size:34px; }
}

/* =========================================================
   WordPress alignment classes / utility
   ========================================================= */
.alignright{ float:right; margin:0 0 12px 16px; }
.alignleft{  float:left;  margin:0 16px 12px 0; }
.aligncenter{ display:block; margin-left:auto; margin-right:auto; }

/* =========================================================
   Location rotator — About page office slideshow.
   Two <img> layers cross-fade; JS toggles opacity.
   ========================================================= */
.location-rotator{
    margin:24px 0 0;
    position:relative;
    overflow:hidden;
    aspect-ratio: 16 / 9;
    background:#000;
}
.location-rotator img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    opacity:1;
}
#jj-loc-image-b{ opacity:0; }
.location-rotator figcaption{
    position:absolute;
    left:50%;
    bottom:28px;
    transform:translateX(-50%);
    background:rgba(0,0,0,.55);
    color:#fff;
    padding:10px 26px;
    letter-spacing:.2em;
    font-size:14px;
    text-transform:uppercase;
    z-index:2;
}
.jj-loc-progress-track{
    position:absolute;
    left:0; right:0; bottom:0;
    height:4px;
    background:rgba(255,255,255,.2);
    z-index:2;
}
.jj-loc-progress-bar{
    height:100%;
    width:0%;
    background:var(--jj-red);
}

/* Email address rendered as image (spam-safe, non-clickable) */
.email-block .email-image{
    display:block;
    width:100%;
    height:auto;
    max-width:100%;
    margin-top:6px;
    pointer-events:none;
    user-select:none;
    -webkit-user-drag:none;
}