/* ============================================================
   CFO "The Experience" retreat — custom branding
   Loaded account-wide via BrandConfig css_overrides.
   Login styles are scoped to .ic-Login / #f1_card / .cfo-* ;
   in-app rules (nav / discussion hiding) are role-gated.
   ============================================================ */

/* ---------- LOGIN PAGE (desktop) ---------- */
body.with-left-side.ic-Login-activated,
.ic-Login,
.ic-Login__content { background: #ffffff !important; }

/* widen the whole login column out of Canvas's narrow default card */
.ic-Login__container,
.ic-Login__content,
.ic-Login__innerContent { max-width: 820px !important; width: 94% !important; box-shadow: none !important; border: 0 !important; }
.cfo-welcome { max-width: 780px; margin: 0 auto; }
/* keep the form itself a comfortable, centered width */
.ic-Login__body { max-width: 480px; margin: 0 auto; }

/* hide Canvas default login header logo (we inject the CFO banner) */
.ic-Login-header__logo { display: none !important; }

/* full-width CFO banner injected at top of login content */
.cfo-banner-wrap { width: 100%; text-align: center; margin: 0 0 6px; }
.cfo-banner-wrap img { display: block; width: 100%; max-width: 820px; height: auto; margin: 0 auto; }

/* welcome text block */
.cfo-welcome { text-align: center; padding: 6px 14px 2px;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%; /* stop iOS auto-inflating the text */ }
.cfo-welcome .cfo-title {
  font-family: "Arial Black", "Arial Bold", Gadget, Arial, sans-serif;
  font-weight: 900; color: #f5333c; font-size: 42px; line-height: 1.04;
  margin: 20px 0 8px; letter-spacing: .5px;
}
.cfo-welcome .cfo-subred {
  font-family: "Arial Black", Arial, sans-serif; font-weight: 900;
  color: #f5333c; font-size: 27px; margin: 0 0 26px;
}
.cfo-welcome .cfo-tagline {
  font-family: "Arial Black", Arial, sans-serif; font-style: italic; font-weight: 800;
  color: #242424; font-size: 21px; margin: 0 0 22px;
}
.cfo-welcome .cfo-blue {
  font-family: "Arial Black", Arial, sans-serif; font-weight: 900;
  color: #4867c1; font-size: 20px; line-height: 1.35; margin: 0 0 26px;
}
/* balance the heading lines too, so nothing orphans a word when they wrap on mobile
   (the blue block keeps its own manual <br> line breaks) */
.cfo-welcome .cfo-title,
.cfo-welcome .cfo-subred,
.cfo-welcome .cfo-tagline { text-wrap: balance; }
/* (Owen 1) instructions: stacked, centered, TIGHT (no wide gaps between lines) */
.cfo-welcome .cfo-instr {
  font-family: "Times New Roman", Times, serif; color: #242424;
  font-size: 20px; line-height: 1.3; margin: 0 0 2px;
  /* when a line has to wrap (narrow / mobile), balance it into even halves
     instead of orphaning a single word — no "dangling words" (Owen). */
  text-wrap: balance;
}
.cfo-welcome .cfo-instr:last-child { margin-bottom: 6px; }

/* login form: course fonts, keep native controls */
.ic-Login__body .ic-Label { font-family: "Arial Black", Arial, sans-serif; }
.ic-Login__body .ic-Input { font-family: "Times New Roman", Times, serif; }

/* (Owen 2) Log In button matches the Email/Password labels: Arial Black, bold, 16px */
.ic-Login__body .Button--login,
.ic-Login__body input.Button--login,
.ic-Login__body button.Button--login {
  font-family: "Arial Black", Arial, sans-serif !important;
  font-weight: bold !important;
  font-size: 16px !important;
}

/* (Owen 3) "Stay signed in" + "Forgot Password?" -> Times New Roman, bold, ~10pt */
.ic-Login__body label[for="pseudonym_session_remember_me"],
.ic-Login__forgot a,
.ic-Login__forgot-text {
  font-family: "Times New Roman", Times, serif !important;
  font-weight: bold !important;
  font-size: 10pt !important;
}

/* remove the Instructure logo LINK in the login footer (href -> instructure.com;
   the brand var only recolors it, so hide the actual anchor + svg) */
.ic-Login-footer__logo-link,
.ic-Instructure-Logo,
#footer a[href*="instructure.com"] { display: none !important; }

/* (Owen 4) remove the Canvas "Panda" Help link; replaced via JS with a TNR contact line */
#footer-links .help_dialog_trigger,
.ic-Login-footer__links .help_dialog_trigger { display: none !important; }

/* (Owen 4 + 5) injected footer contact + copyright lines (Times New Roman, 10pt, centered) */
.cfo-footer-line {
  font-family: "Times New Roman", Times, serif !important;
  font-size: 10pt; text-align: center; color: #242424; margin: 8px 0 0;
  text-wrap: balance;
}
.cfo-footer-line a { font-family: "Times New Roman", Times, serif !important; }
/* copyright span carries no explicit color -> would inherit the footer's near-white;
   force dark so it is visible on the white page (desktop footer + mobile card) */
.cfo-footer-copyright,
.cfo-footer-copyright p,
.cfo-footer-copyright span { color: #242424 !important; }
/* balance the copyright when it wraps on mobile (no "Inc." orphan) */
.cfo-footer-copyright p { text-wrap: balance; margin: 6px 0; }

/* ---------- MOBILE LOGIN (separate template: #f1_container > #f1_card) ---------- */
#f1_container { padding: 12px !important; }
#f1_card { width: min(92vw, 460px) !important; height: auto !important; }
/* remove the default Canvas donut logo — we inject the CFO banner instead */
.mobileLogin-Header {
  background-image: none !important;
  min-height: 0 !important; height: 0 !important; margin: 0 !important;
}
#f1_card .cfo-banner-wrap img { max-width: 100%; }
#f1_card .cfo-welcome { max-width: 100%; }

/* (Owen 2, mobile) Log In button consistent with desktop: Arial Black, bold, 16px */
#f1_card .Button--primary {
  font-family: "Arial Black", Arial, sans-serif !important;
  font-weight: bold !important;
  font-size: 16px !important;
}
/* (Owen 3, mobile) Forgot Password? -> TNR bold 10pt (mobile has no "Stay signed in") */
#f1_card .forgot-password {
  font-family: "Times New Roman", Times, serif !important;
  font-weight: bold !important;
  font-size: 10pt !important;
}
/* (Owen 4/5, mobile) contact + copyright appended to the bottom of the white card */
#f1_card .cfo-footer-line { margin-top: 16px; }
#f1_card .cfo-footer-copyright { margin-bottom: 8px; }

