/*
 * BAM Theme — AddMagazine
 * Based on: Bam by ThemezHut (themezhut.com/themes/bam/)
 * Adapted for Laravel site builder
 */

/* ============================================================
   1. CSS VARIABLES
   ============================================================ */
:root {
    --color-accent:       #FF4F4F;
    --color-accent-dark:  #d93a3a;
    --color-dark:         #222222;
    --color-darker:       #141414;
    --color-black:        #000000;
    --color-body:         #404040;
    --color-link:         #00aeef;
    --color-link-hover:   #0076a3;
    --color-white:        #ffffff;
    --color-light-bg:     #f8f8f8;
    --color-topbar-bg:    #f5f5f5;
    --color-border:       #ededed;
    --color-border-mid:   #dddddd;
    --color-border-dark:  #E3E3E3;
    --color-muted:        #999999;
    --color-footer-bg:    #222222;
    --color-siteinfo-bg:  #000000;

    --font-body:     "Source Sans Pro", Graphik, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --font-heading:  "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --font-size-base: 18px;
    --line-height:   1.5;

    --container-max: 1200px;
    --container-pad: 20px;
}

/* ============================================================
   2. RESET & BOX SIZING
   ============================================================ */
html {
    box-sizing: border-box;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
}
*, *::before, *::after {
    box-sizing: inherit;
}
body {
    margin: 0;
    background: var(--color-white);
}
img {
    border-style: none;
    height: auto;
    max-width: 100%;
    vertical-align: middle;
}
hr {
    background-color: #ccc;
    border: 0;
    height: 1px;
    margin-bottom: 1.5em;
}
figure { margin: 2em 0; }
table {
    border-collapse: collapse;
    margin: 0 0 1.5em;
    width: 100%;
}
table, th, td { border: 1px solid var(--color-border); }
th {
    background: var(--color-light-bg);
    padding: 8px 15px;
    text-align: left;
}
td { padding: 5px 15px; }
embed, iframe, object { max-width: 100%; }

/* ============================================================
   3. TYPOGRAPHY
   ============================================================ */
body,
button,
input,
select,
optgroup,
textarea {
    color: var(--color-body);
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    font-size: 1.125rem;
    line-height: var(--line-height);
}

h1, h2, h3, h4, h5, h6 {
    clear: both;
    font-family: var(--font-heading);
    font-weight: normal;
    line-height: 1.2;
    color: var(--color-black);
}
h1 { font-size: 36px; font-size: 2.25rem;  margin: 0.67em 0; }
h2 { font-size: 32px; font-size: 2rem;     margin: 0.83em 0; }
h3 { font-size: 28px; font-size: 1.75rem;  margin: 1em 0; }
h4 { font-size: 24px; font-size: 1.5rem;   margin: 1.2em 0; }
h5 { font-size: 20px; font-size: 1.25rem;  margin: 1.3em 0; }
h6 { font-size: 16px; font-size: 1rem;     margin: 1.4em 0; }

p { margin: 0 0 1.5em; }

a {
    color: var(--color-link);
    text-decoration: none;
}
a:visited { color: purple; }
a:hover, a:focus, a:active { color: var(--color-link-hover); }
a:focus { outline: thin dotted; }
a:hover, a:active { outline: 0; }

blockquote {
    border-left: 4px solid var(--color-accent);
    margin: 30px 0;
    padding-left: 1em;
}
blockquote p { font-size: 1.25rem; margin-bottom: 0; }

pre {
    background: #eee;
    font-family: "Courier 10 Pitch", Courier, monospace;
    font-size: 0.9375rem;
    line-height: 1.6;
    margin-bottom: 1.6em;
    overflow: auto;
    padding: 1.6em;
}
code, kbd, tt, var {
    font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
    font-size: 0.9375rem;
}
ul, ol { padding-left: 1rem; margin-left: 1rem; }
ul { list-style: disc; }
ol { list-style: decimal; }
li > ul, li > ol { margin-bottom: 0; margin-left: 1.5em; }
dt { font-weight: bold; }
dd { margin: 0 1.5em 1.5em; }

