/* ============================================================
   DarazHost — Modernization Layer  (v2 PRODUCTION)
   ------------------------------------------------------------
   EVOLUTION, NOT REPLACEMENT. Loads LAST, after the live theme
   CSS (king-hosting.css, king.css, arkahost.css, shortcodes.css,
   color-primary.css). It refines the SAME classes the live site
   already uses — verified by capturing the rendered pages, not
   guessed. No markup, structure, brand green (#86c724), or fonts
   (Raleway/Roboto) are changed. Delete this file and the site
   reverts exactly.

   Real classes targeted (confirmed from live capture):
   .header .top_nav .navbar-default .navbar-nav     (header/nav)
   .button .arkahost-adv-search-btn .arkahost-submit (CTAs/search)
   .king-elements .king-elements-inner .element-icon (feature boxes)
   .one_third .one_fourth                            (layout cols)
   .price_compare .table-wrapper .prices .arrow_box  (pricing)
   .bigtfont .caps  .sitecolor                       (headings/accents)
   .feature_section5 .feature_section6 .feature_section7
   .footer
   ============================================================ */

:root{
  --dh-green:#86c724;           /* unchanged brand green */
  --dh-green-deep:#7ea821;      /* theme's own darker green */
  --dh-ink:#2a363f; --dh-text:#454545; --dh-muted:#727272;
  --dh-border:#e7eaed;
  --dh-r:8px; --dh-r-lg:14px;
  --dh-sh-sm:0 1px 2px rgba(42,54,63,.05),0 3px 10px rgba(42,54,63,.06);
  --dh-sh:0 8px 22px rgba(42,54,63,.10);
  --dh-sh-green:0 8px 22px rgba(134,199,36,.30);
  --dh-ease:220ms cubic-bezier(.2,.7,.3,1);
}

/* ---------- 1. Global readability (subtle) ------------------ */
/* Theme body text is ~13-14px (dated/cramped). Nudge content text up
   to a modern ~15.5px for legibility, WITHOUT touching headings,
   nav, labels, prices, or icon sizes. Scoped to content copy only. */
body{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; }
.entry-content, .wpb_text_column, .blog_postcontent,
.entry-content p, .wpb_text_column p, .blog_postcontent p,
.entry-content li, .wpb_text_column li{
  font-size:15.5px;
  line-height:1.72;
}
.entry-content p, .wpb_text_column p{ margin-bottom:1.05em; }
h1,h2,h3,h4{ letter-spacing:-.012em; }
.bigtfont{ line-height:1.18; }          /* big hero headings: tighter only, size untouched */
.caps{ letter-spacing:.02em; }          /* the theme's uppercase headings */

/* ---------- 2. Buttons (real .button etc.) ------------------ */
/* keep green + white; modern radius, smoother lift on hover */
.button, .button3, .btn,
.arkahost-submit, .arkahost-adv-search-btn,
.wpb_button, a.vc_btn3{
  border-radius:var(--dh-r) !important;
  transition:transform var(--dh-ease), box-shadow var(--dh-ease),
             background-color var(--dh-ease), border-color var(--dh-ease) !important;
}
.button:hover, .button3:hover, .arkahost-submit:hover,
.wpb_button:hover, a.vc_btn3:hover{
  transform:translateY(-2px);
  box-shadow:var(--dh-sh-green);
}
.arkahost-adv-search-btn, .arkahost-submit{ box-shadow:var(--dh-sh-sm); }

/* ---------- 3. Domain search bar (homepage hero) ------------ */
.arkahost-advance-search-form input,
.arkahost-advance-search-form .arkahost-submit{
  border-radius:var(--dh-r) !important;
}
.arkahost-advance-search-form input{
  border:1px solid var(--dh-border) !important;
  transition:border-color var(--dh-ease), box-shadow var(--dh-ease) !important;
}
.arkahost-advance-search-form input:focus{
  border-color:var(--dh-green) !important;
  box-shadow:0 0 0 3px rgba(134,199,36,.18) !important; outline:none !important;
}

