/*  I. Universal and Default Rules (525px < DEFAULT SIZE < 1025px) */

html {
  box-sizing: border-box;
  font-size: 16px;
}
*,
*::before,
*::after {
  box-sizing: border-box;
  overflow-x: visible;
  overflow-y: visible;
}

/* I-0. rules to help draft page
* {outline: 1px solid red; 
/*  I-i. Styles for Links, , Lists, Headings  */

a:link {
  color: rgb(25, 100, 100);
  font-weight: 400;
  text-decoration: none;
}

a:visited {
  color: inherit;
}


.brand-link {
  display: block;             /* makes the whole area clickable */
  text-decoration: none;
  color: inherit;
}
.brand-link:hover,
.brand-link:focus-visible {
  text-decoration: none;      /* keep it clean on hover/focus */
  outline: none;
  cursor: pointer;
}

/* /* Stacked primary nav under subtitle */
.main-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(14px, 3vw, 36px);
  margin-top: 8px;
  margin-bottom: clamp(12px, 3vw, 24px);
  font-family: 'Rajdhani';
  font-size: clamp(16px, 2vw, 24px);
  letter-spacing: 0.8px;
  flex-wrap: wrap;               /* prevents bunching at narrow widths */
}

.main-nav a {
  text-decoration: none;
  color: #E5472C;
  font-weight: 400;
  line-height: 1;                /* keeps click targets tidy */
}

.main-nav a.cta {
  color: #0F364E;
  font-weight: 500;
}

.main-nav a:hover,
.main-nav a:focus-visible {
  text-decoration: underline;
  outline: none;
}

/* Positioning for sub-menus */
.nav-item {
  position: relative;             /* so the sub-menu positions relative to this */
  display: -flex;        /* keeps link and its menu as one block */
  align-items: center;
  padding-bottom: 0px;         /* creates an overlap "bridge" */
}

.sub-menu {
  display: none;                  /* hidden by default */
  position: absolute;
  top: 100%;                      /* sits just below the Services link */
  left: 0;
  margin: 0;
  background: #f7f8fa;              /* or #f7f8fa to match your panels */
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 8px 0;
  min-width: 180px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  z-index: 999;                   /* keeps it above other content */
  transform: translateY(0);
}

/* Show sub-menu on hover */
.nav-item:hover .sub-menu,
.nav-item:focus-within .sub-menu {
  display: block;
}

.nav-item:hover .sub-menu {
  top: calc(100% - 6px);
}

/* Style the links inside */
.sub-menu li {
  list-style: none;
  margin: 0;
}

.sub-menu a {
  display: block;
  padding: 8px 16px;
  text-decoration: none;
  color: #0F364E;                  /* or red, depending on your palette swap */
  font-weight: 400;
  font-family: 'Rajdhani';
  font-size: 0.95em;
  white-space: nowrap;;
}

.sub-menu a:hover {
  background: #f7f8fa;
  color: #E5472C;
}

.has-sub { cursor: default; }


.h3 {
  margin-top: clamp(20px, 5vw, 50px);
  margin-bottom: clamp(15px, 4vw, 40px);
  font-family: 'Rajdhani';
  font-size: clamp(38px, 5.5vw, 52px);
  font-weight: bold;
  color: #0F364E;
  text-align: center;
  text-wrap: balance;
  line-height: 1.6em;
  letter-spacing: 0.5px;
  width: 100%;
  display: block;
}

/*h3-navy needs tweaking */

#h3-navy {
  margin-top: clamp(20px, 5vw, 50px);
  margin-bottom: clamp(15px, 4vw, 40px);
  font-family: 'Rajdhani';
  font-size: clamp(38px, 5.5vw, 52px);
  font-weight: bold;
  color: #0F364E;
  text-align: center;
  text-wrap: balance;
  line-height: 1.6em;
  letter-spacing: 0.5px;
  width: 100%;
  display: block;
}

#h3-navy-big {
  margin-top: clamp(20px, 5vw, 50px);
  margin-bottom: clamp(15px, 4vw, 40px);
  font-family: 'Rajdhani';
  font-size: clamp(44px, 6.5vw, 60px);
  font-weight: bold;
  color: #0F364E;
  text-align: center;
  text-wrap: balance;
  line-height: 1.6em;
  letter-spacing: 0.5px;
  width: 100%;
  display: block;
}