/* scale the welcome block down on small screens (mobile + narrow windows) */
@media (max-width: 620px) {
  .ic-Login__container, .ic-Login__content, .ic-Login__innerContent { width: 94% !important; }
  .cfo-welcome .cfo-title   { font-size: 28px; margin: 12px 0 6px; }
  .cfo-welcome .cfo-subred  { font-size: 19px; margin: 0 0 16px; }
  .cfo-welcome .cfo-tagline { font-size: 16px; margin: 0 0 14px; }
  .cfo-welcome .cfo-blue    { font-size: 15px; margin: 0 0 16px; }
  .cfo-welcome .cfo-instr   { font-size: 15px; line-height: 1.28; margin: 0 0 2px; }
}

/* ---------- IN-APP (participants only; body.cfo-participant set by JS) ---------- */

/* (d) Discussions index: hide the "Pinned Discussions" + "Closed for Comments"
   section cartoons; keep the main "Discussions" list (.unpinned-...) intact. */
.cfo-participant .pinned-discussions-v2__wrapper,
.cfo-participant .closed-for-comments-discussions-v2__wrapper { display: none !important; }

/* (Owen) participant Sign out button — fixed top-right, every page.
   Only rendered for body.cfo-participant (JS-injected). CFO navy. */
.cfo-participant .cfo-signout-form {
  position: fixed; top: 10px; right: 14px; z-index: 100000; margin: 0;
}
.cfo-signout-btn {
  background: #03045c; color: #ffffff !important;
  font-family: "Arial Black", Arial, sans-serif; font-size: 13px; line-height: 1;
  padding: 8px 15px; border: none; border-radius: 4px; cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,.28); letter-spacing: .3px;
}
.cfo-signout-btn:hover, .cfo-signout-btn:focus { background: #003180; color: #fff !important; }