/*
  CNY Dent Repair
  Modernized legacy stylesheet
  Version: main-cnydentrepair-2026_001.css

  Intent: no intentional visual redesign.
  Notes:
  - Preserves existing selectors and layout behavior.
  - Consolidates duplicate override blocks into their final effective values.
  - Restores semantic <em> and <strong> rendering.
  - Keeps the legacy font-family name to avoid breaking existing templates or inline references.
*/

/* --------------------------------------------------------------------------
   Fonts
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'be_vietnammedium';
  src: url('/fonts/bevietnam-medium-webfont.woff2') format('woff2'),
       url('/fonts/bevietnam-medium-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'be_vietnammedium';
  src: url('/fonts/be-vietnam-pro-italic-400.woff2') format('woff2');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'be_vietnammedium';
  src: url('/fonts/be-vietnam-pro-normal-900.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'be_vietnammedium';
  src: url('/fonts/be-vietnam-pro-italic-900.woff2') format('woff2');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'ostrich_sansblack';
  src: url('/fonts/ostrichsans-black-webfont.woff2') format('woff2'),
       url('/fonts/ostrichsans-black-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */

:root {
  --site-max-width: 1920px;

  --font-body: 'be_vietnammedium', Arial, Helvetica, sans-serif;
  --font-display: 'ostrich_sansblack', Impact, sans-serif;

  --color-black: #000;
  --color-white: #fff;
  --color-brand-red: #af2333;
  --color-modal: rgba(41, 35, 35, .98);
  --color-credit: rgba(255, 255, 255, .4);

  --shadow-nav: 0 .7em 1.5em #000;
  --shadow-box-01: 0 .1em 1.5em .1em rgba(0, 0, 0, .8);
  --shadow-box-02: 0 -.3em 1.7em rgba(0, 0, 0, .5);
}

/* --------------------------------------------------------------------------
   Normalize / reset
   -------------------------------------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

main {
  display: block;
}

h1 {
  font-size: 2em;
  margin: .67em 0;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

pre {
  font-family: monospace, monospace;
  font-size: 1em;
}

a {
  background-color: transparent;
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted;
}

b,
strong {
  font-weight: bolder;
}

code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -.25em;
}

sup {
  top: -.5em;
}

img {
  border-style: none;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

[type='button'],
[type='reset'],
[type='submit'],
button {
  -webkit-appearance: button;
}

[type='button']::-moz-focus-inner,
[type='reset']::-moz-focus-inner,
[type='submit']::-moz-focus-inner,
button::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

[type='button']:-moz-focusring,
[type='reset']:-moz-focusring,
[type='submit']:-moz-focusring,
button:-moz-focusring {
  outline: 1px dotted ButtonText;
}

fieldset {
  padding: .35em .75em .625em;
}

legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type='checkbox'],
[type='radio'] {
  box-sizing: border-box;
  padding: 0;
}

[type='number']::-webkit-inner-spin-button,
[type='number']::-webkit-outer-spin-button {
  height: auto;
}

[type='search'] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

[type='search']::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

details {
  display: block;
}

summary {
  display: list-item;
}

template {
  display: none;
}

[hidden] {
  display: none;
}

html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
a,
p,
span,
em,
small,
strong,
sub,
sup,
mark,
del,
ins,
strike,
abbr,
dfn,
blockquote,
q,
cite,
code,
pre,
ol,
ul,
li,
dl,
dt,
dd,
div,
section,
article,
main,
aside,
nav,
header,
hgroup,
footer,
img,
figure,
figcaption,
address,
time,
audio,
video,
canvas,
iframe,
details,
summary,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
  margin: 0;
  padding: 0;
  border: 0;
}

/* --------------------------------------------------------------------------
   Base elements
   -------------------------------------------------------------------------- */

body {
  position: relative;
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-white);
  background-color: var(--color-black);
}

a {
  color: var(--color-white);
  text-decoration: none;
}

em {
  font-style: italic;
}

strong {
  font-weight: 900;
}

strong em,
em strong {
  font-weight: 900;
  font-style: italic;
}

main,
section,
nav,
header,
footer,
#slideshow {
  display: block;
  max-width: var(--site-max-width);
  margin: 0 auto;
}

h2 {
  margin: 1.5em .5em;
  font-family: var(--font-display);
  font-size: calc(1.4em + .7vw);
  letter-spacing: .12em;
  color: var(--color-white);
  text-align: center;
}

p {
  margin-top: calc(.7em + .9vw);
  margin-left: calc(.7em + .9vw);
  font-size: calc(.9em + .7vw);
}

ul {
  margin-top: calc(1.2em + .3vw);
  margin-left: calc(1.2em + .3vw);
  font-size: calc(1.2em + .3vw);
  list-style-type: square;
}

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */

nav {
  position: relative;
  z-index: 10;
  height: 6.1em;
  margin-bottom: 0;
  overflow: visible;
  background-color: var(--color-brand-black);
  box-shadow: var(--shadow-nav);
}

#logo {
  position: absolute;
  margin: .35em .7em;
  opacity: .75;
}

