/* ==========================================================================
   Full‐Width Page Template
   Applies only to pages using page-blank-full.php
   ========================================================================== */
body.page-template-page-blank-full main,
body.page-template-page-blank-full .entry-content {
  max-width: none !important;   /* remove the 1200px cap */
  padding: 0 20px;              /* horizontal gutter */
}

/* Uncap Gutenberg wide/alignfull blocks too */
body.page-template-page-blank-full .wp-block,
body.page-template-page-blank-full [class*="align"],
body.page-template-page-blank-full .wp-block-group__inner-container {
  max-width: none !important;
}

/* ==========================================================================
   Typography
   ========================================================================== */
/* Base font settings */
body {
  font-family: "Open Sans", sans-serif;
  font-weight: 300;
  font-size: 16px;
  color: var(--ar-paragraph);
  line-height: 1.5;
  height: 100%;
  background-color: #ecf0f0;
}

/* Paragraphs */
p {
  margin-bottom: 1rem;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  color: var(--ar-heading);
  font-family: 'Mona Sans', sans-serif;
  font-weight: 600;
  margin-bottom: .75rem;
}

h1 {
  font-size: 42px;
  line-height: 1.2;
}
h2 {
  font-size: 34px;
  line-height: 1.25;
}
h3 {
  font-size: 28px;
  line-height: 1.3;
}
h4 {
  font-size: 22px;
  line-height: 1.35;
}
h5 {
  font-size: 18px;
  line-height: 1.4;
}
h6 {
  font-size: 15px;
  line-height: 1.45;
}
/* Links & Images */
a {
  text-decoration: none;
  color: inherit;
}
img {
  max-width: 100%;
  height: auto;
}
.header-bg {
    background-color: #0000004a;
    border-radius: 40px;
    padding-left: 30px;
    padding-right: 30px;
}
/* ==========================================================================
   Branding
   ========================================================================== */
.ar-brand {
  display: flex;
  align-items: center;
  font-size: 1.25rem;
}
.ar-brand img {
  max-height: 54px;
  width: auto;
}

/* ──────────────────────────────────────────
   AR-Theme  •  Menu + Drop-in Sub-menu CSS
   – underline animation
   – white dropdown box
   – colour + slight slide-right on hover
   – no background change on hover
   – mobile overlay untouched
   ────────────────────────────────────────── */

/* ─── 1. shared list skeleton ─── */
/*── 1. Reset & Base ──*/
.ar-menu,
.ar-menu-transparent {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ar-menu > li,
.ar-menu-transparent > li {
  position: relative;
}

/*── 2. Top‐Level Links + Underline ──*/
.ar-menu > li > a,
.ar-menu-transparent > li > a {
  position: relative;       /* for ::after */
  display: inline-block;
  padding: .5rem 0;
  font-weight: 400;
  color: #333;
  transition: color .25s;
}
.ar-menu > li {
    color: #000;
}
.ar-menu > li > a::after,
.ar-menu-transparent > li > a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 2px;
  background: var(--ar-menu-underline) !important;
  transition: width .3s;
}
.ar-menu > li > a:hover::after,
.ar-menu-transparent > li > a:hover::after {
  width: 100%;
}

/*── 3. Desktop Dropdown ──*/
.ar-menu li > .sub-menu {
    list-style: none;
  position: absolute;
  top: 100%; left: 0;
  min-width: 180px;
  margin: 0; padding: .75rem 0;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
  opacity: 0; visibility: hidden;
  transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s step-end;
  z-index: 999;
}
.ar-menu li > .sub-menu a {
  display: block;
  padding: .5rem 1rem;
  color: #333;
  white-space: nowrap;
  font-weight: 400;
  transition: color .25s, transform .25s;
}
.ar-menu li > .sub-menu a:hover,
.ar-menu li > .sub-menu a:focus {
  color: var(--ar-secondary) !important;
  transform: translateX(6px);
  background: transparent;
}

/*── 4. Hover Reveal (Desktop Only) ──*/
@media (hover:hover) {
  .ar-menu li:hover > .sub-menu,
  .ar-menu li:focus-within > .sub-menu {
    opacity: 1; visibility: visible;
    transform: translateY(0);
    transition-timing-function: ease-out, ease-out, step-start;
  }
  .ar-menu > li:hover > a {
    color: var(--ar-accent) !important;
  }
}

/*── 5. Mobile Inline (≤992px) ──*/
@media (max-width: 991.98px) {
  .ar-menu li > .sub-menu {
    position: static;
    opacity: 1; visibility: visible;
    transform: none;
    padding: 0;
    box-shadow: none;
  }
}