/* ============================================================
   4. FORMS
   ============================================================ */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
    border: none;
    border-radius: 3px;
    background: var(--color-accent);
    color: var(--color-white);
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    padding: 1em 1.5em;
    text-transform: uppercase;
    -webkit-appearance: button;
}
button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
button:focus,
input[type="button"]:focus,
input[type="submit"]:focus {
    background: var(--color-dark);
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
textarea {
    color: #666;
    border: 1px solid var(--color-border-mid);
    padding: 5px;
    width: 100%;
}
input[type="text"]:focus,
input[type="search"]:focus,
textarea:focus { color: #111; }
textarea { overflow: auto; }
select { border: 1px solid var(--color-border-mid); max-width: 100%; }

.search-form {
    display: block;
    position: relative;
    overflow: hidden;
    width: 100%;
}
.search-form label { display: block; }
.search-form .search-field {
    display: block;
    height: 45px;
    padding: 10px 90px 10px 10px;
    width: 100%;
    border-radius: 3px;
    -webkit-appearance: none;
    color: #666;
    border: 1px solid var(--color-border-mid);
}
.search-form .search-submit {
    position: absolute;
    top: 0;
    right: 0;
    height: 45px;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
}
.search-form .search-submit:hover { background: var(--color-dark); }

/* ============================================================
   5. ACCESSIBILITY
   ============================================================ */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}
.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    -webkit-clip-path: none;
    clip-path: none;
    color: #21759b;
    display: block;
    font-size: 0.875rem;
    font-weight: bold;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}
.skip-link {
    position: absolute;
    top: -999px;
    left: -999px;
}
.skip-link:focus {
    top: 5px;
    left: 5px;
    z-index: 99999;
    background: var(--color-white);
    padding: 8px 16px;
    border: 2px solid var(--color-dark);
}

/* ============================================================
   6. CLEARFIX & ALIGNMENTS
   ============================================================ */
.clearfix::after,
.clear::after,
.site-header::after,
.site-content::after,
.site-footer::after,
.entry-content::after {
    content: "";
    display: block;
    clear: both;
}
.clearfix::before,
.clear::before { content: ""; display: table; }
.alignleft  { display: inline; float: left; margin-right: 1.5em; }
.alignright { display: inline; float: right; margin-left: 1.5em; }
.aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; }

/* ============================================================
   7. LAYOUT — CONTAINER & PAGE
   ============================================================ */
#page { width: 100%; overflow-x: hidden; }

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

.site-content {
    padding: 40px 0 0;
}

.site-content > .container { overflow: hidden; }

#primary {
    float: left;
    width: 72%;
    padding-right: 20px;
}
#secondary {
    float: right;
    width: 28%;
    padding-left: 20px;
}

/* ============================================================
   8. TOPBAR
   ============================================================ */
.bam-topbar {
    background: var(--color-dark);
    border-bottom: 1px solid #333;
    color: var(--color-white);
    padding: 0;
}
.bam-topbar .container { overflow: hidden; }
.bam-date {
    line-height: 38px;
    font-size: 13px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #cccccc;
    float: left;
    letter-spacing: 0.03em;
}

/* ============================================================
   9. HEADER / BRANDING
   ============================================================ */
header#masthead.site-header.default-style {
    background-color: var(--color-white);
    border-bottom: 1px solid var(--color-border);
}
#site-header-inner {
    padding-top: 24px;
    padding-bottom: 24px;
    overflow: hidden;
}
.site-branding { float: left; }
.site-branding-inner { display: inline-block; }
.site-branding-text { float: left; }

.site-title {
    font-family: var(--font-body);
    font-size: 44px;
    font-size: 2.75rem;
    font-weight: bold;
    margin: 0;
    line-height: 1.2;
}
.site-title a {
    color: var(--color-accent);
    text-decoration: none;
}
.site-title a:hover { color: var(--color-black); }
.site-title a:visited { color: var(--color-accent); }

