/* ==========================================================================
   OMANGOM Blog — WordPress integration styles
   Covers markup that WordPress generates (block editor output, paginate_links,
   avatars, notices) which the static design in /html does not contain.
   ========================================================================== */

.omg-blog { overflow-x: clip; }
.omg-blog h1, .omg-blog h2, .omg-blog h3, .omg-blog h4, .omg-blog h5 { font-family: var(--font); }

/* The site body is dark (omangom-widgets); blog pages are light, including the area around the sticky header. */
body.omg-blog-page { background: #fff; }

/* The hero gradient runs up behind the floating (sticky) light header, so the glass nav blends into
   the page instead of sitting on a white strip. --omg-nav-h = header nav row: 12px top gap + 68px nav
   (8px + 60px on tablets and phones). The announcement bar above keeps its own background. */
.omg-blog { --omg-nav-h: 80px; }
.omg-blog .blog-hero { margin-top: calc(-1 * var(--omg-nav-h)); padding-top: calc(64px + var(--omg-nav-h)); }
@media (max-width: 960px) { .omg-blog { --omg-nav-h: 68px; } }
@media (max-width: 640px) { .omg-blog .blog-hero { padding-top: calc(40px + var(--omg-nav-h)); } }

/* ---------- Listing ---------- */
.omg-blog .chip { display: inline-block; line-height: 1.4; }
.omg-blog .search { display: block; margin: 0; }
.omg-blog .search input[type="search"] { margin: 0; height: auto; -webkit-appearance: none; appearance: none; }
.omg-blog .search input::-webkit-search-cancel-button { cursor: pointer; }
.omg-blog .empty-state { display: block; }
.omg-blog .empty-state a { text-decoration: underline; color: var(--ink); }

/* paginate_links() output */
.omg-blog .pagination { flex-wrap: wrap; justify-content: center; margin: 48px 0 0; }
.omg-blog .pagination .dots { border: 0; background: none; }

/* Newsletter feedback */
.omg-blog .subscribe input[type="email"] { margin: 0; height: auto; }
.omg-blog .subscribe .btn { justify-content: center; }
.omg-blog .subscribe-note { margin: 10px 0 0; font-size: 14px; font-weight: 600; }
.omg-blog .subscribe-note.is-ok { color: var(--teal-deep); }
.omg-blog .subscribe-note.is-error { color: #A4501C; }
.omg-blog .subscribe-form small a { text-decoration: underline; }
.omg-blog .hp-field { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Detail ---------- */
.omg-blog .progress { top: var(--wp-admin--admin-bar--height, 0px); z-index: 1000; }
.omg-blog .author-inline .avatar,
.omg-blog .author-box .avatar { overflow: hidden; }
.omg-blog .avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.omg-blog .post-cover { margin-top: 0; margin-bottom: 0; }
.omg-blog .post-cover img { height: auto; }
.omg-blog .share-btn { text-decoration: none; }
.omg-blog .aside-cta .btn { text-decoration: none; }
.omg-blog .tags-row a { color: var(--text); }

/* ---------- Detail: Share + CTA position (Appearance → Customize → Blog) ----------
   right  = design default: contents | article | share
   left   = Share + CTA under "On this page"; no right column, so the article fills the width
   bottom = Share + CTA after the article; no right column, so the article fills the width
   --no-left = the post has no contents list, so the left column is dropped too.
   The bottom copy (.post-share--after) also shows whenever the sidebar holding Share is hidden. */
.omg-blog .post-main { min-width: 0; }
.omg-blog .post-main .post-footer { max-width: none; margin: 0; padding: 8px 0 0; }

.omg-blog .post-layout--left,
.omg-blog .post-layout--bottom { grid-template-columns: 220px minmax(0, 1fr); }
.omg-blog .post-layout--left.post-layout--no-left,
.omg-blog .post-layout--bottom.post-layout--no-left { grid-template-columns: minmax(0, 1fr); }
.omg-blog .post-layout--right.post-layout--no-left { grid-template-columns: minmax(0, 1fr) 220px; }

.omg-blog .post-share--stack .aside-cta { margin-top: 28px; }
.omg-blog .post-aside--left .toc + .post-share { margin-top: 32px; padding-top: 4px; border-top: 1px solid var(--line); }
.omg-blog .post-layout--left .sticky { max-height: calc(100vh - 124px); overflow-y: auto; scrollbar-width: thin; padding-right: 4px; }

.omg-blog .post-share--after { margin: 48px 0 0; padding: 0 0 32px; display: grid; gap: 24px; }
.omg-blog .post-share--row .post-share__buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.omg-blog .post-share--row .aside-title { margin: 0; }
.omg-blog .post-share--row .share { flex-direction: row; flex-wrap: wrap; gap: 8px; }
.omg-blog .post-share--row .share-btn { padding: 9px 14px; }
.omg-blog .post-share--row .aside-cta {
  margin: 0; padding: 26px 28px; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  background: linear-gradient(135deg, var(--tint-teal), var(--tint-indigo)); border-color: #D5EEF3;
}
.omg-blog .post-share--row .aside-cta h4 { font-size: 19px; margin-bottom: 4px; }
.omg-blog .post-share--row .aside-cta p { margin: 0; font-size: 15px; }
.omg-blog .post-share--row .aside-cta .btn { flex: none; padding: 12px 22px; font-size: 15px; }

/* Bottom copy: hidden while the right sidebar already has Share. In the left layout the share buttons
   always sit here, and the CTA only when the left column (which holds it) is hidden. */
.omg-blog .post-layout--right .post-share--after,
.omg-blog .post-layout--left:not(.post-layout--no-left) .post-share--after .aside-cta { display: none; }

@media (max-width: 1180px) {
  /* The design hides the left column here, so left/bottom layouts become one full-width column. */
  .omg-blog .post-layout--left,
  .omg-blog .post-layout--bottom { grid-template-columns: minmax(0, 1fr); }
  .omg-blog .post-layout--left:not(.post-layout--no-left) .post-share--after .aside-cta { display: flex; } /* same specificity as the desktop hide rule */
}
@media (max-width: 980px) {
  .omg-blog .post-layout--right.post-layout--no-left { grid-template-columns: minmax(0, 1fr); }
  .omg-blog .post-layout--right .post-share--after { display: grid; }
}
@media (max-width: 640px) {
  .omg-blog .post-share--row .aside-cta { flex-direction: column; align-items: flex-start; }
}

/* Partner / certification cards in post content (e.g. the certifications article). */
.omg-blog .article .partner-card {
  margin-top: 1.5em; display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; align-items: center;
  padding: 24px; border-radius: var(--radius); border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow);
}
.omg-blog .article .partner-card__logo {
  height: 120px; border-radius: 12px; background: var(--bg-soft); display: grid; place-items: center; padding: 16px;
}
.omg-blog .article .partner-card__logo img { max-height: 88px; width: auto; max-width: 100%; border: 0; border-radius: 0; }
/* SVG marks (e.g. the ISO icon) carry a small intrinsic size; scale them up to match the other logos. */
.omg-blog .article .partner-card__logo img[src$=".svg"] { height: 84px; }
.omg-blog .article .partner-card__logo--placeholder { border: 2px dashed #C9D1DC; background: #fff; }
.omg-blog .article .partner-card__logo--placeholder span { font-size: 13px; font-weight: 700; color: var(--muted); text-align: center; line-height: 1.4; }
.omg-blog .article .partner-card__type {
  display: inline-block; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px; background: var(--tint-teal); color: var(--teal-deep); margin-bottom: 10px;
}
.omg-blog .article .partner-card__body p { margin: 0; font-size: 16.5px; line-height: 1.65; }
.omg-blog .article .partner-card__body p + p { margin-top: .6em; }
.omg-blog .article .partner-card__links { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 15px; font-weight: 600; }
@media (max-width: 640px) {
  .omg-blog .article .partner-card { grid-template-columns: 1fr; padding: 20px; }
  .omg-blog .article .partner-card__logo { height: 100px; }
}

/* Lists in post content: the omangom-widgets plugin resets every ul/ol to `list-style: none`.
   :where() keeps this at low specificity so components with their own markers (e.g. .phases) still win. */
.omg-blog :where(.article) :where(ul) { list-style: disc; }
.omg-blog :where(.article) :where(ol) { list-style: decimal; }
.omg-blog :where(.article) :where(ul ul) { list-style: circle; }
.omg-blog :where(.article) :where(li) { display: list-item; }

/* Custom bullets: a brand dot centred on the first line (0.5lh = half a line), a ring for nested
   lists and teal checks in the key-takeaways box. Numbered lists keep their bold numbers. */
.omg-blog :where(.article) :where(ul) { list-style: none; }
.omg-blog :where(.article) :where(ul > li) { position: relative; }
.omg-blog :where(.article) :where(ul > li)::before {
  content: ""; position: absolute; left: -1.05em; top: calc(0.9em - 3.5px); top: calc(0.5lh - 3.5px);
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--brand); box-shadow: 0 0 0 3px rgba(255, 198, 10, .2);
}
.omg-blog :where(.article) :where(ul ul > li)::before {
  background: transparent; box-shadow: none; border: 1.5px solid var(--brand-deep); width: 6px; height: 6px;
}
.omg-blog .takeaways ul { padding-left: 1.9em; }
.omg-blog .takeaways ul > li::before {
  left: -1.75em; top: calc(0.825em - 9px); top: calc(0.5lh - 9px); width: 18px; height: 18px; box-shadow: none;
  background: var(--tint-teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E6E78' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 11px no-repeat;
  border: 1px solid #C8F1F4;
}
.omg-blog :where(.article) :where(ol) { font-variant-numeric: tabular-nums; }

/* Drop cap: the design applies it after the takeaways box; also apply it when a post opens with a paragraph. */
.omg-blog .article > p:first-child::first-letter {
  float: left; font-size: 4.1em; line-height: .9; font-weight: 800; color: var(--ink);
  padding: 6px 12px 0 0;
}

/* Links in post content: purple instead of the design's teal (#1E6E78). */
.omg-blog .article a { color: #6B43A8; text-decoration-color: rgba(107, 67, 168, .35); }
.omg-blog .article a:hover { color: #56348C; text-decoration-color: currentColor; }

/* Buttons written in post content keep the button look, not the link underline or the teal link colour. */
.omg-blog .article a.btn,
.omg-blog .article .wp-block-button__link { text-decoration: none; }
.omg-blog .article a.btn-primary,
.omg-blog .article a.btn-primary:hover,
.omg-blog .article a.btn-outline { color: var(--ink); }
.omg-blog .article a.btn-outline:hover { color: #fff; }
.omg-blog .article .wp-block-button__link { background: var(--brand); color: var(--ink); border-radius: 999px; font-weight: 700; padding: 12px 22px; }

/* Block editor output mapped onto the design's typography */
.omg-blog .article .wp-block-image,
.omg-blog .article .wp-caption { margin: 2em 0 0; max-width: 100%; }
.omg-blog .article .wp-block-image img,
.omg-blog .article .wp-caption img { border-radius: var(--radius); border: 1px solid var(--line); height: auto; }
.omg-blog .article .wp-element-caption,
.omg-blog .article .wp-caption-text { font-size: 14px; color: var(--muted); text-align: center; margin-top: 10px; line-height: 1.5; }
.omg-blog .article .alignwide,
.omg-blog .article .alignfull { margin-inline: 0; width: 100%; max-width: 100%; }
.omg-blog .article .alignfull img { width: 100%; }
.omg-blog .article .aligncenter { margin-inline: auto; }
.omg-blog .article .alignleft { float: left; margin: .4em 1.5em 1em 0; max-width: 50%; }
.omg-blog .article .alignright { float: right; margin: .4em 0 1em 1.5em; max-width: 50%; }

.omg-blog .article blockquote p { margin: 0; }
.omg-blog .article blockquote p + p { margin-top: .6em; }
.omg-blog .article .wp-block-quote { border-left: 4px solid var(--brand); }
.omg-blog .article .wp-block-pullquote { padding: 0; border: 0; text-align: left; }
.omg-blog .article .wp-block-pullquote blockquote { margin: 0; }

.omg-blog .article .wp-block-table { margin: 1.75em 0 0; overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; }
.omg-blog .article .wp-block-table table { margin: 0; border: 0; }
.omg-blog .article .wp-block-table td,
.omg-blog .article .wp-block-table th { border-left: 0; border-right: 0; border-top: 0; }
.omg-blog .article .wp-block-table thead { border-bottom: 0; }
.omg-blog .article .wp-block-table figcaption { padding: 0 16px 12px; }

.omg-blog .article .wp-block-code { padding: 22px 24px; border-radius: var(--radius); border: 1px solid var(--line); background: #F6F8FA; }
.omg-blog .article .wp-block-code code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; }
.omg-blog .article .wp-block-separator { border: 0; height: 1px; background: var(--line); margin: 2.5em 0; opacity: 1; }
.omg-blog .article .wp-block-embed { margin: 2em 0 0; }
.omg-blog .article iframe { max-width: 100%; }
.omg-blog .article::after { content: ""; display: table; clear: both; }

/* Page links for posts split with <!--nextpage--> */
.omg-blog .page-links { margin-top: 2em; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-weight: 600; }
.omg-blog .page-links a { text-decoration: none; }

@media (max-width: 640px) {
  .omg-blog .article .alignleft,
  .omg-blog .article .alignright { float: none; margin: 1.5em 0 0; max-width: 100%; }
}