h4.header-mini {
  display: block;
  font-family: 'Rajdhani';
  color: #0F364E;
  font-weight: bold;
  font-size: clamp(22px, 3vw, 28px);
  border-radius: 24px;
  text-wrap: balance;
  text-align: center;
  line-height: 1.75em;
  width: 100%;
  letter-spacing: 1.2px; /* DELETE?  Not used on "Work" page for drop-down headers but looks good here... */ 
  margin-top: 10px;
  margin-bottom: 8px;
}

#subtitle {
  color: #0F364E;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 100;
  letter-spacing: 1.5px;
  word-spacing: 3px;
  text-transform: uppercase;
  margin-top: 5px;
  font-size: clamp(28px, 4vw, 55px);
  line-height: normal;
}

/*  I-ii. Styles for Containers*/

body {
  color: black;
  background-color: #fafafa;
  margin: 0 auto;
}

    .banner {
      display: flex;
      align-items: baseline;
      justify-self: center;
      justify-items: center;
      justify-content: center;
      gap: clamp(8px, 2vw, 25px);
      font-family: 'Rajdhani';
      letter-spacing: 1.5px;
      font-size: clamp(48px, 8vw, 110px);
      font-weight: bold;
      width: auto;
      line-height: 1;
      overflow-x: visible;
      color: #0F364E;
      padding-left: 10px;
      padding-right: 10px;
      margin-right: 10px;
      margin-bottom: 15px;
    }

    .mascot {
      display: inline-block;
      margin: 0;
      align-self: baseline;
      width: auto;
      vertical-align: middle;
      margin-top: 10px;
      overflow: hidden;
      height: clamp(2.2em, 4.5vw, 70px);
      border-radius: 20%;
    }

      p {
        padding-left: 30px;
        padding-right: 30px;
      }


  .bigbox {
  margin: 0 auto;
  padding: 0 10px;
  display: grid;
  grid-template-rows: repeat(1, 1fr);
  grid-template-columns: repeat(1, 1fr);
  max-width: 1400px;
  gap: 35px;
  }

    .box-main1 {
      margin: auto;
      font-family: 'Jost', 'Futura', sans-serif;
      font-weight: 300;
      font-size: clamp(16.5px, 2.75vw, 21px);
      line-height: 1.75em;
      text-align: left;
    }

    .box-main1 p {
      max-width: 900px;
      margin-bottom: 16px;
    }

    .service-card {
      flex: 1 1 calc(33.33% - 20px);
      max-width: 450px;
      min-width: 250px;
      min-height: auto;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      border-radius: 30px;
      padding: 24px;
      margin-bottom: 25px;
      background-color: white;
      text-align: center;
      text-wrap: balance;
      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12);
      border-left: 2px solid #0F364E;

    }

    .service-card:only-child {
      flex: 1 1 100%;
    }

    .service-card p {
      flex-grow: 0;
      flex-shrink: 1;
      flex-basis: auto;
      text-align: left;
      max-width: 90%;
      margin-left: auto;
      margin-right: auto;
      text-wrap: balance;
    }

    .section {
      margin-bottom: 60px;
    }

    #intro,
    #about {
      border-radius: 30px;
      padding: 20px;
      margin-bottom: 10px;
      justify-items: center;
    }

    #intro p,
    #about p,
    #outro p {
      max-width: clamp(500px, 75%, 850px);
      min-width: 280px;
      margin: 0 auto;
    }

    #outro {
      border-radius: 30px;
      padding: 20px;
      margin-bottom: 10px;
      justify-items: center;
    }

    #writing,
    #editing {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: stretch;
      gap: 20px;
      padding: 20px;
      border-radius: 30px;
      max-width: 1400px;
      margin: auto;
      width: auto;
    }

    #info {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: stretch;
      gap: 20px;
      padding: 40px 20px;  /* Extra padding for separation */
      background-color: #f7f8fa; /* Matches service cards */
      border-radius: 30px;
      margin-top: 60px; /* Creates a natural break from previous content */
    }
    
    .section-divider {
      width: 100%;
      height: 3px;
      background: #ddd;
      border-radius: 2px;
      margin-bottom: 25px;
    }

    .accent {
      color: #E5472C;
      font-weight: 600;
      font-size: clamp(17.5px, 2.85vw, 22.5px);
    }

    .info-card {
      flex: 1 1 300px; /* Slightly larger than service cards */
      max-width: 420px;
      min-width: 280px;
      min-height: 320px;
      height: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      background-color: white;
      border-radius: 30px;
      padding-left: 24px;
      padding-right: 24px;
      padding-top: 6px;
      padding-bottom: 6px;
      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12);
      border-top: 4px solid navy;
    }
    
     .info-card h4 {
        font-family: 'Rajdhani';
        font-size: clamp(22px, 3vw, 28px);
        font-weight: 600;
        color: navy;
        margin-bottom: 8px;
      }
    
      .info-card a {
        color: #E63946; /* Red for visibility */
        font-weight: bold;
        text-decoration: none;
        display: inline-block;
        text-align: center;
        line-height: 1.75em;
        font-size: clamp(18px, 2.75vw, 21px);
      }
      
      .info-card a:hover {
        text-decoration: underline;
      }
      
      /* Avatar in Contact Card */
      .avatar {
        width: clamp(140px, 15vw, 180px);
        height: clamp(140px, 15vw, 180px);
        border-radius: 50%;
        object-fit: cover;
        margin-top: 15px;
        margin-bottom: 5px;
        display: block;
        flex-shrink: 1;
        clip-path: circle(50%);
      }


    #outro {
      padding: 20px;
      margin-bottom: 10px;
      border-radius: 30px;
      margin: auto;
      width: auto;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: stretch;
      gap: 20px;
      min-width: 425px;
    }

  #footer {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: stretch;
      gap: 20px;
      padding: 40px 20px;  /* Extra padding for separation */
      background-color: #f7f8fa; /* Matches service cards */
      border-radius: 30px;
      margin-top: 60px; /* Creates a natural break from previous content */
    }
    
    .section-divider {
      width: 100%;
      height: 3px;
      background: #ddd;
      border-radius: 2px;
      margin-bottom: 25px;
    }

    .footer-card {
      flex: 1 1 300px; /* Slightly larger than service cards */
      max-width: 420px;
      min-width: 280px;
      min-height: 320px;
      height: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      background-color: white;
      border-radius: 30px;
      padding-left: 24px;
      padding-right: 24px;
      padding-top: 6px;
      padding-bottom: 6px;
      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12);
      border-top: 4px solid navy;
    }
    
     .footer-card h4 {
        font-family: 'Rajdhani';
        font-size: clamp(22px, 3vw, 28px);
        font-weight: 600;
        color: navy;
        margin-bottom: 8px;
      }
    
      .footer-card a {
        color: #E63946; /* Red for visibility */
        font-weight: bold;
        text-decoration: none;
        display: inline-block;
        text-align: center;
        line-height: 1.75em;
        font-size: clamp(18px, 2.75vw, 21px);
      }
      
      .footer-card a:hover {
        text-decoration: underline;
      }
      
  footer {
    text-align: center;
    margin-left: 40px;
    margin-right: 40px;
    margin-bottom: 30px;
    font-family: 'Rajdhani';
    font-weight: 500;
    font-size: clamp(16px, 3.5vw, 20px);
    color: navy;
    letter-spacing: 0.8px;
  }