.site-description {
    font-size: 16px;
    font-size: 1rem;
    color: #888;
    margin: 4px 0 0;
    font-style: italic;
}

/* ============================================================
   10. MAIN NAVIGATION
   ============================================================ */
nav#site-navigation.main-navigation {
    background: var(--color-dark);
    font-size: 1rem;
    clear: both;
    float: left;
    width: 100%;
}

#site-navigation-inner {
    position: relative;
    overflow: visible;
}

#site-navigation-inner.show-search #primary-menu {
    margin-right: 45px;
}

/* Desktop menu */
ul#primary-menu.menu {
    list-style: none;
    margin: 0;
    padding: 0;
    float: left;
}
ul#primary-menu.menu li {
    float: left;
    position: relative;
}
ul#primary-menu.menu li a {
    display: block;
    color: var(--color-white);
    text-decoration: none;
    line-height: 50px;
    padding: 0 16px;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 0.875rem;
}
ul#primary-menu.menu li a:hover,
ul#primary-menu.menu li a:focus {
    color: var(--color-accent);
}
ul#primary-menu.menu li.current-menu-item > a,
ul#primary-menu.menu li.current_page_item > a,
ul#primary-menu.menu li.current-menu-ancestor > a {
    color: var(--color-accent);
}

/* Dropdown sub-menus */
ul#primary-menu.menu ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #333;
    padding: 10px;
    z-index: 9999;
    min-width: 200px;
    box-shadow: 1px 1px 4px rgba(0,0,0,0.3);
}
ul#primary-menu.menu li:hover > ul,
ul#primary-menu.menu li:focus-within > ul {
    display: block;
}
ul#primary-menu.menu ul li { float: none; }
ul#primary-menu.menu ul li a {
    line-height: 1.3;
    padding: 10px 16px;
    text-transform: none;
    font-weight: normal;
    color: #eee;
}
ul#primary-menu.menu ul li a:hover { background: var(--color-accent); color: #fff; }

/* Search button */
.bam-search-button-icon {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0 16px;
    color: var(--color-white);
    cursor: pointer;
    line-height: 50px;
}
.bam-search-button-icon:hover { color: var(--color-accent); }

/* Search box */
.bam-search-box-container {
    display: none;
    position: absolute;
    right: 0;
    top: 50px;
    background: var(--color-white);
    border: 3px solid var(--color-border-dark);
    padding: 5px;
    width: 350px;
    z-index: 999;
}
.bam-search-box-container.active { display: block; }

.bam-search-box input[type="search"] {
    background: #f1f1f1;
    border: none;
    float: left;
    height: 40px;
    margin: 0;
    padding: 0 11px;
    width: calc(100% - 92px);
    border-radius: 0;
    color: #404040;
}
.bam-search-box input[type="submit"] {
    border-radius: 0;
    height: 40px;
    padding: 0;
    width: 92px;
    cursor: pointer;
    float: right;
}
.bam-search-box input[type="search"]:focus,
.bam-search-box input[type="submit"]:focus { outline: none; }

/* Menu toggle (mobile) */
.menu-toggle {
    display: none;
    cursor: pointer;
    border: none;
    background: transparent;
    line-height: 50px;
    border-radius: 0;
    padding: 0 10px;
    color: var(--color-white);
    font-size: 1rem;
}
.menu-toggle i.fas { margin-right: 8px; }
.menu-toggle:hover { color: var(--color-accent); background: transparent; }

/* ============================================================
   11. MOBILE DROPDOWN NAVIGATION
   ============================================================ */
.mobile-dropdown { clear: both; }
.mobile-navigation { display: none; background: #333; }
.mobile-navigation.toggled-on { display: block; }
.mobile-dropdown.is-open .mobile-navigation { display: block; }

ul#primary-menu-mobile.menu {
    list-style: none;
    margin: 0;
    padding: 20px 30px;
}
ul#primary-menu-mobile.menu li {
    position: relative;
    border-bottom: 1px solid var(--color-dark);
}
ul#primary-menu-mobile.menu li a {
    display: block;
    color: var(--color-white);
    text-decoration: none;
    line-height: 45px;
    font-size: 1rem;
    text-transform: uppercase;
}
ul#primary-menu-mobile.menu li a:hover { color: var(--color-accent); }