/* ───────── Highlight only the exact current menu item ───────── */
.ar-menu  .current-menu-item > a,
.ar-menu  .current_page_item > a,
.ar-menu-transparent .current-menu-item > a,
.ar-menu-transparent .current_page_item > a {
  color: var(--ar-accent) !important;
}

/* ─── Transparent header variant ─── */
.ar-header-transparent:not(.scrolled) .ar-menu > li > a:hover,
.ar-header-transparent:not(.scrolled) .ar-menu > li:hover > a{
	color: var(--ar-accent) !important;
}
/* ───────── Sticky headers ───────── */
.ar-header-desktop,
.ar-header-transparent,
.ar-header-mobile{
    position:sticky;
    top:0;
    width:100%;
    z-index:1000;
    transition:background .25s ease, 
    box-shadow .25s ease;
    background-color: #fff;
}
.ar-header-desktop { 
  background: var(--ar-page-bg);

}
.ar-header-transparent  { background:transparent;   box-shadow: none; }

/* background & shadow once scrolled (both headers) */
.ar-header-desktop.scrolled,
.ar-header-transparent.scrolled {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  background:#FFF; /* or whatever solid BG you prefer */
  padding:  0;                  /* tighten up on scroll, if desired */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  z-index: 1001;
}

/* ─── logo visibility ─── */
.logo-sticky{ 
    display:none; 
    
}                 /* hidden by default */

/* after header gains .scrolled */
.ar-header-desktop.scrolled   .logo-default,
.ar-header-transparent.scrolled .logo-transparent{ 
    display:none; 
    
}

.ar-header-desktop.scrolled   .logo-sticky,
.ar-header-transparent.scrolled .logo-sticky{ 
    display:inline; }

/* ───────── Colour overrides for transparent header ───────── */

/* BEFORE SCROLL  –  white links, underline, and hamburger bars */
.ar-header-transparent .ar-menu > li > a,
.ar-header-transparent .ar-brand a{
    color: var(--ar-accent) !important;
}
.ar-header-transparent .ar-menu > li > a::after{ background:#0d6efd; }

.ar-header-transparent .ar-hamburger span{           /* bars → white */
    background:#fff;
}

/* AFTER SCROLL  –  dark links, blue underline, dark hamburger bars */
.ar-header-transparent.scrolled .ar-menu > li > a,
.ar-header-transparent.scrolled .ar-brand a{
    color:#333;
    font-weight: 400;
}
.ar-header-transparent.scrolled .ar-menu > li > a::after{ background:#0d6efd; }
.ar-header-transparent.scrolled .ar-hamburger span{ background:#333; }

/* ─────────────────────────────────────────────────────────────
   OFF-CANVAS MOBILE MENU  +  ACCORDION SUB-MENUS
   • slides in from the left   (75 % / max-width 300 px)
   • dark overlay behind
   • tap parent item   → sub-menu drops, white background
   • tap again / tap sibling  → closes
   ───────────────────────────────────────────────────────────── */

/*── Off-Canvas Mobile Menu & Overlay ──*/
#ar-mobile-overlay {
  position: fixed; 
  inset: 0;
  background: rgba(0,0,0,.5);
  opacity: 0; visibility: hidden;
  transition: opacity .3s ease;
  z-index: 998;
}
#ar-mobile-menu {
  position: fixed; top: 0; left: 0;
  width: 75%; max-width: 300px; height: 100%;
  background: #fff;
  padding: 2rem 1.5rem 3rem;
  transform: translateX(-100%);
  transition: transform .3s ease;
  overflow-y: auto;
  z-index: 999;
  box-shadow: 2px 0 12px rgba(0,0,0,.15);
}
/* open states */
#ar-mobile-menu.open   { transform: translateX(0); }
#ar-mobile-overlay.open{ opacity: 1; visibility: visible; }

/*── Close Button ──*/
#ar-mobile-menu .ar-close {
  position: absolute; top: 5px; right: 5px;
  background: none; border: none;
  font-size: 2rem; color: #848484;
  cursor: pointer;
}

/*── Main Menu List ──*/
#ar-mobile-menu .ar-menu-mobile {
  list-style: none; margin: 2rem 0 0; padding: 0;
}
#ar-mobile-menu .ar-menu-mobile li {
  margin-bottom: 1rem;
}
#ar-mobile-menu .ar-menu-mobile a {
  display: block;
  font-size: 1.125rem;
  font-weight: 400;
  color: #333;
  padding: .5rem 0;
  border-bottom: 1px solid #e8e8e8;
  transition: color .25s;
}

