/* 208 Lock & Key design for boiseidaholocksmith.com.
   Restyles the page structure the content already has (Divi section/row/column/module, WordPress posts,
   sidebar, archives) so the content itself stays byte-identical. Built into /assets/208/site.<hash>.css
   by scripts/redesign.mjs. Rules: nothing here may hide content (no display:none / visibility:hidden /
   zero-size on content), and nothing loads from another domain. */

@font-face { font-family: Inter; font-weight: 400; font-display: swap; src: url(fonts/inter-400.woff2) format('woff2'); }
@font-face { font-family: Inter; font-weight: 600; font-display: swap; src: url(fonts/inter-600.woff2) format('woff2'); }
@font-face { font-family: Inter; font-weight: 700; font-display: swap; src: url(fonts/inter-700.woff2) format('woff2'); }
@font-face { font-family: Oswald; font-weight: 500; font-display: swap; src: url(fonts/oswald-500.woff2) format('woff2'); }
@font-face { font-family: Oswald; font-weight: 700; font-display: swap; src: url(fonts/oswald-700.woff2) format('woff2'); }
/* Divi's own icon font (same origin, already on the site): blurb checkmarks and icons. */
@font-face { font-family: ETmodules; font-display: block; src: url(/wp-content/themes/Divi/core/admin/fonts/modules/all/modules.woff) format('woff'); }

:root {
  --gold: #D4AF37; --gold-hi: #FFD700; --gold-lo: #bf9b30; --gold-edge: #8a6e1c;
  --ink: #000; --panel: #0a0a0a; --panel-2: #111; --line: #1f2937; --line-2: #374151;
  --text: #fff; --text-2: #d1d5db; --text-3: #9ca3af;
  --wrap: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 130px; }
body {
  margin: 0; color: var(--text-2); font: 400 17px/1.7 Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background: var(--ink);
  background-image: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(212,175,55,.14), transparent 70%),
                    linear-gradient(180deg, #050505 0%, #000 60%);
  background-attachment: scroll;
}
img, picture, video, iframe { max-width: 100%; }
img { height: auto; }
a { color: var(--gold); text-decoration: none; transition: color .2s; }
a:hover { color: #fff; }
p { margin: 0 0 1em; }
strong, b { color: #fff; }
h1, h2, h3, h4, h5, h6 {
  font-family: Oswald, Impact, 'Arial Narrow', sans-serif; font-weight: 700; color: #fff;
  line-height: 1.15; margin: 0 0 .5em; letter-spacing: .01em;
}
h1 { font-size: clamp(2.3rem, 5vw, 3.6rem); text-transform: uppercase; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); }
h3 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.1rem; } h6 { font-size: 1rem; }
ul, ol { margin: 0 0 1.2em; padding-left: 1.4em; }
li { margin: .25em 0; }
li::marker { color: var(--gold); }
hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }
table { width: 100%; border-collapse: collapse; margin: 0 0 1.5em; }
th, td { border: 1px solid var(--line); padding: .6em .8em; text-align: left; }
th { color: #fff; background: var(--panel-2); }
blockquote { margin: 0 0 1.2em; padding: .8em 1.2em; border-left: 3px solid var(--gold); background: var(--panel); }
figure { margin: 0 0 1.5em; } figcaption { font-size: .85rem; color: var(--text-3); }
iframe { border: 0; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Header ── */
.s208-header {
  position: sticky; top: 0; z-index: 50; background: rgba(0,0,0,.88);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line);
}
.s208-bar { max-width: var(--wrap); margin: 0 auto; padding: 10px 20px; display: flex; align-items: center; gap: 24px; }
.s208-logo { flex: none; line-height: 0; }
.s208-logo img { height: 56px; width: auto; }
.s208-nav { flex: 1; }
.s208-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 26px; }
.s208-nav li { margin: 0; }
.s208-nav a {
  font-family: Oswald, sans-serif; font-weight: 500; font-size: 1.05rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-3);
}
.s208-nav a:hover, .s208-nav a[aria-current] { color: var(--gold); }
.s208-call { flex: none; }
.s208-strip {
  border-top: 1px solid var(--line); background: var(--panel); color: var(--text-2);
  text-align: center; font-size: .9rem; padding: 7px 16px; letter-spacing: .02em;
}
.s208-strip a { font-weight: 700; }

