/*
Theme Name:   ACDL Debugger
Theme URI:    https://acdl-debugger.com/
Description:  Minimal Divi child theme for the ACDL Debugger browser extension site.
Author:       ACDL Debugger
Template:     Divi
Version:      1.0.0
Text Domain:  acdl-debugger
*/

/* ==========================================================================
   Tokens — colours taken from the extension icon (red / teal / slate)
   ========================================================================== */

:root {
	--acdl-ink: #1f2329;
	--acdl-muted: #5b6370;
	--acdl-line: #e6e8eb;
	--acdl-canvas: #ffffff;
	--acdl-soft: #f6f7f9;
	--acdl-red: #c8202a;
	--acdl-red-dark: #a3161f;
	--acdl-teal: #0f7686;
	--acdl-teal-dark: #0b5b67;
	--acdl-radius: 10px;
	--acdl-measure: 64ch;
	--acdl-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--acdl-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

/* ==========================================================================
   Base typography
   ========================================================================== */

body {
	font-family: var(--acdl-sans);
	font-size: 17px;
	line-height: 1.65;
	color: var(--acdl-muted);
	background: var(--acdl-canvas);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.et_pb_module_header {
	font-family: var(--acdl-sans);
	color: var(--acdl-ink);
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.2;
	padding-bottom: 0.4em;
}

h1 { font-size: clamp(2.2rem, 4.5vw, 3.4rem); letter-spacing: -0.03em; }
h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); letter-spacing: -0.02em; }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.1rem; }

p { padding-bottom: 1em; }

a {
	color: var(--acdl-teal);
	text-decoration: none;
	transition: color 0.15s ease;
}

a:hover { color: var(--acdl-teal-dark); }

a:focus-visible,
.et_pb_button:focus-visible {
	outline: 2px solid var(--acdl-teal);
	outline-offset: 3px;
}

::selection {
	background: var(--acdl-teal);
	color: #fff;
}

/* Inline code and blocks — the site documents a data layer, so code shows up a lot */
code, kbd, pre {
	font-family: var(--acdl-mono);
	font-size: 0.88em;
}

:not(pre) > code {
	background: var(--acdl-soft);
	border: 1px solid var(--acdl-line);
	border-radius: 5px;
	padding: 0.1em 0.4em;
	color: var(--acdl-ink);
}

pre {
	background: var(--acdl-ink);
	color: #e8eaed;
	border-radius: var(--acdl-radius);
	padding: 1.2em 1.4em;
	margin: 1em 0 1.5em;
	overflow-x: auto;
	line-height: 1.55;
	white-space: pre;
}

/* ==========================================================================
   Header — flat white bar, hairline rule, no shadow
   ========================================================================== */

#main-header {
	background: var(--acdl-canvas);
	box-shadow: none !important;
	border-bottom: 1px solid var(--acdl-line);
}

#main-header.et-fixed-header {
	box-shadow: none !important;
}

#top-menu li a,
.et-fixed-header #top-menu li a {
	color: var(--acdl-ink) !important;
	font-weight: 500;
	font-size: 15px;
}

#top-menu li a:hover,
#top-menu li.current-menu-item > a {
	color: var(--acdl-teal) !important;
	opacity: 1 !important;
}

/* Last menu item renders as a pill (point it at the install link) */
#top-menu > li.acdl-menu-cta > a {
	background: var(--acdl-red);
	color: #fff !important;
	padding: 8px 16px !important;
	border-radius: 999px;
}

#top-menu > li.acdl-menu-cta > a:hover {
	background: var(--acdl-red-dark);
	color: #fff !important;
}

#top-menu > li.acdl-menu-cta > a {
	font-weight: 600;
}

/* Same item in the phone menu (Divi clones #top-menu into .et_mobile_menu) */
#main-header .et_mobile_menu li.acdl-menu-cta > a {
	background-color: #c8202a;
	color: #ffffff;
	font-weight: 600;
	text-align: center;
	border-radius: 8px;
	border-bottom: 0;
	margin: 12px 5% 4px;
	padding: 12px 5%;
}

#main-header .et_mobile_menu li.acdl-menu-cta > a:hover {
	background-color: #a3161f;
	color: #ffffff;
	opacity: 1;
}

#et_top_search,
#et_search_icon:before {
	display: none;
}

.mobile_nav .mobile_menu_bar:before {
	color: var(--acdl-ink);
}

.et_mobile_menu {
	border-top: 2px solid var(--acdl-teal);
	box-shadow: 0 12px 24px rgba(31, 35, 41, 0.08);
}