/*── Accordion Sub-Menus ──*/
#ar-mobile-menu .sub-menu {
  list-style: none;
  max-height: 0; overflow: hidden;
  margin: .5rem 0 0; padding-left: 1rem;
  transition: max-height .3s ease;
}
#ar-mobile-menu .sub-menu a {
  display: block;
  font-size: 1rem;
  padding: .5rem 0;
  transition: color .25s;
}

/*── Opened State ──*/
#ar-mobile-menu li.open > .sub-menu {
  max-height: 500px;
}
#ar-mobile-menu li.open > a,
#ar-mobile-menu .sub-menu a:hover,
#ar-mobile-menu .sub-menu a:focus {
  color: var(--ar-accent) !important;
}

/*── Arrow Indicator ──*/
#ar-mobile-menu .menu-item-has-children > a {
  position: relative;
  padding-right: 1.75rem;
}
#ar-mobile-menu .menu-item-has-children > a::after {
  content: "";
  position: absolute; top: 50%; right: 0;
  width: 8px; height: 8px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-50%) rotate(-45deg);
  transition: transform .25s;
}
#ar-mobile-menu .menu-item-has-children.open > a::after {
  transform: translateY(-50%) rotate(135deg);
}

/*── Mobile Logo ──*/
#ar-mobile-menu .ar-mobile-brand img,
#ar-mobile-menu .ar-mobile-brand .site-title {
  max-height: 50px;
  width: auto;
}


/* ───────── Mobile hamburger (default) ───────── */
.ar-hamburger{
    background:none;
    border:0;
    width:32px;
    height:24px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:0;
}
.ar-hamburger span{
    width:100%;
    height:3px;
    display:block;
    background:#333;            /* overwritten to #fff in transparent header */
    transition:background .25s;
}

/* ───────── Above-Footer Styling ───────── */
.above-footer-area {
    background-color: #f4f4f4;
    border-radius: 0px 0px 40px 40px;
    padding: 40px ;
    margin-bottom: -2rem;
    position: relative;
}

/* Make the row flex and evenly split */
.above-footer-area .row {
  display: flex;
  align-items: stretch;
}

/* Each column flexes, centers its widget content */
.above-footer-area .row > [class*="col-"] {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;       /* horizontal gutter */
}

/* Add a vertical divider between columns */
.above-footer-area .row > [class*="col-"] + [class*="col-"] {
  border-left: 1px solid #999;
}

/* Above-footer: stack title above content */
/* ─── Widget container ─── */
.above-footer-area .widget {
  display: flex;
  flex-direction: column;  /* stack title above content */
  align-items: center;     /* center everything horizontally */
  gap: 0.75rem; 
  font-size: 16px;
  color: #686868;/* space between title & content */
  line-height: normal;
  font-weight: 500;
}

/* Title always on top */
.above-footer-area .widget .widget-title {
  width: 100%;
  text-align: center;
  margin-bottom: 0.75rem;
  order: -1;               /* ensure it renders before other items */
}

/* ─── Group icon + text ─── */
.above-footer-area .widget > :not(.widget-title) {
  display: flex;
  align-items: center;    /* vertical centering */
  gap: 0.75rem;           /* space between icon & text */
}

/* ─── Icon sizing ─── */
.above-footer-area .widget img,
.above-footer-area .widget i,
.above-footer-area .widget svg {
  flex-shrink: 0;         /* don’t let it shrink smaller */
  width: 1.5rem;
  height: 1.5rem;
  font-size: 2rem;      /* if you’re using font-icons */
  color: var(--ar-accent);
}

/* ─── Text wrap & line-height ─── */
.above-footer-area .widget p,
.above-footer-area .widget span {
  margin: 0;
  line-height: 1;
  text-align: center;
}



/* ───────── Footer widgets ───────── */
.ar-footer {
  background-color: var(--ar-footer-bg) !important;
  color: #555; /* fallback, but overridden by the next line */
  color: var(--ar-footer-text); 
}

.ar-footer .widget-title {
  color: var(--ar-footer-title) !important;
  font-size: 1.125rem;
  margin-bottom: .75rem;
  font-weight: 600;
  margin-top: 10px;
}

.ar-footer .widget ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.ar-footer .widget ul li {
  margin-bottom: .5rem;
}

.ar-footer .widget ul li a {
  color: var(--ar-footer-text) !important;
}

