html,body { height:100%; color: #222; font-family: 'Lato', sans-serif; font-size: 16px; font-weight: 400; }

:root {
    --dark: #000000;
    --blue: #0081C6;
    --highlight: #2eaff3;
}

/* === header -==== */

header { position:fixed; top:0; left:0; width:100%; z-index:100; background:#fff;  padding:12px 20px 12px 20px; box-shadow:0 0 12px rgba(0,0,0,0.2); display:flex; justify-content:space-between; align-items:center; }
.logo { width:235px;background:#fff; height:60px; object-fit:contain; display:block; }



@media screen and (max-width:480px) {
    .logo { width:200px; height:80px; }
}




@media screen and (min-width:481px) {
    header { padding:12px 40px 12px 40px; }
}




/* ==== numbered list ======= */
ol {counter-reset: item;list-style-type:decimal; padding-left:10px;}
ol li { display:block;margin-bottom:20px; font-weight:bold; }
ol li li { font-weight:normal;  }
ol li:before { content: counters(item, ".") " "; counter-increment: item; }


/* === text list ==== */

.editableContent ul { list-style-type:disc; padding-left:20px; margin-bottom:10px; }
.editableContent li {  line-height:140%; }

/* == hero ==== */



/* ==== cards ====== */

.cards { display: grid; grid-template-columns: 25% 25% 25% 25%; gap:30px; }
.cards li { display:flex; flex-direction:column; margin-bottom:30px; }
.cards li img { aspect-ratio:16/9; width:100%; object-fit: cover; margin-bottom:20px;}
.cards .btn { margin-top:auto; }


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

.cards { grid-template-columns: 33.333% 33.333% 33.333%; gap:20px; }
.cards li { padding:20px 0;   }

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

.cards { grid-template-columns: 50% 50% ; gap:20px; }
.cards li { padding:20px 0;   }

}
@media screen and (max-width:480px) {
    .cards { display:block; }

}

/* ===== cta ====== */

.callout { border-radius:12px;background:url(/assets/images/scribble-1.png) no-repeat center / contain;padding:60px; text-align:center; max-width:900px; margin:40px auto;  }
.callout p { max-width:360px; margin-left:auto; margin-right:auto; }
.callout h2 { color:inherit;  max-width:480px; margin:4px auto; }



/* === text ====== */
h1, h2, h3, h4 { font-weight:700;}

h2,.h2 { color:var(--blue); font-size:18px; letter-spacing:6px; text-transform:uppercase; }

h1, .h1 { color:var(--dark); font-size:40px; line-height:100%; }

h3,.h3 { font-size:24px; line-height:120%;  }
h4,.h4 { font-size:24px; line-height:120%; font-weight:400;  }
h5,.h5 { font-size:22px; line-height:120%; font-weight:400;  }


p,.p {  line-height:130%; margin:0 0 12px 0; }
p a { color:var(--highlight); }
p span { color:var(--highlight); }


.date { font-size:12px; }

@media screen and (min-width:481px) {
    h1, .h1 { font-size:60px; line-height:100%; }
    h2,.h2 { font-size:24px;  }
    
}
 /* ===== tags ======= */

.tags { display:flex; flex-wrap:wrap; }
.tags a { font-size: 14px;transition: all 0.3s ease;
  font-weight: 700; white-space:nowrap;
  background: #fff; 
  color: var(--blue);
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
  border: none;
  padding: 4px 8px;
  border-radius: 6px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center; margin-right:8px; margin-bottom:6px;
    
}
.tags a:hover { box-shadow: 0 4px 15px rgba(0,0,0,0.15);}

/* ==== btns ===== */
.btn {
  font-size: 14px;
  font-weight: 700;
  background: #fff;
  color: var(--blue);
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
  border: none;
  padding: 8px 22px;
  border-radius: 40px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  
  /* Smoothly transition the button background/shadow if needed */
  transition: all 0.3s ease;
}

.btn svg {
  display: block;
  flex-shrink: 0;
  /* This ensures the movement is smooth rather than a sudden jump */
  transition: transform 0.25s ease-out;
}

/* The Hover Effect */
.btn:hover {
  background-color: #fff; /* Optional: subtle color change */
  box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

.btn:hover svg {
  /* Moves the chevron 4 pixels to the right on hover */
  transform: translateX(4px);
}

.btnWide { width:100%; }

.editableContent h2 { margin-bottom:24px; }
.editableContent h3 { margin-top:24px; }
.editableContent ul { padding-left:18px;margin-bottom:12px;  }
.editableContent ul li { list-style:disc; margin-bottom:6px; }


main { padding:120px 0 0 0; background: #F2F2F2;
background: linear-gradient(180deg,rgba(242, 242, 242, 1) 0%, rgba(255, 255, 255, 1) 100%); }


main.article { padding:40px; max-width:1200px; border-radius:10px; margin:0 auto; position:relative; top:-80px; }
    
    
    .hero img { width:100%; height:500px; object-fit:cover; }
    
    
@media screen and (max-width:480px) {
    h2,.h2, .editableContent h2 {  font-size:26px; }
.hero img { height:300px; }
    p, .p { font-size:18px; }
    main { padding:120px 0 0 0; }  
    main.article { padding:20px; width:calc(100% - 40px); }
    
   img.mobileArticle { height: 200px; }
}

/* === footer ====== */

footer {padding:40px; color:#fff;background: var(--blue); }
footer p { color:inherit; }
footer a { color:inherit; }