/* ============================================================
   12. BREADCRUMB
   ============================================================ */
.bam-breadcrumb-wrap {
    font-size: 14px;
    font-size: 0.875rem;
    color: #999;
    margin-bottom: 15px;
}
.bam-breadcrumb-wrap a {
    color: #666;
    text-decoration: none;
}
.bam-breadcrumb-wrap a:hover { color: var(--color-accent); }
.bam-breadcrumb-wrap .sep {
    margin: 0 6px;
    color: #bbb;
}
.bam-breadcrumb-wrap .breadcrumb-current {
    color: var(--color-body);
}

/* ============================================================
   13. BLOG GRID — HOME & CATEGORY
   ============================================================ */
#blog-entries.blog-wrap { margin-bottom: 20px; }

.grid-style.th-grid-2 .bam-entry {
    width: 47.8494623656%;
    float: left;
}
.grid-style.th-grid-2 .bam-entry:nth-of-type(2n) {
    margin-left: 4.3010752688%;
    float: right;
}
.grid-style .bam-entry.th-col-1 { clear: both; }

.bam-entry { margin-bottom: 50px; }

/* Post thumbnail — 5:3 (890:530) aspect ratio */
.bam-entry .post-thumbnail,
.post-thumbnail {
    position: relative;
    overflow: hidden;
    margin-bottom: 12px;
}
.bam-entry .post-thumbnail::before {
    content: "";
    display: block;
    padding-top: 59.55%;  /* 530/890 */
}
.bam-entry .post-thumbnail a {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: block;
}
.bam-entry .post-thumbnail img {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.bam-entry:hover .post-thumbnail img { transform: scale(1.03); }

.blog-entry-content { padding: 0; }

.bam-entry .category-list { margin: 0 0 6px; }
.cat-links {
    color: #ccc;
    font-size: 13px;
    font-size: 0.8125rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.cat-links a { color: var(--color-accent); }
.cat-links a:hover { color: var(--color-body); }
.cat-links a:visited { color: var(--color-accent); }

.bam-entry .entry-header { margin-bottom: 10px; }
.bam-entry .entry-title {
    font-size: 22px;
    font-size: 1.375rem;
    margin: 0 0 8px;
    line-height: 1.25;
    word-wrap: break-word;
}
.bam-entry .entry-title a {
    color: var(--color-black);
    text-decoration: none;
}
.bam-entry .entry-title a:hover { color: var(--color-accent); }
.bam-entry .entry-title a:visited { color: var(--color-black); }

.entry-meta {
    font-size: 13px;
    font-size: 0.8125rem;
    color: var(--color-muted);
    line-height: 1.4;
}
.entry-meta a { color: var(--color-muted); }
.entry-meta a:hover { color: var(--color-accent); }
.entry-meta i.far { margin-right: 5px; }
.byline, .posted-on { margin-right: 1em; display: inline-block; }
.entry-meta .byline a { color: var(--color-black); }
.entry-meta .byline a:hover { color: var(--color-accent); }

.bam-entry .entry-summary { margin: 8px 0 0; }
.bam-entry .entry-summary p {
    margin: 0;
    font-size: 16px;
    font-size: 1rem;
    color: #555;
    line-height: 1.55;
}

/* ============================================================
   14. PAGE H1 (home page section header)
   ============================================================ */
.page-title {
    font-size: 22px;
    font-size: 1.375rem;
    color: var(--color-black);
    font-weight: bold;
    text-transform: uppercase;
    border-bottom: 2px solid var(--color-accent);
    padding-bottom: 8px;
    margin: 0 0 30px;
    line-height: 1.3;
}

/* ============================================================
   15. ARCHIVE / CATEGORY PAGE
   ============================================================ */
.home-category-block { margin-top: 35px; }
.archive-header { margin-bottom: 30px; }
.archive-title {
    font-size: 22px;
    font-size: 1.375rem;
    color: var(--color-black);
    font-weight: bold;
    text-transform: uppercase;
    border-bottom: 1px solid var(--color-border-mid);
    padding-bottom: 6px;
    margin: 0 0 20px;
    line-height: 1.3;
}

/* ============================================================
   16. SINGLE POST / ARTICLE DETAIL
   ============================================================ */
.bam-single-post { margin-bottom: 50px; }

.bam-single-post .category-list { margin: 0 0 8px; }

.bam-single-post .entry-header { margin-bottom: 25px; }
.bam-single-post .entry-title {
    color: var(--color-black);
    font-size: 36px;
    font-size: 2.25rem;
    margin: 0 0 10px;
    line-height: 1.25;
    word-wrap: break-word;
}

.entry-content {
    margin: 1.5em 0 0;
    line-height: 1.7;
    word-wrap: break-word;
}
.entry-content h2 { margin-top: 1.5em; }
.entry-content h3 { margin-top: 1.3em; }
.entry-content img {
    max-width: 100%;
    height: auto;
    margin: 0.5em 0;
}
.entry-content figure { margin: 1.5em 0; }
.entry-content figure img { display: block; }
.entry-content ul, .entry-content ol {
    padding-left: 1.5rem;
    margin-bottom: 1.5em;
}
.entry-content table { font-size: 0.95rem; }
.entry-content .wp-block-table { overflow-x: auto; margin: 1.5em 0; }
.entry-content .wp-block-quote,
.entry-content blockquote {
    border-left: 4px solid var(--color-accent);
    margin: 30px 0;
    padding-left: 1.2em;
    color: #555;
}
.entry-content .wp-block-quote p { font-size: 1.25rem; margin-bottom: 0; }

/* ============================================================
   17. FAQ SECTION
   ============================================================ */
.faq-section {
    margin: 2.5em 0;
    padding: 25px;
    background: var(--color-light-bg);
    border-left: 4px solid var(--color-accent);
    border-radius: 2px;
}
.faq-section-title {
    font-size: 24px;
    font-size: 1.5rem;
    margin: 0 0 20px;
    color: var(--color-black);
    font-weight: bold;
    text-transform: uppercase;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-border-mid);
}
.faq-item { margin-bottom: 20px; }
.faq-item:last-child { margin-bottom: 0; }
.faq-question {
    font-size: 18px;
    font-size: 1.125rem;
    margin: 0 0 8px;
    color: var(--color-black);
    font-weight: bold;
    line-height: 1.3;
}
.faq-answer {
    font-size: 1rem;
    color: #555;
    line-height: 1.6;
}
.faq-answer p { margin: 0 0 0.75em; }
.faq-answer p:last-child { margin-bottom: 0; }

/* ============================================================
   18. RELATED POSTS
   ============================================================ */
.bam-related-posts {
    margin: 30px 0 50px;
    padding-top: 30px;
    border-top: 1px solid var(--color-border);
    overflow: hidden;
}
.related-section-title {
    display: block;
    color: var(--color-black);
    font-family: var(--font-heading);
    font-size: 22px;
    font-size: 1.375rem;
    text-transform: uppercase;
    font-weight: bold;
    margin: 0 0 25px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--color-accent);
}
.related-posts-wrap { margin: 0 -12px; overflow: hidden; }
.related-post {
    float: left;
    width: 33.3333%;
    padding: 0 12px;
    margin-bottom: 25px;
}
.related-post-thumbnail {
    position: relative;
    overflow: hidden;
    margin-bottom: 10px;
}
.related-post-thumbnail::before {
    content: "";
    display: block;
    padding-top: 59.55%;
}
.related-post-thumbnail a {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: block;
}
.related-post-thumbnail img {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s;
}
.related-post-thumbnail:hover img { opacity: 0.9; }
.related-post-title {
    font-family: var(--font-heading);
    font-size: 16px;
    font-size: 1rem;
    line-height: 1.3;
    margin: 0 0 6px;
    word-wrap: break-word;
}
.related-post-title a {
    color: var(--color-black);
    text-decoration: none;
}
.related-post-title a:hover { color: var(--color-accent); }
.related-post-meta {
    font-size: 13px;
    color: var(--color-muted);
}
.related-post-meta a { color: var(--color-muted); }
.related-post-meta a:hover { color: var(--color-accent); }
.related-post-meta i.far { margin-right: 4px; }