.ar-footer .widget ul li a:hover {
  text-decoration: underline;
}
.ar-footer .widget p {
  color: var(--ar-footer-text) !important;
  margin-bottom: 1rem;
}
.ar-footer .widget p a{
  color: var(--ar-footer-title) !important;
  margin-bottom: 1rem;
}

/* ===== Hero Slider ===== */
.hero-slider h1{
font-size: 2.9rem;
font-weight: 700;
color: #fff;

}
.hero-slider .lead{
    font-size: 1.45rem;
    font-weight: 300;
    color: #fff;
}
@media (max-width: 767.98px) {
  .hero-slider h1 {
    font-size: 1.8rem;    /* down from 2.9rem */
    font-weight: 700;
  }
  .hero-slider .lead {
    font-size: 1rem;      /* down from 1.45rem */
    font-weight: 300;
  }
}
/* Hero-slider primary button using accent color */
.hero-slider .btn-primary {
  background-color: transparent !important;
  color: #fff !important;
  padding: 5px 20px;
  border: 2px solid var(--ar-accent) !important;
  border-radius: 20px;
  text-shadow: none;
  font-size: 16px;
}

/* Keep same accent on hover/focus */
.hero-slider .btn-primary:hover,
.hero-slider .btn-primary:focus {
  background-color: var(--ar-accent) !important;
  color: #fff;
  border-color: var(--ar-accent) !important;
  text-decoration: none;
}

.hero-slider{position:relative;height:70vh;width:100%;z-index:1;}
.hero-slider .swiper{height:100%;}
.hero-slider .swiper-slide{
    background-size:cover;background-position:center;
    display:flex;align-items:center;justify-content:center;
}
.hero-slider .slide-caption{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6);}
/* transparent header must float over hero, not push it down */
/* ───────── Transparent Header – initial state ───────── */
.ar-header-transparent {
  position: absolute;
  top: auto;          /* let it flow in document, below the Top Bar */
  width: 100%;
  z-index: 1001;
  transition: background 0.3s ease, padding 0.3s ease;
}
/* shrink the clickable box */
.swiper-button-next,
.swiper-button-prev {
  width: 32px !important;
  height: 32px !important;
   text-shadow:
    0 0 1px currentColor,
    0 0 1px currentColor,
    0 0 1px currentColor;
}

/* shrink the arrow glyph */
.swiper-button-next::after,
.swiper-button-prev::after {
  font-size: 24px !important;   /* ↓ adjust this value for your desired arrow size */
  line-height: 1;               /* ensure proper centering */
  color: var(--ar-accent) !important;
}

/* re-center vertically if needed */
.swiper-button-next::after,
.swiper-button-prev::after {
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* ───────── Swiper Pagination Bullets ───────── */

/* base bullet (clickable) */
.swiper-pagination-clickable .swiper-pagination-bullet {
  width: 12px;               /* bullet diameter */
  height: 12px;
  margin: 0 6px;             /* spacing between bullets */
  background: rgba(255,255,255,0.5);
  opacity: 1;                /* remove default fade */
  cursor: pointer;           /* show pointer on hover */
  transition: 
    background .3s ease, 
    transform .3s ease;
}

/* hover state */
.swiper-pagination-clickable .swiper-pagination-bullet:hover {
  background: #e0e0e0;
  transform: scale(1.1);
}

/* active bullet */
.swiper-pagination-clickable .swiper-pagination-bullet-active {
  background: var(--ar-accent) !important;       /* brand blue for active */
  transform: scale(1.4);
}

/* ensure pagination container sits above slides */
.swiper-pagination {
  z-index: 10;
}


/* ───────── Blog List ───────── */
/* ==========================================================================
   Custom Post Styling: Title, Author, Avatar, Date, Category
   ========================================================================== */

/* ==========================================================================
   Post Title
   ========================================================================== */

/* ==========================================================================
   Post Meta (Author, Date, Category)
   ========================================================================== */

.post-area {
    border: 1px solid #e5e5e5;
    padding: 20px;
    margin-bottom: 50px;
    background-color: #ededed7d;
    border-radius: 20px;
}

.ar-post-title {
  font-size: 1.8rem;           /* Increase size */
  font-weight: 600;          /* Make it bold */
  margin: 1rem 0 0.5rem;     /* spacing above/below */
  line-height: 1.6;          /* tighten up the lines */
}

.ar-post-title a {
  color: var(--ar-heading);   /* your accent color */
  text-decoration: none;
  transition: color 0.3s ease;
}

.ar-post-title a:hover {
  color: var(--ar-accent);   /* your accent color */
}
.ar-thumb-inner img{
margin-bottom: 20px;
border-radius: 25px;

}
.ar-meta{
    padding: 20px;
    background-color: #ededed7d;
    border-radius: 15px;
    border: 1px solid #e5e5e5;
}
.ar-meta img{
    width: 60px;
    height: 60px;
    border-radius: 50%;
}


/* — Author Avatar & Name — */
.ar-meta-item:first-child .ar-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;

}
.ar-post-content{
    background-color: #ededed7d;
    padding: 15px;
    border-radius: 15px;
    border: 1px solid #e5e5e5;
}
/* Modern Post Navigation */
.ar-post-nav-modern {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 2rem 0;
}

