/* DragoHost public site fixes (2026-10-22). Loaded after the theme colour files. */

/* Page titles were promoted from h2 to h1 for SEO: same look as the original h2 rules (generated from style.css, responsive-style.css, main-color-3.css). */
.header-item h1{display: inline-block;
    padding: 0px 20px;
    border-left: 5px solid #ff5252;
    font-size: 40px;
    font-weight: 700;
    line-height: 48px;
    text-transform: uppercase;}
.header-item h1 span{color: #adadad;}
.header-item-3 h1{margin-bottom: 10px;}
.page-title h1{color: #fff;
    font-size: 34px;
    font-weight: 500;
    margin-bottom: 30px;
    margin-top: 100px;
    text-align: center;
    text-transform: uppercase;
    position: relative;}
.page-title h1:before{content: " ";
    background-color: #ff5252;
    position: absolute;
    height: 2px;
    width: 80px;
    left: 50%;
    bottom: -15px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);}
@media screen and (max-width: 480px){
.page-title h1{margin-bottom: 40px;}
}
@media screen and (max-width: 320px){
.header-item h1{font-size: 21px;
        line-height: 25px;}
}
.page-title h1:before{background-color: #FF9800;}
.header-item h1{border-color: #FF9800;}

/* The theme removes focus outlines (a:focus{outline:none}, #topNavbar li a{outline:0}); give keyboard users a visible ring. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible,#topNavbar li a:focus-visible{outline:2px solid #FF9800!important;outline-offset:2px}

/* Notice on services that can no longer be ordered */
.dh-notice{background:#fff3e0;border-bottom:1px solid #ffe0b2;color:#303030;padding:14px 0;font-size:15px;line-height:1.5}
.dh-notice strong{color:#e65100;margin-right:4px}
.dh-notice a{color:#e65100;text-decoration:underline}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
/* Menus opened on :hover only, so keyboard (and some touch) users couldn't reach sub-pages; focus opens them too. */
#topNavbar .nav li:focus-within > ul{display:block;right:0}
/* ---- Visual refresh (2026-10-22): same brand (orange #FF9800, Roboto), more readable and consistent ---- */
:root{--dh-orange:#FF9800;--dh-orange-dark:#e68900;--dh-ink:#22262c;--dh-text:#4a5059;--dh-line:#e8eaee;--dh-radius:12px}
/* Preloader hid every page until all images loaded; show content immediately */
#preloader{display:none!important}
body{-webkit-font-smoothing:antialiased}
/* Theme used weight 300 grey text everywhere: heavier and darker for readability */
.feature-item p,.pct-features ul li,#about p,.about-page-description p,.page-content p,footer p{font-weight:400}
.feature-item p,.pct-features ul li,#about p{color:var(--dh-text)}
.section-title{color:var(--dh-ink);font-weight:700;letter-spacing:.01em}
.feature-item h3{color:var(--dh-ink);font-weight:600}
/* Buttons: one shape across the site */
.mdl-button.mdl-button--raised,#topNavbar .login--btn,.pricing-table-item .mdl-card__actions a{border-radius:8px;font-weight:600;letter-spacing:.04em}
.mdl-button.mdl-button--raised:hover,.pricing-table-item .mdl-card__actions a:hover{filter:brightness(.95)}
/* Services */
.feature-item .icon{background-color:#fff3e0;transition:background-color .2s,transform .2s}
.feature-item:hover .icon{transform:translateY(-3px)}
/* Pricing cards: rounded, soft shadow, price always visible (was hover-only, so touch users never saw it) */
.pricing-table-item>.mdl-card{border:1px solid var(--dh-line);border-radius:var(--dh-radius);box-shadow:0 6px 24px rgba(34,38,44,.06);transition:box-shadow .2s,transform .2s}
.pricing-table-item:hover>.mdl-card{box-shadow:0 14px 40px rgba(34,38,44,.14);transform:translateY(-4px)}
.pricing-table-item .pct-img figure,.pricing-table-item .pct-img img{border-radius:var(--dh-radius) var(--dh-radius) 0 0;overflow:hidden}
.pct-price-tag{top:-50px!important;opacity:1!important;border-radius:8px}
.pricing-table-item{margin-top:70px}
.pct-features ul li{border-bottom:1px solid #f2f3f5;padding:11px 16px}
.pct-features ul li:last-child{border-bottom:0}
/* Footer links */
footer a:hover{color:var(--dh-orange)}
/* Live price spans inside the card price tag: keep the big number style (the theme styles every span there as the small label) */
.pct-price-tag .mdl-card__title-text span[data-dh-product]{display:inline;width:auto;font-size:inherit;line-height:inherit;font-weight:inherit}
/* CLS: owl.carousel.css hides .owl-carousel until main.js initialises it on window load, so the hero popped in and pushed the page down (measured CLS 0.568). Show the first slide immediately; owl adds .owl-theme when it takes over. */
#header.owl-carousel:not(.owl-theme){display:block}
#header.owl-carousel:not(.owl-theme)>.header-item:not(:first-child){display:none}
/* SEO content sections: domain price table and FAQs (native <details>, keyboard accessible) */
.dh-section{padding:70px 0}
.dh-section-alt{background:#f7f8fa}
.dh-lead{max-width:760px;margin:0 auto 24px;text-align:center;color:var(--dh-text);font-size:16px;line-height:1.6}
.dh-lead a{color:var(--dh-orange-dark);font-weight:600}
.dh-table{width:100%;max-width:820px;margin:0 auto 24px;border-collapse:separate;border-spacing:0;border:1px solid var(--dh-line);border-radius:var(--dh-radius);overflow:hidden;background:#fff}
.dh-table th,.dh-table td{padding:13px 18px;text-align:left;border-bottom:1px solid var(--dh-line);font-size:16px;color:var(--dh-text)}
.dh-table thead th{background:var(--dh-ink);color:#fff;font-weight:600}
.dh-table tbody th{color:var(--dh-ink);font-weight:700}
.dh-table tbody tr:last-child th,.dh-table tbody tr:last-child td{border-bottom:0}
.dh-faq{max-width:820px;margin:0 auto}
.dh-faq-item{background:#fff;border:1px solid var(--dh-line);border-radius:10px;margin-bottom:12px}
.dh-faq-item summary{cursor:pointer;padding:16px 20px;font-size:17px;font-weight:600;color:var(--dh-ink);list-style-position:inside}
.dh-faq-item p{margin:0;padding:0 20px 18px;color:var(--dh-text);font-size:16px;line-height:1.6}
.dh-faq-item a{color:var(--dh-orange-dark);text-decoration:underline}
@media (max-width:480px){.dh-table th,.dh-table td{padding:10px 10px;font-size:14px}.dh-section{padding:50px 0}}
/* Domain transfer page: numbered steps and checklist */
.dh-steps,.dh-checklist{max-width:820px;margin:0 auto;padding-left:24px;color:var(--dh-text);font-size:16px;line-height:1.7}
.dh-steps li,.dh-checklist li{margin-bottom:12px;padding-left:4px}
.dh-steps strong{color:var(--dh-ink)}
.dh-steps a{color:var(--dh-orange-dark);text-decoration:underline}
.dh-lead .mdl-button{color:#fff!important;padding:0 28px}
/* Footer MSME badge: Udyam number as text (the MSME logo contains the State Emblem, use not verified) */
footer p.dh-msme{color:#ff9800;font-weight:600;margin-bottom:4px}
footer .dh-msme-no{color:#fff;font-weight:500;letter-spacing:.03em;word-break:break-word}
footer .dh-msme+p a{color:#ff9800;text-decoration:underline}
footer .dh-msme+p a:hover{color:#fff}
footer .dh-msme-logo{margin:4px 0 10px}
footer .dh-msme-logo img{display:block;width:100%;max-width:200px;height:auto;background:#fff;border-radius:6px;padding:6px}