/*
Theme Name: Silverberg
Theme URI: https://silver.wildcatsites.com/
Description: Divi 5 child theme for S. Silverberg & Sons Jewelers — black and gold design system.
Author: Wildcat SEO
Author URI: https://wildcatseo.com
Template: Divi
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: silverberg
WPVibe: yes
*/

/* ==========================================================================
   Silverberg design system
   --------------------------------------------------------------------------
   Build page structure with Divi 5 modules first. This sheet supplies the
   brand tokens and a small set of OPT-IN helper classes you add to a module's
   CSS Class field. It deliberately avoids blanket overrides so the Visual
   Builder stays in charge of layout.

   Token values are read from the source site (ssjewelers.dexace.com):
   Divi accent #e0b044, heading font Bebas Neue, body font Roboto, script
   face Blacksword. Bebas Neue / Blacksword are uploaded to Divi as custom
   fonts — Divi emits their @font-face rules, this sheet only references them.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
	/* Surfaces */
	--ss-black:        #000000;
	--ss-ink:          #0a0a0a;
	--ss-ink-2:        #141414;
	--ss-ink-3:        #1f1f1f;
	--ss-white:        #ffffff;
	--ss-off-white:    #f7f6f4;

	/* Brand gold — Divi Theme Options accent_color */
	--ss-gold:         #e0b044;
	--ss-gold-light:   #eec87f;
	--ss-gold-dark:    #b0821f;

	/* Text */
	--ss-text-on-dark:     #b9b9b9;
	--ss-text-on-light:    #4a4a4a;
	--ss-heading-on-dark:  #ffffff;
	--ss-heading-on-light: #0a0a0a;
	--ss-rule:             rgba(255, 255, 255, 0.18);

	/* Type — families match the source site's Divi font stack */
	--ss-font-heading:       'Bebas Neue', 'Oswald', 'Arial Narrow', sans-serif;
	--ss-font-heading-book:  'Bebas Neue Book', 'Bebas Neue', 'Oswald', sans-serif;
	--ss-font-heading-light: 'Bebas Neue Light', 'Bebas Neue', 'Oswald', sans-serif;
	--ss-font-script:        'Blacksword', 'Yellowtail', 'Brush Script MT', cursive;
	--ss-font-body:          'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

	/* Bebas Neue ships a single weight — never ask for a synthetic bold. */
	--ss-weight-heading: 400;

	--ss-tracking-wide:  0.06em;
	--ss-tracking-wider: 0.18em;

	/* Rhythm */
	--ss-section-y:     110px;
	--ss-section-y-sm:  64px;
	--ss-radius:        0px;
	--ss-transition:    220ms ease;
}

/* --------------------------------------------------------------------------
   2. Base typography
   -------------------------------------------------------------------------- */

/* Everything here is wrapped in :where() so it carries ZERO specificity.
   Divi writes per-module CSS like `.et_pb_text_12 h2 { font-family: ... }`,
   but it only emits the properties that module actually sets. A plain
   `h1,h2,h3 { text-transform: uppercase }` therefore leaks into every
   heading Divi left alone — which turned script headings such as
   "3 Generations" into "3 GENERATIONS" with tracking on it.
   These rules are a floor for headings outside the builder (widgets,
   archives, comments); any Divi module setting always wins. */

:where(body) {
	font-family: var(--ss-font-body);
	-webkit-font-smoothing: antialiased;
}

:where(h1, h2, h3, h4, h5, h6) {
	font-family: var(--ss-font-heading);
	font-weight: var(--ss-weight-heading);
	line-height: 1.08;
}

:where(a) {
	color: var(--ss-gold);
	transition: color var(--ss-transition);
}

:where(a:hover, a:focus) {
	color: var(--ss-gold-light);
}

/* --------------------------------------------------------------------------
   3. Section surfaces  —  add to a Divi Section's CSS Class field
   -------------------------------------------------------------------------- */