.ar-nav-inner {
  width: 100%;
  max-width: 900px;
  background-color: #ededed7d;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2.5rem 2rem;
  box-shadow: 0 1px 8px rgba(0,0,0,0.03);
  gap: 2rem;
  border: 1px solid #e5e5e5;
}

.ar-nav-col {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ar-nav-btn {
  display: flex;
  align-items: center;
  gap: 0.75em;
  font-weight: 600;
  color: #122022;
  text-decoration: none;
  font-size: 1.2rem;
  transition: color 0.18s;
}

.ar-nav-btn:hover {
  color: var(--ar-accent, #0d6efd);
}

.ar-nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1.5px solid #ced4da;
  background: #fff;
  font-size: 1rem;
  transition: border-color 0.18s, background 0.18s;
}

/* Icon color and hover state */
.ar-nav-icon i {
  color: #122022;
  transition: color 0.18s;
}

.ar-nav-btn:hover .ar-nav-icon {
  border-color: var(--ar-accent, #0d6efd);
  background: var(--ar-accent, #0d6efd);
}

.ar-nav-btn:hover .ar-nav-icon i,
.ar-nav-btn:focus .ar-nav-icon i {
  color: #fff !important;
}

.ar-nav-label {
  font-weight: 600;
}

.ar-nav-center-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
  padding: 0.25em;
}

/* Responsive */
@media (max-width: 800px) {
  .ar-nav-inner {
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.5rem 0.5rem;
  }
  .ar-nav-col {
    width: 100%;
    justify-content: center;
  }
}

/* — Post Date (2nd item) — */
.ar-meta-item:nth-child(2) {
  color: var(--ar-paragraph); 
}

.ar-meta-category a{
   color: var(--ar-accent) !important;
   font-weight: 300;
   font-size: 14px;
}
.ar-meta-category a:hover{
   color: var(--ar-accent) !important; 
}

.ar-meta-author a{
      color: var(--ar-heading);
      font-weight: 500;
}
.ar-meta-author a:hover{
      color: var(--ar-accent) !important;
}


/* ───────── Continue Reading Button ───────── */
.ar-btn-readmore {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;                             /* space between text & icon */
  padding: 0.5rem 1rem;                    /* easier to tap on mobile */
  background: transparent;
  color: var(--ar-heading);
  font-weight: 500;
  font-size: 0.875rem;                     /* 14px */
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 0.3s ease,
              color            0.3s ease;
}

/* icon inherits color & transitions on its own */
.ar-btn-readmore i {
  font-size: 1em;
  transition: color 0.3s, transform 0.35s cubic-bezier(.55,.19,.25,1);
  color: black;
  font-weight: bold;
}

/* ─── Hover & Focus States ─── */
.ar-btn-readmore:hover,
.ar-btn-readmore:focus {
  color: var(--ar-accent);
}

/* Hover + focus state on the button (icon too) */
.ar-btn-readmore:hover i,
.ar-btn-readmore:focus i {
  color: var(--ar-accent) !important;
  transform: translateX(6px);   /* Shift right by 6px */
}

/* ─── Keyboard Focus Ring ─── */
.ar-btn-readmore:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.4); /* semi-transparent ring around button */
}

.ar-excerpt {
  padding-bottom: 20px;
}

/* ───────── Single Article ───────── */
.ar-single-post-title a{
  color: var(--ar-heading) !important;
}

.ar-meta-comments{
   color: gray;
}


