/**
Theme Name: Campfire X
Author: Brilliant Logic
Author URI: https://brilliantlogic.com.au
Description: Astra Child theme for Campfire X
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: campfire-x
Template: astra
*/
a {
    text-decoration: none!important;
}

a:hover{
    text-decoration: underline!important;
}
.circle-frame {
  /* 1. Create the circular container */
  width: 250px;
  height: 250px;
  border-radius: 50%;
  
  /* 2. Choose a background color for the 'empty' space */
  background-color: #fff; 
  
  /* 3. Center the image inside */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;

  /* 4. The even drop shadow */
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
  border: 0px solid #ddd;
}

.circle-frame img {
  /* 5. The Magic Sauce: "contain" shows the WHOLE image */
  width: 60%;  /* Leaving a little 'breathing room' looks better */
  height: 60%;
  object-fit: contain; 
}

.circle-frame:hover {
  box-shadow: 0 0 30px 10px rgba(228, 160, 37, 0.4);
  transform: translateY(-5px);
}

.responsive-circle {
  /* 1. Responsive Sizing */
  width: 100%;           /* Fills the parent container's width */
  max-width: 250px;      /* Prevents it from getting too huge on desktop */
  aspect-ratio: 1 / 1;   /* The secret to a perfect circle on any screen */
  
  /* 2. The Shape & Background */
  border-radius: 50%;
  background-color: #fff; /* Padding color for non-cropped images */
  margin: 20px auto;     /* Centers the circle itself on the page */
  
  /* 3. Centering the Image */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;

  /* 4. The Glow/Shadow */
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  border: 0px solid #eeeeee;
}
.responsive-circle a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  text-decoration: none; /* Removes the underline if the link accidentally creates one */
}

.responsive-circle a img {
  all: revert; /* Undoes styles inherited from the link */
  width: 60%;
  height: 60%;
  object-fit: contain;
  flex-shrink: 0;
}

/* We target the image inside your circle, specifically when it's an SVG */
.responsive-circle a img[src$=".svg"],
.responsive-circle img[src$=".svg"] {
    width: 60%;
    height: 60%;
    object-fit: contain;
}

/* 6. Mobile-Specific Adjustments */
@media (max-width: 480px) {
  .responsive-circle {
    max-width: 90px; /* Sized down for phones */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Lighter shadow for small screens */
  }
}

/* Hover effect for devices with a mouse */
@media (hover: hover) {
  .responsive-circle:hover {
    transform: scale(1.05);
    box-shadow: 0 0 30px 10px rgba(228, 160, 37, 0.4);
  }
}