/*
Theme Name: Indigo Child
Theme URI: https://www.wpzoom.com/themes/indigo
Template: wpzoom-indigo
Description: This is a simple Child Theme.
Author: WPZOOM
Author URI: https://www.wpzoom.com
Version: 1.0
*/

/* Write your custom CSS code below or add it in the Customizer > Additional CSS */

/* HP RECENT POSTS STYLING */

.recent-post-section-title {
  padding-top: 1rem;
}

.recent-posts-list {
  list-style: none;
  padding-left: 0;
  padding-top: 2rem;
  margin: 0;
}

.recent-post-item {
  margin-bottom: 1.2rem;
  border-bottom: 1px solid #eee;
  padding-bottom: 1rem;
}

.recent-post-title {
  font-size: 1.5rem;
  margin: 0 0 0.5rem;
}

.recent-post-title a {
  text-decoration: none;
  color: #222;
}

.recent-post-title a:hover {
  text-decoration: underline;
}

.recent-post-meta {
  font-size: 1rem;
  color: #666;
}

.post-category {
  font-weight: 600;
  margin-right: 0.5rem;
}

.post-date {
  color: #999;
}

/* all posts link styling */
.all-posts-link a {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  border-radius: 0px;
  font-weight: bold;
  color: #b60038;
  border: 1px solid #b60038;
  text-decoration: none;
  transition: all 0.3s ease;
}

.all-posts-link a:hover {
  background-color: #e40046;
  color: #fff;
  border-color: #e40046;
}


/* CUSTOM HEADER LINKS FORMATTING */
/* Flex layout for the header container */
.custom-header-links {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

/* Style the menu list */
.custom-header-links ul {
  display: flex;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 1.5rem;
}

.custom-header-links li {
  display: flex;
  align-items: center;
  position: relative;
  margin: 0;
  padding: 0 0.75rem;
}

/* Add separator between list items */
/* cannot get the separator to centre itself, so leaving it blank */
.custom-header-links li:not(:last-child)::after {
  content: " ";
  color: #aaa;
  display: inline-block;
  margin: 0 0.6rem; /* equal spacing on both sides */
}


/* Link styling */
.custom-header-links a {
  color: #fff;
  text-decoration: none;
}

.custom-header-links a:hover {
  text-decoration: underline;
}

/* burger menu correctly hide/show on deskt/mob */

@media (max-width: 768px) {
  .custom-header-links {
    max-height: 0;
    overflow: hidden;
    flex-direction: column;
    align-items: flex-start;
    background: #111;
    padding: 0;
    margin-top: 0.5rem;
    border-radius: 4px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: max-height 0.4s ease, padding 0.3s ease;
  }

  .custom-header-links.show {
    max-height: 1000px; /* ensure this is taller than the full menu height */
    padding: 1rem;
  }

  .custom-header-links ul {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    padding: 0;
    margin: 0;
  }

  .custom-header-links li {
    width: 100%;
    padding: 0.5rem 0;
    text-align: left;
  }

  .custom-header-links li::after {
    display: none; /* remove spacing dots/separators on mobile */
  }

  .custom-header-links a {
    display: inline-block;
    width: 100%;
    font-size: 1.4rem;
    color: #fff;
    text-decoration: none;
    font-weight: 500;
  }

  .custom-header-links a:hover {
    text-decoration: underline;
  }

  .custom-header-links .sb-search {
    margin-top: 1rem;
    width: 100%;
  }

  .sb-search input[type="text"] {
    width: 100%;
    padding: 0.5rem;
    font-size: 1.2rem;
  }

  .header-menu-toggle {
    display: inline-block;
    background: none;
    border: none;
    color: #fff;
    font-size: 2rem;
    margin-left: 1rem;
    cursor: pointer;
    padding-top: 3rem; /*align better w icons on right */
  }

  .dashicons-menu {
    font-size: 24px;
    line-height: 1;
  }
}


/* Desktop */
@media (min-width: 769px) {
  .header-menu-toggle {
    display: none;
  }
}


/* Ensure the search box aligns properly */
.custom-header-links .sb-search {
  display: flex;
  align-items: center;
}

/* New flex container for home icon + custom links */
#navbar-top.navbar-top-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem; /* space between icon and links */
  height: 60px;
}



/* TOP HEADER UTILITIES STYLE RULES */
/* ie social media btns and lang switcher */

