/*
 * CyberAlert.io — styles for the Divi Theme Builder header and footer
 * (Divi → Theme Builder → Default Website Template) and the phone tab bar.
 * The header and footer are Divi modules; these rules hook onto the classes set in
 * each module's Advanced → CSS Class (ca-header-sec, ca-mainnav, ca-header-search, …).
 * Menus are edited in Appearance → Menus: "Main menu", "Footer menu", "Phone tabs".
 * Vantage: a search-led bar on plain paper, the threat level as a live status chip, a mast footer.
 */

/* Divi pads #page-container for its classic fixed header and clips it vertically,
   which would stop the sticky header from sticking. */
body #page-container { padding-top: 0 !important; overflow: visible; overflow-x: clip; }

a.btn { text-decoration: none; }
a.btn, a.btn:hover { color: var(--color-ink); }
a.btn.primary, a.btn.primary:hover { color: var(--color-accent-ink); }

/* ─── header ───────────────────────────────────────────────────────── */
.et-l--header { position: sticky; top: 0; z-index: var(--z-sticky-nav); }
body.admin-bar .et-l--header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .et-l--header { top: 0; } }

body .et_pb_section.ca-header-sec {
  padding: 0 !important; /* beats Divi's Customizer section padding, which some templates scope very specifically */
  color: var(--color-ink-2);
  background: var(--color-paper) !important;
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
body .ca-header-sec .et_pb_row.ca-header-row { width: 100%; max-width: var(--container); margin: 0 auto; padding: var(--space-sm) var(--gutter); }
body .ca-header-sec .ca-header-col { flex-direction: row; align-items: center; gap: var(--space-lg); min-height: 48px; }
body .ca-header-sec .et_pb_module { margin: 0; }

/* the logo: the shield and wordmark in ink, one colour */
.ca-logo { display: flex; flex-shrink: 0; align-items: center; gap: var(--space-xs); text-decoration: none; color: var(--color-ink); }
.ca-logo svg path { stroke: var(--color-ink); fill: none; }
.ca-logo:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.ca-wordmark { font: 400 var(--text-lg)/1 var(--font-display); font-variation-settings: "SHRP" 100; letter-spacing: -0.02em; color: var(--color-ink); }
.ca-wordmark span { color: var(--color-muted); }

/* Divi Menu module as the nav links. On some templates Divi's generated CSS
   (.et-db #et-boc .et-l …) paints menus white and every link in its link colour, hence
   !important on menu backgrounds and link colours. */
body .ca-header-sec .et_pb_menu,
body .ca-footer-sec .et_pb_menu { background: transparent !important; }
/* The menu keeps its full width on one line; the search field gives way when space runs short. */
body .ca-header-sec .ca-mainnav { flex: 0 0 auto; margin-left: var(--space-md); }
body .ca-mainnav .et_pb_menu__wrap { justify-content: flex-start; }
body .ca-mainnav .et-menu { flex-wrap: nowrap; gap: var(--space-2xs); }
body .ca-mainnav .et-menu > li { padding: 0; }
body .ca-mainnav .et-menu > li > a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--space-sm); font: 400 0.9375rem/1 var(--font-body); color: var(--color-muted) !important; text-decoration: none; text-decoration-thickness: 1px; text-underline-offset: 0.5em; transition: color var(--dur-short) var(--ease-out); }
body .ca-mainnav .et-menu > li > a:hover { color: var(--color-ink) !important; opacity: 1; }
body .ca-mainnav .et-menu > li > a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
/* Menu links are custom links, so WordPress only marks the exact page. Articles, category pages,
   single CVEs and event pages light up their section by body class (menu item classes ca-nav-news,
   ca-nav-cves, ca-nav-conferences). The current section: ink with a lime underline. */