/* ---------- 3b. ICON RESCUE (fixes a REAL live bug) --------- */
/* The feature sections use <i class="rocket element-icon"> with BARE
   names (rocket, lock, tachometer...) that match NO loaded icon font,
   so they render blank on the live site too. We map each bare name to
   its FontAwesome 5 glyph. Presentation-only; no markup changes. If the
   theme is later fixed to emit fa- classes, these rules simply stop
   matching — harmless. (font-family uses local "DH FA *" for preview;
   on live, switch to "Font Awesome 5 Pro"/"Font Awesome 5 Brands".) */
.element-icon.rocket, .element-icon.lock, .element-icon.tachometer,
.element-icon.download, .element-icon.database, .element-icon.desktop,
.element-icon.tablet, .element-icon.umbrella, .element-icon.trophy,
.element-icon.calendar, .element-icon.clock-o, .element-icon.cog,
.element-icon.coffee, .element-icon.anchor, .element-icon.sitemap,
.element-icon.usd,
i.rocket, i.lock, i.tachometer, i.download, i.database, i.desktop,
i.tablet, i.umbrella, i.trophy, i.calendar, i.clock-o, i.cog,
i.coffee, i.anchor, i.sitemap, i.usd{
  font-family:"Font Awesome 5 Pro","Font Awesome 5 Free" !important;
  font-weight:900 !important; font-style:normal !important;
  -webkit-font-smoothing:antialiased; display:inline-block; line-height:1;
}
.element-icon.github-alt, .element-icon.opencart,
i.github-alt, i.opencart{
  font-family:"Font Awesome 5 Brands" !important;
  font-weight:400 !important; font-style:normal !important;
  -webkit-font-smoothing:antialiased; display:inline-block; line-height:1;
}

/* ---------- 3c. ICON PLACEMENT (centered feature cards) ----- */
/* The bare-name <i class="x element-icon"> had no size/spacing of its
   own (original icon font carried its own metrics). Give the rescued
   glyphs proper size, centering, and spacing inside the centered
   feature cards (feature_section1/.king-elements), so the icon sits
   neatly above its <h4> title. Brand green, subtle circle badge. */
.king-elements-inner > i.element-icon,
.feature_section1 i.element-icon,
.feature_section12 i.element-icon{
  display:block;            /* own line, centered above the title */
  font-size:34px;
  line-height:74px;
  width:74px; height:74px;
  margin:0 auto 18px;       /* center horizontally, gap below */
  text-align:center;
  color:var(--dh-green);
  background:rgba(134,199,36,.10);   /* soft green badge, on-brand */
  border-radius:50%;
  transition:transform var(--dh-ease), background-color var(--dh-ease), color var(--dh-ease);
}
.king-elements:hover .king-elements-inner > i.element-icon,
.feature_section1 .king-elements:hover i.element-icon{
  background:var(--dh-green);
  color:#fff;
  transform:translateY(-2px);
}
/* keep the heading tight under the icon */
.feature_section1 .king-elements-inner h4.light,
.king-elements-inner h4.light{ margin-top:0; }
/* glyph mappings (bare name -> FA5 codepoint) */
.element-icon.rocket::before,  i.rocket::before     { content:"\f135"; }
.element-icon.lock::before,    i.lock::before       { content:"\f023"; }
.element-icon.tachometer::before, i.tachometer::before { content:"\f3fd"; }
.element-icon.download::before, i.download::before  { content:"\f019"; }
.element-icon.database::before, i.database::before  { content:"\f1c0"; }
.element-icon.desktop::before, i.desktop::before    { content:"\f108"; }
.element-icon.tablet::before,  i.tablet::before     { content:"\f3fa"; }
.element-icon.umbrella::before, i.umbrella::before  { content:"\f0e9"; }
.element-icon.trophy::before,  i.trophy::before     { content:"\f091"; }
.element-icon.calendar::before, i.calendar::before  { content:"\f133"; }
.element-icon.clock-o::before, i.clock-o::before    { content:"\f017"; }
.element-icon.cog::before,     i.cog::before        { content:"\f013"; }
.element-icon.coffee::before,  i.coffee::before     { content:"\f0f4"; }
.element-icon.anchor::before,  i.anchor::before     { content:"\f13d"; }
.element-icon.sitemap::before, i.sitemap::before    { content:"\f0e8"; }
.element-icon.usd::before,     i.usd::before        { content:"\f155"; }
.element-icon.github-alt::before, i.github-alt::before { content:"\f113"; }
.element-icon.opencart::before, i.opencart::before  { content:"\f23d"; }

