/* ==========================================================================
   custom.css — site overrides & small enhancements
   Load this file LAST in <head> so it wins the cascade.
   ========================================================================== */

/* ---------- Theme variables (tweak freely) ---------- */
:root{
  --brand: #0047ab;
  --brand-dark: #002f6c;
  --accent: #f6b300;
  --text: #222;
  --muted: #666;
  --border: #e5e7eb;
  --soft-bg: #fafafa;
}

/* ---------- Global touch-ups ---------- */
img{max-width:100%;height:auto}
a{color:var(--brand)}
a:hover{color:var(--brand-dark)}
.btn, .button, .readon, .readon2{cursor:pointer}

/* ---------- Utilities ---------- */
.mb-10{margin-bottom:10px!important}
.mb-12{margin-bottom:12px!important}
.mb-15{margin-bottom:15px!important}
.mb-20{margin-bottom:20px!important}
.mt-10{margin-top:10px!important}
.mt-15{margin-top:15px!important}

/* ==========================================================================
   ADMIN / UTILITY MENUS: add emoji “logos” before specific links
   Works anywhere the exact hrefs below appear (e.g. your <ul> snippet)
   ========================================================================== */

/* Base look for these emoji icons */
a[href="dashboard.php"]::before,
a[href="site-settings.php"]::before,
a[href="seo-settings.php"]::before,
a[href="media-manager.php"]::before,
a[href="navigation-menus.php"]::before,
a[href="subscribers.php"]::before,
a[href="contacts.php"]::before,
a[href="blog-news.php"]::before,
a[href="page-manager.php"]::before,
a[href="contact-social.php"]::before,
a[href*="?logout"]::before{
  display:inline-block;
  width:1.25em;
  margin-right:.55rem;
  text-align:center;
  transform: translateY(1px);
  opacity:.95;
}

/* The actual icons */
a[href="dashboard.php"]::before{content:"📊"}
a[href="site-settings.php"]::before{content:"⚙️"}
a[href="seo-settings.php"]::before{content:"🔍"}
a[href="media-manager.php"]::before{content:"🖼️"}
a[href="navigation-menus.php"]::before{content:"🧭"}
a[href="subscribers.php"]::before{content:"📨"}
a[href="contacts.php"]::before{content:"📩"}
a[href="blog-news.php"]::before{content:"📰"}
a[href="page-manager.php"]::before{content:"📄"}
a[href="contact-social.php"]::before{content:"🔗"}
a[href*="?logout"]::before{content:"🚪"}

/* Align stacked lists nicely */
ul li a[href="dashboard.php"],
ul li a[href="site-settings.php"],
ul li a[href="seo-settings.php"],
ul li a[href="media-manager.php"],
ul li a[href="navigation-menus.php"],
ul li a[href="subscribers.php"],
ul li a[href="contacts.php"],
ul li a[href="blog-news.php"],
ul li a[href="page-manager.php"],
ul li a[href="contact-social.php"],
ul li a[href*="?logout"]{
  display:flex; align-items:center; gap:.35rem;
}

/* Hide icons on very narrow screens */
@media (max-width:420px){
  a[href="dashboard.php"]::before,
  a[href="site-settings.php"]::before,
  a[href="seo-settings.php"]::before,
  a[href="media-manager.php"]::before,
  a[href="navigation-menus.php"]::before,
  a[href="subscribers.php"]::before,
  a[href="contacts.php"]::before,
  a[href="blog-news.php"]::before,
  a[href="page-manager.php"]::before,
  a[href="contact-social.php"]::before,
  a[href*="?logout"]::before{ display:none }
}

/* ==========================================================================
   CONTACT SECTION (Emoji icons)
   ========================================================================== */

/* Info cards (address / email / phone) */
#section-contact .contact-info{
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  padding:18px 16px;
  display:flex; gap:14px; align-items:flex-start;
  transition: box-shadow .2s, transform .2s;
}
#section-contact .contact-info:hover{
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  transform: translateY(-2px);
}

/* Emoji icon container – no colored box, clean alignment */
#section-contact .contact-info .icon-part{
  flex:0 0 auto;
  width:auto; height:auto; border-radius:0;
  background:none; padding:0;
  display:flex; align-items:center; justify-content:center;
  font-size:26px; line-height:1;
  margin-top:2px;    /* optical balance with headings */
}

/* Hide any FA <i> inside the icon area */
#section-contact .contact-info .icon-part i{ display:none !important }

/* Inject emojis by card type */
#section-contact .contact-address .icon-part::before{ content:"📍"; }
#section-contact .contact-mail    .icon-part::before{ content:"✉️"; }
#section-contact .contact-phone   .icon-part::before{ content:"📞"; }

/* Make sure list/menu emoji rules never bleed into contact links */
#section-contact .contact-info a::before{ content:none !important; }