.header-utilities {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem; /* space between language switcher and social icons */
  margin-top: 1rem;
}

.header_social {
  display: flex;
  align-items: center;
}

/* hide social btns on mobile */

@media (max-width: 768px) {
  .header_social {
    display: none;
  }
}


/* CUSTOM LANGUAGE SWITCHER STYLES */

/* ensure the options are able to be rendered in the font */
.lang-current,
.lang-dropdown a {
  font-family: "Oswald", "Noto Sans", "Segoe UI", "Helvetica Neue", sans-serif;
}

.language-switcher {
  position: relative;
  margin-right: 1.5rem;
  display: inline-block;
  z-index: 10;
}

.lang-current {
  background: #333;
  color: white;
  padding: 0.5rem 1rem;
  font-size: 1.2rem;
  border: none;
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.lang-current:hover {
  background: #444;
}

.lang-dropdown {
  display: none;
  position: absolute;
  top: 110%;
  left: 0;
  background: #fff;
  color: #000;
  list-style: none;
  padding: 0.5rem 0;
  margin: 0;
  border-radius: 4px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  min-width: 120px;
}

.lang-dropdown li {
  padding: 0;
}

.lang-dropdown li a {
  display: block;
  padding: 0.5rem 1rem;
  text-decoration: none;
  color: #000;
}

.lang-dropdown li a:hover {
  background: #f0f0f0;
}

.lang-dropdown.show {
  display: block;
}


/* CSS FOR ADDING ICONS TO TOP MENU */
/* done with CSS because the top menu is a dynamic polylang obj */

.custom-header-links a::before{
  font-family: 'Dashicons';
  margin-right: 0.5rem;
  font-size: 1.2em;
  display: inline-block;
  position: relative;
  top: 2px; 
}




/* Home icon link style */
.custom-header-links .header-link-home a::before {
  font-family: 'Dashicons';
  content: '\f102'; /* dashicons-admin-home */
}



/* About us icon */
.custom-header-links .header-link-about-us a::before {
  font-family: 'Dashicons';
  content: '\f14c'; /* dashicons-info-outline */
}


/* RSF Main Site icon */
.custom-header-links .header-link-rsf-main a::before {
  font-family: 'Dashicons';
  content: '\f11f'; /* admin-site-alt3 */
}

/* Contact Us icon */
.custom-header-links .header-link-contact-us a::before {
  font-family: 'Dashicons';
  content: '\f466'; /* email-alt */
}



/* LOGO AND TAGLINE TWEAKS */

/* default banner height + logo size (desktop/tablet) */

.custom-logo-banner-wrapper .custom-logo-overlay img {
    max-width: 50% !important;
}

/* mob adjustments */
@media (max-width: 600px) {

    .custom-logo-banner-wrapper {
        height: 180px !important; /* a bit shorter for mobile */
    }

    .custom-logo-banner-wrapper img {
        object-position: center top; /* shows top area of banner (optional) */
    }

    .custom-logo-banner-wrapper .custom-logo-overlay img {
        max-width: 120% !important;   /* MOBILE LOGO SIZE */
    }

}

/* very small screens */
@media (max-width: 400px) {
    .custom-logo-banner-wrapper .custom-logo-overlay img {
        max-width: 140% !important;   /* TINY SCREEN logo size */
    }
}



/* ====== SECTION TITLES ====== */
.section-title {
  font-size: 2rem;
  text-align: center;
  margin: 2rem 0 1.5rem;
  font-weight: bold;
}


/* ====== CATEGORY GRID ====== */
.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  justify-content: center; 
  gap: 1rem;
  padding: 0 1rem;
  margin: 0 auto;
}

.category-box-inner {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 1rem;
  color: #fff;
  position: relative;
  border-radius: 0px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background-color: #333; /* fallback */
}

.category-box-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 6px;
}

.category-title {
  position: relative;
  z-index: 1;
  font-weight: bold;
  text-align: center;
  background: rgba(0.1, 0.1, 0.1, 0.5);
  padding: 0.5rem 1rem;
  border-radius: 0px;
}

.category-box:hover .category-box-inner {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  background-color: #222;
}

.category-box:hover .category-title {
  background: rgba(0.1, 0.1, 0.1, 0.7);
  transform: scale(1.05);
}


/* ====== NEW ROW LAYOUTS ====== */

