/*
 * rich-content.css
 * ─────────────────────────────────────────────────────────────────────────
 * All typography and layout styles for CKEditor 5 HTML output.
 * This file is loaded once in resources/views/layouts/app.blade.php.
 *
 * Every rule is scoped to .rich-content so it never affects Tailwind
 * utilities, navigation, cards, or any other non-editor element.
 *
 * HOW IT WORKS:
 *   Admin types in CKEditor → HTML stored in DB via HTMLPurifier →
 *   Frontend renders {!! $field !!} inside <div class="rich-content"> →
 *   These styles make it look exactly as it did in the editor.
 *
 * Usage in Blade:
 *   <div class="rich-content">{!! $trek->overview !!}</div>
 *   <div class="rich-content">{!! $blog->content !!}</div>
 *   <div class="rich-content">{!! $faq->answer !!}</div>
 * ─────────────────────────────────────────────────────────────────────────
 */

/* ── Wrapper ──────────────────────────────────────────────────────────────
   max-width: 72ch gives the optimal ~70 character reading line.
   Set to 100% on trek/blog pages where the layout already constrains width.
*/
.rich-content {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    font-size:   1rem;
    line-height: 1.8;
    color:       #333333;
    word-wrap:   break-word;
    overflow-wrap: break-word;
}

/* ── Headings ─────────────────────────────────────────────────────────────
   H1 is intentionally excluded — page titles own H1.
   CKEditor is configured to start at H2.
*/
.rich-content h2 {
    font-size:     1.65rem;
    font-weight:   700;
    color:         #052734;
    margin-top:    2rem;
    margin-bottom: 0.65rem;
    line-height:   1.3;
    letter-spacing: -0.01em;
}

.rich-content h3 {
    font-size:     1.3rem;
    font-weight:   600;
    color:         #052734;
    margin-top:    1.6rem;
    margin-bottom: 0.5rem;
    line-height:   1.4;
}

.rich-content h4 {
    font-size:     1.1rem;
    font-weight:   600;
    color:         #005991;
    margin-top:    1.3rem;
    margin-bottom: 0.4rem;
}

/* Remove top margin from the very first heading */
.rich-content > h2:first-child,
.rich-content > h3:first-child,
.rich-content > h4:first-child {
    margin-top: 0;
}

/* ── Paragraphs ───────────────────────────────────────────────────────────*/
.rich-content p {
    margin-top:    0;
    margin-bottom: 1rem;
}

.rich-content p:last-child {
    margin-bottom: 0;
}

/* ── Inline text formatting ───────────────────────────────────────────────
   CKEditor 5 outputs <strong> for bold and <em> for italic.
   HTMLPurifier allows both.
*/
.rich-content strong {
    font-weight: 700;
}

.rich-content em {
    font-style: italic;
}

