/* Rounded Corners - Cohesive Design System */
/* This file applies consistent rounded corners to all square elements for a more modern, cohesive feel */

:root {
  /* Define consistent border-radius values */
  --radius-small: 8px;
  --radius-medium: 12px;
  --radius-large: 16px;
  --radius-xl: 20px;
  --radius-pill: 50px;
  --radius-circle: 50%;
}

/* ========================================
   FORM ELEMENTS
   ======================================== */

/* Text inputs, textareas, and select boxes */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
select,
textarea {
  border-radius: var(--radius-small) !important;
}

/* Checkboxes - keep slightly rounded */
input[type="checkbox"] + label:before {
  border-radius: 4px !important;
}

/* Radio buttons - keep circular */
input[type="radio"] + label:before {
  border-radius: var(--radius-circle) !important;
}

/* ========================================
   BUTTONS
   ======================================== */

/* All buttons get pill-shaped design for modern look */
input[type="submit"],
input[type="reset"],
input[type="button"],
button,
.button {
  border-radius: var(--radius-pill) !important;
}

/* Small buttons */
input[type="submit"].small,
input[type="reset"].small,
input[type="button"].small,
button.small,
.button.small {
  border-radius: var(--radius-pill) !important;
}

/* Large buttons */
input[type="submit"].large,
input[type="reset"].large,
input[type="button"].large,
button.large,
.button.large {
  border-radius: var(--radius-pill) !important;
}

/* ========================================
   CARDS & CONTAINERS
   ======================================== */

/* Box elements */
.box {
  border-radius: var(--radius-medium) !important;
}

/* Content sections */
.content,
#wrapper > .main > .inner > .content {
  border-radius: var(--radius-large) !important;
}

/* Posts/Article cards */
.posts > div > article {
  border-radius: var(--radius-medium) !important;
  overflow: hidden;
}

/* Post images */
.posts > div > article > .image {
  border-radius: var(--radius-medium) var(--radius-medium) 0 0 !important;
  overflow: hidden;
}

/* ========================================
   IMAGES
   ======================================== */

/* General images */
.image img {
  border-radius: var(--radius-small);
}

/* Main/featured images */
.image.main img,
.image.fit img {
  border-radius: var(--radius-medium);
}

/* Circular images (like team photos) */
.spotlight > .image img,
.image.circle img {
  border-radius: var(--radius-circle) !important;
}

/* ========================================
   NAVIGATION & DROPDOWNS
   ======================================== */

/* Dropdown menus */
.dropotron {
  border-radius: var(--radius-medium) !important;
}

/* Navigation panel */
#navPanel {
  border-radius: 0 !important; /* Keep full height panels square */
}

/* ========================================
   TABLES
   ======================================== */

/* Table cells - subtle rounding for alt tables */
table.alt tbody tr td:first-child {
  border-top-left-radius: var(--radius-small);
  border-bottom-left-radius: var(--radius-small);
}

table.alt tbody tr td:last-child {
  border-top-right-radius: var(--radius-small);
  border-bottom-right-radius: var(--radius-small);
}

/* ========================================
   CODE BLOCKS
   ======================================== */

code {
  border-radius: var(--radius-small) !important;
}

pre code {
  border-radius: var(--radius-medium) !important;
}

/* ========================================
   SPECIAL SECTIONS
   ======================================== */

/* Banner sections */
#banner .content.secondary {
  border-radius: var(--radius-large);
}

/* Feature cards */
#banner .features > section {
  border-radius: var(--radius-medium);
  padding: 2rem;
}

/* Tab panels */
#wrapper > .main > .tabs > .titles > .title {
  border-radius: var(--radius-medium) var(--radius-medium) 0 0;
}

/* Footer sections */
#footer {
  border-radius: 0; /* Keep footer full width */
}

/* ========================================
   MISSION PAGE SPECIFIC
   ======================================== */

/* Mission statement card */
.mission-statement {
  border-radius: var(--radius-xl) !important;
}

/* Commitment cards */
.commitment-card {
  border-radius: var(--radius-large) !important;
}

/* Value cards */
.value-card {
  border-radius: var(--radius-xl) !important;
}

/* Philosophy highlight */
.philosophy-highlight {
  border-radius: var(--radius-medium) !important;
}

/* ========================================
   CONTACT FORM
   ======================================== */

/* Form messages */
.form-message {
  border-radius: var(--radius-small) !important;
}

/* ========================================
   SLIDESHOW/SWIPER
   ======================================== */

/* Swiper container */
.swiper {
  /* border-radius: var(--radius-large); */
  overflow: hidden;
}

/* Swiper navigation buttons */
.swiper-button-prev,
.swiper-button-next {
  border-radius: var(--radius-circle) !important;
}

/* Swiper pagination bullets */
.swiper-pagination-bullet {
  border-radius: var(--radius-circle) !important;
}

/* ========================================
   ICONS
   ======================================== */

/* Major icons with circles */
.icon.major:before {
  border-radius: var(--radius-circle) !important;
}

/* Commitment icons */
.commitment-icon {
  border-radius: var(--radius-circle) !important;
}

/* Value number badges */
.value-number {
  border-radius: var(--radius-circle) !important;
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

/* Add these utility classes for manual control */
.rounded-none {
  border-radius: 0 !important;
}

.rounded-small {
  border-radius: var(--radius-small) !important;
}

.rounded-medium {
  border-radius: var(--radius-medium) !important;
}

.rounded-large {
  border-radius: var(--radius-large) !important;
}

.rounded-xl {
  border-radius: var(--radius-xl) !important;
}

.rounded-pill {
  border-radius: var(--radius-pill) !important;
}

.rounded-circle {
  border-radius: var(--radius-circle) !important;
}

/* ========================================
   HOVER EFFECTS
   ======================================== */

/* Add smooth transitions for interactive elements */
.box,
.commitment-card,
.value-card,
.posts > div > article,
button,
.button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  transition: border-radius 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */

@media screen and (max-width: 736px) {
  /* Slightly reduce border radius on mobile for better space usage */
  :root {
    --radius-small: 6px;
    --radius-medium: 10px;
    --radius-large: 14px;
    --radius-xl: 18px;
  }

  /* Mission statement on mobile */
  .mission-statement {
    border-radius: var(--radius-large) !important;
  }
}

@media screen and (max-width: 480px) {
  /* Further reduce on very small screens */
  :root {
    --radius-small: 4px;
    --radius-medium: 8px;
    --radius-large: 12px;
    --radius-xl: 16px;
  }
}

/* ========================================
   ACCESSIBILITY
   ======================================== */

/* Ensure focus states are visible with rounded corners */
*:focus {
  outline-offset: 2px;
}

input:focus,
textarea:focus,
select:focus,
button:focus,
.button:focus {
  outline: 2px solid var(--lightblue);
  outline-offset: 2px;
  border-radius: inherit;
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
  /* Reduce border radius for print */
  * {
    border-radius: 0 !important;
  }

  /* Keep essential rounded elements */
  .image.circle img,
  input[type="radio"] + label:before {
    border-radius: 50% !important;
  }
}