/*
 * Main stylesheet for the Hoke LLC replica site.
 *
 * The palette and layout are modeled after the original site. A deep red
 * (#e22322) is used for headings and interactive elements, while a dark
 * grey (#444) forms the navigation and footer backgrounds. A light grey
 * background helps separate the sidebar from the main content area. The
 * typography is kept simple with a sans‑serif font for readability.
 */

body {
    margin: 0;
    padding: 0;
    /* Adopt a modern sans‑serif stack for a more polished appearance */
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    color: #444;
    line-height: 1.6;
    background-color: #fefefe;
}

/* Top header with logo and contact details */
/* Top header bar */
.header-top {
    background-color: #ffffff;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e0e0e0;
}

.header-top .logo img {
    height: 65px;
}

/* Improve styling for top contact info */
/* Contact info list in the top header */
.header-top .contact-info {
    list-style: none;
    display: flex;
    gap: 25px;
    align-items: center;
    margin: 0;
    padding: 0;
    font-size: 15px;
    font-weight: bold;
    color: #444;
}

.header-top .contact-info li {
    display: flex;
    align-items: center;
    gap: 6px;
}

.header-top .contact-info li::before {
    /* Use simple unicode characters as icons */
    font-family: "Segoe UI Symbol", sans-serif;
    font-size: 18px;
    color: #e22322;
}

.header-top .contact-info li.phone::before {
    content: '\260E';
}

.header-top .contact-info li.email::before {
    content: '\2709';
}

.header-top .contact-info a {
    color: #444;
    text-decoration: none;
}

.header-top .contact-info a:hover {
    text-decoration: underline;
}

/* Main navigation */
/* Main navigation bar and dropdown styling */
.navbar {
    background-color: #3e3e3e;
    border-bottom: 1px solid #292929;
}

.navbar ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: nowrap;
}

.navbar li {
    position: relative;
}

/* top-level links */
.navbar>ul>li>a {
    display: block;
    padding: 20px 22px;
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 14px;
}

.navbar a:hover,
.navbar a.active {
    background-color: #575757;
}

/* Add a downward caret to top‑level menu items that have a dropdown */
.navbar>ul>li.dropdown>a::after {
    content: ' \25BC';
    font-size: 0.7em;
    margin-left: 4px;
}

/* dropdown menus hidden by default */
.navbar li ul {
    display: none;
    position: absolute;
    background-color: #444;
    min-width: 220px;
    top: 100%;
    left: 0;
    z-index: 1000;
    border: 1px solid #333;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.navbar li:hover>ul {
    display: block;
}

.navbar li ul li {
    width: 100%;
}

.navbar li ul a {
    padding: 10px 16px;
    display: block;
    color: #fff;
    text-decoration: none;
}

.navbar li ul a:hover {
    background-color: #555;
}

/* Layout: container splits main and sidebar */
/* Layout: container with wider spacing and sidebar separation */
.container {
    display: flex;
    flex-wrap: nowrap;
    padding: 30px 20px;
    max-width: 1150px;
    margin: 0 auto;
}

.main {
    flex: 0 0 70%;
    padding-right: 30px;
    box-sizing: border-box;
}

.sidebar {
    flex: 0 0 30%;
    background-color: #f9f9f9;
    padding: 25px;
    box-sizing: border-box;
    border-left: 1px solid #e0e0e0;
}

.sidebar h3 {
    margin-top: 0;
    border-bottom: 2px solid #e22322;
    padding-bottom: 8px;
    color: #e22322;
}

.sidebar ul {
    padding-left: 20px;
    margin-top: 10px;
}

.sidebar ul li {
    margin-bottom: 8px;
}

.sidebar ul li a {
    color: #e22322;
    text-decoration: none;
}

.sidebar ul li a:hover {
    text-decoration: underline;
}

.sidebar .join-mailing {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #ddd;
}

