/* Mastiff FAQ 1.0.2 — native HTML disclosure, no external UI library. */
@font-face { font-family:'Poppins'; font-style:italic; font-weight:400; font-display:swap; src:url('../fonts/poppins-v24-400-italic.ttf') format('truetype'); }
body.mastifffaq-index-index .page-main { padding-top: 30px; padding-bottom: 56px; max-width: 1280px; }
body.mastifffaq-index-index .columns .column.main { width: 100%; padding: 0; }
.mastiff-faq { --mfq-ink:#172638; --mfq-muted:#586879; --mfq-line:#dce3e9; --mfq-accent:#195f83; color:var(--mfq-ink); font-family:'Poppins','Helvetica Neue',Arial,sans-serif; font-size:15px; line-height:1.7; }
.mastiff-faq *, .mastiff-faq *::before, .mastiff-faq *::after { box-sizing:border-box; }
.mastiff-faq a { color:var(--mfq-accent); text-underline-offset:3px; }
.mastiff-faq a:focus-visible, .mastiff-faq button:focus-visible, .mastiff-faq summary:focus-visible, .mastiff-faq input:focus-visible { outline:3px solid #287baf; outline-offset:4px; }
.mfq-breadcrumb { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:24px; font-size:12px; color:var(--mfq-muted); }
.mfq-hero { padding:40px; background:#fff; margin-bottom:32px; border:1px solid var(--mfq-line); }
.mastiff-faq .mfq-eyebrow { color:var(--mfq-muted); font-size:11px; letter-spacing:1.6px; font-weight:600; margin:0 0 10px; }
.mastiff-faq h1 { font-size:32px; line-height:1.35; font-weight:600; color:var(--mfq-ink); margin:0 0 14px; }
.mastiff-faq h2 { font-size:20px; line-height:1.4; font-weight:600; color:var(--mfq-ink); margin:0 0 20px; }
.mfq-hero>p:not(.mfq-eyebrow) { max-width:740px; color:var(--mfq-muted); margin-bottom:24px; }
.mfq-search { max-width:800px; }
.mfq-search label { display:block; font-size:13px; font-weight:500; margin:0 0 8px; }
.mfq-search>div { display:flex; gap:12px; }
.mastiff-faq .mfq-search input { width:100%; min-width:0; height:50px; border:1px solid #9daebc; border-radius:0; padding:0 16px; background:#fff; color:var(--mfq-ink); font:inherit; }
.mastiff-faq .mfq-search button, .mastiff-faq .mfq-button { min-height:48px; padding:12px 24px; background:var(--mfq-accent); color:#fff; border:1px solid var(--mfq-accent); border-radius:0; box-shadow:none; font:600 14px/1.5 'Poppins',Arial,sans-serif; text-decoration:none; text-align:center; }
.mastiff-faq .mfq-search button:hover, .mastiff-faq .mfq-button:hover { background:#124867; }
.mfq-topics { margin:0 0 32px; }
.mfq-topic-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.mastiff-faq .mfq-topic { position:relative; display:flex; flex-direction:column; gap:7px; min-height:110px; padding:22px 48px 22px 24px; border:1px solid var(--mfq-line); background:#fff; color:var(--mfq-ink); text-decoration:none; }
.mfq-topic>span:first-child { font-size:15px; font-weight:500; line-height:1.5; }
.mfq-topic small { color:var(--mfq-muted); font-size:12px; }
.mfq-topic-arrow { position:absolute; right:20px; top:22px; font-size:20px; color:var(--mfq-muted); }
.mastiff-faq .mfq-topic:hover { border-color:var(--mfq-accent); color:var(--mfq-accent); }
.mfq-columns { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:24px; align-items:start; }
.mfq-card { background:#fff; border:1px solid var(--mfq-line); border-radius:0; padding:28px; min-width:0; }
.mfq-aside { display:grid; gap:24px; }
.mfq-contact { display:flex; flex-direction:column; gap:16px; }
.mfq-contact h2, .mfq-contact p { margin:0; }
.mfq-contact p { color:var(--mfq-muted); font-size:13px; }
.mfq-contact>a:last-child { text-align:center; font-weight:500; }
.mfq-section-title { display:flex; justify-content:space-between; align-items:baseline; gap:16px; }
.mfq-section-title>span { font-size:12px; white-space:nowrap; color:var(--mfq-muted); }
.mfq-question { border-top:1px solid var(--mfq-line); }
.mfq-question:last-of-type { border-bottom:1px solid var(--mfq-line); }
.mfq-question summary { list-style:none; display:flex; justify-content:space-between; align-items:center; gap:24px; cursor:pointer; padding:20px 0; font-weight:500; line-height:1.6; }
.mfq-question summary::-webkit-details-marker { display:none; }
.mfq-question summary:hover { color:var(--mfq-accent); }
.mfq-plus { flex:0 0 16px; position:relative; width:16px; height:16px; }
.mfq-plus::before, .mfq-plus::after { content:''; position:absolute; background:currentColor; }
.mfq-plus::before { width:14px; height:2px; top:7px; left:1px; }
.mfq-plus::after { width:2px; height:14px; top:1px; left:7px; }
.mfq-question[open] .mfq-plus::after { display:none; }
.mfq-question>.mfq-answer { padding:0 28px 24px 0; }
.mfq-answer { line-height:1.85; font-size:14px; overflow-wrap:anywhere; }
.mfq-answer p { margin:0 0 18px; }
.mfq-answer img { max-width:100%; height:auto; }
.mfq-answer table { display:block; max-width:100%; overflow-x:auto; }
.mfq-answer blockquote { border-left:3px solid var(--mfq-line); margin:20px 0; padding:8px 20px; font-size:inherit; }
.mfq-answer pre { white-space:pre-wrap; }
.mfq-permalink { display:inline-block; margin-top:16px; font-size:13px; font-weight:500; }
.mfq-category-nav a { display:block; font-size:13px; padding:9px 0; color:var(--mfq-muted); }
.mfq-category-nav a[aria-current] { font-weight:600; color:var(--mfq-accent); }
.mfq-search-summary { font-size:13px; color:var(--mfq-muted); }
.mfq-pagination { display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
.mfq-pagination a { display:flex; align-items:center; justify-content:center; min-width:42px; height:42px; border:1px solid var(--mfq-line); text-decoration:none; }
.mfq-pagination a[aria-current] { background:var(--mfq-accent); color:#fff; border-color:var(--mfq-accent); }
.mastiff-faq .mfq-article-title { font-size:27px; }
.mfq-article-meta { display:flex; flex-wrap:wrap; gap:8px 18px; font-size:12px; margin:0 0 28px; }
.mfq-related { margin:0; padding:0; list-style:none; }
.mfq-related li { padding:13px 0; border-bottom:1px solid var(--mfq-line); font-size:13px; line-height:1.65; }
.mfq-related li:last-child { border-bottom:0; padding-bottom:0; }
.mfq-vote { border-top:1px solid var(--mfq-line); padding-top:24px; margin-top:32px; scroll-margin-top:140px; }
.mfq-vote h2 { font-size:16px; }
.mfq-vote form { display:flex; gap:12px; }
.mastiff-faq .mfq-vote button { padding:10px 20px; border:1px solid #98aaba; border-radius:0; background:#fff; color:var(--mfq-ink); box-shadow:none; font:500 14px/1.5 'Poppins',Arial,sans-serif; }
.mastiff-faq .mfq-vote button:hover { border-color:var(--mfq-accent); color:var(--mfq-accent); }
.mfq-vote span { color:var(--mfq-muted); font-size:12px; }
.mfq-empty { padding:24px 0; }
/* Article typography matches the original Porto/Landofcoder content canvas.
   Inline editorial styles take priority; the navigation cards keep their own UI. */
.mfq-article-page { max-width:1238px; margin:0 auto; }
.mfq-article-page .mfq-columns { display:block; }
.mfq-article-page .mfq-aside { margin-top:24px; grid-template-columns:2fr 1fr; align-items:start; }
.mastiff-faq .mfq-article-body { font-family:'Poppins'; font-size:14px; font-weight:400; line-height:24px; color:#777; overflow-wrap:normal; text-align:start; }
.mfq-article-body::after { content:''; display:table; clear:both; }
.mastiff-faq .mfq-article-body p { margin:0 0 20px; }
.mastiff-faq .mfq-article-body h1,
.mastiff-faq .mfq-article-body h2,
.mastiff-faq .mfq-article-body h3,
.mastiff-faq .mfq-article-body h4 { font-family:'Poppins',sans-serif; font-weight:700; color:#222529; margin-top:0; letter-spacing:normal; }
.mastiff-faq .mfq-article-body h1 { font-size:36px; line-height:44px; margin-bottom:32px; }
.mastiff-faq .mfq-article-body h2 { font-size:30px; line-height:40px; margin-bottom:32px; }
.mastiff-faq .mfq-article-body h2[data-original-heading="h1"] { font-size:36px; line-height:44px; margin-bottom:32px; }
.mastiff-faq .mfq-article-body h3 { font-size:25px; line-height:32px; margin-bottom:20px; }
.mastiff-faq .mfq-article-body h4 { font-size:20px; line-height:27px; margin-bottom:14px; }
.mastiff-faq .mfq-article-body img { display:inline; margin:0; vertical-align:middle; }
.mastiff-faq .mfq-article-body a { color:#222529; text-decoration:none; }
.mastiff-faq .mfq-article-body a:hover { text-decoration:underline; }
.mastiff-faq .mfq-article-body table { display:table; width:100%; border-collapse:collapse; border-spacing:0; }
.mastiff-faq .mfq-article-body td, .mastiff-faq .mfq-article-body th { padding:11px 7px; vertical-align:top; }
.mastiff-faq .mfq-article-body ul, .mastiff-faq .mfq-article-body ol { margin:0 0 2px; padding-left:40px; }
.mastiff-faq .mfq-article-body li { margin:0 0 .8px; }
.mastiff-faq .mfq-article-body hr { margin:22px 0; border:0; height:1px; background:#dbdbdb; color:gray; }
@media(max-width:1279px) { .mfq-article-page { max-width:1180px; } .mfq-article-page .mfq-main { padding:28px 0; border:0; } }
@media(max-width:650px) { .mfq-article-page .mfq-aside { grid-template-columns:1fr; } }
@media(max-width:900px) { .mfq-topic-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .mfq-columns { grid-template-columns:minmax(0,1fr) 240px; gap:18px; } .mfq-card { padding:22px; } }
@media(max-width:650px) { body.mastifffaq-index-index .page-main { padding-top:22px; } .mfq-hero { padding:24px 20px; margin-bottom:24px; } .mastiff-faq h1 { font-size:25px; } .mastiff-faq .mfq-article-title { font-size:23px; } .mfq-columns { grid-template-columns:minmax(0,1fr); gap:24px; } .mfq-topic-grid { gap:10px; } .mastiff-faq .mfq-topic { min-height:112px; padding:18px 30px 18px 16px; } .mfq-topic>span:first-child { font-size:13px; } .mfq-topic-arrow { right:12px; font-size:16px; } .mfq-card { padding:22px 20px; } .mfq-search>div { gap:8px; } .mastiff-faq .mfq-search button { padding:10px 16px; } .mastiff-faq .mfq-search input { font-size:16px; padding:0 12px; } .mfq-question summary { font-size:14px; gap:16px; } .mfq-question>.mfq-answer { padding-right:0; } .mfq-section-title { flex-wrap:wrap; gap:0 16px; } }