body .ca-mainnav .et-menu > li.current-menu-item > a,
body.single-post .ca-mainnav .et-menu > li.ca-nav-news > a,
body.category .ca-mainnav .et-menu > li.ca-nav-news > a,
body.single-cve .ca-mainnav .et-menu > li.ca-nav-cves > a,
body.single-conference .ca-mainnav .et-menu > li.ca-nav-conferences > a,
body.single-partner .ca-mainnav .et-menu > li.ca-nav-partners > a,
body.tax-solution .ca-mainnav .et-menu > li.ca-nav-partners > a { color: var(--color-ink) !important; text-decoration: underline; text-decoration-color: var(--color-accent); }
/* Items with the class ca-nav-mobile (Contact) only appear in the phone/tablet menu; desktop has the button. */
@media (min-width: 981px) { body .ca-mainnav .et-menu > li.ca-nav-mobile { display: none; } }
body .ca-mainnav .mobile_menu_bar::before,
body .ca-mainnav .et_pb_menu__search-button::after,
body .ca-mainnav .et_pb_menu__close-search-button::after { color: var(--color-ink-2) !important; }
body .ca-mainnav .et_mobile_menu { left: auto; right: 0; width: min(320px, calc(100% - var(--space-xl))); padding: var(--space-xs); background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule); border-radius: 0 0 var(--radius-card) var(--radius-card); }
body .ca-mainnav .et_mobile_menu li a { padding: var(--space-sm); font: 400 var(--text-md)/1.3 var(--font-body); color: var(--color-ink-2) !important; border-bottom: var(--rule-hair) solid var(--color-rule-soft); }
body .ca-mainnav .et_mobile_menu li.current-menu-item > a { color: var(--color-ink) !important; }
body .ca-mainnav .et_pb_menu__search-input { color: var(--color-ink); }

/* Divi Search module as the search pill */
body .ca-header-search.et_pb_search { flex: 0 1 300px; width: auto; min-width: 140px; margin-left: auto; overflow: visible; background: transparent; border: 0; }
body .ca-header-search .et_pb_searchform > div { position: relative; }
body .ca-header-search .et_pb_searchform > div::before {
  content: ''; position: absolute; top: 50%; left: var(--space-sm); width: 16px; height: 16px; transform: translateY(-50%); background: var(--color-muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M11 4a7 7 0 100 14 7 7 0 000-14zM21 21l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M11 4a7 7 0 100 14 7 7 0 000-14zM21 21l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
body .ca-header-search .et_pb_searchform > div::after {
  content: 'Ctrl K'; position: absolute; top: 50%; right: var(--space-sm); transform: translateY(-50%); pointer-events: none;
  padding: 0 var(--space-2xs); font: 400 var(--text-2xs)/20px var(--font-body); color: var(--color-muted);
  border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-card);
}
html.is-mac body .ca-header-search .et_pb_searchform > div::after { content: '⌘ K'; }
body .ca-header-search input.et_pb_s,
body #page-container .et-l .ca-header-search .et_pb_searchform input.et_pb_s { width: 100%; height: 40px; padding: 0 var(--space-2xl) 0 var(--space-xl) !important; font: 300 var(--text-sm)/1.4 var(--font-body); color: var(--color-ink); caret-color: var(--color-accent); background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-field-edge); border-radius: var(--radius-pill); outline: 2px solid transparent; outline-offset: 1px; }
body .ca-header-search input.et_pb_s:focus { outline-color: var(--color-focus); }
body .ca-header-search input.et_pb_s::placeholder { color: var(--color-muted); opacity: 1; }
body .ca-header-search .et_pb_searchsubmit { display: none; }

/* the threat level ([ca_threat_level] in a Code module): a live status chip, the level in its severity colour */
body .ca-header-sec .ca-threat-mod { flex-shrink: 0; }
.ca-threat { display: inline-flex; align-items: center; gap: var(--space-2xs); min-height: 32px; padding: 0 var(--space-sm); font: 400 var(--text-sm)/1 var(--font-body); white-space: nowrap; color: var(--color-muted); border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-pill); }
.ca-threat b { font-weight: 400; color: var(--color-ink); }
.ca-threat.tone-crit b { color: var(--color-crit); }
.ca-threat.tone-med b { color: var(--color-med); }
.ca-threat.tone-low b { color: var(--color-low); }
.ca-threat.tone-crit { border-color: var(--color-crit-line); }