.et_mobile_menu li a {
	color: var(--acdl-ink);
	border-bottom: 1px solid var(--acdl-line);
}

/* ==========================================================================
   Layout — calm, roomy sections; no sidebar rule on builder pages
   ========================================================================== */

#main-content .container:before {
	display: none;
}

.et_pb_section {
	padding: 72px 0;
}

.et_pb_row {
	padding: 24px 0;
}

/* Keep running text at a readable line length */
.et_pb_text_inner {
	max-width: var(--acdl-measure);
}

.et_pb_text_align_center .et_pb_text_inner,
.et_pb_text.acdl-center .et_pb_text_inner {
	margin-left: auto;
	margin-right: auto;
}

/* ==========================================================================
   Buttons — flat, rounded, no Divi arrow shuffle

   Scoped to #page-container: Divi 5 puts et_pb_module and et_pb_bg_layout_light
   on the <a> itself, so its ".et_pb_bg_layout_light.et_pb_module.et_pb_button"
   (0,3,0) out-ranks plain class selectors and turns the label blue. The ID lifts
   these to (1,1,0)+, while settings made per button in the builder
   (body #page-container .et_pb_section .et_pb_button_N, 1,3,1) still win.
   Literal hex, not var(): these sit on top of Divi rules.
   ========================================================================== */

#page-container .et_pb_button,
#page-container .et_pb_button:hover {
	font-family: var(--acdl-sans);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4 !important;
	padding: 0.8em 1.5em !important;
	border-radius: 8px;
	border: 2px solid #c8202a;
	background-color: #c8202a;
	background-image: none;
	color: #ffffff;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

#page-container .et_pb_button:hover,
#page-container .et_pb_button:focus-visible {
	background-color: #a3161f;
	border-color: #a3161f;
	color: #ffffff;
}

.et_pb_button:after,
.et_pb_button:before {
	display: none !important;
}

/* Secondary: add "acdl-btn-secondary" to a Button module's CSS Class
   (Divi 5 puts the class on the <a>; Divi 4 on a wrapper — both covered) */
#page-container .et_pb_button.acdl-btn-secondary,
#page-container .acdl-btn-secondary .et_pb_button {
	background-color: transparent;
	border-color: #e6e8eb;
	color: #1f2329;
}

#page-container .et_pb_button.acdl-btn-secondary:hover,
#page-container .et_pb_button.acdl-btn-secondary:focus-visible,
#page-container .acdl-btn-secondary .et_pb_button:hover {
	background-color: #f6f7f9;
	border-color: #5b6370;
	color: #1f2329;
}

/* On the dark CTA band the secondary outline needs light colours */
#page-container .acdl-cta .et_pb_button.acdl-btn-secondary,
#page-container .acdl-cta .acdl-btn-secondary .et_pb_button {
	border-color: #5b6370;
	color: #ffffff;
}

#page-container .acdl-cta .et_pb_button.acdl-btn-secondary:hover,
#page-container .acdl-cta .acdl-btn-secondary .et_pb_button:hover {
	background-color: #2e333b;
	border-color: #c4c9d1;
	color: #ffffff;
}

/* ==========================================================================
   Section utilities — add these in each section/module's
   Advanced → CSS ID & Classes → CSS Class field
   ========================================================================== */

/* acdl-hero: opening section. Large title, muted lead paragraph */
.acdl-hero {
	padding: 96px 0 72px;
}

.acdl-hero h1 {
	padding-bottom: 0.35em;
}

.acdl-hero p {
	font-size: 1.2rem;
	line-height: 1.6;
}

/* acdl-eyebrow: small caps label above a heading (Text module) */
.acdl-eyebrow,
.acdl-eyebrow p {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--acdl-teal);
	padding-bottom: 0.5em;
}

/* Same eyebrow on a Heading module (the class lands on the wrapper, the h4 inside
   would otherwise take the h1–h6 rules) */
.acdl-eyebrow h1, .acdl-eyebrow h2, .acdl-eyebrow h3,
.acdl-eyebrow h4, .acdl-eyebrow h5, .acdl-eyebrow h6 {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--acdl-teal);
	padding-bottom: 0.5em;
}

/* acdl-note: small muted footnote (Text or Heading module) */
.acdl-note p,
.acdl-note h1, .acdl-note h2, .acdl-note h3,
.acdl-note h4, .acdl-note h5, .acdl-note h6 {
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.5;
	color: var(--acdl-muted);
	padding-bottom: 0;
}

/* acdl-browser-logo: Image module holding a browser/product logo */
.acdl-browser-logo {
	text-align: center;
	margin-bottom: 20px !important;
}