/* Two-column row for focus widgets */
.focus-widgets-row.two-columns {
  display: flex;
  justify-content: center; /* centre them in the row */
  gap: 3.5rem; /* space between */
  margin: 4rem 0;
}

.focus-widgets-row .focus-widget-box {
  flex: 0 1 500px;   /* don't stretch beyond x px */
  max-width: 500px; /* keep them smaller */
}

.focus-widgets-row .focus-post-content-overlay {
  aspect-ratio: 4 / 1;  
  width: 100%;
  border-radius: 0px;
}

.focus-widget-box {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.focus-widget-box:hover {
  transform: scale(1.05);
  box-shadow: 0 0px 20px rgba(0, 0, 0, 0.3);
}


/* Mobile adjustments */
@media (max-width: 768px) {
  .focus-widgets-row.two-columns {
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    margin: 2rem 0;
  }

  .focus-widgets-row .focus-widget-box {
    flex: unset;
    width: 90%;
    max-width: 400px; /* prevent giant tiles */
  }

  .focus-widgets-row .focus-post-content-overlay {
    aspect-ratio: 2 / 1; /* switch to square on mobile */
  }
}

/* Toolbox row (three columns) */
.toolbox-row.three-columns {
  display: flex;
  gap: 1.5rem;
  margin: 2rem 0;
  align-items: flex-start;
}

.toolbox-row .focus-widget-box,
.toolbox-row .instagram-widget-box {
  flex: 1;
  min-width: 0;
}


/* ====== FOCUS WIDGETS ====== */

.focus-post-widget {
  display: block;
  border-radius: 0px;
  overflow: hidden;
  text-decoration: none;
  width: 100%;
}

.focus-post-content-overlay {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  aspect-ratio: 1 / 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.focus-post-text {
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 1rem;
  text-align: center;
  border-radius: 0px;
  max-width: 90%;
}

.focus-post-title {
  font-size: 1.6rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.focus-post-excerpt {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
}

.focus-post-readmore {
  font-size: 1.2rem;
  font-weight: bold;
  color: #fff;
  text-decoration: underline;
}

.focus-post-readmore:hover {
  text-decoration: none;
}


/* ====== INSTAGRAM WIDGET ====== */
.instagram-widget-box {
  padding-top: 3rem;
}

.instagram-widget-box iframe,
.instagram-widget-box .instagram-media {
  max-width: 100% !important;
  width: 100% !important;
}

/* Hide title 'instagram' */
.zoom-instagram-widget .title {
  visibility: hidden;
  display: none;
}

/* button edits - the !importants are required to override the insta widget's injected styles */
/* base state: outline button with dark pink text */
.zoom-instagram-widget__follow-me a {
  background-color: transparent !important;
  color: #b60038 !important;
  border: 1px solid #b60038 !important;
  padding: 0.6rem 1.2rem;
  border-radius: 0px;
  font-weight: bold;
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s ease;
}

/* hover/active: filled button with bright pink background + white text */
.zoom-instagram-widget__follow-me a:hover,
.zoom-instagram-widget__follow-me a:focus {
  background-color: #e40046 !important;
  color: #fff !important;
  border-color: #e40046 !important;
  text-decoration: none !important;
}



/* ====== RESPONSIVE ====== */
@media (max-width: 768px) {
  .focus-widgets-row.two-columns,
  .toolbox-row.three-columns {
    flex-direction: column;
    gap: 1.5rem;
  }

  .focus-widget-box,
  .instagram-widget-box {
    width: 100%;
  }
}


/* RECENT POSTS (AT BOTTOM OF PAGE) STYLING */
/* can be toggled on in the WP admin customise interface */

.recent-posts .post-thumb {
  aspect-ratio: 16 / 10; 
  overflow: hidden;
  border-radius: 6px; /* optional rounded corners */
  position: relative;
}

.recent-posts .post-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}




/* STYLE FOR ALL POSTS CUSTOM PAGE */

.posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem; /* space between posts */
}

.posts-grid .grid-item {
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
}

@media (max-width: 1024px) {
  .posts-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .posts-grid {
    grid-template-columns: 1fr;
  }
}

/* ALL POSTS FILTER MENU STYLING */
/* Container styling */
.all-posts-filters {
  margin: 2rem 0;
  padding: 1rem 1.5rem;
  background: #fff;
  border-radius: 0px;
  border: 1px solid #eee;
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}

/* Form layout */
.all-posts-filters form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem 2rem;
  justify-content: center;
}