.sidebar .join-mailing input[type="email"] {
    width: 100%;
    padding: 8px;
    margin-top: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.sidebar .join-mailing button {
    margin-top: 10px;
    background-color: #e22322;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    width: 100%;
    font-weight: bold;
}

.sidebar .join-mailing button:hover {
    background-color: #c91818;
}

/* Enhanced Footer Styles */
.footer {
    background-color: #000000;
    color: #ffffff;
    padding: 40px 20px 20px;
    border-top: 4px solid #666666;
    /* Muted grey border */
}

.footer-content {
    max-width: 1150px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.footer-columns {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 40px;
}

.footer-column {
    flex: 1;
    min-width: 300px;
}

/* Mailing List Column */
.mailing-list h3 {
    color: #fff;
    border-bottom: 2px solid #666666;
    padding-bottom: 10px;
    margin-bottom: 15px;
    display: inline-block;
}

.mailing-list p {
    color: #ccc;
    margin-bottom: 20px;
}

.mailing-form {
    display: flex;
    gap: 10px;
}

.mailing-form input[type="email"] {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 4px;
}

.mailing-form .btn-subscribe {
    background-color: #e22322;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    text-transform: uppercase;
}

.mailing-form .btn-subscribe:hover {
    background-color: #c91818;
}

/* Contact Column */
.contact-column h3 {
    color: #fff;
    border-bottom: 2px solid #666666;
    padding-bottom: 10px;
    margin-bottom: 15px;
    display: inline-block;
}

.contact-details p {
    color: #ccc;
    font-size: 16px;
    line-height: 1.6;
}

.contact-details a {
    color: #fff;
    text-decoration: underline;
}

/* Bottom Row */
.footer-bottom {
    border-top: 1px solid #333;
    padding-top: 20px;
    font-size: 13px;
    color: #888;
    /* Faint */
}

.footer-bottom p {
    margin: 0;
}

.footer-bottom a {
    color: #888;
    text-decoration: none;
    margin-left: 10px;
}

.footer-bottom a:hover {
    color: #fff;
    text-decoration: underline;
}

/* Card component used for news and article summaries */
.card {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    margin-bottom: 25px;
    padding: 20px;
    display: flex;
    flex-direction: column;
}

/* Headings and links inside cards */
.card h2,
.card h3 {
    color: #e22322;
    margin-top: 0;
}

.card a {
    color: #e22322;
    text-decoration: none;
}

.card a:hover {
    text-decoration: underline;
}

.card h3 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 22px;
}

.card p {
    flex-grow: 1;
    margin-bottom: 15px;
}

.card .read-more {
    align-self: flex-start;
    background-color: #e22322;
    color: #fff;
    text-decoration: none;
    padding: 8px 15px;
    border-radius: 4px;
    font-weight: bold;
}

.card .read-more:hover {
    background-color: #c91818;
}

/* Card style for article summaries */
.article-card {
    display: block;
}

/* View more button in sidebars */
.sidebar .view-more {
    display: inline-block;
    margin-top: 15px;
    background-color: #e22322;
    color: #fff;
    padding: 8px 12px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
}

.sidebar .view-more:hover {
    background-color: #c91818;
}

/* Intro text box on homepage */
.intro-box {
    background-color: #f5f5f5;
    /* Light grey */
    padding: 25px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    margin-bottom: 30px;
}

/* =============================== */
/* New styles for enhanced layout */
/* =============================== */

/* Focus Areas List */
.focus-areas-list {
    list-style: disc;
    /* Keep bullets for clarity */
    padding-left: 20px;
    margin-top: 15px;
}

.focus-areas-list li {
    margin-bottom: 8px;
}

.focus-areas-list a {
    color: #e22322;
    text-decoration: none;
    font-weight: bold;
}

.focus-areas-list a:hover {
    text-decoration: underline;
}

/* Highlight Quote Box */
.highlight-quote {
    background-color: #f9f9f9;
    border-left: 5px solid #e22322;
    padding: 15px 20px;
    font-size: 1.15em;
    font-style: italic;
    color: #555;
    margin-bottom: 25px;
    border-radius: 0 4px 4px 0;
    /* Create block formatting context to contain float if needed, 
       though we want text to wrap, so standard block is fine. 
       However, if image is taller, we might want it to clear? 
       User said: "Text wraps around it". */
    overflow: hidden;
    /* Ensures the gray box expands to contain the image */
}

.litigation-photo {
    float: left;
    width: 35%;
    height: auto;
    margin-right: 20px;
    margin-bottom: 10px;
    border-radius: 4px;
    /* Optional clean look */
}

/* Hero banner for the home page */
.hero {
    width: 100%;
    /* Height auto to fit image */
    position: relative;
    display: block;
    padding: 0;
    margin: 0;
}

.hero::after {
    content: none;
}

.hero img {
    display: block;
    width: 100%;
    height: auto;
}

/* Practice category cards on the home page */
.practice-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 30px;
}

.practice-card {
    position: relative;
    flex: 1;
    min-width: 260px;
}

.practice-card img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 4px;
}

.practice-card .caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    margin: 0;
    background-color: rgba(226, 35, 34, 0.9);
    color: #fff;
    padding: 12px;
    font-weight: bold;
    text-align: center;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    font-size: 16px;
    box-sizing: border-box;
}

/* Clients page layout */
.clients-container {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 20px;
}

.clients-container img {
    width: 35%;
    min-width: 260px;
    max-width: 320px;
    border-radius: 4px;
    object-fit: cover;
}

.clients-container .clients-list {
    flex: 1;
    columns: 2 200px;
    -webkit-columns: 2 200px;
    -moz-columns: 2 200px;
    list-style: disc;
    margin-left: 20px;
    padding-left: 0;
}

.clients-container .clients-list li {
    margin-bottom: 8px;
    font-size: 15px;
}

.clients-container .clients-list li::marker {
    color: #e22322;
}

/* Client list styling */
.clients-list {
    list-style: none;
    padding: 0;
}

.clients-list li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 18px;
}

.clients-list img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    margin-right: 15px;
    border-radius: 4px;
    background-color: #ddd;
}

.clients-list span {
    display: block;
    font-size: 16px;
    line-height: 1.4;
    color: #333;
}

/* Endorsements styling */
.endorsement {
    margin-bottom: 30px;
    padding: 20px;
    background-color: #f9f9f9;
    border-left: 4px solid #e22322;
    border-radius: 4px;
    font-style: italic;
}

.endorsement cite {
    display: block;
    margin-top: 10px;
    font-style: normal;
    font-weight: bold;
    color: #333;
}

/* Headings and generic elements */
h1,
h2,
h3,
h4 {
    color: #e22322;
    margin-top: 0;
}

p {
    margin-top: 0;
    margin-bottom: 15px;
}

a {
    color: #e22322;
}

a:hover {
    text-decoration: underline;
}

/* Forms */
.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.form-group textarea {
    resize: vertical;
    height: 150px;
}

.btn-submit {
    background-color: #e22322;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
}

.btn-submit:hover {
    background-color: #c91818;
}