/*
Theme Name: Axiohost Child
Theme URI: https://themeix.com/product/axiohost-multi-purpose-hosting-business-wordpress-theme/
Template: axiohost
Author: Themeix
Author URI: https://themeix.com
Description: Axiohost is a responsive hosting theme for the digital products authors. This theme is compatible with Gutenberg, Elementor as well as other page builder plugins which helps you to deliever your content smoothly. Though it is best for hosting website but you can use that theme for any other business or corporate website. There used Bootstrap 4 framework to make the frontend of that theme. You can customize the colors, fonts and other things easily.
Tags: blog,block-styles,right-sidebar,footer-widgets,sticky-post,theme-options,full-width-template,custom-background,custom-logo,custom-menu,featured-images,flexible-header,threaded-comments,translation-ready
Version: 991.0.17.1774301508
Updated: 2026-03-23 21:31:48

*/

/* === CSS Variables === */
:root {
  --color-primary: #d4a017;
  --color-dark: #2a2c24 /*#1a1a2e*/;
  --color-text: #575A4B /*#333344*/;
  --color-bg: #f8f9fa;
  --color-danger: #c0392b;
  --font-main: 'Open Sans', system-ui, -apple-system, sans-serif;
  --font-heading: 'Montserrat', sans-serif;
  --spacing-xs: 0.75rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --radius: 6px;
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
}

/* === Base Reset === */
html { margin-top: 0 !important; }
body { 
  padding-top: 0 !important; 
  color: var(--color-text);
  line-height: 1.7;
  background: var(--color-bg);
  font-family: var(--font-main);
}


/* === Typography === */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--color-dark);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  margin-bottom: var(--spacing-sm);
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; margin-top: var(--spacing-lg); }
h3 { font-size: 1.5rem; margin-top: var(--spacing-md); }

p {
  margin-bottom: var(--spacing-md);
  /*max-width: 70ch;*/
}

.mb0 { margin-bottom: 0 !important; } 

/* === Hero Section === */
.post-title-area {
  background: linear-gradient(135deg, var(--color-dark) 0%, #2d2d44 100%);
  position: relative;
  overflow: hidden;
  padding: 120px 0 80px;
  margin-bottom: var(--spacing-lg);
}

.post-title-area::before {
  content: "⚠";
  position: absolute;
  right: 10%;
  top: 50%;
  transform: translateY(-50%);
  font-size: 300px;
  opacity: 0.03;
  color: var(--color-primary);
  pointer-events: none;
  z-index: 0;
}

.post-title-content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

.post-title-content h1 {
  font-size: 3.2rem;
  color: white;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
  line-height: 1.2;
  margin-bottom: var(--spacing-sm);
}

/* Tagline */
/*.post-title-content::after {
  content: "237,000 tonnes of arsenic trioxide beneath the city";
  display: block;
  color: var(--color-primary);
  font-size: 1.1rem;
  margin-top: var(--spacing-md);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}*/

/* === Tables === */
.wp-block-table {
  margin: var(--spacing-lg) 0;
  box-shadow: var(--shadow-md);
  border-radius: var(--radius);
  overflow: hidden;
  background: white;
}

.wp-block-table table {
  width: 100%;
  border-collapse: collapse;
}

.wp-block-table thead {
  background: var(--color-dark);
  color: white;
}

.wp-block-table thead {
  border-bottom: none;
}
.wp-block-table th {
  padding: 16px 24px;
  text-align: center;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  /*border: none;*/
  border: 1px solid var(--color-dark);
}

.wp-block-table td {
  padding: 16px 24px;
  border: 1px solid var(--color-dark);
  vertical-align: top;
}

.wp-block-table tbody tr:nth-child(even) {
  background: #fafafa;
}

.wp-block-table tbody tr:hover {
  background: #fff8e1;
  transition: 0.2s ease;
}

/* === Blockquotes === */
.wp-block-quote {
  border-left: 4px solid var(--color-primary);
  background: white;
  padding: 30px 40px;
  margin: var(--spacing-lg) 0;
  position: relative;
  box-shadow: var(--shadow-md);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--color-dark);
}