#section-contact .contact-info .info-subtitle{
  color:var(--muted); font-weight:600; letter-spacing:.2px; margin-bottom:4px;
}
#section-contact .contact-info .info-title a{ color:var(--text); text-decoration:none }
#section-contact .contact-info .info-title a:hover{ color:var(--brand) }

/* Contact heading/intro */
#section-contact .rs-quick-contact .inner-part .title{
  font-weight:800;
  letter-spacing:-.2px;
}
#section-contact .rs-quick-contact .inner-part p{
  color:#444; max-width:780px; margin:0 auto;
}

/* Contact form */
#section-contact #contact-form{
  max-width:820px; margin:0 auto;
}
#section-contact #contact-form .row > div{ margin-bottom:14px }

#section-contact #contact-form input[type="text"],
#section-contact #contact-form input[type="email"],
#section-contact #contact-form input[type="tel"],
#section-contact #contact-form input[type="url"],
#section-contact #contact-form input[type="number"],
#section-contact #contact-form select,
#section-contact #contact-form textarea{
  width:100%;
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:8px;
  background:#fff;
  color:var(--text);
  line-height:1.35;
  transition:border-color .15s, box-shadow .15s, background-color .15s;
}

#section-contact #contact-form textarea{ min-height:140px; resize:vertical }

#section-contact #contact-form input:focus,
#section-contact #contact-form select:focus,
#section-contact #contact-form textarea:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(0,71,171,.1);
  outline:0;
}

#section-contact #contact-form ::placeholder{ color:#9aa3af }
#section-contact #contact-form :-ms-input-placeholder{ color:#9aa3af }
#section-contact #contact-form ::-ms-input-placeholder{ color:#9aa3af }

/* Submit button (theme “yellow” button) */
#section-contact #contact-form .readon.yellow-btn{
  background:var(--brand);
  border:0; color:#fff; font-weight:700;
  padding:12px 22px; border-radius:8px;
  text-transform:none;
  box-shadow:0 6px 14px rgba(0,71,171,.18);
  transition: transform .15s, box-shadow .15s, background .15s;
}
#section-contact #contact-form .readon.yellow-btn:hover{
  background:var(--brand-dark);
  box-shadow:0 8px 18px rgba(0,47,108,.22);
  transform: translateY(-1px);
}

/* Inline feedback area */
#form-messages{
  max-width:820px; margin:0 auto 18px auto;
  border-radius:8px;
}
#form-messages.alert{ padding:12px 14px }

/* Honeypot field stays hidden, just in case */
.hp-field{ position:absolute !important; left:-5000px !important; height:0 !important; width:0 !important; opacity:0 !important }

/* ==========================================================================
   PRICING small refinements (matches the inline block; safe to move styles here)
   ========================================================================== */
.pricing-section .toggle-btn{
  border:2px solid var(--brand);
  color:var(--brand);
  border-radius:8px;
  padding:10px 22px;
  font-weight:700;
  background:transparent;
}
.pricing-section .toggle-btn.active{
  background:var(--brand);
  color:#fff;
}
.pricing-card{ border-color:var(--border) }
.pricing-header{
  background:var(--accent);
  color:#111;
}
.pricing-button a{
  background:var(--brand);
}
.pricing-button a:hover{
  background:var(--brand-dark);
}

/* ==========================================================================
   CTA blocks (minor readability tweaks)
   ========================================================================== */
#section-cta .sec-title3 .desc{ color:#333 }
#cta2Bg .cta-inner .title{ text-shadow:0 2px 10px rgba(0,0,0,.25) }
#cta2Bg .cta-inner .desc{ text-shadow:0 1px 6px rgba(0,0,0,.25) }

/* ==========================================================================
   TEXT PAGE (generic longform) readability
   ========================================================================== */
.textpage-wrap{ max-width:980px }
.textpage-body p{ line-height:1.7; color:#333 }
.textpage-toc{
  background:var(--soft-bg);
  border:1px solid var(--border);
  border-radius:12px;
}
.textpage-toc a{ text-decoration:none }
.textpage-toc a:hover{ text-decoration:underline }

/* ==========================================================================
   BLOG / CAROUSEL small polish
   ========================================================================== */
.blog-item .title a{ color:#111; text-decoration:none }
.blog-item .title a:hover{ color:var(--brand) }
.blog-item .btn-btm .rs-view-btn a{
  color:var(--brand); font-weight:700; text-decoration:none
}
.blog-item .btn-btm .rs-view-btn a:hover{ color:var(--brand-dark) }

/* ==========================================================================
   MISC
   ========================================================================== */
#scrollUp{
  background:var(--brand)!important;
}
#scrollUp:hover{
  background:var(--brand-dark)!important;
}

/* WhatsApp floating button text tweak */
#whatsapp-button{ font-weight:600 }