/* ============================================================
   19. SIDEBAR WIDGETS
   ============================================================ */
#secondary { }
.widget {
    margin: 0 0 40px;
}
.widget-title-text {
    display: block;
    color: var(--color-black);
    font-family: var(--font-heading);
    font-size: 18px;
    font-size: 1.125rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 2px solid var(--color-accent);
    margin: 0 0 18px;
    padding-bottom: 6px;
    line-height: 1.3;
}

/* Latest Posts (with thumbnail) */
.bam-category-posts { }
.bms-post {
    overflow: hidden;
    margin-bottom: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--color-border);
}
.bms-post:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.bms-thumb {
    float: left;
    margin-right: 12px;
    width: 80px;
    flex-shrink: 0;
}
.bms-thumb a { display: block; overflow: hidden; }
.bms-thumb img {
    width: 80px;
    height: 57px;
    object-fit: cover;
    display: block;
    transition: opacity 0.2s;
}
.bms-thumb a:hover img { opacity: 0.85; }
.bms-details { overflow: hidden; }
.bms-title {
    font-size: 14px;
    font-size: 0.875rem;
    line-height: 1.3;
    margin: 0 0 5px;
    word-wrap: break-word;
}
.bms-title a {
    color: var(--color-black);
    text-decoration: none;
}
.bms-title a:hover { color: var(--color-accent); }
.bms-title a:visited { color: var(--color-black); }
.bms-details .entry-meta { font-size: 12px; }
.bms-details .entry-meta i.far { font-size: 11px; }