.ss-section-dark {
	background-color: var(--ss-black);
	color: var(--ss-text-on-dark);
}

.ss-section-ink {
	background-color: var(--ss-ink);
	color: var(--ss-text-on-dark);
}

.ss-section-light {
	background-color: var(--ss-white);
	color: var(--ss-text-on-light);
}

.ss-section-dark h1, .ss-section-dark h2, .ss-section-dark h3,
.ss-section-dark h4, .ss-section-dark h5, .ss-section-dark h6,
.ss-section-ink h1, .ss-section-ink h2, .ss-section-ink h3,
.ss-section-ink h4, .ss-section-ink h5, .ss-section-ink h6 {
	color: var(--ss-heading-on-dark);
}

.ss-section-dark p,
.ss-section-ink p {
	color: var(--ss-text-on-dark);
}

/* Angled sheen used across the dark hero and CTA bands. */
.ss-diagonal-rule {
	position: relative;
	overflow: hidden;
}

.ss-diagonal-rule::after {
	content: '';
	position: absolute;
	top: -20%;
	right: -10%;
	width: 140%;
	height: 160%;
	background: linear-gradient(112deg, transparent 49.7%, var(--ss-rule) 49.9%, transparent 50.1%);
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   4. Headings  —  the two-tone "BEBAS CAPS + Blacksword script" lockup
   -------------------------------------------------------------------------- */

/* Wrap the script word in <span class="ss-script"> inside a heading module. */
.ss-script {
	font-family: var(--ss-font-script);
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	font-size: 1.28em;
	line-height: 1;
	display: inline-block;
	vertical-align: -0.14em;
	padding: 0 0.08em;
}

/* Full-script display line, e.g. the wordmark. */
.ss-wordmark {
	font-family: var(--ss-font-script);
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	line-height: 1.05;
	font-size: clamp(2.5rem, 6vw, 5rem);
}

/* Small letterspaced label above or below a heading. */
.ss-eyebrow {
	font-family: var(--ss-font-heading);
	font-size: 0.9375rem;
	font-weight: var(--ss-weight-heading);
	text-transform: uppercase;
	letter-spacing: var(--ss-tracking-wider);
	color: var(--ss-gold);
	margin-bottom: 0.75em;
}

.ss-eyebrow-light {
	color: var(--ss-white);
}

/* The wide-tracked subtitle under the hero wordmark. */
.ss-subtitle {
	font-family: var(--ss-font-heading-light);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	color: var(--ss-white);
	font-size: clamp(1.05rem, 1.7vw, 1.75rem);
}

/* --------------------------------------------------------------------------
   5. Buttons  —  add .ss-btn to a Divi Button module's CSS Class
   -------------------------------------------------------------------------- */

.ss-btn.et_pb_button,
.ss-btn.et_pb_button:hover,
a.ss-btn {
	font-family: var(--ss-font-heading);
	font-size: 1.0625rem;
	font-weight: var(--ss-weight-heading);
	text-transform: uppercase;
	letter-spacing: var(--ss-tracking-wider);
	color: var(--ss-gold);
	background: transparent;
	border: 1px solid var(--ss-gold);
	border-radius: var(--ss-radius);
	padding: 16px 34px !important;
	line-height: 1;
	transition: background-color var(--ss-transition), color var(--ss-transition), border-color var(--ss-transition);
}

.ss-btn.et_pb_button:hover,
a.ss-btn:hover {
	background: var(--ss-gold);
	color: var(--ss-black);
	border-color: var(--ss-gold);
}

/* Divi appends an arrow glyph on hover — suppress it for this style. */
.ss-btn.et_pb_button:after,
.ss-btn.et_pb_button:before {
	display: none !important;
}

/* Solid variant for light backgrounds. */
.ss-btn-solid.et_pb_button,
a.ss-btn-solid {
	background: var(--ss-gold);
	color: var(--ss-black);
	border-color: var(--ss-gold);
}

.ss-btn-solid.et_pb_button:hover,
a.ss-btn-solid:hover {
	background: transparent;
	color: var(--ss-gold);
}

/* --------------------------------------------------------------------------
   6. Phone / call-out lockup
   -------------------------------------------------------------------------- */

.ss-call {
	font-family: var(--ss-font-heading);
	color: var(--ss-white);
	line-height: 1.2;
}

.ss-call .ss-call-label {
	display: block;
	font-size: 0.875rem;
	font-weight: 400;
	letter-spacing: var(--ss-tracking-wider);
	text-transform: uppercase;
	color: var(--ss-text-on-dark);
	margin-bottom: 4px;
}

.ss-call .ss-call-number {
	display: block;
	font-size: clamp(1.5rem, 2.3vw, 2rem);
	font-weight: 400;
	letter-spacing: 0.08em;
}

/* --------------------------------------------------------------------------
   7. Stat / award row
   -------------------------------------------------------------------------- */

.ss-stat {
	display: flex;
	align-items: center;
	gap: 14px;
}

.ss-stat .ss-stat-figure {
	font-family: var(--ss-font-heading);
	font-size: clamp(2.4rem, 4vw, 3.4rem);
	font-weight: var(--ss-weight-heading);
	color: var(--ss-white);
	line-height: 1;
}

.ss-stat .ss-stat-label {
	font-family: var(--ss-font-body);
	font-size: 0.9375rem;
	line-height: 1.35;
	color: var(--ss-text-on-dark);
}

/* --------------------------------------------------------------------------
   8. Cards  —  the three dark image tiles and the light blog cards
   -------------------------------------------------------------------------- */

.ss-card-dark {
	position: relative;
	background-color: var(--ss-ink-2);
	color: var(--ss-text-on-dark);
	overflow: hidden;
	transition: transform var(--ss-transition), box-shadow var(--ss-transition);
}

.ss-card-dark::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.82) 100%);
	pointer-events: none;
}

