/* ========================================================================
   BBCODE CONTENT STYLING
   Styles for BBCode-generated HTML content displayed in site descriptions
   ======================================================================== */

div.sitenear-html-container {
    display: block;
    overflow: visible; /* code-notes contain large pictures and layout but let it be seen*/
    padding-right: 1rem;
    padding-left: 1rem;
    position: relative;
    padding-bottom: 1rem;
    line-height: 1.6;
    word-wrap: break-word;
}

div.sitenear-html-container  div.sitenear-rendered-alignment-block {
    width: 100%;
}

/* ========================================================================
   FULL-BLEED HTML PAGES (description_format === 'html')
   A pasted HTML page brings its own complete layout/background and is meant
   to render edge-to-edge, unlike a BBCode text description which relies on
   this container's padding to stay readable. `.sn-html-fullbleed` is added
   only for html-format content (see feature_single.blade.php and each
   template's layout.blade.php) - BBCode descriptions never get this class
   and keep the padding above untouched.
   ======================================================================== */
div.sitenear-html-container.sn-html-fullbleed {
    padding: 0;
}

/* feature_single.blade.php wraps every feature (image gallery + title +
   description) in Bootstrap .panel > .panel-body. That 15px padding is
   fine around a short text description, but it re-introduces a border of
   whitespace around a full-bleed pasted page. Safe to zero unconditionally
   here since .panel-body belongs to the single feature currently on
   screen - not shared with any other, simultaneously-hidden content. */
.sitenear-feature-single-display .panel-body:has(.sn-html-fullbleed) {
    padding: 0;
}

div.sitenear-html-container img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1em 0;
}

div.sitenear-html-container span,div.sitenear-html-container strong {
    display: inline-block;
    /*noinspection CssInvalidPropertyValue*/
    overflow-wrap:anywhere;
    word-break: break-word;
    text-align:justify;
}

.responsive-img {
    max-width: 100%;
    height: auto;
}

/* Lists - Unordered (bullets) */
div.sitenear-html-container ul {
    list-style-type: disc;
    list-style-position: outside;
    margin-left: 2em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    padding-left: 0;
}

div.sitenear-html-container ul ul {
    list-style-type: circle;
    margin-top: 0.25em;
    margin-bottom: 0.25em;
}

div.sitenear-html-container ul ul ul {
    list-style-type: square;
}

/* Lists - Ordered (numbers) */
div.sitenear-html-container ol {
    list-style-type: decimal;
    list-style-position: outside;
    margin-left: 2em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    padding-left: 0;
}

div.sitenear-html-container ol ol {
    list-style-type: lower-alpha;
    margin-top: 0.25em;
    margin-bottom: 0.25em;
}

div.sitenear-html-container ol ol ol {
    list-style-type: lower-roman;
}

/* List items */
div.sitenear-html-container li {
    margin-bottom: 0.25em;
    line-height: 1.6;
}

/* Tables
   BBCode's [table] tag (BbCodeHelper.php:134) emits class="table table-responsive
   table-striped", pulling in Bootstrap 3's `.table{background-color:#fff}` - an opaque
   white painted directly on the <table>, unconditionally, regardless of what background
   the page itself is themed with (e.g. a site's custom --sn-bg color). The `background-color:
   transparent` below beats it on specificity (0,1,1 vs bootstrap's 0,1,0) so the table's
   own base is see-through again. Bootstrap's `.table-striped>tbody>tr:nth-of-type(odd)` rule
   is neutralized to transparent below too, since no zebra-striping is wanted here. */
div.sitenear-html-container table {
    border-collapse: collapse;
    width: 100%;
    margin-top: 1em;
    margin-bottom: 1em;
    background-color: transparent;
}

div.sitenear-html-container table td,
div.sitenear-html-container table th {
    padding: 8px 12px;
    text-align: center;
    vertical-align: top;
}

div.sitenear-html-container table th {
    background-color: rgba(0, 0, 0, 0.06);
    font-weight: bold;
}

div.sitenear-html-container table tr:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

/* Neutralizes Bootstrap 3's own opaque .table-striped rule (background-color:#f9f9f9) -
   see comment above the table rules. */
div.sitenear-html-container .table-striped>tbody>tr:nth-of-type(odd) {
    background-color: transparent;
}

/* Blockquotes */
div.sitenear-html-container blockquote {
    margin: 1em 0;
    padding: 0.5em 1em;
    border-left: 4px solid #ccc;
    background-color: #f9f9f9;
    font-style: italic;
}

div.sitenear-html-container blockquote cite {
    display: block;
    margin-top: 0.5em;
    font-style: normal;
    font-weight: bold;
    font-size: 0.9em;
}

