/*
 * Stylesheet for the FSOP LLC homepage
 *
 * This design uses a warm colour palette inspired by construction materials
 * and features clear typography and generous spacing. Flexbox and CSS grid
 * help structure the layout for responsiveness.
 */

/* Root variables for easy colour changes */
:root {
  --primary: #d86a25;        /* warm orange for buttons and accents */
  --secondary: #f7ead6;      /* light beige for section backgrounds */
  --dark: #333333;           /* dark text colour */
  --light: #ffffff;          /* white for text and elements */
  --muted: #555555;          /* muted text colour */
  --card-bg: #ffffff;        /* card background */
  --card-shadow: rgba(0, 0, 0, 0.1); /* subtle shadow for cards */
  --background: rgba(255, 255, 255, 0.5);


  /* just menu */

          --menu-body-bg-color: rgb(175, 202, 223);
        --menu-drop-bg-color: #234157;
        --menu-text-color-a: #a13f17;
        --menu-text-color-al: #ec8d67;
        --menu-text-color-aul: #e2a78f;
        --menu-text-color-b: #011729;
        --menu-hover-text-color: rgb(253, 228, 218);

        --prim-col-d: #4e1904;
        --prim-col-m: #a13f17;
        --prim-col-l: #ec8d67;
        --prim-col-w:#ffede5;

        --tert-col-d:#011729;
        --tert-col-m:#07375B;
        --tert-col-l:#417196;
        --tert-col-lw:#7aa3c2;
        --tert-col-w: #d0dae2;

        --prim-font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        --alt-font-family: Georgia, 'Times New Roman', Times, serif;
        --menu-font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

/* General reset and base typography */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


body {
max-width: 100%; /* 1200px;*/
/* background-color: var(--background);*/

background-image:url(https://fsopllc.com/images/bg1-bright-2.jpg);
background-attachment:fixed;
background-size: cover;
background-position: center;
background-repeat: no-repeat;

min-height: 500px;
/*z-index: -2;*/
line-height: 1.6;
color: var(--dark);
font-family: var(--prim-font-family);
margin: 0;
padding: 0px;
}






img {
  max-width: 100%;
  height: auto;
  display: block;
}

h1, h2, h3 {
  font-weight: 700;
  color: var(--dark);
  line-height: 1.2;
}

p {
  margin-bottom: 1rem;
  color: var(--muted);
}

a {
  text-decoration: none;
  color: inherit;

}

a:link{
color:#3527a0;
}

a:visited{
  color:#3527a0;
}

/*
nav a:link{
color: inherit;
}

nav a:visited{
color: inherit;
}
*/

main { /* not needed with full page width? */
        max-width: 100%; /* 1200px;*/
        margin: 75px .5rem 0 .5rem;
              
        /* was border-left: 1px solid #eeeeee; */
        /* was border-right: 1px solid #eeeeee; */
    }



    .topper{

        background-color: var(--sec-col-l);
        width: calc(100vw*.5);
        height: calc(100vw*.25);
        border-radius: 50%;
        /*content: '';*/
        position: relative;
        top:calc(100vw*.1);
        z-index: -1;
        
    
    }


/* Button styling */
.btn {
  display: inline-block;
  padding: 0.75em 1.5em;
  background-color: var(--primary);
  color: var(--light);
  border-radius: 4px;
  font-weight: 600;
  transition: background-color 0.3s ease;
  margin-bottom: .5em;
}

.btn:hover,
.btn:focus {
  background-color: #bf5a1d;
}

/* Hero section */
.hero {

  position: relative;
  height: 60vh;
  min-height: 500px;
  color: var(--light);
  overflow: hidden; /* keeps layers clean */
}

/* Background layers */
.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 900ms ease-in-out;
  z-index: 0;
}

.hero-bg.is-active {
  opacity: 1;
}

.hero-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(0, 0, 0, 0.25); /* lower is lighter */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 1;
}

/* Navigation bar */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 10%;
}