/* Recent Posts list */
.widget-recent-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.widget-recent-list li {
    padding: 7px 0;
    border-bottom: 1px solid var(--color-border);
    font-size: 15px;
    font-size: 0.9375rem;
    line-height: 1.4;
}
.widget-recent-list li:last-child { border-bottom: none; }
.widget-recent-list li a {
    color: var(--color-black);
    text-decoration: none;
}
.widget-recent-list li a:hover { color: var(--color-accent); }

/* Categories list */
.widget-categories-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.widget-categories-list li {
    padding: 6px 0;
    border-bottom: 1px solid var(--color-border);
    font-size: 15px;
    font-size: 0.9375rem;
}
.widget-categories-list li:last-child { border-bottom: none; }
.widget-categories-list li a {
    color: var(--color-body);
    text-decoration: none;
}
.widget-categories-list li a:hover { color: var(--color-accent); }

/* ============================================================
   20. PAGINATION
   ============================================================ */
.navigation.pagination {
    margin: 0 0 40px;
    clear: both;
}
.nav-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}
.nav-links .page-numbers {
    display: inline-block;
    border: 1px solid #ccc;
    color: var(--color-body);
    padding: 8px 14px;
    font-size: 14px;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
    line-height: 1;
}
.nav-links .page-numbers.current {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-white);
}
.nav-links a.page-numbers:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-white);
}
.nav-links .page-numbers.prev,
.nav-links .page-numbers.next { }

/* ============================================================
   21. ENTRY FOOTER / TAGS
   ============================================================ */
.entry-footer { margin-top: 20px; }
.tags-links a {
    background: #444;
    color: #eee;
    display: inline-block;
    font-size: 13px;
    line-height: 25px;
    margin: 0 3px 3px 0;
    padding: 0 8px;
    text-transform: uppercase;
}
.tags-links a:hover { background: var(--color-accent); color: var(--color-white); }

/* ============================================================
   22. FOOTER
   ============================================================ */
footer#colophon.site-footer { }