/* BREAKPOINT NOTICE - MOBILE BELOW - - MOBILE BELOW - - MOBILE BELOW -
BREAKPOINT NOTICE - MOBILE BELOW - - MOBILE BELOW - - MOBILE BELOW - 
BREAKPOINT NOTICE - MOBILE BELOW - - MOBILE BELOW - - MOBILE BELOW - 
BREAKPOINT NOTICE - MOBILE BELOW - - MOBILE BELOW - - MOBILE BELOW - 
BREAKPOINT NOTICE - MOBILE BELOW - - MOBILE BELOW - - MOBILE BELOW - 
BREAKPOINT NOTICE - MOBILE BELOW - - MOBILE BELOW - - MOBILE BELOW - 
BREAKPOINT NOTICE  - MOBILE BELOW - - MOBILE BELOW - - MOBILE BELOW - */

/* Large screens (3 columns) */
@media (min-width: 1301px) {
  .service-card {
    flex: 1 1 calc(33.33% - 20px);
  }
}

/* Medium screens (2 columns) */
@media (max-width: 1300px) and (min-width: 951px) {
  .service-card {
    flex: 1 1 calc(50% - 20px);
  }
}

/* Small screens (1 column) */
@media (max-width: 950px) {
  .service-card {
    flex: 1 1 100%;
  }
  #info {
    flex-direction: column;
    align-items: center;
  }
}