/* =============================================================================
   base.css
   Version:        1.2
   Creator:        Richard MacLemale
   Last Modified:  2026-03-02 8:40 AM

   PURPOSE
   - Base/shared styles used across site templates.
   - Keep this file “framework-ish”: globals, utilities, components, shared sections.
   - Put school-specific colors/fonts in school-specific CSS.

   ORGANIZATION RULES
   - Sections are numbered so they’re easy to search (ex: "03. COMPONENTS").
   - Put new code in the correct section; avoid dumping at bottom.
   - Prefer grouping by WHAT it affects (utilities/components/pages) vs. when added.

   CONTENTS
   01. GLOBALS
   02. BOOTSTRAP OVERRIDES
   03. UTILITIES
   04. ANIMATIONS
   05. LAYOUT and STRUCTURE
   06. COMPONENTS
       06.1 Quick Links (Modern Cards)
       06.2 Buttons
       06.3 Tables
       06.4 Images / Thumbs
   07. SITE SECTIONS
       07.1 Footer
       07.2 Let’s Talk (Fixed bottom override)
       07.3 Emergency Banner
   08. PAGE / FEATURE BLOCKS
       08.1 Home + Parent School Links (resource_*)
       08.2 Parent Resources (Buttons)
       08.3 Parent Resources (Cards)
       08.4 Parent Resources (Mobile)
       08.5 Parent Resources (NEW Mobile)
       08.6 Flyers

   ============================================================================= */


/* =============================================================================
   01. GLOBALS
   ========================================================================== */

/* Fonts
   NOTE: Fonts are set/managed in school-specific CSS */