/* ---------- 4. Feature boxes (.king-elements / .element-icon) */
.king-elements, .king-elements-inner{
  border-radius:var(--dh-r);
  transition:transform var(--dh-ease), box-shadow var(--dh-ease);
}
.king-elements:hover, .king-elements-inner:hover{
  transform:translateY(-3px);
  box-shadow:var(--dh-sh);
}
.element-icon{
  transition:transform var(--dh-ease), color var(--dh-ease);
}
.king-elements:hover .element-icon{ transform:scale(1.06); }

/* ---------- 5. Pricing / comparison (.price_compare) -------- */
/* turn the flat WPBakery price columns into modern cards, keeping
   the existing grid + the green accents (.sitecolor checks). */
.price_compare .table-wrapper{
  border-radius:var(--dh-r-lg);
}
.price_compare .vc_column_container{
  transition:transform var(--dh-ease), box-shadow var(--dh-ease), background-color var(--dh-ease);
  border-radius:var(--dh-r-lg);
}
.price_compare .vc_column_container:hover{
  transform:translateY(-4px);
  box-shadow:var(--dh-sh);
  background:#fff;
  position:relative; z-index:2;
}
.prices{ letter-spacing:-.01em; }
.arrow_box{ border-radius:var(--dh-r); }
.sitecolor{ /* green check icons — leave color (from color-primary.css), just align */ }

/* ---------- 6. Section feature blocks ----------------------- */
.feature_section5, .feature_section6, .feature_section7,
.feature_section6_elm, .vc_box_border_grey{
  border-radius:var(--dh-r);
}
.feature_section6_elm{ transition:transform var(--dh-ease), box-shadow var(--dh-ease); }
.feature_section6_elm:hover{ transform:translateY(-3px); box-shadow:var(--dh-sh); }

/* ---------- 7. Header & navigation -------------------------- */
.header{ box-shadow:0 1px 0 rgba(42,54,63,.06); }
.navbar-default .navbar-nav>li>a{
  transition:color var(--dh-ease) !important; font-weight:500;
}
/* subtle animated underline on hover/active, in brand green */
.navbar-default .navbar-nav>li>a::after{
  content:""; display:block; height:2px; width:0; margin-top:5px;
  background:var(--dh-green); transition:width var(--dh-ease);
}
.navbar-default .navbar-nav>li>a:hover::after,
.navbar-default .navbar-nav>.current-menu-item>a::after,
.navbar-default .navbar-nav>.current-menu-parent>a::after{ width:100%; }

/* ---------- 8. Cards / media corners ------------------------ */
.wpb_single_image img, .king-elements img, article img, .attachment-full{ border-radius:var(--dh-r); }

/* ---------- 9. Footer spacing ------------------------------- */
.footer{ }   /* structure kept; refine after footer review */

/* ---------- 10. Accessibility (no identity change) ---------- */
a:focus-visible, button:focus-visible, .button:focus-visible, .btn:focus-visible{
  outline:3px solid rgba(134,199,36,.55); outline-offset:2px;
}

/* ============================================================
   11. RESPONSIVE FIXES (real breakage found via device capture)
   Mobile hero/text overflow, pricing-table clipping, domain
   strip, cards/widgets escaping containers, spacing.
   ============================================================ */

/* ---- 11.0 GLOBAL: kill horizontal overflow (the #1 mobile bug) ---- */
html, body{ overflow-x:hidden; max-width:100%; }
img, svg, video, iframe, table{ max-width:100%; }
/* WPBakery rows/containers must never force width beyond the screen */
.wpb_row, .vc_row, .container, .container_full, .king-section,
.wpb_column, .vc_column_container, .wpb_wrapper{ max-width:100%; }
/* long words / URLs shouldn't push width */
.entry-content, .wpb_text_column, .blog_postcontent{ overflow-wrap:break-word; word-wrap:break-word; }

