/* =============================================================================
   CCAPP Academy Child — brand cohesion
   Header login element · Student Portal · SIS plugin front-end alignment
   Palette + font mirror the live ccappacademy.com Divi site.
   ========================================================================== */

:root{
  --ccapp-turquoise:#2AD2C9;
  --ccapp-turquoise-dark:#21b3ab;
  --ccapp-teal:#028090;
  --ccapp-teal-dark:#026b78;
  --ccapp-ink:#063F47;
  --ccapp-gold:#EDA100;
  --ccapp-body:#5b6a6a;
  --ccapp-line:#d8e8e6;
  --ccapp-line-strong:#c9dddb;
  --ccapp-surface:#ffffff;
  --ccapp-surface-soft:#f4fafa;
  --ccapp-radius:12px;
  --ccapp-radius-sm:8px;
  --ccapp-shadow:0 4px 20px rgba(6,63,71,.07);
  --ccapp-shadow-lg:0 12px 40px rgba(6,63,71,.12);
  --ccapp-font:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
}

/* ---- Canonical brand button (shared by portal + SIS plugin) --------------- */
/* Element-qualified so it reliably overrides the plugin's own .ccapp-btn.     */
a.ccapp-btn,
button.ccapp-btn,
.ccapp-portal .ccapp-btn,
.ccapp-form button.ccapp-btn{
  display:inline-block;
  background:var(--ccapp-teal);
  color:#fff;
  border:2px solid var(--ccapp-teal);
  border-radius:var(--ccapp-radius-sm);
  padding:12px 26px;
  font-family:var(--ccapp-font);
  font-size:15px;
  font-weight:700;
  line-height:1.2;
  text-decoration:none;
  cursor:pointer;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
a.ccapp-btn:hover,
button.ccapp-btn:hover,
.ccapp-portal .ccapp-btn:hover,
.ccapp-form button.ccapp-btn:hover{
  background:var(--ccapp-teal-dark);
  border-color:var(--ccapp-teal-dark);
  color:#fff;
}
a.ccapp-btn-ghost,
.ccapp-btn-ghost{
  background:transparent;
  color:var(--ccapp-teal);
  border-color:var(--ccapp-teal);
}
a.ccapp-btn-ghost:hover,
.ccapp-btn-ghost:hover{
  background:var(--ccapp-teal);
  color:#fff;
}

/* =============================================================================
   1) HEADER LOGIN ELEMENT  ([ccapp_login_button])
   ========================================================================== */
.ccapp-login{
  display:inline-flex;
  align-items:center;
  font-family:var(--ccapp-font);
  position:relative;
}

/* Logged-out call to action — mirrors the site's turquoise CTA buttons. */
.ccapp-login-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--ccapp-turquoise);
  color:#fff;
  border:2px solid var(--ccapp-turquoise);
  border-radius:var(--ccapp-radius-sm);
  padding:10px 22px;
  font-size:15px;
  font-weight:700;
  line-height:1.1;
  white-space:nowrap;
  text-decoration:none;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.ccapp-login-btn:hover,
.ccapp-login-btn:focus{
  background:var(--ccapp-turquoise-dark);
  border-color:var(--ccapp-turquoise-dark);
  color:#fff;
}
.ccapp-login-btn--outline{
  background:transparent;
  color:var(--ccapp-ink);
  border-color:var(--ccapp-turquoise);
}
.ccapp-login-btn--outline:hover{
  background:var(--ccapp-turquoise);
  color:#fff;
}
.ccapp-login-btn--text{
  background:transparent;
  border-color:transparent;
  color:var(--ccapp-ink);
  padding:8px 6px;
}
.ccapp-login-btn--text:hover{
  color:var(--ccapp-teal);
  background:transparent;
  border-color:transparent;
}