.footer-widget-area {
    background: var(--color-footer-bg);
    overflow: hidden;
    padding: 0;
}
.footer-widget-area-inner { margin: 0 -20px; overflow: hidden; }
.footer-widget-area .col { padding: 40px 20px; }
.footer-widget-area .widget-title-text {
    color: #eee;
    border-bottom-color: var(--color-accent);
    font-size: 16px;
}
.footer-widget-area .widget { color: #ccc; margin-bottom: 0; }
.footer-widget-area .widget a { color: #ddd; }
.footer-widget-area .widget a:hover { color: var(--color-accent); }

.footer-recent-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.footer-recent-list li {
    padding: 8px 0;
    border-bottom: 1px solid #333;
    overflow: hidden;
}
.footer-recent-list li:last-child { border-bottom: none; }
.footer-recent-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.footer-recent-thumb {
    flex-shrink: 0;
    width: 60px;
}
.footer-recent-thumb img {
    width: 60px;
    height: 43px;
    object-fit: cover;
    display: block;
}
.footer-recent-info { flex: 1; min-width: 0; }
.footer-recent-title {
    font-size: 13px;
    line-height: 1.35;
    margin: 0 0 3px;
    word-wrap: break-word;
    color: #ddd;
}
.footer-recent-title a { color: #ddd; text-decoration: none; }
.footer-recent-title a:hover { color: var(--color-accent); }

.footer-cats-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.footer-cats-list li {
    padding: 6px 0;
    border-bottom: 1px solid #333;
    font-size: 14px;
}
.footer-cats-list li:last-child { border-bottom: none; }
.footer-cats-list li a { color: #ccc; text-decoration: none; }
.footer-cats-list li a:hover { color: var(--color-accent); }

.footer-links-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.footer-links-list li {
    padding: 6px 0;
    border-bottom: 1px solid #333;
    font-size: 14px;
}
.footer-links-list li:last-child { border-bottom: none; }
.footer-links-list li a { color: #ccc; text-decoration: none; }
.footer-links-list li a:hover { color: var(--color-accent); }

/* Footer 3-column layout */
.th-columns-3 .col { width: 33.3333%; float: left; }

.site-info {
    background: var(--color-siteinfo-bg);
    color: #ccc;
    font-size: 15px;
    font-size: 0.9375rem;
    padding: 18px 0;
}
.site-info .container { overflow: hidden; }
.site-info a { color: #ddd; }
.site-info a:hover { color: var(--color-accent); }
.copyright-container { line-height: 1.5; }

/* ============================================================
   23. STATIC PAGES (page.blade.php)
   ============================================================ */
.page-content-area { }
.page-entry-title {
    font-size: 36px;
    font-size: 2.25rem;
    margin: 0 0 20px;
    color: var(--color-black);
    line-height: 1.3;
}
.page-content {
    line-height: 1.7;
    word-wrap: break-word;
}
.page-content h2, .page-content h3, .page-content h4 { margin-top: 1.5em; }

/* ============================================================
   24. 404 PAGE
   ============================================================ */
.error-404-wrap {
    text-align: center;
    padding: 60px 20px;
    max-width: 700px;
    margin: 0 auto;
}
.error-404-number {
    font-size: 120px;
    font-weight: bold;
    color: var(--color-accent);
    line-height: 1;
    font-family: var(--font-heading);
    margin-bottom: 0;
}
.error-404-title {
    font-size: 32px;
    color: var(--color-black);
    margin: 10px 0 20px;
}
.error-404-desc {
    font-size: 18px;
    color: #666;
    margin-bottom: 30px;
    line-height: 1.6;
}
.error-404-home-btn {
    display: inline-block;
    background: var(--color-accent);
    color: var(--color-white);
    padding: 12px 30px;
    border-radius: 3px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.875rem;
    text-decoration: none;
    transition: background 0.2s;
    margin-bottom: 40px;
}
.error-404-home-btn:hover { background: var(--color-dark); color: var(--color-white); }
.error-404-categories { margin-top: 30px; text-align: left; max-width: 500px; margin-left: auto; margin-right: auto; }
.error-404-categories .widget-title-text { margin-bottom: 15px; }
.error-404-categories ul { columns: 2; }

/* ============================================================
   25. MEDIA / IMAGES
   ============================================================ */
.wp-caption {
    max-width: 100%;
    margin-bottom: 1.5em;
}
.wp-caption img { display: block; margin: 0 auto; }
.wp-caption-text { text-align: center; font-size: 14px; color: #888; margin: 5px 0; }
.wp-block-image figure { margin: 1.5em 0; }
.wp-block-image img { max-width: 100%; height: auto; }

/* ============================================================
   26. STICKY NAV
   ============================================================ */
nav#site-navigation.is-sticky {
    position: sticky;
    top: 0;
    z-index: 9999;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* ============================================================
   27. RESPONSIVE — TABLET (max 1024px)
   ============================================================ */
@media (max-width: 1024px) {
    .container { padding: 0 15px; }

    #primary { width: 68%; }
    #secondary { width: 32%; }

    .grid-style.th-grid-2 .bam-entry {
        width: 47.8%;
    }

    .bam-single-post .entry-title {
        font-size: 28px;
        font-size: 1.75rem;
    }
}

/* ============================================================
   28. RESPONSIVE — MOBILE (max 768px)
   ============================================================ */
@media (max-width: 768px) {
    /* Show mobile menu toggle */
    .menu-toggle { display: block; float: right; }

    /* Hide desktop nav ul */
    ul#primary-menu.menu { display: none; }

    /* Layout: stack sidebar below content */
    #primary {
        width: 100%;
        float: none;
        padding-right: 0;
    }
    #secondary {
        width: 100%;
        float: none;
        padding-left: 0;
        margin-top: 40px;
    }

    /* Blog grid: 1 column */
    .grid-style.th-grid-2 .bam-entry {
        width: 100%;
        float: none;
        margin-left: 0;
    }
    .grid-style.th-grid-2 .bam-entry:nth-of-type(2n) {
        float: none;
        margin-left: 0;
    }

    /* Related posts: 1 column */
    .related-post { width: 100%; float: none; }
    .related-posts-wrap { margin: 0; }

    /* Footer columns: 1 column */
    .th-columns-3 .col { width: 100%; float: none; }

    /* Topbar hide on very small */
    .bam-topbar { display: none; }

    /* Single post title smaller */
    .bam-single-post .entry-title {
        font-size: 24px;
        font-size: 1.5rem;
    }

    /* Search box full width */
    .bam-search-box-container { width: 100%; right: 0; left: 0; }

    /* H1 page title smaller */
    h1 { font-size: 26px; font-size: 1.625rem; }

    /* Site title smaller */
    .site-title { font-size: 32px; font-size: 2rem; }

    /* Error 404 */
    .error-404-number { font-size: 80px; }
    .error-404-categories ul { columns: 1; }
}

@media (max-width: 480px) {
    .container { padding: 0 12px; }
    .bam-search-box-container { width: calc(100vw - 24px); }
    .site-title { font-size: 26px; font-size: 1.625rem; }
    .bam-entry .entry-title { font-size: 18px; font-size: 1.125rem; }
    .faq-section { padding: 15px; }
}

/* ============================================================
   29. DESKTOP SHOW RULES (min-width: 959px)
   ============================================================ */
@media (min-width: 959px) {
    .mobile-dropdown,
    .menu-toggle {
        display: none !important;
    }
    ul#primary-menu.menu {
        display: block !important;
    }
}

/* ============================================================
   30. PRINT
   ============================================================ */
@media print {
    #topbar, nav#site-navigation, .mobile-dropdown, aside#secondary,
    footer#colophon, .bam-related-posts, .navigation.pagination,
    .bam-search-box-container { display: none !important; }
    #primary { width: 100%; float: none; padding: 0; }
    body { font-size: 14px; color: #000; }
    a { color: #000; text-decoration: underline; }
}