div.sitenear-html-container blockquote cite:before {
    content: "— ";
}

/* Code blocks */
div.sitenear-html-container code {
    background-color: #f4f4f4;
    padding: 2px 6px;
    border-radius: 3px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9em;
}

/* Horizontal rules */
div.sitenear-html-container hr {
    border: none;
    border-top: 1px solid #ddd;
    margin: 1.5em 0;
}

/* Text alignment (BBCode: [left], [center], [right], [justify]) */
div.sitenear-html-container div[align="left"] {
    text-align: left;
}

div.sitenear-html-container div[align="center"] {
    text-align: center;
}

div.sitenear-html-container div[align="right"] {
    text-align: right;
}

div.sitenear-html-container div[align="justify"] {
    text-align: justify;
}

/* Preserve line breaks in BBCode content */
div.sitenear-html-container br {
    display: block;
    content: "";
    margin-top: 0.5em;
}

/* Spacing for paragraphs (when BBCode generates divs) */
div.sitenear-html-container > div {
    margin-bottom: 0.5em;
}

/* YouTube/iframe embeds */
div.sitenear-html-container iframe {
    max-width: 100%;
    margin: 1em 0;
}

/* ========================================================================
   HTML5 SEMANTIC TAG COLLISION GUARD (description_format === 'html')
   HtmlSanitizerHelper registers nav/header/footer/section/article/aside/
   main/figure/figcaption as real elements (see registerAdditionalHtmlElements())
   so a pasted page's class survives on them instead of being unwrapped -
   see that method's own comment for the original bug this fixes. But
   because they're now real, recognized tags, any of SiteNear's OWN
   site-wide CSS that targets one of these tag names directly (not scoped
   to a class) matches pasted content too, even though that CSS was never
   written with pasted content in mind. Confirmed: frontend/css/style.css
   has a global `footer { position: fixed; bottom: 0; z-index: 99999; ... }`
   rule (unrelated to pasted content - SiteNear's own footer is a
   `.footer-nav.sitenear-footer` div, not a <footer> tag) that pinned a
   pasted page's own <footer> to the viewport's bottom edge, on top of
   everything else, overlapping earlier sections. `position`/`z-index` are
   deliberately never in HtmlSanitizerHelper::ALLOWED_CSS_PROPERTIES (a
   pasted page's own CSS can never set them), so nothing in the pasted
   stylesheet can override them back once a site-wide rule sets them via
   the bare tag name. Reset defensively here so this can't happen from any
   current or future site-wide tag-selector rule, not just this one.
   ======================================================================== */
div.sitenear-html-container nav,
div.sitenear-html-container header,
div.sitenear-html-container footer,
div.sitenear-html-container section,
div.sitenear-html-container article,
div.sitenear-html-container aside,
div.sitenear-html-container main,
div.sitenear-html-container figure,
div.sitenear-html-container figcaption {
    position: static !important;
    z-index: auto !important;
}

/* ========================================================================
   BACKGROUND SECTIONS
   Full-width background sections with optional overlay
   ======================================================================== */

/* Base section styling */
div.sitenear-html-container .sitenear-section {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    padding: 3em 2em;
    margin: 1.5em 0;
    min-height: 200px;
    position: relative;
    display: block;
    border-radius: 8px;
    overflow: hidden;
    box-sizing: border-box;
}

/* Ensure content inside section is positioned correctly */
div.sitenear-html-container .sitenear-section > * {
    position: relative;
    z-index: 1;
}

/* Text contrast for sections with overlay */
div.sitenear-html-container .sitenear-section[data-overlay] {
    color: #ffffff;
}