/* Logged-in account chip + no-JS dropdown. */
.ccapp-account{cursor:pointer;}
.ccapp-account-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--ccapp-surface-soft);
  color:var(--ccapp-ink);
  border:1px solid var(--ccapp-line);
  border-radius:999px;
  padding:9px 16px;
  font-size:14px;
  font-weight:700;
  white-space:nowrap;
}
.ccapp-caret{
  width:0;height:0;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-top:6px solid var(--ccapp-teal);
  transition:transform .15s ease;
}
.ccapp-account-menu{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  min-width:200px;
  background:var(--ccapp-surface);
  border:1px solid var(--ccapp-line);
  border-radius:var(--ccapp-radius-sm);
  box-shadow:var(--ccapp-shadow-lg);
  padding:6px;
  opacity:0;
  visibility:hidden;
  transform:translateY(-6px);
  transition:opacity .15s ease,transform .15s ease,visibility .15s;
  z-index:9999;
}
.ccapp-account:hover .ccapp-account-menu,
.ccapp-account:focus .ccapp-account-menu,
.ccapp-account:focus-within .ccapp-account-menu{
  opacity:1;visibility:visible;transform:translateY(0);
}
.ccapp-account:hover .ccapp-caret,
.ccapp-account:focus-within .ccapp-caret{transform:rotate(180deg);}
.ccapp-account-link{
  display:block;
  padding:10px 14px;
  border-radius:6px;
  color:var(--ccapp-ink);
  font-size:14px;
  font-weight:600;
  text-decoration:none;
}
.ccapp-account-link:hover{
  background:var(--ccapp-surface-soft);
  color:var(--ccapp-teal);
}
.ccapp-account-logout{
  margin-top:4px;
  border-top:1px solid var(--ccapp-line);
  color:#b3392f;
  border-radius:0 0 6px 6px;
}
.ccapp-account-logout:hover{background:#fdf3f2;color:#b3392f;}

/* =============================================================================
   2) STUDENT PORTAL  ([ccapp_student_portal])
   ========================================================================== */
.ccapp-portal{
  max-width:960px;
  margin:24px auto 40px;
  font-family:var(--ccapp-font);
  color:#1f2a2a;
}
.ccapp-portal-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
  flex-wrap:wrap;
  border-bottom:3px solid var(--ccapp-ink);
  padding-bottom:18px;
  margin-bottom:22px;
}
.ccapp-portal-eyebrow{
  margin:0 0 4px;
  text-transform:uppercase;
  letter-spacing:2px;
  font-size:12px;
  font-weight:700;
  color:var(--ccapp-teal);
}
.ccapp-portal-title{
  margin:0;
  font-size:30px;
  line-height:1.15;
  color:var(--ccapp-ink);
  font-weight:800;
}
.ccapp-portal-meta{margin:8px 0 0;color:var(--ccapp-body);font-size:14px;}
.ccapp-portal-meta strong{color:var(--ccapp-ink);}
.ccapp-portal-logout{align-self:center;}

.ccapp-portal-cards{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  margin-bottom:18px;
}
.ccapp-portal-stat{
  background:var(--ccapp-surface);
  border:1px solid var(--ccapp-line);
  border-top:4px solid var(--ccapp-turquoise);
  border-radius:var(--ccapp-radius);
  box-shadow:var(--ccapp-shadow);
  padding:18px 16px;
  text-align:center;
}
.ccapp-portal-stat-num{
  display:block;
  font-size:26px;
  font-weight:800;
  color:var(--ccapp-ink);
  line-height:1.1;
}
.ccapp-portal-stat-lbl{
  display:block;
  margin-top:6px;
  font-size:12.5px;
  font-weight:600;
  color:var(--ccapp-body);
}

.ccapp-portal-progress{
  height:12px;
  background:#e6f4f2;
  border-radius:999px;
  overflow:hidden;
  margin-bottom:28px;
}
.ccapp-portal-progress span{
  display:block;
  height:100%;
  background:linear-gradient(90deg,var(--ccapp-teal),var(--ccapp-turquoise));
  border-radius:999px;
  transition:width .4s ease;
}