.logo {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--light);
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 2rem;
}

.nav-links li a {
  color: var(--light);
  font-weight: 500;
  transition: color 0.3s ease;
}

.nav-links li a:hover {
  color: var(--primary);
}

/* Hero content */
.hero-content {
  text-align: center;
  margin-top: auto;
  margin-bottom: 3rem;

}



.hero h1 {
  font-size: 1.5rem;
  font-weight: 900;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  color: var(--light);
  text-shadow: 2px 2px 4px #222222;
}

.hero p {
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
  color: var(--light);
  font-weight: 700;
  text-shadow: 1px 1px 2px #222222;
}

/* About section */
.about-section {
  padding: 4rem 10%;
  background-color: var(--secondary);
}

.about-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 3rem;
}

.about-text {
  flex: 1;
}

.about-image {
  flex: 1;
}

.about-section h2 {
  margin-bottom: 1rem;
  font-size: 2rem;
}

.about-section p {
  font-size: 1rem;
}

/* Services section */
.services-section {
  padding: 4rem 10%;
  background-color: var(--light);
}

.services-section h2 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 2rem;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
}

.service-card {
  background-color: var(--card-bg);
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 8px var(--card-shadow);
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px var(--card-shadow);
}

.service-icon {
  font-size: 2rem;
  margin-bottom: 0.75rem;
  color: var(--primary);
}

.service-card h3 {
  margin-bottom: 0.5rem;
  font-size: 1.3rem;
  color: var(--dark);
}

.service-card p {
  font-size: 0.95rem;
  color: var(--muted);
}

/* Contact section */
.contact-section {
  padding: 4rem 10%;
  text-align: center;
  background-color: var(--secondary);
}

.contact-section h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.contact-section p {
  font-size: 1rem;
  margin-bottom: 1.5rem;
  color: var(--muted);
}

/* Footer */
.footer {
  padding: 1rem 10%;
  background-color: var(--light);
  text-align: center;
  border-top: 1px solid #e0d7cd;
}

.footer p {
  font-size: 0.85rem;
  color: var(--muted);
}

.pad-list{

margin: 2rem;

}

/* Responsive adjustments */
@media (max-width: 768px) {

    .hero{
        min-height: 350px;
        height: 40vh;
    }
  .hero h1 {
    margin-top: 2.5rem;
    font-size: 1.25rem

  }
  .hero p {
    font-size: 1rem;
    margin-bottom: 1rem;
  }
  .about-container {
    flex-direction: column;
  }
  .navbar {
    flex-direction: column;
    gap: 1rem;
  }
  .nav-links {
    flex-direction: column;
    gap: 1rem;
  }
}



/* services-section */

#package-box{
    display: flex;
    flex-flow: row wrap;
    max-width: 1150px;
    margin: auto;
    align-items:stretch;
 
}

#package-box section{

    flex: 1 1 400px; /* was 300 */
	padding: 0 10px 10px 10px;
	margin: 10px;
    background-color: var(--tert-col-w);
    border: 1px solid var(--tert-col-m);

    text-align: center;
  }

  .package h3{
    color: var(--tert-col-d);
    font-style: italic;
    text-align: start;
    font-size: 1rem;
   
}

.package img{
padding: .5em;


}


#package-box section header{

background-color: var(--tert-col-m);
margin: 0 -11px 0 -11px;
font-size: 1.5rem;
font-weight: 700;
color: #ffffff;;
padding: 10px;
text-align: center;
font-family:Georgia, 'Times New Roman', Times, serif;

}


/* navigation  */

/* kevin nav  at mobile sizing by default*/

*,
*::before,
*::after {
    box-sizing: border-box;
}

#main-header img {
    max-width: 60%;
    height: auto;
    padding: .25rem;
    vertical-align: middle;
  
   max-height:200px;

}




/* from lt */

article{

    display: block;
    clear: both;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1em;
}

.just-padding{

    padding: 2rem 1rem 0 1rem;
}