#logo img {
  width: auto;
  height: 5.5em;
}

#text-links {
  display: inline-block;
  margin-top: calc(1.8em - .8vw);
}

#nav_desktop {
  display: none;
  margin-right: 5%;
  margin-left: 17%;
  padding-top: 1.1vw;
  text-align: center;
  vertical-align: middle;
}

#nav_desktop a {
  padding-right: 3vw;
  font-size: 1.5em;
}

#icon-links {
  position: absolute;
  top: 1.8em;
  right: calc(2.5em + 3.6vw);
  z-index: 29;
  display: inline-block;
}

.ico {
  height: 2.5em;
  margin-right: 2vw;
  fill: var(--color-white);
}

.fa-regular-solid-phone {
  height: 1.8em;
  margin-bottom: .35em;
  padding-right: .2em;
}

#open,
#close {
  position: fixed;
  top: 1.8em;
  right: 1.1vw;
  display: inline-block;
}

#open {
  visibility: visible;
}

#close {
  visibility: hidden;
}

#nav_mobile {
  position: absolute;
  z-index: 39;
  display: block;
  min-height: 200vh;
  overflow: hidden;
}

#modal {
  position: fixed;
  top: 0;
  left: -101vw;
  display: block;
  width: 100%;
  min-height: 100vh;
  text-align: center;
  background-color: var(--color-modal);
}

#modal div {
  position: relative;
  margin-top: 12vh;
}

#modal a {
  position: relative;
  display: inline-block;
  margin: 1.5vh 0;
  padding: 2vh 2.5vw;
  font-size: calc(.9em + 1.4vh);
  text-shadow: .3vw .3vw .5vw var(--color-black);
}

@media only screen and (min-width: 898px) {
  #modal,
  #open,
  #close {
    display: none;
  }

  #icon-links {
    top: 1.8em;
    right: calc(3.8vw - 2em);
  }

  nav {
    height: 6.1em;
    min-height: 3em;
  }

  #logo {
    position: absolute;
    margin: .35em .7em;
  }

  #logo img {
    width: auto;
    height: 5.5em;
    min-height: 4.5em;
  }

 #nav_desktop {
   position: absolute;
   inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   margin: 0;
   padding: 0;
   text-align: center;
   pointer-events: none;
 }
 
 #text-links {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: clamp(1.5em, 3vw, 4em);
   margin-top: 0;
 }
 
 #nav_desktop a {
   padding-right: 0;
   pointer-events: auto;
 }
}

/* --------------------------------------------------------------------------
   Layout helpers
   -------------------------------------------------------------------------- */

.st-1-2-3 {
  text-align: center;
}

.st-1-2-3 > div {
  box-sizing: border-box;
  display: inline-block;
  width: 75%;
  padding: 1em;
}

.st-thirds {
  text-align: center;
}

.st-thirds > div {
  display: inline-block;
  width: 30%;
  max-width: 343px;
  margin: 1.66%;
  vertical-align: top;
}

.text-scale {
  font-size: calc(.65em + .3vw);
}

.text-scale-2 {
  font-size: calc(.6em + .7vw);
}

@media only screen and (max-width: 499.99px) {
  .st-1-2-3 > div {
    max-width: 320px;
  }
}

@media only screen and (min-width: 500px) and (max-width: 899.99px) {
  .st-1-2-3 > div {
    width: 45%;
  }
}

@media only screen and (min-width: 900px) {
  .st-1-2-3 {
    margin-right: auto;
    margin-left: auto;
  }

  .st-1-2-3 > div {
    width: 33.33%;
  }
}

@media only screen and (min-width: 1921px) {
  .text-scale {
    font-size: 13.64px;
  }

  .text-scale-2 {
    font-size: 20.64px;
  }
}

/* --------------------------------------------------------------------------
   Hero / background / visual utilities
   -------------------------------------------------------------------------- */

#slideshow {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  padding-top: 76%;
  overflow: hidden;
  background-color: var(--color-black);
}

#fixed-bg {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -10;
  width: 100vw;
  max-width: var(--site-max-width);
  height: 100vh;
  margin: 0 auto;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.gradient-shad {
  position: absolute;
  width: 100%;
  max-width: var(--site-max-width);
  height: 1.6em;
  margin: 0 auto 5em;
  background: rgb(0, 0, 0);
  background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
}

.box-shad01 {
  box-shadow: var(--shadow-box-01);
}

.box-shad02 {
  box-shadow: var(--shadow-box-02);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

footer {
  position: relative;
  margin-top: calc(5.2em + 4vw);
  margin-bottom: 0;
  padding: 2em 0;
  overflow: visible;
  text-align: center;
  vertical-align: center;
  background-color: var(--color-brand-black);
}

footer svg {
  height: 3.5em;
  margin-right: calc(.7em + 1.2vw);
  fill: var(--color-white);
}

#vcard,
#contact,
#social {
  display: inline-block;
  margin-top: 2em;
  margin-right: calc(4vw - 3px);
  margin-bottom: 2em;
  margin-left: calc(4vw - 3px);
  vertical-align: middle;
}