/* Contact (Divi Button module): outlined, quieter than the page's primary */
body .ca-header-sec .et_pb_button_module_wrapper { flex-shrink: 0; margin: 0; }
body .ca-header-sec .et_pb_button.ca-header-cta { padding: var(--space-xs) var(--space-md) !important; font-size: var(--text-sm) !important; line-height: 24px !important; color: var(--color-ink) !important; background: transparent !important; box-shadow: inset 0 0 0 var(--rule-hair) var(--color-rule-2); }
body .ca-header-sec .et_pb_button.ca-header-cta:hover { background: var(--color-paper-3) !important; box-shadow: inset 0 0 0 var(--rule-hair) var(--color-field-edge); }

/* Five menu links need about 440px: on small laptops the header tightens so they stay on one line. */
@media (max-width: 1240px) {
  body .ca-header-sec .ca-header-col { gap: var(--space-md); }
  body .ca-header-sec .ca-mainnav { margin-left: var(--space-xs); }
  body .ca-mainnav .et-menu > li > a { padding: 0 var(--space-xs); }
  body .ca-header-search .et_pb_searchform > div::after { display: none; }
  body .ca-header-search input.et_pb_s,
  body #page-container .et-l .ca-header-search .et_pb_searchform input.et_pb_s { padding-right: var(--space-sm) !important; }
}
@media (max-width: 1080px) {
  .ca-threat-prefix { display: none; }
}
@media (max-width: 980px) {
  body .ca-header-sec .ca-header-col { gap: var(--space-sm); }
  body .ca-header-sec .ca-header-search,
  body .ca-header-sec .et_pb_button_module_wrapper { display: none; }
  body .ca-header-sec .ca-threat-mod { order: 2; margin-left: auto; }
  body .ca-header-sec .ca-mainnav { flex: 0 0 auto; order: 3; margin-left: 0; }
}