.ccapp-portal-links{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin-bottom:32px;
}
.ccapp-portal-link{
  display:block;
  background:var(--ccapp-surface);
  border:1px solid var(--ccapp-line);
  border-radius:var(--ccapp-radius);
  padding:18px 18px;
  text-decoration:none;
  transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease;
}
.ccapp-portal-link:hover{
  border-color:var(--ccapp-turquoise);
  box-shadow:var(--ccapp-shadow);
  transform:translateY(-2px);
}
.ccapp-portal-link span{
  display:block;
  font-size:16px;
  font-weight:700;
  color:var(--ccapp-ink);
}
.ccapp-portal-link em{
  display:block;
  margin-top:4px;
  font-style:normal;
  font-size:13px;
  color:var(--ccapp-body);
}

.ccapp-portal-h2{
  font-size:20px;
  color:var(--ccapp-ink);
  font-weight:800;
  margin:8px 0 12px;
}
.ccapp-portal-card{
  background:var(--ccapp-surface);
  border:1px solid var(--ccapp-line);
  border-radius:var(--ccapp-radius);
  box-shadow:var(--ccapp-shadow);
  padding:28px 30px;
  max-width:560px;
  margin:24px auto;
}
.ccapp-portal-card h2{margin:0 0 10px;color:var(--ccapp-ink);font-weight:800;}
.ccapp-portal-card p{color:var(--ccapp-body);line-height:1.55;}
.ccapp-portal-signin{text-align:center;}
.ccapp-portal-signin .ccapp-login{margin-top:14px;justify-content:center;}

/* =============================================================================
   3) SIS PLUGIN FRONT-END ALIGNMENT
   Nudge the plugin's enrollment form / transcript toward the site font and
   accent without fighting its own layout. (Its palette already matches.)
   ========================================================================== */
.ccapp-form,
.ccapp-transcript,
.ccapp-cert,
.ccapp-print-wrap{
  font-family:var(--ccapp-font)!important;
}
.ccapp-form{
  box-shadow:var(--ccapp-shadow-lg);
  border-radius:var(--ccapp-radius);
}
.ccapp-form h2{font-weight:800;}
.ccapp-form input:focus,
.ccapp-form select:focus,
.ccapp-form textarea:focus{
  outline:2px solid var(--ccapp-turquoise);
  border-color:var(--ccapp-turquoise);
}

/* =============================================================================
   4) RESPONSIVE / MOBILE
   Comfortable tap targets, no horizontal overflow, readable at 320px.
   ========================================================================== */

/* Touch targets: ~44px min height for interactive controls on the portal. */
.ccapp-login-btn,
.ccapp-account-chip,
a.ccapp-btn,
button.ccapp-btn{ min-height:44px; box-sizing:border-box; }

