/* ==========================================================================
   TechBlog site styles, loaded after the news template's style.css.

   1. Template fixes: make real posts (any image size, long titles) sit
      properly in the template's slots.
   2. Pieces the template doesn't have: article body, likes, banners.
   3. Writer and account screens (editor, dashboard, sign in), styled in
      the template's colours and type.
   ========================================================================== */

:root {
  --accent: #fc3f00;
  --accent-dark: #d63500;
  --accent-soft: #fff1ec;
  --text: #506172;
  --muted: #8f8f96;
  --rule: #eceff8;
  --rule-strong: #d9dde6;
  --paper-2: #f7f7f7;
  --ok: #17603a;
  --ok-soft: #e3f4e8;
  --warn: #8a5300;
  --warn-soft: #fdf0d8;
  --danger: #b42318;
  --danger-soft: #fdecea;
  --font: "Roboto", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --radius: 5px;
}

/* ---------- 1. Template fixes ---------- */

/* Image slots: the template assumed fixed-size stock photos */
.trending-area .trend-top-img img { height: 460px; object-fit: cover; }
.trending-area .trend-bottom-img img { width: 100%; height: 160px; object-fit: cover; border-radius: 5px; }
.trending-area .trand-right-img img { width: 120px; height: 100px; object-fit: cover; border-radius: 5px; }
.trending-area .trand-right-img { flex-shrink: 0; }
.weekly-news-area .weekly-img img { width: 100%; height: 360px; object-fit: cover; }
.whats-news-area .what-img img, .recent-articles .what-img img { width: 100%; height: 280px; object-fit: cover; }
.blog_item_img img { height: 360px; object-fit: cover; }
.single-post-area .feature-img img { width: 100%; max-height: 460px; object-fit: cover; }
.blog_right_sidebar .popular_post_widget .post_item img { width: 80px; height: 80px; object-fit: cover; flex-shrink: 0; }
.navigation-area .thumb img { width: 60px; height: 60px; object-fit: cover; }
.blog-author img { width: 90px; height: 90px; object-fit: cover; border-radius: 50%; }
.comments-area .thumb img { width: 70px; height: 70px; object-fit: cover; border-radius: 50%; }

.trend-top-cap .trend-top-meta { color: rgba(255, 255, 255, .85); font-size: 14px; margin: 8px 0 0; line-height: 1.4; }
.trend-top-img::before { pointer-events: none; }

/* Category labels on cards link to the category */
.category-badge {
  display: inline-block;
  padding: 7px 14px;
  margin-bottom: 14px;
  border-radius: 5px;
  color: #000 !important;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
}
.category-badge:hover { color: var(--accent) !important; }