.just-padding h1{

    padding: 0 1rem;
    margin-top: 0px;
}

.just-padding h2{

    margin-top: 2rem;
    font-weight: 900;
}

.just-padding img{

    float: left;
    max-width: 100%;
    padding: 0 2rem 0 0;
}

.just-padding h3{

    color: var(--tert-col-m);
    font-size: 1.5rem;
}

.just-padding h3 span{
    font-weight: 900;
    color: var(--prim-col-m);
}

.padded{

    margin: 0 3rem;
}

.white-bubble{

    background-color: var(--background);
    display: inline-block;
    padding: 1rem;
    margin: 2rem 1rem;
    border-radius: 20px;
    box-shadow: 0px 0px 10px rgba(5, 5, 5, 0.432);

}

.white-bubble img{
    float: left;
    padding: 1rem;
    max-width: 35%;
}

    .pre-mag {

        width: 100%;
        background-color: var(--sec-col-m);
        color: var(--sec-col-w);
        text-align: center;
        padding: 1rem;
        margin: 0;

    }





@media screen and (max-width: 800px) {

    html, body{

        font-size: 14px;
    }


    #main-header img {
    max-height:66px;

    }


    .padded{

        margin: 0 1.5rem;
    }

    .not-hp-top{

      padding-top: 85px;  
    }

    .logo-large {
        display:none;
    }
    .logo-small{
        display:inline-block;
    }

       .white-bubble img{
        float: none;
        padding: .5rem 0;
        max-width: 100%;
    }
   .just-padding{

        padding: 1rem .5rem 0 .5rem;
    }

    .just-padding h1{

        font-size: 2rem;
        padding: 0 .5rem;
    }

    .padded{

        margin: 0 1.5rem;
    }


    /* Hero section */


.hero .btn{
  display: none;
    }

}























.content {
    height: 200vh;
    /*background-image: url(//unsplash.it/1000/1000);*/
    background-color: #333;
    background-blend-mode: multiply;
    background-size: cover;
    display: grid;
    place-items: center;
}


/* navigation styles start here */

#main-header {
    background: var(--menu-body-bg-color);
    text-align: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    margin: 0 auto;
    height: auto;
    font-weight: 700;

    

}

/* changed this from the tutorial video to allow it to gain focus, making it tabbable */

.nav-toggle {
    position: absolute !important;
    top: -9999px !important;
    left: -9999px !important;
}

.nav-toggle:focus~.nav-toggle-label {
    outline: 3px solid rgba(0, 0, 0, 0.0);
}

.nav-toggle-label {
    position: absolute;
    top: 0;
    right: 0;
    margin-right: 1rem;
    height: 100%;
    display: flex;
    align-items: center;
}

.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
    display: block;
    background: var(--menu-drop-bg-color); /* bg color of dropped menu */
    height: 2px;
    width: 2rem;
    border-radius: 2px;
    position: relative;
}

.nav-toggle-label span::before,
.nav-toggle-label span::after {
    content: '';
    position: absolute;
}

.nav-toggle-label span::before {
    bottom: 7px;
}

.nav-toggle-label span::after {
    top: 7px;
}






nav {
    position: absolute;
    text-align: left;
    top: 100%;
    left: 50%;
    background: var(--menu-drop-bg-color); /* bg color of menu animation */
    width: 50%;
    transform: scale(1, 0);
    transform-origin: top;
    transition: transform 400ms ease-in-out;
    
}

nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}


nav li {
    margin-bottom: 1rem;
    padding-left: 1rem;
    margin-right: .5rem;
}

nav a:link, nav a:visited { /* phone */
    color: var(--menu-text-color-aul); /* color of main main text */
    text-decoration: none;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: .8rem;
    text-transform: uppercase;
    opacity: 0;
    transition: opacity 150ms ease-in-out;
}

nav a:hover {
    color: var(--menu-hover-text-color); /* color of main drop hover */
}