#vcard img {
  width: 7.5em;
}

#vcard span {
  margin: 0 0 0 .15em;
  font-size: 1.37em;
  letter-spacing: .13em;
}

#contact {
  padding-top: .1em;
  text-align: left;
}

#phone svg,
#phone span,
#email svg,
#email span {
  vertical-align: middle;
}

#phone svg {
  height: 2.8em;
  margin: 0 1.2em 0 0;
  padding: .4em 0 0 .3em;
}

#phone span {
  padding: 0;
  font-size: 2.9em;
}

#email svg {
  height: 2.4em;
  margin: 0 1.2em 0 0;
  padding: .4em 0 .1em;
}

#email span {
  font-size: 1.7em;
}

#social .fa-google {
  height: 3em;
  margin-bottom: .25em;
}

#credits {
  position: relative;
  margin-top: 2.5em;
  margin-bottom: 2em;
  font-size: 1.8em;
}

#credits a {
  position: absolute;
  bottom: .1em;
  left: 1.5em;
  color: var(--color-credit);
}

#credits span {
  position: absolute;
  right: 1.5em;
  bottom: .1em;
  color: var(--color-credit);
}

/* --------------------------------------------------------------------------
   Animation
   -------------------------------------------------------------------------- */

@keyframes slide-left {
  0% {
    left: 100vw;
    visibility: visible;
  }

  3% {
    left: 100vw;
  }

  100% {
    left: 0;
  }
}

@keyframes slide-right {
  0% {
    left: 0;
  }

  97% {
    left: 101vw;
  }

  100% {
    left: 101vw;
    visibility: hidden;
  }
}

.slide-left {
  animation: slide-left .27s ease-out forwards;
}

.slide-right {
  animation: slide-right .27s ease-in forwards;
}

/* Scroll animation */
[data-sal] {
  transition-duration: .5s;
  transition-delay: 0s;
  transition-timing-function: ease;
}

[data-sal|='fade'] {
  opacity: 0;
  transition-property: opacity;
}

[data-sal|='fade'].sal-animate,
body.sal-disabled [data-sal|='fade'] {
  opacity: 1;
}

[data-sal|='slide'] {
  opacity: 0;
  transition-property: opacity, transform;
}

[data-sal='slide-up'] {
  transform: translateY(20%);
}

[data-sal|='slide'].sal-animate,
body.sal-disabled [data-sal|='slide'] {
  opacity: 1;
  transform: none;
}

/* =============================================
   SITEWIDE - Domain Sale Pre-Footer Banner
   Promotes dentsdisappear.com across all pages.
   Banner markup lives in footer.php.
   Remove this block + footer markup when domain is sold.
   ============================================= */

/* --- Banner container --- */
#ds-prefooter {
  overflow: hidden;
  background: #8b1a22;
  border-top: 1px solid #a22;
  margin-top: -15px;
  opacity: 0;
  transform: translateY(20px);
  animation: ds-pf-reveal .8s ease forwards;
  animation-delay: 2.5s;
}

/* --- Banner link (entire bar is clickable) --- */
#ds-prefooter a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  padding: .9em 1.5em;
  text-decoration: none;
  transition: background .3s ease;
}

#ds-prefooter a:hover {
  background: rgba(255, 255, 255, .06);
}

/* --- "Premium Domain For Sale" label --- */
.ds-pf-label {
  font-size: 22px;
  color: rgba(255, 255, 255, .55);
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* --- "DentsDisappear.com" domain name with shimmer --- */
.ds-pf-domain {
  font-family: 'ostrich_sansblack', sans-serif;
  font-size: 24px;
  letter-spacing: .08em;
  color: #fff;
  position: relative;
  padding-top: 4px;
  background: linear-gradient(
    90deg,
    #fff 0%,
    #fff 40%,
    #f0c040 50%,
    #fff 60%,
    #fff 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: ds-shimmer 5s ease-in-out infinite;
  animation-delay: 3.5s;
}

/* --- Arrow indicator --- */
.ds-pf-arrow {
  font-size: 24px;
  color: #fff;
  transition: transform .3s ease;
}

#ds-prefooter a:hover .ds-pf-arrow {
  transform: translateX(4px);
}

/* --- Banner slide-up reveal --- */
@keyframes ds-pf-reveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Shimmer sweep across domain name --- */
@keyframes ds-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* --- Banner responsive --- */
@media screen and (max-width: 600px) {
  #ds-prefooter a {
    flex-direction: column;
    gap: .3em;
    padding: .8em 1em;
  }
  .ds-pf-label { font-size: 14px; }
  .ds-pf-domain { font-size: 18px; }
  .ds-pf-arrow { display: none; }
}

/* === END Domain Sale Banner === */

/* --------------------------------------------------------------------------
   Legacy browser support
   -------------------------------------------------------------------------- */

/* Target IE10 + IE11 - quick fix - SVGs not displaying inline */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  svg {
    width: 3.5em;
    height: 3.5em;
  }
}