/* Header: account links and the newsletter in the old banner slot */
.header-area .header-top .header-info-right { display: flex; align-items: center; gap: 24px; }
.header-account { display: flex; gap: 18px; }
.header-account li { list-style: none; font-size: 13px; }
.header-account a { color: #fff; }
.header-account a:hover { color: var(--accent); }
.header-social:empty { display: none; }

.header-newsletter {
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
  width: 750px;
  max-width: 100%;
  min-height: 100px;
  padding: 18px 28px;
  border-radius: 5px;
  background: #000;
  color: #fff;
}
.header-newsletter-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.header-newsletter-text strong { font-size: 20px; font-weight: 700; line-height: 1.3; }
.header-newsletter-text span { color: #b9b9b9; font-size: 14px; }
.header-newsletter .newsletter-form { flex: 1.2; }
.header-newsletter .newsletter-note { position: absolute; right: 28px; bottom: 4px; }

.menu-logout button {
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.main-menu ul ul.submenu > li .menu-logout button { color: #000; font-size: 14px; padding: 3px 0; }
.main-menu ul ul.submenu > li .menu-logout button:hover { color: var(--accent); }

.header-right-btn .search-box input { color: #000; }

/* Newsletter forms (header, footer) */
.newsletter-form { display: flex; gap: 0; }
.newsletter-form input {
  flex: 1;
  min-width: 0;
  height: 48px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 5px 0 0 5px;
  background: #fff;
  color: #000;
  font-size: 14px;
}
.newsletter-form input:focus { outline: none; border-color: var(--accent); }
.newsletter-form button {
  height: 48px;
  padding: 0 20px;
  border: 0;
  border-radius: 0 5px 5px 0;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
}
.newsletter-form button:hover { background: var(--accent-dark); }
.footer-area .newsletter-form input { background: #2d2d2d; color: #fff; }
.newsletter-note { min-height: 1.2em; margin: 8px 0 0 !important; font-size: 13px !important; line-height: 1.4 !important; }
.header-newsletter .newsletter-note, .footer-area .newsletter-note { color: #d0d0d0 !important; }

/* Footer: the template's Instagram column now lists sections */
.footer-area .footer-links li { list-style: none; margin-bottom: 10px; }
.footer-area .footer-links a { color: #a8a8a8; font-size: 15px; }
.footer-area .footer-links a:hover { color: var(--accent); }

/* Home: "more" link under each What's New tab */
.whats-news-area .single-what-news { margin-bottom: 90px; }
.tab-more { display: inline-block; margin: -40px 0 40px; color: var(--accent); font-weight: 500; }
.tab-more:hover { color: var(--accent-dark); }
.whats-news-area .nav-tabs { flex-wrap: wrap; }

/* ---------- 2. Pieces the template doesn't have ---------- */

.page-banner { padding: 56px 0 44px; background: var(--paper-2); border-bottom: 1px solid var(--rule); }
.page-banner h1 { margin: 0; font-size: 40px; font-weight: 700; line-height: 1.2; color: #000; }
.page-banner p { margin: 10px 0 0; max-width: 640px; }
.page-banner-kicker { display: inline-block; margin-bottom: 10px; color: var(--accent); font-size: 12px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; }

.author-banner { display: flex; align-items: center; gap: 28px; }
.author-banner img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.author-stats { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 12px 0 18px; }
.author-stats li { list-style: none; color: var(--text); font-size: 14px; }
.author-stats strong { color: #000; }
.follow-btn[aria-pressed="true"] { background: var(--accent); color: #fff !important; }

.list-sort { display: flex; align-items: center; gap: 18px; margin-bottom: 36px; padding-bottom: 14px; border-bottom: 1px solid var(--rule); font-size: 14px; }
.list-sort span { color: var(--muted); }
.list-sort a { color: #000; font-weight: 500; }
.list-sort a.active, .list-sort a:hover { color: var(--accent); }

.blog_details h2 { line-height: 1.35; }
.blog-info-link li span { color: #999; font-size: 13px; }
.pinned-icon { color: var(--accent); font-size: 0.8em; }

.empty-note { padding: 56px 32px; text-align: center; border: 1px dashed var(--rule-strong); border-radius: 5px; }
.empty-note h3 { margin-bottom: 10px; font-size: 22px; }
.empty-note .boxed-btn { margin-top: 10px; }

/* Article */
.owner-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 24px;
  padding: 12px 16px;
  border-radius: 5px;
  background: var(--paper-2);
  font-size: 14px;
}
.owner-bar--draft { background: var(--warn-soft); color: var(--warn); }
.owner-bar a { margin-left: 16px; color: #000; font-weight: 500; }
.owner-bar a:hover { color: var(--accent); }

.single-post-area .blog_details h2 { font-size: 34px; line-height: 1.25; }

.prose { color: var(--text); font-size: 17px; line-height: 1.8; overflow-wrap: break-word; }
.prose > * + * { margin-top: 1.1em; }
.prose p { margin-bottom: 0; font-size: 17px; line-height: 1.8; }
/* Body copy runs flush to both margins, the way print does, with whole words only:
   no hyphens. `text-wrap: pretty` lets the browser weigh the whole paragraph when
   choosing line breaks, which spreads the extra space thinly instead of opening
   wide gaps on a few lines. Browsers without it still justify normally. */
.prose p, .prose li, .prose blockquote {
  text-align: justify; text-justify: inter-word;
  -webkit-hyphens: none; hyphens: none;
  text-wrap: pretty;
}
.prose pre, .prose pre *, .prose table, .prose figcaption, .prose .footnote {
  text-align: left;
}
.single-post-area .blog_details .prose h2 { font-size: 26px; margin: 1.8em 0 0; line-height: 1.3; }
.prose h3 { font-size: 21px; margin-top: 1.6em; }
.prose h4 { font-size: 18px; margin-top: 1.4em; }
.prose h2 + *, .prose h3 + *, .prose h4 + * { margin-top: .6em; }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose ul li { list-style: disc; }
.prose ol li { list-style: decimal; }
.prose li + li { margin-top: .35em; }
.prose blockquote {
  margin-left: 0;
  padding: 18px 24px;
  border-left: 3px solid var(--accent);
  background: var(--paper-2);
  color: #000;
  font-style: italic;
}
.prose blockquote p { margin: 0; }
.prose img { display: block; max-width: 100%; height: auto; margin: 0 auto; border-radius: 5px; }
.prose code { padding: .15em .4em; border-radius: 4px; background: var(--paper-2); color: #c7254e; font-family: var(--mono); font-size: .85em; }
.prose pre { position: relative; padding: 18px 20px; border-radius: 6px; background: #1d1d1d; color: #eee; font-size: 14px; line-height: 1.6; overflow-x: auto; }
.prose pre code { padding: 0; background: none; color: inherit; font-size: inherit; }
.prose pre code.hljs { padding: 0; background: none; }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; display: block; overflow-x: auto; }
.prose th, .prose td { padding: 8px 12px; border-bottom: 1px solid var(--rule); text-align: left; }
.prose th { color: #000; border-bottom: 2px solid #000; }
.prose hr { border: 0; border-top: 1px solid var(--rule); margin: 2em 0; }

.copy-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 3px 8px;
  border: 1px solid #444;
  border-radius: 4px;
  background: #2a2a2a;
  color: #ccc;
  font-size: 12px;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s;
}
.prose pre:hover .copy-btn, .copy-btn:focus { opacity: 1; }

.navigation-top .like-info { margin: 0; }
.like-btn {
  margin-right: 12px;
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--text);
  font-size: 15px;
  cursor: pointer;
}
.like-btn i { color: #c7c7c7; margin-right: 4px; transition: color .15s; }
.like-btn:hover i, .like-btn[aria-pressed="true"] i { color: var(--accent); }
.post-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.post-tags li { list-style: none; }
.post-tags a { display: inline-block; padding: 4px 10px; border: 1px solid var(--rule); border-radius: 3px; color: var(--muted); font-size: 13px; }
.post-tags a:hover { border-color: var(--accent); color: var(--accent); }
.navigation-top .social-icons li a[aria-pressed="true"] i { color: var(--accent); }

.comments-area .comment-list .reply-btn { display: flex; gap: 6px; align-items: center; }
.comments-area .reply-btn .btn-reply { border: 1px solid transparent; cursor: pointer; }
.comments-area .reply-btn .btn-reply:hover { border-color: var(--rule-strong); color: #000; }
.comments-area .reply-form { margin-top: 14px; }
.comments-area .reply-form .boxed-btn { margin-top: 10px; padding: 10px 26px; }
.comments-area h5 a { color: #000; }
.author-badge { margin-left: 6px; padding: 2px 6px; border-radius: 3px; background: var(--accent-soft); color: var(--accent); font-size: 10px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; vertical-align: middle; }
.no-comments { color: var(--muted); }
.comment-form .form-control { border: 1px solid var(--rule-strong); }

/* About */
.about-stats { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 30px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.about-stats div { padding: 22px 0; }
.about-stats div + div { padding-left: 22px; border-left: 1px solid var(--rule); }
.about-stats strong { display: block; color: #000; font-size: 32px; font-weight: 700; line-height: 1.1; }
.about-stats span { color: var(--muted); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; }
.team-card { height: 100%; padding: 26px; border: 1px solid var(--rule); border-radius: 5px; }
.team-card h4 { margin-bottom: 4px; font-size: 20px; }
.team-card span { display: block; margin-bottom: 12px; color: var(--accent); font-size: 13px; }
.team-card p { margin: 0; }
.about-topics { display: flex; flex-wrap: wrap; gap: 8px; }
.about-topics li { list-style: none; }
.about-topics a { display: inline-block; padding: 8px 16px; border: 1px solid var(--rule); border-radius: 3px; color: #000; }
.about-topics a:hover { border-color: var(--accent); color: var(--accent); }
.about-topics span { color: var(--muted); }

/* Flash messages */
.flash-stack { position: fixed; right: 16px; bottom: 16px; z-index: 9999; display: grid; gap: 8px; max-width: min(420px, calc(100vw - 32px)); }
.flash {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-left: 4px solid var(--accent);
  border-radius: 5px;
  background: #000;
  color: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
  font-size: 15px;
}
.flash--error { border-left-color: #ff6b6b; }
.flash button { margin-left: auto; border: 0; background: none; color: inherit; font-size: 20px; line-height: 1; opacity: .7; cursor: pointer; }

/* ---------- 3. Writer and account screens ---------- */

.wrap { width: 100%; max-width: 1170px; margin: 0 auto; padding: 0 15px; }
.wrap--narrow { max-width: 760px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.kicker { color: var(--accent); font-size: 12px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: var(--muted); font-size: 13px; }
.meta a { color: var(--muted); }
.meta a:hover { color: var(--accent); }

/* Buttons: resets the template's large .btn for app screens */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 10px 18px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: #fff;
  color: #000;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: none;
  overflow: visible;
  transition: background .15s, border-color .15s, color .15s;
}
.btn::before { display: none; }
.btn:hover { border-color: #000; color: #000; }
.btn-primary { background: #000; border-color: #000; color: #fff; }
.btn-primary:hover { background: #222; border-color: #222; color: #fff; }
.btn-accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-accent:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }
.btn-ghost { border-color: transparent; background: none; color: var(--text); }
.btn-ghost:hover { background: var(--paper-2); border-color: transparent; }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger:hover { background: #8f1c13; border-color: #8f1c13; color: #fff; }
.btn-sm { padding: 6px 12px; font-size: 13px; }
.btn-block { width: 100%; }

/* Forms (crispy-forms Bootstrap 5 markup) */
.auth-card label, .settings-form label, .editor label { display: block; margin-bottom: 6px; color: #000; font-size: 14px; font-weight: 500; }
.asteriskField { margin-left: 2px; color: var(--accent); }
.auth-card .form-control, .settings-form .form-control, .editor .form-control, .editor .form-select,
.auth-card input:not([type="checkbox"]):not([type="hidden"]), .settings-form input:not([type="checkbox"]):not([type="hidden"]),
.settings-form textarea, .form-select {
  display: block;
  width: 100%;
  height: auto;
  padding: 11px 14px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: #fff;
  color: #000;
  font-size: 15px;
  line-height: 1.4;
}
.auth-card input:focus, .settings-form input:focus, .settings-form textarea:focus, .editor .form-control:focus, .form-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(252, 63, 0, .15);
}
.mb-3 { margin-bottom: 18px !important; }
.form-text, .helptext { display: block; margin-top: 6px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.form-text ul { margin: 4px 0 0; padding-left: 18px; }
.form-text li { list-style: disc; }
.invalid-feedback, .text-danger { display: block; margin-top: 6px; color: var(--danger); font-size: 13px; }
.is-invalid { border-color: var(--danger) !important; }
.alert-block { margin-bottom: 16px; padding: 10px 14px; border-radius: var(--radius); background: var(--danger-soft); color: var(--danger); font-size: 14px; }
.form-check { display: flex; align-items: center; gap: 8px; padding-left: 0; }
.form-check-input { position: static; margin: 0; }

.auth { display: grid; place-items: center; padding: 70px 15px 100px; }
.auth-card { width: 100%; max-width: 440px; padding: 36px; border: 1px solid var(--rule); border-radius: 5px; background: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .06); }
.auth-card h1 { margin-bottom: 6px; font-size: 28px; font-weight: 700; }
.auth-card > p { margin-bottom: 24px; }
.auth-foot { margin-top: 20px; color: var(--muted); font-size: 14px; text-align: center; }
.auth-foot a { color: var(--accent); font-weight: 500; }
.button-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }

.page-head { padding: 50px 0 10px; }
.page-head h1 { font-size: 34px; font-weight: 700; }
.page-head p { margin: 8px 0 0; }
.page-head--flush { padding-top: 0; margin-bottom: 24px; }

.settings { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 40px; padding: 50px 0 80px; }
.settings-card { text-align: center; }
.settings-card img { width: 120px; height: 120px; margin: 0 auto 12px; border-radius: 50%; object-fit: cover; }
.settings-meta { justify-content: center; margin: 4px 0 14px; }
.settings-form h2 { margin: 8px 0 16px; }

.panel { padding: 20px; border: 1px solid var(--rule); border-radius: 5px; background: #fff; }
.panel h2 { margin-bottom: 14px; color: var(--muted); font-size: 12px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; }
.panel .actions { display: grid; gap: 8px; }
.panel details summary { cursor: pointer; color: var(--muted); font-size: 12px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; }
.panel details[open] summary { margin-bottom: 14px; }

/* Dashboard */
.dash-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; padding: 50px 0 24px; }
.dash-head h1 { font-size: 34px; font-weight: 700; }
.dash-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 36px; }
.dash-stat { padding: 20px; border: 1px solid var(--rule); border-radius: 5px; }
.dash-stat strong { display: block; color: #000; font-size: 30px; font-weight: 700; }
.dash-stat span { color: var(--muted); font-size: 14px; }

.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 2px solid #000; }
.section-head h2 { font-size: 20px; font-weight: 700; }
.section-head--spaced { margin-top: 50px; }
.tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.tabs a { padding: 5px 12px; border-radius: 3px; color: var(--muted); font-size: 14px; font-weight: 500; }
.tabs a:hover { color: #000; background: var(--paper-2); }
.tabs a[aria-current="true"] { background: var(--accent); color: #fff; }

.table-wrap { overflow-x: auto; margin-bottom: 60px; border: 1px solid var(--rule); border-radius: 5px; }
.table { width: 100%; margin: 0; border-collapse: collapse; font-size: 15px; }
.table th { padding: 12px 16px; border-top: 0; border-bottom: 1px solid var(--rule); color: var(--muted); font-size: 12px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; }
.table td { padding: 14px 16px; border-top: 0; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table .title-cell a { color: #000; font-weight: 500; }
.table .title-cell a:hover { color: var(--accent); }
.table .row-actions { display: flex; justify-content: flex-end; gap: 4px; white-space: nowrap; }

.pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.pill--published { background: var(--ok-soft); color: var(--ok); }
.pill--draft, .pill--scheduled { background: var(--warn-soft); color: var(--warn); }

.empty { margin-bottom: 60px; padding: 50px 24px; border: 1px dashed var(--rule-strong); border-radius: 5px; text-align: center; }
.empty h2, .empty h3 { margin-bottom: 8px; font-size: 20px; }
.empty p { max-width: 44ch; margin: 0 auto 16px; }

.dash-comment { display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 14px 0; border-top: 1px solid var(--rule); }
.dash-comment img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.dash-comment-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.dash-comment-body { color: var(--text); white-space: pre-line; }
.dash-comments { margin-bottom: 60px; }
.table .date-cell { color: var(--muted); font-size: 13px; white-space: nowrap; }
.cover-remove { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 14px; }
.editor .cover-remove label { margin: 0; font-weight: 400; }
.cover-input { display: block; width: 100%; font-size: 14px; }

/* Editor */
.editor { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; padding: 40px 0 80px; }
.editor-main { min-width: 0; }
.editor-back { margin-bottom: 14px; }
.editor-title {
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: #000;
  font-family: var(--font);
  font-size: 36px;
  font-weight: 700;
  line-height: 1.25;
  text-overflow: ellipsis;
}
.editor-title:focus { outline: none; }
.editor-title::placeholder { color: #c9ccd3; }
.editor-tabs { display: flex; align-items: center; gap: 2px; margin-top: 24px; border-bottom: 1px solid var(--rule); }
.editor-tabs > button { margin-bottom: -1px; padding: 8px 14px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--muted); font-size: 15px; font-weight: 500; cursor: pointer; }
.editor-tabs > button[aria-selected="true"] { border-bottom-color: var(--accent); color: #000; }
.editor-toolbar { display: flex; gap: 2px; margin-left: auto; }
.editor-toolbar button { min-width: 32px; height: 30px; padding: 0 6px; border: 0; border-radius: 4px; background: none; color: var(--muted); font-family: var(--mono); font-size: 13px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.editor-toolbar button:hover { background: var(--paper-2); color: #000; }
.editor-body {
  display: block;
  width: 100%;
  min-height: 520px;
  padding: 20px 0;
  border: 0;
  background: transparent;
  color: #222;
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.75;
  resize: vertical;
}
.editor-body:focus { outline: none; }
.editor-preview { min-height: 520px; padding: 20px 0; }
.editor-status { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 10px; border-top: 1px solid var(--rule); color: var(--muted); font-size: 13px; }
.editor-side { display: flex; flex-direction: column; gap: 16px; }
.cover-current { width: 100%; margin-bottom: 10px; border-radius: var(--radius); }
.tag-picker { display: flex; flex-wrap: wrap; gap: 6px; max-height: 200px; overflow-y: auto; }
.tag-picker input { position: absolute; opacity: 0; pointer-events: none; }
.editor .tag-picker label { display: inline-block; margin: 0; padding: 5px 12px; border: 1px solid var(--rule-strong); border-radius: 3px; color: var(--text); font-size: 13px; font-weight: 400; cursor: pointer; }
.editor .tag-picker input:checked + label { background: var(--accent); border-color: var(--accent); color: #fff; }
.tag-picker input:focus-visible + label { outline: 2px solid var(--accent); }
.check-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 15px; }
.editor .check-row label { margin: 0; font-weight: 400; }
.danger-link { color: var(--danger); }
.danger-link:hover { background: var(--danger-soft); color: var(--danger); }

/* ---------- Responsive ---------- */

@media (max-width: 991px) {
  .editor, .settings { grid-template-columns: minmax(0, 1fr); }
  .trending-area .trend-top-img img { height: 340px; }
  .header-newsletter { width: 100%; }
}

@media (max-width: 767px) {
  .trending-area .trend-top-img img { height: 260px; }
  .blog_item_img img { height: 220px; }
  .weekly-news-area .weekly-img img { height: 260px; }
  .page-banner { padding: 36px 0 28px; }
  .page-banner h1 { font-size: 28px; }
  .author-banner { flex-direction: column; align-items: flex-start; gap: 16px; }
  .author-banner img { width: 88px; height: 88px; }
  .single-post-area .blog_details h2 { font-size: 26px; }
  .about-stats { grid-template-columns: repeat(2, 1fr); }
  .about-stats div:nth-child(3) { padding-left: 0; border-left: 0; }
  .dash-stats { grid-template-columns: minmax(0, 1fr); }
  .table .hide-sm { display: none; }
  .editor-title { font-size: 28px; }
  .prose, .prose p { font-size: 16px; }
}

/* Comments: let the text use the full width */
.comments-area .single-comment, .comments-area .single-comment .user { width: 100%; }
.comments-area .single-comment .thumb { flex-shrink: 0; margin-right: 20px; }
.comments-area .single-comment .desc { flex: 1; min-width: 0; }
.comments-area .comment-list { padding-bottom: 36px; }

.navigation-top .like-info a { color: var(--accent); }
.blog_item .blog_details .category-badge { display: table; }
.header-date-icon { margin-right: 8px; color: var(--accent); }
.footer-area .footer-tittle ul.footer-links li a { color: #bdbdbd; }
.footer-area .footer-tittle ul.footer-links li a:hover { color: var(--accent); }

/* Logo */
.header-area .header-mid .logo img { width: auto; height: 48px; }
.sticky-logo img { width: auto; height: 34px; }
.footer-area .footer-logo img { width: auto; height: 34px; }
.preloader .preloader-img img { max-width: 48px; border-radius: 10px; }

/* Compact footer (the template's is 100-140px tall before any content) */
.footer-area.footer-padding { padding-top: 48px; padding-bottom: 8px; }
.footer-area .footer-logo { margin-bottom: 16px; }
.footer-area .footer-pera p { margin-bottom: 20px; font-size: 14px; line-height: 1.7; }
.footer-area .footer-tittle h4 { margin-bottom: 14px; font-size: 17px; }
.footer-area .footer-tittle p { margin-bottom: 12px; font-size: 14px; line-height: 1.6; }
.footer-area .footer-form { margin-top: 0; }
.footer-area .footer-tittle ul.footer-links { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 20px; }
.footer-area .footer-tittle ul.footer-links li { margin-bottom: 0; }
.footer-area .footer-tittle ul.footer-links li a { font-size: 14px; }
.footer-area .single-footer-caption { margin-bottom: 24px; }
.footer-area .newsletter-form input, .footer-area .newsletter-form button { height: 40px; }
.footer-bottom-area .footer-border { padding-top: 16px; padding-bottom: 16px; }
.footer-bottom-area .footer-copy-right p { margin: 0; font-size: 13px; }

/* Editor: schedule for later */
.schedule { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--rule); }
.schedule summary { cursor: pointer; color: var(--text); font-size: 14px; font-weight: 500; }
.schedule[open] summary { margin-bottom: 12px; }
.schedule .btn { margin-top: 10px; }

/* Accessibility: the template's badge and tab colours, darkened to meet WCAG AA contrast */
.trending-area .trending-main .trending-tittle strong { background: #d60000; }
.whats-news-area .nav-tabs .nav-link { color: #5f6368; }
.whats-news-area .nav-tabs .nav-link.active { color: #b82e00; }
.blog_right_sidebar .tag_cloud_widget ul li a { color: #5f6368; }
.blog_right_sidebar .search_widget .form-control::placeholder,
.blog_right_sidebar .newsletter_widget .form-control::placeholder { color: #6b6f76; }

/* ---------- Opportunities (jobs, internships, scholarships) ---------- */

.opp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; margin-bottom: 40px; }
.opp-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: 5px;
  background: #fff;
  transition: box-shadow .2s, border-color .2s;
}
.opp-card:hover { box-shadow: 0 10px 30px rgba(0, 0, 0, .07); }
.opp-card--closed { border-left-color: var(--rule-strong); opacity: .75; }
.opp-card-head { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.opp-title { font-size: 19px; line-height: 1.35; margin: 0; }
.opp-title a { color: #000; }
.opp-title a:hover { color: var(--accent); }
.opp-org { margin: 0; color: var(--text); font-size: 14px; }
.opp-org i { color: var(--muted); margin-right: 3px; }
.opp-sep { color: var(--rule-strong); margin: 0 4px; }
.opp-pay { margin: 0; color: #000; font-size: 14px; font-weight: 500; }
.opp-card-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--rule); }
.opp-deadline { color: var(--muted); font-size: 13px; }
.opp-deadline--soon { color: var(--accent); font-weight: 500; }
.opp-deadline--closed { color: var(--muted); }
.opp-link { color: var(--accent); font-size: 14px; font-weight: 500; }
.opp-link i { font-size: .8em; }

.opp-type {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 3px;
  background: var(--paper-2);
  color: #000;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.opp-type--job { background: #e7f1ff; }
.opp-type--internship { background: #e3f4e8; }
.opp-type--scholarship { background: #fff4d6; }
.opp-type--fellowship { background: #f3e8ff; }
.opp-type--grant { background: #ffe9e3; }
.opp-type--training { background: #e0f7f4; }
.opp-type--tender { background: #ededed; }
.opp-type--event { background: #fde7f3; }
.opp-tag { display: inline-block; padding: 3px 9px; border: 1px solid var(--rule-strong); border-radius: 3px; color: var(--text); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.opp-tag--featured { border-color: var(--accent); color: var(--accent); }
.opp-tag--closed { border-color: var(--rule-strong); color: var(--muted); }

.opp-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 18px; }
.opp-filters input[type="search"] { flex: 1; min-width: 220px; height: 46px; padding: 0 14px; border: 1px solid var(--rule-strong); border-radius: 5px; font-size: 15px; }
.opp-filters input[type="search"]:focus { outline: none; border-color: var(--accent); }
.opp-filters .boxed-btn { padding: 13px 28px; }
.opp-remote { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--text); font-size: 14px; }

.opp-types { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; padding-bottom: 18px; border-bottom: 1px solid var(--rule); }
.opp-types a { padding: 6px 14px; border: 1px solid var(--rule); border-radius: 999px; color: var(--text); font-size: 14px; }
.opp-types a:hover { border-color: var(--accent); color: var(--accent); }
.opp-types a.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.opp-types a span { opacity: .7; font-size: 12px; }

.opp-note { color: var(--text); font-size: 14px; }
.opp-note--muted { color: var(--muted); }

/* Detail page */
.opp-detail h1 { font-size: 32px; line-height: 1.25; margin: 10px 0 16px; }
.opp-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 20px; margin: 0 0 24px; padding: 18px 20px; border-radius: 5px; background: var(--paper-2); }
.opp-facts li { list-style: none; color: var(--text); font-size: 15px; }
.opp-facts i { color: var(--muted); margin-right: 6px; }
.opp-apply { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 28px; }
.opp-apply--bottom { margin: 32px 0 0; }
.opp-apply-btn { background: var(--accent); color: #fff !important; border-color: var(--accent); }
.opp-apply-btn:hover { background: var(--accent-dark) !important; border-color: var(--accent-dark); color: #fff !important; }
.opp-apply-note { color: var(--muted); font-size: 14px; }
.opp-subhead { font-size: 22px; margin: 32px 0 14px; }
.opp-source { margin-top: 24px; color: var(--muted); font-size: 13px; }
.opp-related { margin-top: 50px; }

.breadcrumbs { margin-bottom: 18px; color: var(--muted); font-size: 13px; }
.breadcrumbs a { color: var(--text); }
.breadcrumbs a:hover { color: var(--accent); }
.breadcrumbs span { margin: 0 6px; }

/* Home page block */
.opportunities-area { padding: 10px 0 40px; }
.opportunities-area .section-tittle { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.opportunities-area .section-tittle a { color: var(--accent); font-size: 15px; font-weight: 500; }

@media (max-width: 767px) {
  .opp-detail h1 { font-size: 25px; }
  .opp-filters .boxed-btn { width: 100%; }
}

/* ---------- Home: latest grid and per-section news blocks ---------- */

.news-area { padding: 40px 0 20px; }

.news-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 24px;
  padding-left: 14px;
  border-left: 4px solid var(--accent);
}
.news-head h2 { font-size: 22px; font-weight: 700; margin: 0; text-transform: capitalize; }
.news-head h2 a { color: #000; }
.news-head h2 a:hover { color: var(--accent); }
.news-head > a { color: var(--accent); font-size: 14px; font-weight: 500; white-space: nowrap; }
.news-head > a i { font-size: .8em; }

.news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 26px 24px; margin-bottom: 50px; }
.news-card { display: flex; flex-direction: column; gap: 10px; }
.news-card-img img, .news-lead-img img { width: 100%; height: 180px; object-fit: cover; border-radius: 4px; }
.news-card-title { font-size: 17px; line-height: 1.4; margin: 0; }
.news-card-title a { color: #000; }
.news-card-title a:hover { color: var(--accent); }

.news-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.news-tag {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 3px;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.news-tag:hover { background: var(--accent-dark); color: #fff; }
.news-tag--plain { background: var(--paper-2); color: var(--text); }
.news-tag--plain:hover { background: var(--rule); color: #000; }

.news-meta { margin: 0; color: var(--muted); font-size: 13px; }
.news-meta a { color: var(--muted); }
.news-meta a:hover { color: var(--accent); }
.news-meta span { margin: 0 4px; }

.news-section { margin-bottom: 50px; }
.news-section-body { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 30px; }
.news-lead { display: flex; flex-direction: column; gap: 12px; }
.news-lead-img img { height: 220px; }
.news-lead-title { font-size: 21px; line-height: 1.35; margin: 0; }
.news-lead-title a { color: #000; }
.news-lead-title a:hover { color: var(--accent); }
.news-lead-excerpt { margin: 0; color: var(--text); font-size: 15px; line-height: 1.6; }

.news-list { display: flex; flex-direction: column; gap: 18px; }
.news-row { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 14px; align-items: start; }
.news-row + .news-row { padding-top: 18px; border-top: 1px solid var(--rule); }
.news-row-img img { width: 110px; height: 78px; object-fit: cover; border-radius: 4px; }
.news-row-title { font-size: 15px; line-height: 1.4; margin: 0 0 4px; }
.news-row-title a { color: #000; }
.news-row-title a:hover { color: var(--accent); }

@media (max-width: 991px) {
  .news-section-body { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}
@media (max-width: 767px) {
  .news-card-img img { height: 200px; }
  .news-lead-img img { height: 200px; }
}

/* Sidebar: review requests */
.blog_right_sidebar .review_widget p { color: var(--text); font-size: 14px; line-height: 1.6; margin-bottom: 16px; }
.blog_right_sidebar .review_widget .boxed-btn { font-size: 12px; letter-spacing: 1px; padding: 14px 10px; }

/* ---------- Policy pages and cookie notice ---------- */

.legal h2 { font-size: 22px; margin-top: 1.8em; }
.legal ul li { list-style: disc; }
.legal-contact { color: var(--muted); font-size: 14px; }

.cookie-note {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 9998;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 20px;
  max-width: 760px;
  margin: 0 auto;
  padding: 14px 20px;
  border-radius: 6px;
  background: #100f0f;
  color: #e8e8e8;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
}
.cookie-note[hidden] { display: none; }
/* Push the footer's last row clear of the fixed cookie bar, instead of
   letting the bar sit permanently on top of it. */
body.has-cookie-note .footer-bottom-area { padding-bottom: var(--cookie-note-space, 0px); }
.cookie-note p { margin: 0; font-size: 14px; line-height: 1.5; color: #e8e8e8; }
.cookie-note a { color: var(--accent); text-decoration: underline; }
.cookie-note button {
  padding: 9px 22px;
  border: 0;
  border-radius: 4px;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
}
.cookie-note button:hover { background: var(--accent-dark); }

/* ---------- Sticky menu ---------- */

/* The bar becomes position:fixed on scroll, which takes it out of the page
   flow. template.js inserts this spacer to hold its place, otherwise the page
   jumps up, the scroll position drops back below the threshold and the bar
   flickers. */
.header-sticky-spacer { display: none; }

/* When the front page has little content, lay the sidebar out as a row of cards
   instead of one tall column beside an empty space */
.sidebar-row .blog_right_sidebar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  align-items: start;
}
.sidebar-row .blog_right_sidebar .single_sidebar_widget { margin-bottom: 0; }


/* ---------- Phones and tablets ----------
   The template was drawn for a desktop masthead: on a phone its menu button
   sat above the top of the page, and on a tablet the newsletter panel lay
   across the logo. These rules rebuild the header at those sizes and give
   every link a thumb-sized target. */

@media (max-width: 991px) {
  /* Masthead stacks: logo on its own line, newsletter panel beneath it */
  .section-padding { padding-top: 64px; padding-bottom: 64px; }
  .header-area .header-mid { padding: 18px 0 20px; }
  .header-area .header-mid .row { flex-direction: column; align-items: stretch; }
  .header-area .header-mid .row > div { width: 100%; max-width: 100%; flex: 0 0 100%; }
  .header-area .header-mid .logo { margin-bottom: 16px; }
  .header-area .header-mid .logo img { height: 40px; }
  .header-banner.f-right { float: none !important; }
  .header-newsletter { width: 100%; min-height: 0; padding: 16px 18px; gap: 16px; }
  .header-newsletter-text strong { font-size: 17px; }
  .header-newsletter .newsletter-note { position: static; margin-top: 6px; }

  /* Footer columns: the template's widths add up to more than a row */
  .footer-area .row > div:first-child { flex: 0 0 100%; max-width: 100%; }
  .footer-area .row > div:not(:first-child) { flex: 0 0 50%; max-width: 50%; }
  .footer-area .newsletter-form input { min-width: 0; }

  /* Thumb-sized targets in the places the template left at 17px */
  .breadcrumbs { font-size: 14px; }
  .breadcrumbs a { display: inline-block; padding: 6px 0; }
  .footer-area .footer-tittle ul.footer-links li a,
  .footer-bottom-area .footer-menu li a { display: inline-block; padding: 8px 0; }
  .social-icons li a, .footer-social a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px;
  }
  .post-tags li a { display: inline-block; padding: 6px 10px; }
  .navigation-top .like-info { gap: 10px; }
  .navigation-top .like-btn, .navigation-top .like-info a { padding: 8px 4px; }
}

@media (max-width: 767px) {
  .section-padding { padding-top: 36px; padding-bottom: 44px; }
  .blog-author { margin-top: 30px; }
  /* a little air between the bar and the first thing under it */
  .trending-area { padding-top: 16px; }

  /* The template animates the bar in each time it sticks; on a phone that
     reads as a flicker, so it just stays put. */
  .header-area .header-bottom.sticky-bar { animation: none; }

  /* One compact bar: logo, search, menu */
  .header-area .header-bottom { background: #fff; border-bottom: 1px solid var(--rule); }
  /* The bar anchors the button and the panel, except once it is stuck:
     the template's .sticky-bar fixes it, which anchors them just as well. */
  .header-area .header-bottom:not(.sticky-bar) { position: relative; }
  .header-area .header-bottom .header-flex {
    display: flex; align-items: center;
    min-height: 64px; padding: 9px 96px 9px 0;
  }
  .header-area .sticky-logo { display: block !important; margin: 0; }
  .header-area .sticky-logo img { height: 30px; width: auto; }
  .mobile-search {
    position: absolute; top: 10px; right: 56px; z-index: 99;
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; color: #111; font-size: 17px;
  }
  .mobile-search:hover, .mobile-search:focus { color: var(--accent); }

  /* The menu button, back inside the bar and dark enough to see.
     Bootstrap columns are positioned, so the column holding the mobile menu
     is made static or it, not the bar, anchors the button and the panel. */
  .header-area .header-bottom .row > .col-12 { position: static; }
  .header-area .mobile_menu { position: static; width: auto; }
  .header-area .slicknav_menu { margin: 0 !important; padding: 0; background: transparent; }
  .header-area .slicknav_btn {
    position: absolute; top: 10px; right: 8px; float: none; z-index: 99;
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin: 0; padding: 0;
  }
  .header-area .slicknav_menu .slicknav_icon {
    position: static; float: none; display: flex; flex-direction: column; gap: 5px;
    width: 22px; height: auto; margin: 0; padding: 0; right: auto; top: auto;
  }
  .header-area .slicknav_menu .slicknav_icon-bar { width: 22px; height: 2px; margin: 0; background: #111 !important; }

  /* The panel drops below the bar, full width, with rows you can hit */
  .header-area .slicknav_nav {
    position: absolute; left: 0; right: 0; top: 100%; z-index: 999;
    float: none; width: 100%; margin: 0; padding: 4px 0 8px;
    background: #fff; border-top: 1px solid var(--rule);
    box-shadow: 0 18px 30px rgba(0, 0, 0, .14);
    max-height: calc(100vh - 120px); overflow-y: auto;
  }
  .header-area .slicknav_nav li + li { border-top: 1px solid var(--rule); }
  .header-area .slicknav_nav .slicknav_row { margin: 0; padding: 0; }
  .header-area .slicknav_nav a { margin: 0; padding: 13px 20px; color: #111; font-size: 16px; font-weight: 500; }
  .header-area .slicknav_nav a:hover, .header-area .slicknav_nav a:focus { background: var(--paper-2); color: var(--accent); }
  .header-area .slicknav_nav ul { margin: 0; background: var(--paper-2); }
  .header-area .slicknav_nav ul li + li { border-top: 1px solid #fff; }
  .header-area .slicknav_nav ul a { padding: 11px 20px 11px 36px; color: #444; font-size: 15px; font-weight: 400; }
  /* The + that opens a submenu: the template floats it hard against the
     screen edge, where it is clipped and too small to hit. */
  .header-area .slicknav_nav .slicknav_row { position: relative; padding: 0; }
  .header-area .slicknav_nav .slicknav_item.slicknav_row > a { padding-right: 60px; }
  .header-area .slicknav_nav .slicknav_arrow {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    float: none; display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin: 0; padding: 0;
    color: var(--accent); font-size: 24px; font-weight: 400; line-height: 1;
  }
  .header-area .slicknav_nav .menu-logout button { padding: 13px 20px; font-size: 16px; }
}

@media (max-width: 575px) {
  /* matches the two-column rule above, so it has to be as specific */
  .footer-area .row > div:not(:first-child) { flex: 0 0 100%; max-width: 100%; }
  .footer-area .single-footer-caption { margin-bottom: 28px; }
  .header-newsletter { flex-direction: column; align-items: stretch; gap: 12px; }
  .header-newsletter .newsletter-form { width: 100%; }
}

/* ---------- Ads (managed in the admin; a spot with no ad renders nothing) ---------- */
.ad-slot { position: relative; margin: 0 auto; text-align: center; }
.ad-slot a, .ad-slot picture { display: block; }
.ad-slot img { display: block; max-width: 100%; height: auto; margin: 0 auto; border-radius: 4px; }
.ad-label {
  display: block; margin-bottom: 4px; color: var(--muted);
  font-size: 10px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
}
.ad-slot--header { width: 728px; max-width: 100%; margin: 0 0 0 auto; }
.ad-slot--header .ad-label { text-align: right; }
.ad-slot--header img { max-height: 110px; width: auto; margin: 0 0 0 auto; }
.ad-slot--header-phone { margin: 12px auto 4px; }
.ad-slot--wide { margin: 32px auto 8px; }
.ad-slot--box { max-width: 300px; }
.ad-slot--article { margin: 36px auto 8px; padding-top: 16px; border-top: 1px solid var(--rule); }

.ad-featured {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; align-items: center;
  margin: 40px 0 32px; padding: 20px; border: 1px solid var(--rule-strong); border-radius: 6px; background: var(--paper-2);
}
.ad-featured-img img { display: block; width: 100%; height: auto; border-radius: 4px; }
.ad-featured-body h3 { margin: 4px 0 8px; font-size: 22px; line-height: 1.3; }
.ad-featured-body h3 a { color: #000; }
.ad-featured-body h3 a:hover { color: var(--accent); }
.ad-featured-body p { margin: 0 0 14px; font-size: 15px; line-height: 1.6; }
.ad-featured .ad-label { text-align: left; }
.ad-featured-btn {
  display: inline-block; padding: 10px 18px; border-radius: 4px; background: var(--accent); color: #fff;
  font-size: 14px; font-weight: 500;
}
.ad-featured-btn:hover { background: var(--accent-dark); color: #fff; }
@media (max-width: 767px) {
  .ad-featured { grid-template-columns: 1fr; gap: 14px; padding: 14px; }
  .ad-slot--wide { margin-top: 20px; }
}