/* ───────── Sidebar Widgets ───────── */
#sidebar-blog .widget {
  padding: 20px !important;
  border: 1px solid #e5e5e5;
  background-color: rgb(246 246 246);
  border-radius: 20px;
}
#sidebar-blog li {
display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
  padding-bottom: 10px;
      border-bottom: 1px solid;  /* fallback */
  border-image-source: linear-gradient(
    to right,
    rgba(168,168,168,0) 0%,
    rgba(168,168,168,1) 50%,
    rgba(168,168,168,0) 100%
  );
  border-image-slice: 1;
}
#sidebar-blog .widget li span[class$="-count"] {
  margin-left: auto;
  margin-right: 1rem;
  color: #a8a8a8;
}
#sidebar-blog li > a {
  flex: 1;                   /* ← added */
  color: var(--ar-heading) !important;
  text-decoration: none;
  font-weight: 500;
}
#sidebar-blog li a:hover{
      color: var(--ar-accent) !important;
      text-decoration: none;
}
#sidebar-blog img{
      width: 100%;
}
#sidebar-blog .widget-title{
background-color: var(--ar-secondary) !important;
color: var(--ar-accent) !important;
padding: 10px 20px 10px 20px;
border-radius: 10px;

}
/* Make every sidebar link a flex‐row if it contains a count */
#sidebar-blog .widget li > a {
  flex: 1;                   /* fill available width in the <li> */
  display: flex;             /* become a flex container */
  align-items: center;       /* vertical centering */
  justify-content: space-between; /* push text left, count right */
}


/* ───────── Widget Recent Posts ───────── */

/* ───────── Recent Posts Thumbnails (any widget area) ───────── */
/* Force every Recent Posts thumb wrapper to 80×80 circle */
.widget_recent_entries .ar-rp-thumb {
  flex: 0 0 80px !important;  /* no grow, no shrink, base 80px */
  width: 80px !important;
  height: 80px !important;
  margin-right: 10px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  display: block !important;
}

/* Have the image fill that circle */
.widget_recent_entries .ar-rp-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.widget_recent_entries li a{
  margin: 0 1rem 0 0;        /* a little right padding if you like */
  color: var(--ar-heading) !important;
  font-weight:500;
}

.widget_recent_entries .ar-rp-date {
  font-size: 0.85em;
  color: var(--ar-paragraph) !important;
  line-height: 1.8;
  margin-top: 0.25em;
}

/* ───────── Footer Recent Posts Thumbnails ───────── */
footer .widget_recent_entries .ar-rp-thumb {
  flex: 0 0 80px !important;   /* lock at 80×80 */
  width: 60px !important;
  height: 60px !important;
  margin-right: 10px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  display: block !important;
}

footer .widget_recent_entries .ar-rp-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}


/* ───────── Custom Pagination ───────── */
.ar-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .5rem;       /* space between buttons */
  margin: 2rem 0;
}

/* Base style for all page‐number links */
.ar-pagination .page-numbers {
  display: inline-block;
  margin: 0 .25rem;
  padding: .5rem .75rem;
  border: 1px solid var(--ar-accent);
  border-radius: .25rem;
  color: var(--ar-accent);
  text-decoration: none;
  transition: background-color .3s, color .3s;
}

/* Hover state */
.ar-pagination .page-numbers:hover {
  background-color: var(--ar-accent);
  color: #fff;
}

/* Current page */
.ar-pagination .page-numbers.current {
  background-color: var(--ar-accent);
  color: #fff;
  cursor: default;
}

/* Prev/Next links (optional bold) */
.ar-pagination .prev.page-numbers,
.ar-pagination .next.page-numbers {
  font-weight: 600;
}

 
/* ───────── Comments Section ───────── */
.ar-comments-section {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid #ddd;
}