.wp-block-quote::before {
  content: """;
  position: absolute;
  top: -10px;
  left: 20px;
  font-size: 80px;
  color: var(--color-primary);
  opacity: 0.2;
  font-family: Georgia, serif;
  line-height: 1;
}

.wp-block-quote cite {
  display: block;
  margin-top: var(--spacing-md);
  font-style: normal;
  font-weight: 600;
  color: #666;
  font-size: 0.9rem;
}

.wp-block-quote cite::before {
  content: "— ";
  color: var(--color-primary);
}

/* === FAQ Section === */
.rank-math-list {
  max-width: 1180px;
  margin: var(--spacing-lg) auto;
  margin-bottom: .5em;
}

.rank-math-list-item {
  background: white;
  border-radius: var(--radius);
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  border: 1px solid #e0e0e0;
  transition: box-shadow 0.2s ease;
}

.rank-math-list-item:hover {
  box-shadow: var(--shadow-md);
}

.rank-math-question {
  padding: 20px 24px;
  margin: 0;
  font-size: 1.1rem;
  color: var(--color-dark);
  position: relative;
  padding-right: 40px;
  cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: all 0.2s ease;
}

.rank-math-question:hover {
  color: var(--color-primary);
  background: #fafafa;
}

.rank-math-question::after {
  content: "+";
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  color: var(--color-primary);
  font-weight: 300;
}

.rank-math-list-item.active .rank-math-question {
  border-bottom-color: #f0f0f0;
}

.rank-math-list-item.active .rank-math-question::after {
  content: "−";
}

.rank-math-answer {
  padding: 20px 24px;
  color: #555;
  line-height: 1.6;
  background: #fafafa;
}

.rank-math-answer p:last-child {
  margin-bottom: 0;
}

/* === Lists === */
.wp-block-list {
  padding-left: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.wp-block-list li {
  margin-bottom: var(--spacing-xs);
  position: relative;
}

.wp-block-list li::marker {
  color: var(--color-primary);
}

/* === Content Layout === */
.entry-content {
  max-width: 1180px;
  margin: 0 auto;
  /*padding: 0 var(--spacing-md);*/
}

.blog-area {
  padding-bottom: 8px;
  /*padding-bottom: var(--spacing-lg);*/
}

/* === Footer === */
.footer-area {
  background: var(--color-dark);
  color: #aaa;
  /*padding: var(--spacing-lg) 0;*/
  margin-top: 2px;
  /*margin-top: var(--spacing-lg);*/
}

.footer-copyright-text {
  color: #666;
  text-align: center;
}

@media (max-width: 910px) {
#site-navigation {
	background: #2A2C24;
}
}
/* === Mobile === */
@media (max-width: 768px) {
  .site-copy {
	text-align: center !important;
  }
  .post-title-content h1 {
    font-size: 2rem;
  }
  
  .post-title-content::after {
    font-size: 0.9rem;
  }
  
  .wp-block-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  
  .wp-block-table th,
  .wp-block-table td {
    /*padding: 12px 16px;*/
    padding: 10px 8px;
    font-size: 0.9rem;
  }
  
  .wp-block-quote {
    padding: 24px;
    font-size: 1.1rem;
  }
  
  h2 { font-size: 1.5rem; }
  h3 { font-size: 1.25rem; }
}


/* Base animation setup using CSS Grid for smooth height transitions */
.rank-math-answer {
  display: grid;
  grid-template-rows: 1fr;
  opacity: 1;
  transition: 
    grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Collapsed state */
.rank-math-answer.collapsed {
  grid-template-rows: 0fr;
  opacity: 0;
  padding: 20px 24px 0;
}
/* Prevent content overflow during animation */
.rank-math-answer > * {
  overflow: hidden;
  min-height: 0;
}
/* Visual indicator for interactive state */
.rank-math-question {
  cursor: pointer;
  position: relative;
  user-select: none;
  padding-right: 2.5rem; /* space for icon */
}
/* Icon indicator: minus (−) when open, plus (+) when collapsed */
.rank-math-question::after {
  content: "−";
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--accent-pink, #ec4899);
  transition: transform 0.3s ease;
}
.rank-math-question.collapsed::after {
  content: "+";
  transform: translateY(-50%) rotate(0deg);
}
/* Optional: subtle hover feedback */
.rank-math-question:hover {
  color: var(--accent-purple, #8b5cf6);
}


/* Warning block - compact casino-style alert */
.warn {
  position: relative;
  background: linear-gradient(135deg, #fff9e6 0%, #fff5d6 100%);
  border-left: 4px solid #d4a017;
  border-radius: 0 12px 12px 0;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
  margin-top: 0;
  box-shadow: 0 2px 8px rgba(212, 160, 23, 0.1);
}
/* Emoji sizing */
.warn .emoji {
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
  margin-right: 0.5rem;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));
}
/* Bold heading line */
.warn p:first-child {
  margin-bottom: 0.75rem;
  font-size: 1.1rem;
  line-height: 1.3;
}
.warn p:first-child strong {
  color: #92400e;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  font-size: 0.95rem;
}
/* Body text */
.warn p:last-child {
  margin-bottom: 0;
  color: #78350f;
  font-size: 0.95rem;
  line-height: 1.6;
}
/* Optional: subtle pattern overlay */
.warn::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  height: 100%;
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgba(212, 160, 23, 0.03) 10px,
    rgba(212, 160, 23, 0.03) 20px
  );
  pointer-events: none;
  border-radius: 0 12px 12px 0;
}



/* Fix text overflow in tables - remove nowrap behavior */
.wp-block-table,
.wp-block-table table {
  white-space: normal !important;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}
/* Ensure cells wrap content properly */
.wp-block-table td,
.wp-block-table th {
  white-space: normal !important;
  word-break: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
}
/* If using Gutenberg fixed layout, ensure words break */
.wp-block-table.has-fixed-layout td,
.wp-block-table.has-fixed-layout th {
  word-break: break-word;
  hyphens: auto;
}
/* Remove any scroll behavior from previous mobile fixes */
@media (min-width: 769px) {
  .wp-block-table {
    display: table !important;
    overflow-x: visible !important;
  }
}