.rich-content u {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.rich-content s {
    text-decoration: line-through;
    color: #6D6E70;
}

/* ── Font colour spans ────────────────────────────────────────────────────
   CKEditor outputs: <span style="color:#99C723">text</span>
   HTMLPurifier allows style="color:..." via CSS.AllowedProperties.
   No additional CSS needed here — the inline style does the work.
   This comment exists as documentation.
*/
.rich-content span[style*="color"] {
    /* colour applied by CKEditor's inline style — no override needed */
}

/* ── Text alignment ───────────────────────────────────────────────────────
   CKEditor adds style="text-align:center" on <p> elements.
   Also support .text-center class for older content.
*/
.rich-content [style*="text-align: center"],
.rich-content [style*="text-align:center"] {
    text-align: center;
}

.rich-content [style*="text-align: right"],
.rich-content [style*="text-align:right"] {
    text-align: right;
}

.rich-content [style*="text-align: justify"],
.rich-content [style*="text-align:justify"] {
    text-align: justify;
}

/* ── Lists ────────────────────────────────────────────────────────────────
   CRITICAL: Tailwind's preflight (base styles) resets list-style to none.
   These rules restore bullets and numbers inside .rich-content.
*/
.rich-content ul {
    list-style-type: disc;
    padding-left:    1.5rem;
    margin-top:      0.25rem;
    margin-bottom:   1rem;
}

.rich-content ol {
    list-style-type: decimal;
    padding-left:    1.5rem;
    margin-top:      0.25rem;
    margin-bottom:   1rem;
}

.rich-content li {
    margin-bottom: 0.35rem;
    padding-left:  0.25rem;
}

/* Nested lists */
.rich-content ul ul,
.rich-content ol ul {
    list-style-type: circle;
    margin-top:    0.25rem;
    margin-bottom: 0.25rem;
}

.rich-content ul ol,
.rich-content ol ol {
    list-style-type: lower-alpha;
    margin-top:    0.25rem;
    margin-bottom: 0.25rem;
}

/* Prevent double margin when a <p> is inside a <li> */
.rich-content li > p {
    margin-bottom: 0.25rem;
}

/* ── Links ────────────────────────────────────────────────────────────────*/
.rich-content a {
    color:                  #005991;
    text-decoration:        underline;
    text-underline-offset:  2px;
    text-decoration-thickness: 1px;
    transition:             color 0.15s ease;
}

.rich-content a:hover {
    color: #052734;
}

/* Visual indicator for external links (target="_blank") */
.rich-content a[target="_blank"]::after {
    content:     " ↗";
    font-size:   0.7em;
    opacity:     0.6;
    margin-left: 1px;
}

/* ── Blockquote ───────────────────────────────────────────────────────────*/
.rich-content blockquote {
    border-left:   4px solid #005991;
    margin:        1.5rem 0;
    padding:       0.75rem 1.25rem;
    background:    #EBF5FD;
    border-radius: 0 6px 6px 0;
    font-style:    italic;
    color:         #052734;
}

.rich-content blockquote p:last-child {
    margin-bottom: 0;
}

/* ── Horizontal rule ──────────────────────────────────────────────────────*/
.rich-content hr {
    border:        none;
    border-top:    2px solid #e5e7eb;
    margin:        2rem 0;
}

/* ── Tables ───────────────────────────────────────────────────────────────
   display: block + overflow-x: auto makes tables scroll on mobile
   without breaking the page layout.
*/
.rich-content table {
    width:           100%;
    border-collapse: collapse;
    margin:          1.5rem 0;
    font-size:       0.9rem;
    display:         block;
    overflow-x:      auto;
    -webkit-overflow-scrolling: touch;
}

.rich-content th {
    background:    #052734;
    color:         #ffffff;
    padding:       0.6rem 1rem;
    text-align:    left;
    font-weight:   600;
    white-space:   nowrap;
}

.rich-content td {
    padding:       0.6rem 1rem;
    border-bottom: 1px solid #e5e7eb;
    vertical-align: top;
}

.rich-content tr:nth-child(even) td {
    background: #F7F9FC;
}

.rich-content tr:hover td {
    background:  #EBF5FD;
    transition:  background 0.15s ease;
}

/* ── Images ───────────────────────────────────────────────────────────────*/
.rich-content img {
    max-width:     100%;
    height:        auto;
    border-radius: 8px;
    margin:        1rem 0;
    display:       block;
}

.rich-content figure {
    margin:     1.5rem 0;
    text-align: center;
}

.rich-content figure img {
    margin-left:  auto;
    margin-right: auto;
}

.rich-content figcaption {
    font-size:  0.85rem;
    color:      #6D6E70;
    margin-top: 0.4rem;
    font-style: italic;
}

/* ── Font size utilities from CKEditor ────────────────────────────────────
   CKEditor adds class="text-tiny" etc. on spans when font size is changed.
*/
.rich-content .text-tiny   { font-size: 0.7em; }
.rich-content .text-small  { font-size: 0.85em; }
.rich-content .text-big    { font-size: 1.2em; }
.rich-content .text-huge   { font-size: 1.5em; }

/* ── Trek-specific modifier ───────────────────────────────────────────────
   Add class="rich-content rich-content--compact" for FAQ answers,
   itinerary day descriptions, or anywhere spacing should be tighter.
*/
.rich-content--compact {
    font-size:   0.95rem;
    line-height: 1.65;
}

.rich-content--compact h2 { font-size: 1.3rem; margin-top: 1.2rem; }
.rich-content--compact h3 { font-size: 1.1rem; margin-top: 1rem;  }
.rich-content--compact p  { margin-bottom: 0.65rem; }

/* ── Mobile ───────────────────────────────────────────────────────────────*/
@media (max-width: 768px) {
    .rich-content h2 { font-size: 1.35rem; }
    .rich-content h3 { font-size: 1.15rem; }
    .rich-content h4 { font-size: 1.05rem; }

    .rich-content ul,
    .rich-content ol {
        padding-left: 1.25rem;
    }

    .rich-content blockquote {
        padding: 0.6rem 1rem;
    }
}

/* ── Print ────────────────────────────────────────────────────────────────*/
@media print {
    .rich-content a[target="_blank"]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
    }
}