/* Title */
.ar-comments-title {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

/* Comment List */
.ar-comment-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ar-comment-list li.ar-comment {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #eee;
}

/* Avatar */
.ar-comment-list li.ar-comment .ar-comment-avatar img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Comment Text */
.ar-comment-list li.ar-comment .ar-comment-content {
  flex: 1;
}

/* Author & Date */
.ar-comment-author {
  font-weight: bold;
  margin-bottom: 0.25em;
}

.ar-comment-date {
  color: #a8a8a8;
  margin-bottom: 0.5em;
}

/* Moderation Notice */
.ar-comment-moderation {
  font-style: italic;
  color: #a00;
  margin: 0.5em 0;
}

/* Reply Link */
.ar-comment-reply a {
  font-size: 0.85rem;
  color: var(--ar-accent);
  text-decoration: none;
}
.ar-comment-reply a:hover {
  color: var(--ar-heading);
}

/* ───────── Comment Form ───────── */
.ar-comment-form {
  margin-top: 2rem;
}

.ar-comment-form input,
.ar-comment-form textarea {
  width: 100%;
  padding: 0.75rem;
  margin-bottom: 1rem;
  border: 1px solid #e5e5e5;
  border-radius: 1rem;
}

.ar-comment-submit {
  padding: 0.5rem 1rem;
  background-color: var(--ar-accent);
  color: #fff;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
}

.ar-comment-submit:hover {
  background-color: var(--ar-heading);
}/* Override WP’s default full-width submit */
.ar-comment-form input[type="submit"] {
  background-color: var(--ar-accent) !important;
  color: #fff !important;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  width: auto !important;
  float: right;
  display: inline-block;
  cursor: pointer;
}

/* Hover state */
.ar-comment-form input[type="submit"]:hover {
  background-color: var(--ar-heading) !important;
}
.fa-solid, .fas {
    font-weight: 900;
    color: var(--ar-accent);
}
.fa-solid, .fas:hover {
    font-weight: 900;
    color: var(--ar-accent) !important;
}
/* ───────── AR Search Form ───────── */

.ar-search-wrapper {
  position: relative;
  display: inline-block;
}

/* Force the overlay to cover the viewport, no matter what */
.ar-search-overlay {
  position: fixed !important;
  inset: 0 !important;            /* top:0; right:0; bottom:0; left:0; */
  width: 100% !important;
  height: 100% !important;
  background: rgba(0,0,0,0.95) !important;
  z-index: 100000 !important;     /* above everything else */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transform: translateY(-100%) !important;
  transition: opacity 0.4s ease, transform 0.4s ease !important;
  opacity: 0 !important;
  pointer-events: none !important; /* ignore clicks when hidden */
  z-index: 10001 !important; /* higher than #ar-mobile-menu's 999 */
}
.ar-search-wrapper.active .ar-search-overlay {
  transform: translateY(0) !important;
  opacity: 1 !important;
  pointer-events: auto !important; /* accept clicks now */
}


/* ───────── Close Button ───────── */
.ar-search-overlay .ar-search-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  color: #fff;
  font-size: 1.75rem;
  cursor: pointer;
}
.ar-search-overlay .ar-search-close i {
  pointer-events: none;
}

/* ───────── Fullscreen Form ───────── */
.ar-search-form-fullscreen {
  display: flex;
  align-items: center;
  background: transparent;
}

/* Input: transparent bg, bottom border only */
.ar-search-input {
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--ar-accent);
  color: #fff;
  padding: 0.5rem 0;
  font-size: 2rem;
  width: 60vw;
  max-width: 500px;
}

.ar-search-input::placeholder {
  color: rgba(255,255,255,0.7);
}
/* Remove default focus outline/box-shadow on the search input */
.ar-search-input:focus {
  outline: none;
  box-shadow: none;
  border-bottom-color: var(--ar-accent);
}