.nav-toggle:checked~nav {
    transform: scale(1, 1);
}

.nav-toggle:checked~nav a {
    opacity: 1;
    transition: opacity 250ms ease-in-out 250ms;
}

nav ul li ul{
    
    padding-top: 15px;
    
}

nav ul li ul li a, nav ul li ul li a:link, nav ul li ul li a:visited{
    
    padding-right: 1rem;
    font-size: .6rem;
    color: var(--menu-text-color-al);
}




@media screen and (min-width: 800px) { /* 800 and larger */
    main {
        padding-top: 20px; /* was 80 */
    }
    .nav-toggle-label {
        display: none;
    }
    #main-header {
        
        display: grid;
        justify-content: stretch;
        
        grid-template-columns: 1fr auto minmax(525px, 3fr) 1fr;
        width: 100%;
        padding: 0 5%;
        margin: 0;
        
    }
    .logo-large {
        grid-column: 2 / 3;
        display:inline-block;
        min-height: 75px;
        min-width: 238px;
        
    }
    .logo-small{
        display:none;
    }
    nav {
        all: unset;
        /* this causes issues with Edge, since it's unsupported */
        /* the following lines are not from my video, but add Edge support */
        position: relative;
        text-align: right;
        transition: none;
        transform: scale(1, 1);
        background: none;
        top: initial;
        left: initial;
        /* end Edge support stuff */
        grid-column: 3 / 4;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
    nav ul {
        display: flex;
    }
    nav li {
        /*margin-right: 3em;*/
        margin-bottom: 0;
        /*padding-left: 1em;*/
    }
    nav ul li ul { /* subs*/
        display: none;
        position: absolute;
        background-color: var(--menu-drop-bg-color);
        width: auto;
        box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
        
    }

        nav a, nav a:link, nav a:visited {
       color: var(--menu-text-color-al);
       
        opacity: 1;
        position: relative;
    }


    nav ul a, nav ul a:link, nav ul a:visited{

    color: var(--menu-text-color-a);

    }

    nav ul li ul a, nav ul li ul a:link, nav ul li ul a:visited { /* subs */
        color: var(--menu-text-color-aul);
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        
    }
   /* nav ul li ul li a:hover {
        was background-color: #f1f1f1 
    } */
    nav ul li:hover ul {
        display: block;
    }


        nav a:link {
       color: var(--menu-text-color-al);

    }

        nav a:visited {
       color: var(--menu-text-color-al);

    }
    nav ul li a:hover{
        color:var(--menu-text-color-b);
    }

    nav ul li ul li a:hover{
        color:var(--menu-hover-text-color);
    }

    nav a::before {
        content: '';
        display: block;
        height: 3px;
        background: var(--menu-drop-bg-color);
        position: absolute;
        top: -.5rem;
        left: 0;
        right: 0;
        transform: scale(0, 1);
        transition: transform ease-in-out 250ms;
    }
    nav a:hover::before {
        transform: scale(1, 1);
    }
    nav ul li ul li a::before { /* subs */
        content: '';
        display: block;
        height: 0px;
        background: var(--menu-drop-bg-color);
        position: absolute;
        top: -.5rem;
        left: 0;
        right: 0;
        transform: scale(0, 1);
        transition: transform ease-in-out 250ms;
    }
    nav ul li ul li a:hover::before { /* subs */
        transform: scale(1, 1);
    }


}



/* everything else */

/* */
/* */
/* footer  */
/* base grid template */

footer {
    display: grid;
    background-color: var(--menu-body-bg-color);
    color: var(--prim-text-color);
    font-size: 80%;
    font-family: var(--muted);
    font-weight: 500;
    padding: 20px 10px 20px 10px;
    width: 100%;
    line-height: 1.5;
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-row-gap: 5px;
        grid-column-gap: 0px;
        grid-template-areas: "lmenu" "rmenu" "bmenu";
}

footer section:nth-child(1) {
    grid-area: lmenu;
    text-align: center;
    padding-bottom: 1rem;
}