.ss-card-dark > * {
	position: relative;
	z-index: 1;
}

.ss-card-dark:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
}

.ss-card-dark h2,
.ss-card-dark h3,
.ss-card-dark h4 {
	color: var(--ss-white);
	letter-spacing: var(--ss-tracking-wide);
}

.ss-card-light {
	background: var(--ss-white);
	color: var(--ss-text-on-light);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

.ss-card-light h2,
.ss-card-light h3,
.ss-card-light h4 {
	color: var(--ss-heading-on-light);
}

/* Divi blog module cards on a light band. */
.ss-blog .et_pb_post {
	background: var(--ss-white);
	border: 0;
	padding: 0 0 26px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

.ss-blog .et_pb_post .entry-title {
	font-family: var(--ss-font-heading);
	font-size: 1.25rem;
	letter-spacing: var(--ss-tracking-wide);
	padding: 24px 26px 10px;
	margin: 0;
}

.ss-blog .et_pb_post .post-content {
	font-family: var(--ss-font-body);
	padding: 0 26px;
	font-size: 0.9375rem;
	line-height: 1.6;
}

/* --------------------------------------------------------------------------
   9. Alternating image / text feature rows
   -------------------------------------------------------------------------- */

.ss-feature-title {
	font-family: var(--ss-font-heading);
	font-size: clamp(1.7rem, 2.9vw, 2.6rem);
	font-weight: var(--ss-weight-heading);
	text-transform: uppercase;
	letter-spacing: var(--ss-tracking-wide);
	color: var(--ss-white);
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6);
}

.ss-feature-arrow {
	display: inline-block;
	width: 46px;
	height: 1px;
	background: var(--ss-white);
	position: relative;
	margin-top: 18px;
}

.ss-feature-arrow::after {
	content: '';
	position: absolute;
	right: 0;
	top: -4px;
	width: 9px;
	height: 9px;
	border-top: 1px solid var(--ss-white);
	border-right: 1px solid var(--ss-white);
	transform: rotate(45deg);
}

/* --------------------------------------------------------------------------
   10. Navigation  —  Theme Builder header
   -------------------------------------------------------------------------- */

.ss-nav .et_pb_menu__menu > nav > ul > li > a,
.ss-nav .et-menu > li > a {
	font-family: var(--ss-font-heading-book);
	font-size: 1rem;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: var(--ss-tracking-wider);
	color: var(--ss-white);
	padding-bottom: 0;
	transition: color var(--ss-transition);
}

.ss-nav .et-menu > li > a:hover,
.ss-nav .et-menu > li.current-menu-item > a {
	color: var(--ss-gold);
	opacity: 1;
}

.ss-nav .et_pb_menu__menu > nav > ul > li > a::after {
	display: none;
}

/* Dropdowns */
.ss-nav .et-menu li > ul {
	background: var(--ss-ink-2);
	border-top: 2px solid var(--ss-gold);
}

.ss-nav .et-menu li > ul > li > a {
	color: var(--ss-text-on-dark);
	letter-spacing: var(--ss-tracking-wide);
}

.ss-nav .et-menu li > ul > li > a:hover {
	color: var(--ss-gold);
	background: transparent;
}

/* --------------------------------------------------------------------------
   11. Footer
   -------------------------------------------------------------------------- */

.ss-footer {
	background: var(--ss-white);
	color: var(--ss-text-on-light);
}

.ss-footer .ss-wordmark {
	color: var(--ss-black);
}

.ss-footer .et-menu > li > a {
	font-family: var(--ss-font-heading-book);
	font-size: 0.9375rem;
	text-transform: uppercase;
	letter-spacing: var(--ss-tracking-wide);
	color: var(--ss-black);
}

.ss-footer .et-menu > li > a:hover {
	color: var(--ss-gold-dark);
}

.ss-footer .ss-call,
.ss-footer .ss-call .ss-call-number {
	color: var(--ss-black);
}

.ss-footer .ss-call .ss-call-label {
	color: var(--ss-text-on-light);
}

.ss-footer-bar {
	background: var(--ss-ink);
	color: var(--ss-text-on-dark);
	font-family: var(--ss-font-body);
	font-size: 0.8125rem;
	padding: 16px 0;
}

.ss-footer-bar a {
	color: var(--ss-text-on-dark);
}

.ss-footer-bar a:hover {
	color: var(--ss-gold);
}

/* --------------------------------------------------------------------------
   12. Utilities
   -------------------------------------------------------------------------- */

.ss-tracking-wide  { letter-spacing: var(--ss-tracking-wide); }
.ss-tracking-wider { letter-spacing: var(--ss-tracking-wider); }
.ss-gold           { color: var(--ss-gold); }
.ss-uppercase      { text-transform: uppercase; }

.ss-quote {
	font-family: var(--ss-font-body);
	font-style: italic;
	color: var(--ss-text-on-dark);
	border: 0;
	padding-left: 44px;
	position: relative;
	line-height: 1.6;
}

.ss-quote::before {
	content: '\201D';
	position: absolute;
	left: 0;
	top: 0.35em;
	font-family: Georgia, serif;
	font-size: 3rem;
	line-height: 0;
	color: var(--ss-white);
}

/* --------------------------------------------------------------------------
   13. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 980px) {
	:root {
		--ss-section-y: var(--ss-section-y-sm);
	}

	.ss-diagonal-rule::after {
		display: none;
	}

	.ss-stat {
		justify-content: flex-start;
	}
}

@media (max-width: 767px) {
	.ss-script {
		font-size: 1.18em;
	}

	.ss-btn.et_pb_button,
	a.ss-btn {
		padding: 14px 26px !important;
		font-size: 1rem;
		letter-spacing: 0.12em;
	}

	.ss-subtitle {
		letter-spacing: 0.14em;
	}
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
	.ss-card-dark,
	.ss-btn.et_pb_button,
	a.ss-btn,
	a {
		transition: none;
	}

	.ss-card-dark:hover {
		transform: none;
	}
}