/* ---- 11.1 PRICING / COMPARISON TABLES: scroll instead of clip ---- */
/* The .price_compare table is wider than a phone and was getting cut
   off (3rd column lost). Let its wrapper scroll horizontally, and give
   the inner row a sensible min-width so columns stay readable. */
.price_compare .table-wrapper,
.price_compare .container.table-wrapper{
  overflow-x:auto; -webkit-overflow-scrolling:touch;
}
@media (max-width:991px){
  .price_compare .table-wrapper > .vc_row,
  .price_compare .table-wrapper > .wpb_row{ min-width:680px; }
}
/* a subtle scroll hint */
@media (max-width:767px){
  .price_compare .table-wrapper{
    box-shadow:inset -14px 0 12px -12px rgba(42,54,63,.18);
    border-radius:var(--dh-r-lg);
  }
}

/* ---- 11.2 VPS/spec tables (king-hosting) responsive scroll ------- */
.king-hosting-table, .arkahost-table, .table-responsive{
  overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%;
}

/* ---- 11.3 DOMAIN PRICING STRIP (top of pages) ------------------- */
/* the .offers strip clipped ".co.uk" on the right; let it wrap/scroll */
.offers, .vc_row-fluid.offers{
  flex-wrap:wrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
}
@media (max-width:767px){
  .offers{ display:flex; gap:0; }
  .offers > *{ flex:0 0 auto; }
}

/* ---- 11.4 DOMAIN SEARCH (hero) wraps on mobile ------------------ */
@media (max-width:767px){
  .arkahost-advance-search-form{ display:flex; flex-wrap:wrap; gap:8px; }
  .arkahost-advance-search-form input{ flex:1 1 100%; width:100% !important; }
  .arkahost-advance-search-form .arkahost-submit{ flex:1 1 100%; width:100% !important; border-radius:var(--dh-r) !important; }
}

/* ---- 11.5 CARDS / FEATURE BOXES contain their contents ---------- */
.king-elements, .king-elements-inner, .feature-box, .iconbox,
.feature_section1, .feature_section5, .feature_section6, .feature_section7{
  max-width:100%; box-sizing:border-box;
}
.king-elements-inner{ padding-left:14px; padding-right:14px; }
/* feature icon badge: keep it from overflowing on small cards */
.king-elements-inner > i.element-icon,
.feature_section1 i.element-icon{ max-width:100%; }

/* ---- 11.6 HEADINGS: wrap, don't overflow ------------------------ */
.bigtfont, .caps, h1, h2, h3{ overflow-wrap:break-word; word-break:normal; }
@media (max-width:767px){
  .bigtfont{ font-size:1.9rem !important; line-height:1.2 !important; }
  h1{ font-size:1.7rem; }
}

/* ---- 11.7 TABLET (768-991): tighten 3-col pricing --------------- */
@media (min-width:768px) and (max-width:991px){
  .price_compare .vc_column_container,
  .king-hosting-plan{ padding-left:10px; padding-right:10px; }
  .prices, .price{ font-size:1.5rem; }
}

/* ---- 11.8 LAPTOP (992-1280): keep container centered ------------ */
@media (min-width:992px) and (max-width:1280px){
  .container{ padding-left:20px; padding-right:20px; }
}

/* ---- 11.9 MOBILE buttons + readability -------------------------- */
@media (max-width:600px){
  .button, .button3, .arkahost-submit, .arkahost-adv-search-btn{
    width:100%; text-align:center; padding-top:14px; padding-bottom:14px;
  }
  .entry-content, .wpb_text_column, .blog_postcontent,
  .entry-content p, .wpb_text_column p, .entry-content li{ font-size:16px; }
  /* generous section spacing on phones */
  .wpb_row, .vc_row{ padding-left:4px; padding-right:4px; }
}

@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; }
  .button:hover, .king-elements:hover, .price_compare .vc_column_container:hover,
  .feature_section6_elm:hover{ transform:none !important; }
}