.acdl-browser-logo img {
	width: 88px;
	height: 88px;
	object-fit: contain;
}

/* acdl-soft: light grey band to separate content blocks */
.et_pb_section.acdl-soft {
	background-color: var(--acdl-soft);
	border-top: 1px solid var(--acdl-line);
	border-bottom: 1px solid var(--acdl-line);
}

/* acdl-card: put on Blurb modules (or columns) for feature tiles */
.acdl-card {
	background: var(--acdl-canvas);
	border: 1px solid var(--acdl-line);
	border-radius: var(--acdl-radius);
	padding: 28px;
	height: 100%;
	transition: border-color 0.15s ease;
}

.acdl-card:hover {
	border-color: var(--acdl-teal);
}

.acdl-card .et_pb_main_blurb_image {
	margin-bottom: 18px;
}

.acdl-card .et-pb-icon {
	color: var(--acdl-teal) !important;
	font-size: 32px;
}

.acdl-card .et_pb_blurb_description {
	font-size: 15.5px;
	/* unitless: Divi 5 sets body line-height in em, which inherits as a fixed 28px */
	line-height: 1.6;
}

/* Card columns: equal heights across the row on desktop (Divi rows are block
   layout, so each column is otherwise only as tall as its content) */
@media (min-width: 981px) {
	.et_pb_row:has(> .et_pb_column.acdl-card) {
		display: flex;
	}
	.et_pb_column.acdl-card {
		height: auto;
	}
}

.acdl-card h5 {
	font-size: 1.15rem;
}

/* acdl-shot: framed screenshot (Image module) */
.acdl-shot img {
	border: 1px solid var(--acdl-line);
	border-radius: var(--acdl-radius);
	box-shadow: 0 1px 2px rgba(31, 35, 41, 0.04), 0 16px 40px rgba(31, 35, 41, 0.08);
}

/* acdl-cta: closing call-to-action band */
.et_pb_section.acdl-cta {
	background-color: var(--acdl-ink);
	text-align: center;
}

.acdl-cta h1,
.acdl-cta h2,
.acdl-cta h3 {
	color: #fff;
}

.acdl-cta p {
	color: #c4c9d1;
}

.acdl-cta .et_pb_text_inner {
	margin-left: auto;
	margin-right: auto;
}

/* ==========================================================================
   Accordion / toggles — flat panels. On a dark section (background set in the
   builder) the module keeps its own white text; only the chrome is styled here.
   ========================================================================== */

.et_pb_toggle {
	border-radius: var(--acdl-radius);
}

.et_pb_toggle_title,
.et_pb_toggle h5.et_pb_toggle_title {
	font-family: var(--acdl-sans);
	font-weight: 600;
	font-size: 1.05rem;
	line-height: 1.4;
	letter-spacing: -0.005em;
}

.et_pb_toggle_content {
	font-family: var(--acdl-sans);
	font-size: 16px;
	line-height: 1.65;
}

/* ==========================================================================
   Footer — light and quiet
   ========================================================================== */

#main-footer {
	background: var(--acdl-canvas);
	border-top: 1px solid var(--acdl-line);
}

#footer-bottom {
	background: transparent;
	padding: 24px 0;
}

#footer-info,
#footer-info a {
	color: var(--acdl-muted);
	font-size: 14px;
}

#footer-info a:hover {
	color: var(--acdl-teal);
}

#et-footer-nav {
	background: transparent;
	border-bottom: 1px solid var(--acdl-line);
}

.bottom-nav a {
	color: var(--acdl-muted);
	font-size: 14px;
	opacity: 1 !important;
}

.bottom-nav a:hover {
	color: var(--acdl-teal);
}

#footer-bottom .et-social-icon a {
	color: var(--acdl-muted);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 980px) {
	.et_pb_section { padding: 56px 0; }
	.acdl-hero { padding: 64px 0 48px; }
	.et_pb_text_inner { max-width: none; }
	.acdl-card { margin-bottom: 20px; }
}

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; }
}

/* ==========================================================================
   GitHub footer icon (added via functions.php + includes/social_icons.php).
   Divi's GitHub glyph lives in Font Awesome, which the front end doesn't load,
   so the mark is an SVG mask painted in currentColor — it follows the link
   colour and hover like the other icons.
   ========================================================================== */

#footer-bottom .et-social-github a.icon:before {
	content: "";
	display: inline-block;
	width: 22px;
	height: 22px;
	vertical-align: middle;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z'/%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 16 16'%3E%3Cpath d='M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z'/%3E%3C/svg%3E") center / contain no-repeat;
}

#footer-bottom .et-social-github a:hover {
	color: var(--acdl-teal);
}