body {
  background-color: #dedede;
  position: relative;
  min-height: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.container-fluid {
  background-color: white;
}

hr {
    border: none;
    border-top: 1px solid #122641;
}


/* =============================================================================
   02. BOOTSTRAP OVERRIDES
   - Only place rules here when intentionally overriding Bootstrap defaults.
   ========================================================================== */

/* Bootstrap override: Success button color */
.btn-success { background-color: #218739 !important; }

/* Bootstrap override: Let’s Talk button positioning */
.fixed-bottom {
  right: 60px;
  left: auto;
}

/* Bootstrap override: Nav bar is white to contrast w/gray bg below it */
.navbar {
	background-color: white !important;
}

/* Bootstrap override: Prevent img-fluid from increasing image beyond 100% */
.img-fluid {
  max-width: 100%;
  width: auto;
  height: auto;
}


/* =============================================================================
   03. UTILITIES
   - Small, reusable helpers that shouldn’t be page-specific.
   ========================================================================== */

/* Column helper used by modules (2, 3, and 4 columns) */
.pcs_column { padding: 40px; }

/* Common slideshow link color override */
.slideshow-container a { color: white; }


/* =============================================================================
   04. ANIMATIONS
   ========================================================================== */

@keyframes pcs_bounceIn {
  0%   { transform: scale(0.1); opacity: 0; }
  60%  { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1); }
}
.pcs_slide_down { animation: pcs_bounceIn 2s; }

@keyframes pcs_button_grow_top {
  from { height: 0px; }
  to   { height: 50px; }
}
.pcs_letstalk { animation: pcs_button_grow_top 2s; }

/* Glow text animation */
.glow {
  font-family: sans-serif;
  font-weight: bold;
  color: #fff;
  animation: glow 3s ease-in-out infinite alternate;
}

@-webkit-keyframes glow {
  from { color: white; }
  to   { color: #fae112; }
}


/* =============================================================================
   05. LAYOUT & STRUCTURE
   ========================================================================== */

/* (Reserved for shared layout primitives: wrappers, spacing systems, etc.) */


/* =============================================================================
   06. COMPONENTS
   - Reusable “building blocks” used across multiple pages.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   06.1 Quick Links (Modern Cards on Home Page)
   ------------------------------------------------------------------------ */

.quick-links {
  background: #f8f9fb; /* soft section background */
  padding: 10px 0;
}

.quick-col {
  flex: 1 1 12.5%;
  max-width: 12.5%;
  padding-left: 6px;
  padding-right: 6px;
  position: relative; /* optional divider feel hooks */
}

/* Card */
.quick-card {
  display: block;
  height: 100%;
  text-align: center;
  text-decoration: none;
  background: #fff;
  border-radius: 10px;
  padding: 14px 8px 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
  transition: transform .18s ease, box-shadow .18s ease;
  border: 1px solid rgba(0,0,0,.04);
}

/* Hover / focus */
.quick-card:hover,
.quick-card:focus {
  transform: translateY(-4px);
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  text-decoration: none;
}

/* Keyboard focus (ADA-friendly) */
.quick-card:focus {
  outline: 3px solid rgba(0,123,255,.35); /* adjust to brand color if desired */
  outline-offset: 2px;
}

/* Icon */
.quick-icon-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 58px;
  margin-bottom: 8px;
}

.quick-icon {
  width: 52px;
  height: auto;
  opacity: .92;
}

/* Text */
.quick-label {
  font-weight: 600;
  font-size: .72rem;      /* roughly .7em feel */
  line-height: 1.1;
  color: #0b2e4a;
  padding: 0 4px;
  word-break: break-word; /* prevents overflow */
}


/* ---------------------------------------------------------------------------
   06.2 Buttons
   ------------------------------------------------------------------------ */

/* Custom button wrapper */
.pcs_button {
  margin: 30px 10px 10px 30px;
  text-align: center;
}


/* ---------------------------------------------------------------------------
   06.3 Tables
   ------------------------------------------------------------------------ */

.table-striped tbody tr:nth-of-type(odd) {
  background-color: #d8e6f0;
}


/* ---------------------------------------------------------------------------
   06.4 Images / Thumbs
   ------------------------------------------------------------------------ */

.thumb {
  margin-top: 15px;
  margin-bottom: 15px;
}


/* =============================================================================
   07. SITE SECTIONS
   - Styles that map to “site-wide sections” rather than reusable components.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   07.1 Footer
   ------------------------------------------------------------------------ */

.dsbpc-footer-list a { color: white; }

/* ---------------------------------------------------------------------------
   07.2 Let’s Talk
   ------------------------------------------------------------------------ */

/* NOTE: fixed-bottom Bootstrap override lives in 02. BOOTSTRAP OVERRIDES */


/* ---------------------------------------------------------------------------
   07.3 Emergency Banner
   ------------------------------------------------------------------------ */

.pcs_emergency_banner_red {
  background-image: url(https://jiec.pasco.k12.fl.us//library/images/storm-icon.png);
  background-size: 30px 30px;
  background-position: 10px 18px;
  background-repeat: no-repeat;
  color: white;
  font-size: 18px;
  font-family: sans-serif;
  background-color: #b81933;
  padding: 20px 20px 20px 70px;
  width: 100%;
  border-top: 1px solid white;
  border-bottom: 4px solid white;
}

.pcs_emergency_banner_yellow {
  font-size: 18px;
  font-family: sans-serif;
  background-color: #fff3cd;
  padding: 20px 20px 20px 70px;
  width: 100%;
  border-top: 1px solid white;
  border-bottom: 4px solid white;
}

.pcs_emergency_banner_yellow a { color: blue; text-decoration: underline; }


/* =============================================================================
   08. PAGE / FEATURE BLOCKS
   - These are page-specific or feature-specific and are allowed to be “chunky”.
   - Keep each block internally consistent and together.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   08.1 Home Page and Parent School Links (resource_*)
   ------------------------------------------------------------------------ */

.resource_container {
  margin: 10px 0px 20px 0px;
  padding: 0px;
}

.resource_row { padding: 20px; }

.resource_display {
  width: 266px;
  line-height: 1.1;
}

.resource_display a { font-size: .9em; }

.resource_img {
  width: 70px;
  float: left;
  opacity: .9;
}

.resource_description {
  font-size: .9em;
  margin-top: 4px;
}

.resource_text { line-height: 1.1; }


/* ---------------------------------------------------------------------------
   08.2 Parent Resources Buttons
   ------------------------------------------------------------------------ */

.parent_resource {
  float: left;
  font-size: .8em;
  line-height: 1.4;
  text-align: center;
}

.parent_resource_category {
  background-color: #122641;
  margin-top: 20px;
  margin-bottom: 10px;
}

.parent_resource_category h2 {
  color: white;
  font-size: 2em;
  margin-bottom: 6px;
}

.parent_resource_inner {
  display: table-cell;
  line-height: 100%;
  vertical-align: middle;
}

.parent_resource_title {
  color: white;
  background-color: #7a7a7a !important;
  margin: 10px;
  padding: 5px;
  border-radius: 8px;
  text-align: center;
  height: 50px;
  width: 110px;
  display: table;
}

.parent_resource_title a {
  color: white;
  text-decoration: none !important;
}

.parent_resource img {
  height: 75px;
  width: 75px;
  border-radius: 8px;
}


/* ---------------------------------------------------------------------------
   08.3 Parent Resources Cards
   ------------------------------------------------------------------------ */

.parent_resource_card {
  float: left;
  font-size: .8em;
  background-color: white;
  line-height: 1.4;
  border-radius: 8px;
  text-align: center;
  width: 190px;
  height: 190px;
}

.parent_resource_inner_card {
  display: table-cell;
  line-height: 100%;
  vertical-align: middle;
}

.parent_resource_title_card {
  color: white;
  background-color: #254889 !important;
  padding: 5px;
  text-align: center;
  height: 50px;
  width: 100%;
  display: table;
}

.parent_resource_title_card a {
  color: white;
  font-size: 1.2em;
  text-decoration: none !important;
}

.parent_resource_card img {
  height: 75px;
  width: 75px;
  border-radius: 8px;
  margin-top: 10px;
}


/* ---------------------------------------------------------------------------
   08.4 Parent Resources Mobile
   ------------------------------------------------------------------------ */

.parent_resource_mobile {
  background-color: white;
  padding: 5px;
}

.parent_resource_mobile_icon { padding: 0px; }

.parent_resource_mobile a {
  font-size: 1rem;
  font-weight: bold;
}

.parent_resource_mobile p { font-size: .9rem; }


/* ---------------------------------------------------------------------------
   08.5 Parent Resources NEW Mobile
   ------------------------------------------------------------------------ */

.parent_resource_row {
  background-color: white;
  margin-top: 0px;
  margin-bottom: 40px;
}

.parent_resource_container {
  background-color: white !important;
  margin: 10px 0px 20px 0px;
  padding: 0px;
}

.parent_resource_img {
  width: 70px;
  float: left;
  opacity: .9;
}

.parent_resource_text { padding-top: 5px; }

.parent_resource_display {
  width: 266px;
  line-height: 1.1;
  font-size: .9em;
}

.parent_resource_description { font-size: .9em; }


/* ---------------------------------------------------------------------------
   08.6 Flyers
   ------------------------------------------------------------------------ */

.pcs_flyer_body {
  border-radius: 12px;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 30px;
  margin-bottom: 30px;
  padding: 30px;
}