/*
Theme Name: TNT-Custom-2.62
Theme URI: http://tntdental.com
Description: TNT Custom Theme - tntdental.com
Version: 2.62
Author: Chuck/Jeff/Tim
Author URI: http://tntdental.com
Tags: mantle color, variable width, two columns, widgets
Text Domain: tnt-custom-theme
Updates: functions.php, rich results breadcrumbs, index.php blog archive layout, OB1 helpers in functions.php
*/

/*
 * ---------------------------------------------------------------------------
 * OB1 repo bundle — one file for wp-content/themes/tnt-custom-2.62/style.css
 * ---------------------------------------------------------------------------
 * Section 1  WordPress / TNT base (accessibility, meta, storytitle, media)
 * Section 2  Main + post card shell (.post, main); single posts unboxed via body.single-post
 * Section 3  Blog archive (full-width headline row; excerpt | thumb below; mobile stack)
 * Section 4  Heading styles inside posts / blog title area
 * Section 5  Pagination and single-post prev/next
 *
 * Live server style.css may include rules not in Section 1 — diff before replacing
 * wholesale. This is the only OB1 CSS file to deploy (no separate Additional CSS).
 * Pairs with: index.php, functions.php (ob1_* helpers) in this folder.
 * ---------------------------------------------------------------------------
 */

/* =============================================================================
   SECTION 1 — TNT / Classic base (accessibility, typography, meta, captions)
   ============================================================================= */

.screen-reader-text {
    position: absolute;
    left: -1000em;
}

acronym, abbr {
    border-bottom: 1px dashed #333;
}

acronym, abbr, span.caps {
    font-size: 90%;
    letter-spacing: .07em;
}

acronym, abbr {
    cursor: help;
}

blockquote {
    border-left: 5px solid #ccc;
    margin-left: 1.5em;
    padding-left: 5px;
}

cite {
    font-size: 90%;
    font-style: normal;
}

ul.post-meta {
    list-style: none;
}

ul.post-meta span.post-meta-key {
    font-weight: bold;
}

.credit a:link, .credit a:hover {
    color: #fff;
}

.feedback {
    color: #ccc;
    text-align: right;
    clear: both;
}

.meta {
    font-size: .75em;
    display: none;
}

.meta li, ul.post-meta li {
    display: inline;
}

.meta ul {
    display: inline;
    list-style: none;
    margin: 0;
    padding: 0;
}

.meta, .meta a {
    color: #808080;
    font-weight: normal;
    letter-spacing: 0;
}

.storytitle {
    margin: 0;
}

.storytitle a {
    text-decoration: none;
}

.aligncenter,
div.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.alignleft {
    float: left;
    margin: 7px 7px 0 0;
}

.alignright {
    float: right;
    margin: 7px 0 0 7px;
}

.wp-caption {
    border: 1px solid #ddd;
    text-align: center;
    background-color: #f3f3f3;
    padding-top: 4px;
    margin: 10px;
    border-radius: 3px;
}

.wp-caption img {
    margin: 0;
    padding: 0;
    border: 0 none;
}

.wp-caption p.wp-caption-text {
    font-size: 11px;
    line-height: 17px;
    padding: 0 4px 5px;
    margin: 0;
}

/* =============================================================================
   SECTION 2 — Main + post card container (OB1 blog listing shell)
   ============================================================================= */

main {
    padding: 0;
    margin: 0 auto;
    padding-top: 0;
}

.post {
    margin: 20px auto;
    padding: 20px;
    max-width: 1080px;
    border: 1px solid #dddddd;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    text-align: left;
    position: relative;
}

/* Single post view: no card outline; extra inset so body copy isn’t tight to the viewport */
body.single-post .post {
    border: none;
    box-shadow: none;
    padding-top: clamp(1.5rem, 4vw, 2.75rem);
    padding-right: clamp(1.25rem, 5vw, 3.5rem);
    padding-left: clamp(1.25rem, 5vw, 3.5rem);
    /* Tighter below article so prev/next isn’t floating far under the last line */
    padding-bottom: clamp(0.5rem, 1.5vw, 1rem);
}