footer section:nth-child(2) {
    grid-area: rmenu;
    text-align: center;
    padding-right: 10px;
}

footer section:nth-child(1) ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-block;
}

footer section:nth-child(1) ul li {
    float: left;
    text-align: center;
    padding-right: 1rem;
}

footer section:nth-child(3) {
    grid-area: bmenu;
    padding: 5px;
    font-family: verdana, arial;
    font-size: .75rem;
    font-weight: 500;
    text-align: center;
    color: var(--tert-col-d);
}

footer section:nth-child(3) span {
font-style:italic;
font-weight: 700;
}



footer a:link {
    color: var(--prim-col-d);
    text-decoration: none;
}

footer a:visited {
    color: var(--prim-col-d);
    text-decoration: none;
}

footer a:hover {
    color: var(--prim-col-w);
    text-decoration: none;
}




@media screen and (min-width: 800px) { /* basic website areas 800 or larger */

    .fleft{

        float: left;
        padding: 1rem 1rem 1rem 0;
    }
    footer {
    grid-row-gap: 10px;
    grid-column-gap: 10px;
    grid-template-areas: "lmenu . rmenu" "bmenu bmenu bmenu";
    }

    footer section:nth-child(1) {
    text-align: left;
    padding-left: 10px;
    }

    footer section:nth-child(2) {
        text-align: right;
    }
    footer section:nth-child(2) ul li {
        text-align: right;
    }

    .magazine-style img{
        max-width: 15rem;
        float: left;
        padding-right: 1rem;
        
            }

}



/* expanding -grid */

/* The grid: Three equal columns that floats next to each other */
.column {
    float: left;
    width: 33.33%;
    padding: 50px;
    text-align: center;
    font-size: 25px;
    cursor: pointer;
    color: black;
  }
  
  .containerTab {
    padding: 20px;
    color: rgb(0, 0, 0);
  }
  
  /* Clear floats after the columns */
  .row:after {
    content: "";
    display: table;
    clear: both;
  }
  
  /* Closable button inside the image */
  .closebtn {
    float: right;
    color: black;
    font-size: .75rem;
    cursor: pointer;
  }

/* all prev below  */


/* link style */

.link-quote {
    font-size: 110%;
    font-family: georgia, "times new roman", serif;
    font-style: italic;
    color: #333333;
    margin-left: 2rem;
    padding: 1rem 0 1rem 2rem;
}

.link-quote {
    border-left: 4px solid #800080;
    background-color: #fff8ff;
}

.link-quote:nth-of-type(1n) {
    border-left: 4px solid #000080;
    background-color: #f8f8ff;
}

.link-quote:nth-of-type(2n) {
    border-left: 4px solid #008000;
    background-color: #f8fff8;
}

.link-quote:nth-of-type(3n) {
    border-left: 4px solid #800000;
    background-color: #fff8f8;
}

.link-quote:nth-of-type(4n) {
    border-left: 4px solid #800080;
    background-color: #fff8ff;
}

.link-quote cite {
    font-family: arial, verdana, sans-serif;
    font-size: 80%;
    padding-left: 6rem;
}

.link-quote cite a {
    text-decoration: none;
    color: #000080;
}

.link-quote:hover {
    font-size: 120%;
    font-weight: 700;
    margin-left: 4rem;
}

.center-it {
    margin: auto auto;
    text-align: center;
}

.standard-search-button {
    color: black;
    background-color: lightgray;
    font-size: medium;
    font-family: Arial, Helvetica, sans-serif;
}



/* Print styles for PDF export */
@media print{
  header.site-header, footer.site-footer, .btn, .btn-row, .hero__aside button, #main-header, footer, .hide-it{display:none !important}
  .section{padding:.75rem 0}
  .card{box-shadow:none;border:1px solid #ddd}
  .section--alt{background:#fff}
  body {
  background-image:none;
  zoom: 95%;
}
  

}