/* labels */
.all-posts-filters label {
  font-weight: 600;
  margin-bottom: 0.3rem;
  white-space: nowrap;
  color: #333;
}

/* inputs + selects styled similar to lang switcher */
.all-posts-filters select,
.all-posts-filters input[type="text"],
.all-posts-filters input[type="search"] {
  font-size: 1rem;
  padding: 0.45rem 0.9rem;
  border-radius: 0px;
  border: 1px solid #ccc;
  background: #f7f7f7;
  color: #333;
  min-width: 180px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.all-posts-filters select:hover,
.all-posts-filters input[type="text"]:hover,
.all-posts-filters input[type="search"]:hover {
  background: #f0f0f0;
}

.all-posts-filters select:focus,
.all-posts-filters input[type="text"]:focus,
.all-posts-filters input[type="search"]:focus {
  outline: none;
  border-color: #b60038;
  box-shadow: 0 0 0 2px rgba(182,0,56,0.15);
  background: #fff;
}


/* Submit + reset buttons */
.all-posts-filters button[type="submit"],
.all-posts-reset-button {
  padding: 0.5rem 1rem;
  background-color: #b60038;
  border: none;
  border-radius: 0;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.3s ease;
}

.all-posts-filters button[type="submit"]:hover,
.all-posts-reset-button:hover {
  background-color: #e40046;
}

/* alignment + sizing for filters */
.all-posts-filters form {
  align-items: center;
}

/* selects: bigger text, visually centred */
.all-posts-filters select {
  font-size: 1.4rem;
  line-height: 1.3;          /* helps vertical centring */
  padding: 0.55rem 1rem;     /* equal-ish top/bottom */
  box-sizing: border-box;
}

/* (Optional) space between label and its select */
.all-posts-filters label + select {
  margin-left: 0.35rem;
}

/* Collapsible panel base */
.all-posts-filters-panel {
  overflow: hidden;
  transition: max-height 0.3s ease;
  max-height: none; /* desktop default: fullt open */
}

/* hide filter toggle by default (desktop) */
.all-posts-filters-toggle {
  display: none;
  gap: 0.5rem;
}

/* rotate arrow when expanded*/
.all-posts-filters-toggle[aria-expanded="true"] .all-posts-filters-toggle-icon {
  transform: rotate(180deg);
  transition: transform 0.2s ease;
}


/* Mobile responsiveness */
@media (max-width: 768px) {
  .all-posts-filters {
    padding: 0.75rem 1rem;
  }

  /* Show the toggle button */
  .all-posts-filters-toggle {
    display: flex;
    width: 100%;
    justify-content: center;
    text-align: center;
    padding: 0.75rem 1rem;
    border: none;
    border-radius: 0;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
  }

  /* Mobile: collapsed by default */
  .all-posts-filters-panel {
    max-height: 0;
  }

  /* Mobile: expanded when .is-open is present */
  .all-posts-filters-panel.is-open {
    max-height: 1000px; /* enough space for all filters */
  }

  .all-posts-filters form {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .all-posts-filters label {
    margin-right: 0;
    margin-bottom: 0.2rem;
  }

  .all-posts-filters label + select {
    margin-left: 0;
    width: 100%;
  }

  .all-posts-filters select,
  .all-posts-filters input[type="text"],
  .all-posts-filters input[type="search"] {
    width: 100%;
  }

  .all-posts-filters button[type="submit"],
  .all-posts-reset-button {
    width: 100%;
    text-align: center;
  }
}





/* single post read more category box styling */

.post-category-box {
  margin-top: 2rem;
  padding: 1rem;
  border: 1px solid #b60038;
  border-radius: 8px;
  text-align: center;
  background: #f9f9f9;
  display: inline-block;
}

.post-category-box a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  font-weight: bold;
  color: #b60038;
  text-decoration: none;
}

.post-category-box a:hover {
  color: #e40046;
}

.post-category-thumb {
  width: 40px;   /* adjust size */
  height: 40px;  /* keep square */
  object-fit: cover;
  border-radius: 4px;
}




/* OVERRIDING BITS OF INDIGO NOT CUSTOMISABLE IN ADMIN PANEL */
div.navigation a:hover {
  color: #e40046 !important; }


.single .cat-links a:hover,
.blog .cat-links a:hover  {
  color: #e40046 !important; }