body.single-post .post .single-post-meta-date {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center !important;
    margin-top: 0;
    margin-bottom: clamp(0.85rem, 2.2vw, 1.35rem);
}

/* Featured image between date and .storycontent (some themes use the_post_thumbnail here) */
body.single-post .post > img.wp-post-image {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: clamp(1.35rem, 3.5vw, 2.35rem);
}

body.single-post .post .storycontent {
    line-height: 1.65;
}

/* Space after the first block in the body (usually the hero image) before the next paragraph/block */
body.single-post .post .storycontent > :first-child {
    margin-bottom: clamp(1.35rem, 3.5vw, 2.35rem);
}

body.single-post .post .storycontent > p {
    margin-top: 0;
    margin-bottom: 1.1em;
}

/* Drop trailing block margin so gap to prev/next comes from .navigation, not double-stacked */
body.single-post .post .storycontent > :last-child {
    margin-bottom: 0;
}

/* =============================================================================
   SECTION 3 — Blog archive: row1 full-width headline, row2 text | image
   ============================================================================= */

.archive-post-row {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    min-width: 0;
}

.archive-post-headline {
    width: 100%;
    min-width: 0;
}

.archive-post-headline .storytitle {
    margin: 0;
}

.archive-post-columns {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem 1.75rem;
    align-items: start;
    min-width: 0;
}

.archive-post-row--with-image .archive-post-columns {
    grid-template-columns: minmax(0, 1fr) minmax(160px, 42%);
}

.archive-post-text {
    min-width: 0;
}

.archive-post-meta-date {
    margin: 0 0 0.75rem;
}

.archive-post-media {
    min-width: 0;
}

.archive-post-thumb {
    margin: 0;
}

.archive-post-thumb a {
    display: block;
}

.archive-post-thumb img,
.archive-post-thumb .archive-featured-img {
    width: 100%;
    max-width: min(360px, 100%);
    height: auto;
    display: block;
    margin: 0 auto;
}

.post .archive-post-thumb img {
    border: 1px solid rgba(255, 255, 255, 0.12);
}

@media (max-width: 700px) {
    .archive-post-row--with-image .archive-post-columns {
        grid-template-columns: 1fr;
    }

    .archive-post-row--with-image .archive-post-media {
        order: -1;
        max-width: 360px;
        margin-bottom: 0.5rem;
    }
}

/* =============================================================================
   SECTION 4 — Headings (blog index title + in-post h1–h3)
   ============================================================================= */

.post-title-wrapper h1,
.post h1 {
    text-align: center;
    padding: 25px;
    margin: 25px auto;
    font-family: inherit;
    font-weight: 700;
    font-size: 48px;
    letter-spacing: 1.45px;
    text-transform: uppercase;
    line-height: 1.2;
}

.post h2 {
    margin-top: 30px;
    margin-bottom: 15px;
    font-family: inherit;
    font-size: 30px;
    line-height: 1.4;
}

.post h3 {
    margin-top: 20px;
    margin-bottom: 10px;
    font-family: inherit;
    font-size: 24px;
    line-height: 1.4;
}

/* =============================================================================
   SECTION 5 — Navigation (older/newer posts, single prev/next)
   ============================================================================= */

.navigation {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    padding: 10px 0;
    background-color: transparent;
    border-top: none;
    font-family: inherit;
    font-size: 18px;
    text-align: center;
    color: #c9a86c;
}

.navigation a {
    text-decoration: none;
    padding: 10px;
    transition: color 0.2s ease;
    color: #c9a86c;
}

.navigation a:hover {
    color: #e4c990;
    text-decoration: underline;
}

.navigation .nav-previous,
.navigation .nav-next {
    margin: 0 10px;
}

/* Single post: balance space above/below prev|next (between article end and footer) */
body.single-post .navigation {
    margin-top: clamp(1.5rem, 3.5vw, 2.25rem);
    margin-bottom: clamp(2.25rem, 5vw, 3.75rem);
}