/* ─── footer: the wordmark large over the links ───────────────────── */
body .et_pb_section.ca-footer-sec { padding: 0 !important; color: var(--color-ink-2); background: var(--color-paper) !important; border-top: var(--rule-hair) solid var(--color-rule); }
body .ca-footer-sec .et_pb_row { width: 100%; max-width: var(--container); margin: 0 auto; }
/* Rows are spaced by their own padding, not Divi's section gap. */
body .et_pb_section.ca-footer-sec { gap: 0 !important; row-gap: 0 !important; }
body .ca-footer-sec .et_pb_row.ca-footer-row { padding: var(--space-3xl) var(--gutter) 0; column-gap: var(--gap-columns); row-gap: var(--space-xl); align-items: flex-end; }
body .ca-footer-sec .et_pb_module { margin: 0; }
body .ca-footer-sec .ca-col-end { align-items: flex-end; }
body .ca-footer-sec .ca-logo { gap: var(--space-sm); }
body .ca-footer-sec .ca-logo svg { width: 40px; height: 40px; }
body .ca-footer-sec .ca-wordmark { font-size: var(--text-display-s); font-weight: 300; letter-spacing: var(--tracking-display); }
body .ca-footer-blurb p { max-width: 46ch; margin-top: var(--space-lg); padding: 0; font-size: var(--text-md); line-height: 1.55; color: var(--color-muted); }
/* The two invitations beside the wordmark: the question quiet, the link plain ink. */
body .ca-footer-calls p { padding: 0 0 var(--space-xs); font-size: var(--text-md); line-height: 1.6; color: var(--color-muted); text-align: right; }
body .ca-footer-sec .ca-footer-calls a,
body .ca-footer-sec .ca-footer-list a { color: var(--color-ink-2) !important; text-decoration: none; transition: color var(--dur-short) var(--ease-out); }
body .ca-footer-sec .ca-footer-calls a { color: var(--color-ink) !important; text-decoration: underline; text-decoration-color: var(--color-rule-2); text-underline-offset: 0.2em; }
body .ca-footer-sec .ca-footer-calls a:hover,
body .ca-footer-sec .ca-footer-list a:hover { color: var(--color-ink) !important; text-decoration: underline; text-decoration-color: var(--color-accent); }
/* Four columns: Explore, Company, Follow, Right now. */
body .ca-footer-sec .et_pb_row.ca-footer-links { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); padding: var(--space-3xl) var(--gutter) 0; }
body .ca-footer-links > .et_pb_column { width: auto !important; margin: 0 !important; gap: 0 !important; }
body .ca-footer-head p { padding: 0 0 var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }
body .ca-footer-list ul { margin: 0; padding: 0 !important; list-style: none; }
body .ca-footer-list li { padding: 0 0 var(--space-2xs); font: 300 var(--text-md)/1.6 var(--font-body); }
.ca-footer-status { display: grid; gap: var(--space-xs); margin: 0; }
.ca-footer-status div { display: flex; justify-content: space-between; gap: var(--space-md); max-width: 18rem; font-size: var(--text-md); line-height: 1.6; }
.ca-footer-status dt { font-weight: 300; color: var(--color-muted); }
.ca-footer-status dd { margin: 0; color: var(--color-ink-2); font-variant-numeric: tabular-nums; }
.ca-footer-status dd.tone-crit { color: var(--color-crit); }
.ca-footer-status dd.tone-med { color: var(--color-med); }
.ca-footer-status dd.tone-low { color: var(--color-low); }
body .ca-footer-sec .et_pb_row.ca-footer-bottom { padding: var(--space-2xl) var(--gutter) var(--space-xl); }
body .ca-footer-legal p { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); padding: var(--space-lg) 0 0; font-size: var(--text-sm); color: var(--color-muted); border-top: var(--rule-hair) solid var(--color-rule); }
body .ca-footer-sec .ca-footer-legal a { color: var(--color-muted) !important; text-decoration: underline; text-decoration-color: var(--color-rule-2); text-underline-offset: 0.2em; }
body .ca-footer-sec .ca-footer-legal a:hover { color: var(--color-ink) !important; text-decoration-color: var(--color-accent); }
body .ca-footer-legal .ca-footer-legal-links { display: inline-flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); margin-left: auto; }
@media (max-width: 980px) {
  body .ca-footer-sec .ca-col-end { align-items: flex-start; }
  body .ca-footer-calls p { text-align: left; }
  body .ca-footer-sec .et_pb_row.ca-footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body .ca-footer-legal .ca-footer-legal-links { margin-left: 0; }
}
@media (max-width: 767px) {
  body .ca-footer-sec .et_pb_row.ca-footer-row { padding-top: var(--space-2xl); }
  body .ca-footer-sec .et_pb_row.ca-footer-row { row-gap: var(--space-lg); }
  body .ca-footer-sec .et_pb_row.ca-footer-links { padding-top: var(--space-xl); }
  /* "Right now" needs the width for its label and value side by side. */
  body .ca-footer-links > .et_pb_column:last-child { grid-column: 1 / -1; }
  body .ca-footer-sec .et_pb_row.ca-footer-bottom { padding: var(--space-xl) var(--gutter) var(--space-lg); }
  body .ca-footer-sec .ca-logo svg { width: 28px; height: 28px; }
}