/* Prevent Chrome’s autofill yellow/blue background flicker */
.ar-search-input:-webkit-autofill,
.ar-search-input:-webkit-autofill:focus,
.ar-search-input:-webkit-autofill:hover {
  -webkit-box-shadow: 0 0 0px 1000px rgba(0,0,0,0.8) inset !important;
  -webkit-text-fill-color: #fff !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* Submit icon: white */
.ar-search-submit-fullscreen {
  background: none;
  border: none;
  margin-left: 0.75rem;
  color: #fff;
  font-size: 2rem;
  cursor: pointer;
}
.ar-search-submit-fullscreen i {
  pointer-events: none;
}
/* Remove background, border and box-shadow from the search icon button */
.ar-search-icon {
    display: none;
  background: transparent !important;
  border: none            !important;
  box-shadow: none        !important;
  padding: 0              !important; /* optional: remove extra padding */
}

/* If Bootstrap’s .btn class is applied */
.ar-search-icon.btn {
  background: none !important;
  border: none     !important;
}

/* Ensure the icon color stays */
.ar-search-icon i {
  color: inherit;
}
/* ───────── Mobile search button styling ───────── */
@media (max-width: 991.98px) {
  /* Target the search button inside your mobile form */
  .ar-search-form-mobile .btn {
    background: transparent !important;          /* no fill */
    border: 1px solid var(--ar-heading) !important; /* heading color border */
    color: var(--ar-heading) !important;         /* icon color */
  }

  /* On hover, you can switch to accent if you like */
  .ar-search-form-mobile .btn:hover {
    background: transparent !important;
    border-color: var(--ar-accent) !important;
    color: var(--ar-accent) !important;
  }

  /* Remove any default focus glow */
  .ar-search-form-mobile .btn:focus {
    box-shadow: none !important;
  }
}
/* Apply the same “no outline + accent bottom‐border” on mobile search input */
.ar-search-input:focus,
.ar-search-form-mobile .form-control:focus {
  outline: none !important;
  box-shadow: none !important;

  /* if your mobile input only has a full border, tint the whole border */
  border-color: var(--ar-accent) !important;
}


/* ───────── Top Bar styling ───────── */
.top-bar {
  background-color: var(--ar-topbar-bg) !important;
  color:            var(--ar-topbar-text) !important;
  border-bottom: 1px solid rgb(255 255 255 / 23%);
  font-size: 14px;
}

/* links and icons inside top-bar */
.top-bar a,
.top-bar i,
.top-bar svg {
  color: var(--ar-topbar-text) !important;

}

/* Columns inherit the text color */
.top-bar .top-bar-column {
  color: var(--ar-topbar-text) !important;
}

/* Mobile: stack and center all top‐bar columns */
/* Stack & center Top Bar columns on mobile */
@media (max-width: 767.98px) {
  .top-bar .top-bar-col {
    justify-content: center !important; /* flex children to center */
    text-align: center !important;      /* text inside to center */
  }
}
@media (min-width: 768px) {
  .top-bar .top-bar-col:nth-child(3) {
    justify-content: flex-end !important;
  }
}


.btn-outline-secondary:hover{
   background-color: transparent;
   border-color: var(--ar-accent) !important;
    
}
/* ───────── 404 Page ───────── */
.ar-404-page {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.ar-404-title {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: var(--ar-heading);
}

.ar-404-message {
  font-size: 1.125rem;
  color: var(--ar-paragraph);
}

.ar-404-page .ar-btn-readmore {
  display: inline-flex;
  align-items: center;
  padding: 0.75rem 1.5rem;
  border: 1px solid var(--ar-accent);
  border-radius: .25rem;
  background: transparent;
  color: var(--ar-accent);
  text-decoration: none;
  transition: background-color .3s, color .3s;
}

.ar-404-page .ar-btn-readmore:hover {
  background: var(--ar-accent);
  color: #fff;
}

#sidebar-blog .widget .tagcloud a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid;
    border-image-source: linear-gradient(to right, rgba(168, 168, 168, 0) 0%, rgba(168, 168, 168, 1) 50%, rgba(168, 168, 168, 0) 100%);
    border-image-slice: 1;
    color: var(--ar-heading);
    font-size: 16px !important;
    padding-left: 30px;
    font-weight: 500;
}
#sidebar-blog .widget .tagcloud a:hover {
    color: var(--ar-accent);
}
.tag-link-count{
    color: var(--ar-paragraph);
    font-weight: 300;
}


/* Contact Form Field Styling for AR Theme */
.ar-contact-form {
  position: relative; /* ensure context for alignment */
}
.ar-contact-form input {
    width: 99%;
}

.ar-contact-form textarea {
    max-width: 100%;
    width: 100%;
}

.ar-contact-form label {
    margin-bottom: .5rem;
    display: block;
    color: var(--ar-heading, #012B43);
}

/* Button Row Flexbox: aligns button right */
.ar-contact-form .ar-btn-row {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin-top: 1.5rem;  /* spacing above button, optional */
}

/* Make button 25% width and right-aligned on desktop */
.ar-contact-form .ar-btn-submit,
.ar-contact-form .wp-block-button__link,
.ar-contact-form button[type="submit"] {
    width: 25%;
    min-width: 140px;
    max-width: 240px;
    background-color: var(--ar-accent, #0d6efd) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 1rem !important;
    padding: 0.5rem 2rem !important;
    font-weight: 500 !important;
    transition: background .2s !important;
    opacity: 1 !important;
    filter: none !important;
    margin-left: auto;    /* push it right inside flex */
    display: inline-block;
    text-align: center;
}

/* Hover effect only when not disabled */
.ar-contact-form .ar-btn-submit:not([disabled]):hover,
.ar-contact-form .wp-block-button__link:not([disabled]):hover,
.ar-contact-form button[type="submit"]:not([disabled]):hover {
    background: var(--ar-heading, #012B43) !important;
    color: #fff !important;
    opacity: 1 !important;
    filter: none !important;
}

/* Responsive for mobile: 100% width and full row */
@media (max-width: 767.98px) {
    .ar-contact-form .ar-btn-row {
        justify-content: center !important;
    }
    .ar-contact-form .ar-btn-submit,
    .ar-contact-form .wp-block-button__link,
    .ar-contact-form button[type="submit"] {
        width: 100% !important;
        min-width: 0;
        max-width: none;
        margin-left: 0;
    }
    .ar-contact-form .wp-block-columns {
        flex-direction: column !important;
    }
    .ar-contact-form .wp-block-column {
        width: 100% !important;
        margin-bottom: 1rem;
    }
}