/* Long transcript / record tables never blow out the viewport on phones. */
.ccapp-portal .ccapp-print-wrap,
.ccapp-portal .ccapp-transcript{ max-width:100%; }
.ccapp-portal .ccapp-transcript{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.ccapp-portal .ccapp-tx-courses,
.ccapp-portal .ccapp-tx-summary{ min-width:520px; }

@media (max-width:900px){
  .ccapp-portal{ padding:0 4vw; }
  .ccapp-portal-cards{ grid-template-columns:repeat(2,1fr); }
  .ccapp-portal-links{ grid-template-columns:1fr; }
  .ccapp-portal-title{ font-size:26px; }
}

@media (max-width:600px){
  .ccapp-portal-head{ flex-direction:column; align-items:stretch; }
  .ccapp-portal-title{ font-size:23px; }
  .ccapp-portal-logout{ align-self:flex-start; }

  /* Snapshot: two tidy columns on phones, headroom for big numbers. */
  .ccapp-portal-cards{ grid-template-columns:repeat(2,1fr); gap:12px; }
  .ccapp-portal-stat{ padding:14px 10px; }
  .ccapp-portal-stat-num{ font-size:22px; }

  /* Header account menu: anchor to the left so it can't run off-screen. */
  .ccapp-account-menu{ right:auto; left:0; }

  /* The transcript table can scroll; cap the min-width so it fits phones. */
  .ccapp-portal .ccapp-tx-courses,
  .ccapp-portal .ccapp-tx-summary{ min-width:460px; }
}

@media (max-width:380px){
  /* Very small phones: single-column snapshot, full-width buttons. */
  .ccapp-portal-cards{ grid-template-columns:1fr; }
  .ccapp-portal-title{ font-size:21px; }
  .ccapp-login-btn,
  .ccapp-portal-signin .ccapp-btn{ width:100%; justify-content:center; text-align:center; }
  .ccapp-account-menu{ min-width:180px; }
}

/* =============================================================================
   5) THEME BUILDER IMPORT REPAIR — header layout
   The Divi 5 Theme Builder importer currently drops row wrappers, leaving the
   header sections' columns floating loose. These rules rebuild the layout with
   flexbox directly on the sections. They are scoped with :not(:has(.et_pb_row))
   so they automatically stand down if the header is ever rebuilt with proper
   rows in the Theme Builder. Verified live against the staging site.
   ========================================================================== */

/* --- Utility top bar: email · phone · socials-right, slim --- */
.custom-top-bar-section:not(:has(.et_pb_row)){
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:40px;
  padding:4px 4%!important;
}
.custom-top-bar-section:not(:has(.et_pb_row)) > .et_pb_column{
  float:none!important;width:auto!important;margin:0!important;
}
.custom-top-bar-section:not(:has(.et_pb_row)) > .et_pb_column:last-child{
  margin-left:auto!important;
}

/* --- Main header: logo left · menu right · login chip far right --- */
.custom-main-header-section:not(:has(.et_pb_row)){
  display:flex!important;
  align-items:center!important;
  gap:30px;
  padding:10px 4%!important;
}
.custom-main-header-section:not(:has(.et_pb_row)) > .et_pb_column{
  float:none!important;width:auto!important;margin:0!important;
}
.custom-main-header-section:not(:has(.et_pb_row)) > .et_pb_column_1_2{
  flex:1 1 auto!important;
}
.custom-main-header-section .et_pb_menu{margin-top:0!important}
.custom-main-header-section .et_pb_menu .et_pb_menu__wrap{justify-content:flex-end!important}
.custom-main-header-section .et_pb_image{margin-bottom:0!important}
.ccapp-header-login{margin-top:0!important}

@media (max-width:980px){
  .custom-top-bar-section:not(:has(.et_pb_row)){
    flex-wrap:wrap;gap:6px 22px;justify-content:center!important;padding:6px 4%!important;
  }
  .custom-top-bar-section:not(:has(.et_pb_row)) > .et_pb_column:last-child{margin-left:0!important}
  .custom-main-header-section:not(:has(.et_pb_row)){flex-wrap:wrap;gap:8px 16px}
  .custom-main-header-section .et_pb_image img{max-width:190px;height:auto}
  .custom-main-header-section:not(:has(.et_pb_row)) > .et_pb_column_1_4:last-child{margin-left:auto!important}
}

/* When the login element sits in a Divi header Code module, keep it from
   forcing the header taller than needed and let it wrap gracefully. */
.et_pb_module.et_pb_code .ccapp-login,
.et_pb_code_inner .ccapp-login{ line-height:normal; }

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion:reduce){
  .ccapp-account-menu,
  .ccapp-caret,
  .ccapp-portal-link,
  .ccapp-portal-progress span,
  .ccapp-login-btn,
  a.ccapp-btn,
  button.ccapp-btn{ transition:none!important; }
  .ccapp-portal-link:hover{ transform:none; }
}