/* Buttons: the 208 gold + steel buttons */
.s208-btn, .et_pb_button, .wp-element-button, .wp-block-search__button, .more-link {
  display: inline-flex; align-items: center; gap: .5em; cursor: pointer;
  font-family: Oswald, sans-serif; font-weight: 700; font-size: 1.15rem; letter-spacing: .06em; text-transform: uppercase;
  color: #000 !important; padding: .55em 1.3em; border-radius: 8px; border: 1px solid var(--gold-edge);
  background: linear-gradient(135deg, var(--gold-lo) 0%, var(--gold-hi) 50%, var(--gold-lo) 100%);
  box-shadow: inset 0 2px 4px rgba(255,255,255,.3), inset 0 -2px 4px rgba(0,0,0,.4), 0 4px 10px rgba(0,0,0,.5);
  text-shadow: 0 1px 1px rgba(255,255,255,.4); transition: transform .15s;
}
.s208-btn:hover, .et_pb_button:hover, .wp-element-button:hover, .wp-block-search__button:hover { transform: translateY(-1px) scale(1.02); color: #000 !important; }
.s208-btn::before, .et_pb_button[data-icon]::before {
  content: ''; width: 1em; height: 1em; flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 006.6 6.6l2.2-2.2a1 1 0 011-.25 11.4 11.4 0 003.6.57 1 1 0 011 1V20a1 1 0 01-1 1A17 17 0 013 4a1 1 0 011-1h3.5a1 1 0 011 1c0 1.25.2 2.45.57 3.57a1 1 0 01-.25 1z'/%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'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 006.6 6.6l2.2-2.2a1 1 0 011-.25 11.4 11.4 0 003.6.57 1 1 0 011 1V20a1 1 0 01-1 1A17 17 0 013 4a1 1 0 011-1h3.5a1 1 0 011 1c0 1.25.2 2.45.57 3.57a1 1 0 01-.25 1z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.et_pb_button:not([href^="tel:"])::before { display: none; } /* decorative pseudo-element only */
.et_pb_button_module_wrapper { margin: 0 0 1.2em; }
.et_pb_button_alignment_center { text-align: center; }
.et_pb_button_alignment_right { text-align: right; }

/* ── Main: WordPress / Divi page structure, restyled ── */
#et-main-area { min-height: 50vh; }
#main-content > .container, .s208-wrap { max-width: var(--wrap); margin: 0 auto; padding: 48px 20px; }
#content-area { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; align-items: start; }
#left-area { min-width: 0; }
#sidebar { min-width: 0; }
.et_pb_section { padding: 64px 20px; border-top: 1px solid var(--line); position: relative; }
.et_pb_section:first-child { border-top: 0; }
.et_pb_section:nth-of-type(even) { background: rgba(10,10,10,.75); }
.et_pb_row, .et_pb_row_inner { max-width: var(--wrap); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; }
.et_pb_row + .et_pb_row { margin-top: 32px; }
.et_pb_equal_columns { align-items: stretch; }
.et_pb_column { min-width: 0; flex: 1 1 0; }
.et_pb_column_4_4 { flex-basis: 100%; }
.et_pb_column_3_4 { flex: 3 1 0; } .et_pb_column_2_3 { flex: 2 1 0; } .et_pb_column_3_5 { flex: 3 1 0; }
.et_pb_column_1_2, .et_pb_column_1_3, .et_pb_column_1_4, .et_pb_column_1_5, .et_pb_column_1_6,
.et_pb_column_2_5, .et_pb_column_3_8 { flex: 1 1 0; }
.et_pb_module { margin-bottom: 1.4em; min-width: 0; }
.et_pb_module:last-child { margin-bottom: 0; }
.et_pb_text_align_center, .et_pb_text_align_center .et_pb_text_inner { text-align: center; }
.et_pb_text_align_right { text-align: right; }
.et_pb_text_inner > :last-child { margin-bottom: 0; }
.et_pb_image { line-height: 0; text-align: center; }
.et_pb_image img { border-radius: 10px; max-height: 560px; width: auto; }
/* Cut-out PNGs (keys, people) were drawn for a white page: a soft gold glow keeps them readable on black. */
.et_pb_image img[src$=".png"] { border-radius: 0; filter: drop-shadow(0 0 28px rgba(212,175,55,.28)); }

/* First section of a page = hero band */
.et-l--post > .et_builder_inner_content > .et_pb_section:first-child,
.et-l--body > .et_builder_inner_content > .et_pb_section:first-child {
  padding: 72px 20px; background: radial-gradient(ellipse 70% 80% at 30% 40%, rgba(212,175,55,.12), transparent 70%);
}

/* Blurbs = 208 glass cards */
.et_pb_blurb { background: rgba(10,10,10,.8); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; }
.et_pb_blurb_content { display: flex; gap: 14px; align-items: flex-start; }
.et_pb_blurb_position_top .et_pb_blurb_content { flex-direction: column; align-items: center; text-align: center; }
.et_pb_main_blurb_image { flex: none; line-height: 1; }
.et_pb_main_blurb_image img { max-width: 64px; }
.et-pb-icon { font-family: ETmodules; font-size: 1.6rem; color: var(--gold); line-height: 1; speak: never; }
.et_pb_blurb_container { min-width: 0; }
.et_pb_module_header { margin: 0; font-size: 1.15rem; text-transform: none; }
.et_pb_module_header a { color: #fff; }
.et_pb_blurb_description { margin-top: .4em; }
h2.et_pb_module_header { font-size: 1.5rem; text-transform: uppercase; color: var(--gold); }
/* Divi's animation classes are inert here: everything is visible from the first paint. */
.et-waypoint, .et_pb_animation_top { opacity: 1; transform: none; }

/* Breadcrumbs */
.rank-math-breadcrumb { font-size: .85rem; color: var(--text-3); }
.rank-math-breadcrumb p { margin: 0; }
.rank-math-breadcrumb a { color: var(--text-3); } .rank-math-breadcrumb a:hover { color: var(--gold); }
.rank-math-breadcrumb .last { color: var(--text-2); }

/* Posts, archives, blog */
.et_pb_post { margin: 0 0 48px; }
.entry-title { text-transform: none; }
h2.entry-title { font-size: 1.7rem; margin-top: .6em; }
h2.entry-title a { color: #fff; } h2.entry-title a:hover { color: var(--gold); }
.post-meta { font-size: .9rem; color: var(--text-3); margin: 0 0 1.2em; }
.post-meta a { color: var(--text-2); }
.entry-featured-image-url { display: block; line-height: 0; margin-bottom: 1em; }
.entry-featured-image-url img, .et_post_meta_wrapper img { border-radius: 12px; width: 100%; object-fit: cover; }
.entry-content h2, .entry-content h3, .et_pb_post_content h2, .et_pb_post_content h3 { margin-top: 1.6em; }
.pagination, .wp-pagenavi { display: flex; justify-content: space-between; gap: 16px; margin-top: 24px; }
.pagination a { font-family: Oswald, sans-serif; text-transform: uppercase; letter-spacing: .06em; }

/* Table of contents (Easy TOC) */
#ez-toc-container, .ez-toc-v2_0_80 { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px 20px; margin: 0 0 1.6em; }
.ez-toc-title { font-family: Oswald, sans-serif; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: .06em; }
.ez-toc-list { margin: .6em 0 0; }
.ez-toc-title-toggle, .ez-toc-cssicon-toggle-label, .ez-toc-icon-toggle-span { display: none; } /* toggle chrome only; the list itself is always shown */

/* Sidebar widgets */
.et_pb_widget { background: rgba(10,10,10,.8); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; margin-bottom: 24px; }
.et_pb_widget h2, .widget-title { font-size: 1.2rem; text-transform: uppercase; letter-spacing: .06em; color: var(--gold); }
.wp-block-latest-posts, .wp-block-latest-comments { list-style: none; padding: 0; margin: 0; }
.wp-block-latest-posts li { border-top: 1px solid var(--line); padding: .5em 0; margin: 0; }
.wp-block-latest-posts li:first-child { border-top: 0; }
.wp-block-latest-posts a { color: var(--text-2); } .wp-block-latest-posts a:hover { color: var(--gold); }
.wp-block-search__inside-wrapper { display: flex; gap: 8px; }
.wp-block-search__input { flex: 1; min-width: 0; background: var(--panel-2); color: #fff; border: 1px solid var(--line-2); border-radius: 8px; padding: .5em .7em; font: inherit; }
.wp-block-search__button { font-size: .95rem; padding: .4em .9em; }
.wp-block-search__label { display: none; } /* the old Divi pages hid this label too; kept identical for parity */

/* HTML sitemap page */
.rank-math-html-sitemap__title { font-size: 1.4rem; color: var(--gold); text-transform: uppercase; margin-top: 1.4em; }
.rank-math-html-sitemap__date { color: var(--text-3); font-size: .85rem; }

/* ── Footer (the existing footer content, restyled) ── */
.et-l--footer { background: var(--panel); border-top: 1px solid var(--line); color: var(--text-3); }
.et-l--footer .et_pb_section { background: transparent; border: 0; padding: 40px 20px; }
.et-l--footer .et_pb_section + .et_pb_section { padding-top: 0; }
.et-l--footer h2 { font-size: 1.8rem; }
.et-l--footer .et_pb_row { align-items: center; }
.et-l--footer .et_pb_image img { border-radius: 0; max-height: 110px; width: auto; }
.et-l--footer a { color: var(--text-2); } .et-l--footer a:hover, .et-l--footer h2 a { color: var(--gold); }
.et-l--footer .et_pb_text_inner { font-size: .92rem; }

/* ── Mobile: stack columns, keep every link visible (no collapsed menus) ── */
@media (max-width: 980px) {
  #content-area { grid-template-columns: 1fr; }
  .et_pb_row, .et_pb_row_inner { flex-direction: column; align-items: stretch; }
  .et_pb_column { flex: 1 1 auto !important; width: 100%; }
  .et_pb_text_align_right, .et_pb_button_alignment_right { text-align: center; }
  .et_pb_text_align_center-tablet { text-align: center; }
  .et_pb_button_alignment_tablet_center { text-align: center; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .s208-bar { flex-wrap: wrap; justify-content: space-between; gap: 8px 14px; padding: 8px 14px; }
  .s208-logo img { height: 46px; }
  .s208-nav { order: 3; flex-basis: 100%; }
  .s208-nav ul { justify-content: center; gap: 2px 16px; }
  .s208-nav a { font-size: .92rem; letter-spacing: .06em; }
  .s208-call .s208-btn { font-size: .95rem; padding: .45em .9em; }
  .s208-header { position: static; }
  .et_pb_section { padding: 44px 16px; }
  #main-content > .container { padding: 32px 16px; }
}