/* Enhanced text shadow for better readability */
div.sitenear-html-container .sitenear-section[data-overlay] h1,
div.sitenear-html-container .sitenear-section[data-overlay] h2,
div.sitenear-html-container .sitenear-section[data-overlay] h3,
div.sitenear-html-container .sitenear-section[data-overlay] strong,
div.sitenear-html-container .sitenear-section[data-overlay] b {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* Body text shadow */
div.sitenear-html-container .sitenear-section[data-overlay] {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* Fallback for sections without background */
div.sitenear-html-container .sitenear-section-no-bg {
    padding: 2em;
    margin: 1em 0;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background-color: #f9f9f9;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    div.sitenear-html-container .sitenear-section {
        padding: 2em 1.5em;
        min-height: 150px;
        border-radius: 4px;
    }
}

@media (max-width: 480px) {
    div.sitenear-html-container .sitenear-section {
        padding: 1.5em 1em;
        min-height: 120px;
    }
}

/* Print styles - show content without background */
@media print {
    div.sitenear-html-container .sitenear-section {
        background-image: none !important;
        border: 1px solid #ddd;
        color: #000 !important;
        text-shadow: none !important;
    }
}

/* ========================================================================
   PDF EMBED
   [pdf]url[/pdf] - rendered via a self-hosted PDF.js viewer (frontend/js/pdfjs/) inside the
   iframe, not the browser's own native PDF viewer - see BbCodeHelper.php's [pdf]
   CodeDefinition for why. PDF.js brings its own toolbar (zoom, page nav, loading progress),
   so unlike an earlier version of this feature, no custom zoom-button/loading-overlay CSS is
   needed here - only the outer frame (sized, resizable, scrollable if content overflows it).
   ======================================================================== */

div.sitenear-html-container .sitenear-pdf-embed-wrap {
    width: 100%;
    max-width: 100%;
    margin: 1em 0;
}

div.sitenear-html-container .sitenear-pdf-embed-scale-container {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-width: 200px;
    height: 600px;
    min-height: 200px;
    overflow: auto;
    resize: both;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    /* The native `resize` handle only ever adjusts this element's own width/height, never its
       margin - without auto margins the box stays flush against whichever edge it started at
       (left, since margin was otherwise 0), so shrinking it visibly ate space from the right
       only. Auto margins recompute on every layout pass (including live, mid-drag), so this
       keeps the box centered in its parent at any width the user drags it to. Touch devices
       can't drag this handle at all (resize is a desktop-mouse-only CSS feature in every
       mobile browser) - the default height below is what mobile visitors always get. */
    margin-left: auto;
    margin-right: auto;
}

div.sitenear-html-container .sitenear-pdf-embed {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Shown only while actively dragging the resize handle (see common_handlers.blade.php) - a
   transparent layer on top of the iframe so the drag's mouse events land on this page instead
   of being captured by the iframe's own separate browsing context. Without it, a real drag
   whose path dips even slightly into the iframe (the resize handle sits right at its edge)
   can leave the browser's native resize tracking in a stuck state, breaking PDF.js's own
   toolbar clicks (zoom stops responding) afterward - found via user report, not reproducible
   through automated/synthetic drag events, consistent with this being specifically about how
   a *real* mouse drag interacts with an iframe boundary. */
div.sitenear-html-container .sitenear-pdf-resize-guard {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    cursor: nwse-resize;
}

@media (max-width: 768px) {
    div.sitenear-html-container .sitenear-pdf-embed-scale-container {
        height: 450px;
    }
}

@media (max-width: 480px) {
    div.sitenear-html-container .sitenear-pdf-embed-scale-container {
        height: 350px;
    }
}

@media print {
    div.sitenear-html-container .sitenear-pdf-embed-scale-container {
        display: none;
    }
}

/* ========================================================================
   MULTI-IMAGE TABLE ROW
   Same height images side-by-side using flexbox with responsive clamp()
   Only applies to tables with MULTIPLE image-only cells (not image+text)
   ======================================================================== */

/* Target rows where BOTH first and second cells contain only an image */
div.sitenear-html-container table:has(tr:has(td:first-child > img:only-child):has(td:nth-child(2) > img:only-child)) {
    width: auto;
    margin: 1em auto;
    border: none !important;
    display: block;
    border-collapse: collapse;
}

div.sitenear-html-container table:has(tr:has(td:first-child > img:only-child):has(td:nth-child(2) > img:only-child)) tbody {
    display: block;
}

div.sitenear-html-container table:has(tr:has(td:first-child > img:only-child):has(td:nth-child(2) > img:only-child)) tr {
    display: flex;
    justify-content: center;
    gap: 1em;
}

div.sitenear-html-container table:has(tr:has(td:first-child > img:only-child):has(td:nth-child(2) > img:only-child)) td {
    border: none !important;
    padding: 0.5em;
    text-align: center;
}

/* Images in multi-image rows - same responsive height, centered */
div.sitenear-html-container tr:has(td:first-child > img:only-child):has(td:nth-child(2) > img:only-child) td > img:only-child {
    height: clamp(150px, 20vw, 280px);
    width: auto;
    max-width: 100%;
    display: block;
    margin: 0 auto;
}

/* Mobile - stack vertically with auto height */
@media (max-width: 480px) {
    div.sitenear-html-container table:has(tr:has(td:first-child > img:only-child):has(td:nth-child(2) > img:only-child)) tr {
        flex-direction: column;
        align-items: center;
    }

    div.sitenear-html-container tr:has(td:first-child > img:only-child):has(td:nth-child(2) > img:only-child) td > img:only-child {
        height: auto;
        max-width: 90%;
    }
}

/* ======================================================================== */