/* ─── phone tab bar ("Phone tabs" menu in the footer) ─────────────── */
body .ca-footer-sec .et_pb_row.ca-tabbar-row { display: none; }
@media (max-width: 767px) {
  body { padding-bottom: 72px; }
  body .ca-footer-sec .et_pb_row.ca-tabbar-row {
    position: fixed; right: 0; bottom: 0; left: 0; z-index: var(--z-sticky);
    display: block; max-width: none; padding: var(--space-xs) var(--space-sm) calc(var(--space-sm) + env(safe-area-inset-bottom)) !important;
    color: var(--color-ink-2);
    background: var(--color-paper-2);
    border-top: var(--rule-hair) solid var(--color-rule);
  }
  body .ca-tabbar-menu .et_pb_menu__menu { display: block !important; width: 100%; }
  body .ca-tabbar-menu .et_mobile_nav_menu { display: none !important; }
  body .ca-tabbar-menu .et_pb_menu__wrap, body .ca-tabbar-menu nav { width: 100%; }
  body .ca-tabbar-menu .et-menu { display: grid !important; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; width: 100%; }
  body .ca-tabbar-menu .et-menu > li { padding: 0; margin: 0; }
  body .ca-tabbar-menu .et-menu > li > a { display: flex; flex-direction: column; align-items: center; gap: var(--space-2xs); width: 100%; min-height: 48px; padding: var(--space-2xs) 0; font: 400 var(--text-2xs)/1.2 var(--font-body); color: var(--color-muted) !important; text-decoration: none; }
  body .ca-tabbar-menu .et-menu > li > a:hover { color: var(--color-ink) !important; opacity: 1; }
  body .ca-tabbar-menu .et-menu > li.current-menu-item > a,
  body.single-post .ca-tabbar-menu .et-menu > li.ca-tab-rss > a,
  body.category .ca-tabbar-menu .et-menu > li.ca-tab-rss > a,
  body.single-cve .ca-tabbar-menu .et-menu > li.ca-tab-shield > a,
  body.single-conference .ca-tabbar-menu .et-menu > li.ca-tab-globe > a,
  body.single-partner .ca-tabbar-menu .et-menu > li.ca-tab-users > a,
  body.tax-solution .ca-tabbar-menu .et-menu > li.ca-tab-users > a { color: var(--color-accent) !important; }
  body .ca-tabbar-menu .et-menu > li > a::before {
    content: ''; width: 20px; height: 20px; background: currentColor;
    -webkit-mask: var(--ca-ico) center / contain no-repeat;
    mask: var(--ca-ico) center / contain no-repeat;
  }
  body .ca-tabbar-menu .ca-tab-grid { --ca-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M3 3h7v7H3zM14 3h7v7h-7zM3 14h7v7H3zM14 14h7v7h-7z'/%3E%3C/svg%3E"); }
  body .ca-tabbar-menu .ca-tab-globe { --ca-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M12 3a9 9 0 100 18 9 9 0 000-18zM3 12h18M12 3c2.5 3 2.5 15 0 18M12 3c-2.5 3-2.5 15 0 18'/%3E%3C/svg%3E"); }
  body .ca-tabbar-menu .ca-tab-shield { --ca-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 4.5-3.5 8.5-8 9-4.5-.5-8-4.5-8-9V6l8-3z'/%3E%3C/svg%3E"); }
  body .ca-tabbar-menu .ca-tab-mail { --ca-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M3 6h18v12H3zM3 7l9 6 9-6'/%3E%3C/svg%3E"); }
  body .ca-tabbar-menu .ca-tab-rss { --ca-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M4 4a16 16 0 0116 16M4 11a9 9 0 019 9M5 18a1 1 0 102 0 1 1 0 00-2 0z'/%3E%3C/svg%3E"); }
  body .ca-tabbar-menu .ca-tab-users { --ca-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M9 11a4 4 0 100-8 4 4 0 000 8zM3 21v-2a4 4 0 014-4h4a4 4 0 014 4v2M17 11a4 4 0 100-8M21 21v-2a4 4 0 00-3-3.87'/%3E%3C/svg%3E"); }
}

@media (prefers-reduced-motion: reduce) {
  body .ca-mainnav .et-menu > li > a, body .ca-footernav .et-menu > li > a { transition: none; }
}