/**
 * Connexxus Public sub-theme — public-site-only styling.
 *
 * ============================================================================
 * WHAT THIS FILE IS
 * ============================================================================
 * In Drupal 7 the main site and the public site were two separate installs,
 * each with its own copy of the connexxus theme. The D11 port produced ONE
 * shared theme, ported from the MAIN fork. This file carries every rule the
 * PUBLIC fork had that the main fork did not, so the shared stylesheet never
 * has to know that a second site exists.
 *
 * Provenance of every block below is the D7 PUBLIC fork:
 *   var/www/html/travel.ucop.edu/connexxus-public/sites/all/themes/connexxus/
 * Full inventory + the diff method: visual-qa-public/theme-delta.md
 *
 * ============================================================================
 * SCOPING
 * ============================================================================
 * This stylesheet is only ever loaded by the connexxus_public theme, which is
 * only ever enabled on the public site — so scoping is not strictly required.
 * Rules that must beat an identically-specific rule in the base theme's
 * css/styles.css are nevertheless prefixed with `body.site-public` (the class
 * emitted by connexxus_preprocess_html() in the shared theme). That both
 * guarantees the override regardless of aggregation/load order and reuses the
 * site-detection mechanism already proven by B2 rather than inventing a second
 * one.
 *
 * NOT IN THIS FILE, deliberately:
 *   The S-2 in-body link colour. Its rule
 *     .region-content-bottom a, .node a, .views-field-body a { color:#fe8730 }
 *   is already present and correct in the shared stylesheet; it stopped
 *   matching only because D11 no longer emits the `node` class on the node
 *   wrapper. That is repaired structurally in connexxus_public.theme
 *   (connexxus_public_preprocess_node), which restores the D7 class list and
 *   therefore the D7 cascade exactly. Writing a new, higher-specificity colour
 *   rule here would have changed which neighbouring rules win.
 */

/* ==========================================================================
   1. MAIN MENU SPACING + MEGA-MENU CONCIERGE ARTWORK
   --------------------------------------------------------------------------
   Relocated from the shared css/styles.css, where agent B2 had staged them
   gated on body.site-public. Consolidated here so there is ONE home for
   public-only styling. Declarations are byte-identical to B2's, which were
   themselves verified against the D7 forks:

     rule                                              D7 main             D7 public
     #block-system-main-menu > .menu > li.menu__item    margin 0 26px 0 0   margin 0 13px 0 0
     …> li.menu__item > span > a                        padding 0 11px 41px (none)

   Without this the public site's 6 longer top-level labels overflow
   #block-system-main-menu and wrap onto a second row over the logo.
   ========================================================================== */
@media (min-width: 992px) {
  body.site-public #block-system-main-menu > .menu > li.menu__item {
    margin: 0 13px 0 0;
  }

  body.site-public #block-system-main-menu > .menu > li.menu__item > span > a {
    padding: 0;
  }
}

/* The D7-public fork keeps the original "New to Connexxus? START HERE" artwork
   (its own 2018 revision, menu-button.png?2). The main fork replaced it with
   updatedBookingBackground_V3.png ("Wondering which Booking Option to choose?").
   Shipped as this sub-theme's own images/menu-button-public.png. */
@media (min-width: 992px) {
  body.site-public #block-system-main-menu .sub-menu-wrapper .connexxus-options a {
    background: url('../images/menu-button-public.png') center center no-repeat;
  }
}

/* ==========================================================================
   2. SAME-SELECTOR VALUE DIVERGENCES
   --------------------------------------------------------------------------
   Selectors that exist in BOTH D7 forks but carry different declarations.
   Only the render-affecting ones are reproduced; the remaining ~20 differ
   solely in the /connexxus/ vs /connexxus-public/ prefix inside url(), which
   is a base-path concern (A2 lane), not a theme-fork concern.
   ========================================================================== */

/* D7 public: `#top-bar .menu .alerts { text-align:right; overflow:visible }`
   D7 main:   no `overflow` declaration.
   The public top bar's ALERTS button carries an absolutely-positioned "new
   alert" badge that the main fork clips. */
body.site-public #top-bar .menu .alerts {
  overflow: visible;
}

/* D7 public blocks.css adds `display:block` to this disclaimer; the main fork
   leaves it inline. */
body.site-public #block-ucop-connexxus-block4 .disclaimer {
  display: block;
}

/* D7 main blocks.css hides the 10-year-anniversary badge
   (`display:none`); the public fork does NOT — the badge is visible there.
   Inert unless the badge block is actually placed in header_below on the
   public site; kept for fork fidelity. */
body.site-public .region-header-below .block.block-10-year-badge {
  display: block;
}

/* ==========================================================================
   3. USER PROFILE FORM  (#user-profile-form, 13 selectors)
   -----------------------------------------------------------------------
   PUBLIC-ONLY. Present in the D7 public fork's css/styles.css (lines
   1478-1538), absent from the main fork entirely — the main site has no
   self-service profile form. Copied verbatim.
   ========================================================================== */


/*====================================
=            User Profile            =
====================================*/
#user-profile-form {
  color: #4b5250;
}

#user-profile-form p {
  color: #778380;
  text-align: center;
}

/* adjust gutter */
#user-profile-form .row {
  margin-left: -30px;
  margin-right: -30px;
}

#user-profile-form .row > div {
  padding-left: 30px;
  padding-right: 30px;
}

#user-profile-form .form-item {
  margin: 1em 0;
}

#user-profile-form label {
  text-transform: uppercase;
}

#user-profile-form .description {
  padding-left: 3px;
}

#user-profile-form .username > div {
  padding-left: 35px;
}

/* form fields are full width */
#user-profile-form input[type=text],
#user-profile-form input[type=email],
#user-profile-form input[type=password] {
  width: 100%;
  padding: 18px 25px;
}

#user-profile-form select {
  padding-top: 18px;
  padding-bottom: 18px;
  padding-left: 25px;
}

#user-profile-form input[type=submit] {
  font-weight: bold;
  padding-left: 3em;
  padding-right: 3em;
}

/*=====  End of User Profile  ======*/


/* ==========================================================================
   4. FAQ PAGE  (.view-frequently-asked-questions, #faq-filter)
   -----------------------------------------------------------------------
   PUBLIC-ONLY. The two sites run DIFFERENT FAQ implementations:
     main   -> view `faq_related_links`, styled by css/pages-faq.css
               (a main-fork-only file, already in the shared theme)
     public -> view `frequently_asked_questions`, styled by these rules, which
               live inline in the public fork's css/pages.css (lines 348-529)
   The shared theme inherited only the MAIN version, so the public FAQ page
   rendered as an unstyled list of every question and answer at once (the
   accordion depends on `.views-field-field-faq-answer { display:none }`).
   Copied verbatim from the D7 public fork.
   ========================================================================== */

/*================================
=            FAQ Page            =
================================*/
/* Very similar to the Campus Directory page */
/*----------  On Page Filter Form  ----------*/
#faq-filter {
  margin: 2.5em 0 4em;
}

#faq-filter label {
  color: #4b5250;
  font-size: 1.2em;
  padding-top: 0.5em;
  text-transform: uppercase;
  text-align: right;
}
@media (max-width: 767px) {
  #faq-filter label {
    text-align: center;
  }
}

#faq-filter input {
  padding-top: 1em;
  padding-bottom: 1em;
  width: 100%;
}

/*----------  Listing  ----------*/
/* collpased or hidden content */
.view-frequently-asked-questions .views-row,
.view-frequently-asked-questions .views-field-nid,
.view-frequently-asked-questions .views-field-field-faq-answer {
  display: none;
}

/* expanded content */
.view-frequently-asked-questions.filtered .views-row,
.view-frequently-asked-questions .section.expanded > .views-row,
.view-frequently-asked-questions.filtered .views-field-field-faq-answer,
.view-frequently-asked-questions .selected .views-field-field-faq-answer {
  display: block;
}

.view-frequently-asked-questions.filtered .views-row.noMatch {
  display: none;
}

.view-frequently-asked-questions {
  font-weight: bold;
}

.view-frequently-asked-questions h3 {
  color: #1ba0db;
  text-transform: uppercase;
  padding-left: 60px;
  cursor: pointer;
  min-height: 38px;
  margin-top: 0.9em;
  margin-bottom: 0.5em;
}
  .view-frequently-asked-questions h3[data-dt="agencies"] {
    background: url('../../connexxus/images/icons/icon_faq_agencies.png') left center no-repeat;
  }
  .view-frequently-asked-questions h3[data-dt="air-program"] {
    background: url('../../connexxus/images/icons/icon_faq_air.png') left center no-repeat;
  }
  .view-frequently-asked-questions h3[data-dt="booking"] {
    background: url('../../connexxus/images/icons/icon_faq_booking.png') left center no-repeat;
  }
  .view-frequently-asked-questions h3[data-dt="car-program"] {
    background: url('../../connexxus/images/icons/icon_faq_car.png') left center no-repeat;
  }
  .view-frequently-asked-questions h3[data-dt="general"] {
    background: url('../../connexxus/images/icons/icon_faq_general.png') left center no-repeat;
  }
  .view-frequently-asked-questions h3[data-dt="lodging-program"] {
    background: url('../../connexxus/images/icons/icon_faq_hotel.png') left center no-repeat;
  }
  .view-frequently-asked-questions h3[data-dt="profile"] {
    background: url('../../connexxus/images/icons/icon_faq_profile.png') left center no-repeat;
  }
  .view-frequently-asked-questions h3[data-dt="rail-program"] {
    background: url('../../connexxus/images/icons/icon_faq_rail.png') left center no-repeat;
  }
  .view-frequently-asked-questions h3[data-dt="myths"] {
    background: url('../../connexxus/images/icons/icon_faq_myth.png') left center no-repeat;
  }

.view-frequently-asked-questions h3 span {
  color: #a6b2af;
  font-size: 0.65em;
}

.view-frequently-asked-questions h3 + .section {
  border-bottom: 1px solid #a6b2af;
  padding-left: 6.2%;
}

.view-frequently-asked-questions h3 + .section:last-child {
  border-bottom: 0;
}

.view-frequently-asked-questions .views-row {
  padding: 1.1em 1.6667em 1.2em;
}
@media (max-width: 767px) {
  .view-frequently-asked-questions .views-row {
    padding-left: 0.5em;
    padding-right: 0.5em;
  }
}

.view-frequently-asked-questions.filtered .views-row,
.view-frequently-asked-questions .views-row.selected {
  background: #f0f9f7;
  margin-bottom: 10px;
}

.view-frequently-asked-questions .views-field-field-faq-question {
  text-transform:uppercase;
  font-weight: bold;
  font-size: 1.1111em;
  cursor:pointer;
}
@media (max-width: 767px) {
  .view-frequently-asked-questions .views-field-field-faq-question {
    font-size: 0.9em;
  }
}

.view-frequently-asked-questions.filtered .views-field-field-faq-question,
.view-frequently-asked-questions .selected .views-field-field-faq-question {
  color: #fe8730;
}

.view-frequently-asked-questions .views-field-field-faq-question .field-content:before {
  content: "\2022"; /* bullet */
  padding-right: 5px;
}

.view-frequently-asked-questions .views-field-field-faq-question .field-content .ion-chevron-down {
  display: none;
  font-size: 0.65em;
  padding-left: 10px;
}

.view-frequently-asked-questions .views-field-field-faq-question.selected .field-content .ion-chevron-down {
  display: inline;
}

.view-frequently-asked-questions .views-field-field-faq-answer {
  color: #4b5250;
  margin-left: 2.1em;
  margin-top: 0.9em;
}
@media (max-width: 767px) {
  .view-frequently-asked-questions .views-field-field-faq-answer {
    margin-left: 0.25em;
    font-size: 0.9em;
  }
}

.view-frequently-asked-questions .views-field-field-faq-answer p,
.view-frequently-asked-questions .views-field-field-faq-answer ul {
  margin: 0;
}

.view-frequently-asked-questions .views-field-field-faq-answer ul {
  margin-top: 0.3em;
  padding-left: 51px;
}
@media (max-width: 767px) {
  .view-frequently-asked-questions .views-field-field-faq-answer ul {
    padding-left: 17px;
  }
}

.view-frequently-asked-questions .views-field-field-faq-answer a {
  color: #fe8730;
}
/*=====  End of FAQ Page  ======*/


/* ==========================================================================
   5. VIDEO LIBRARY  (.view-id-video_tutorials, #block-views-video-tutorials-block-1)
   -----------------------------------------------------------------------
   PUBLIC-ONLY. Same story as the FAQ page: the public fork's view is
   `video_tutorials`, the main fork's is `video_library_page`, and only the
   latter's CSS was ported. Copied verbatim from the public fork's
   css/pages.css (lines 198-313).
   NOTE: /video-library currently 404s on D11-public because the
   `video_tutorials` view config was never migrated (tracker, B1 CAPTURE
   "Structural asymmetries"). These rules are inert until that view exists;
   they are shipped now so the page is styled the moment it is restored.
   ========================================================================== */

/*=====================================
=            Video Library            =
=====================================*/
.view-id-video_tutorials .views-field-title {
  text-transform: uppercase;
  font-weight: bold;
}

/*----------  Block - Featured Video  ----------*/
#block-views-video-tutorials-block-1 {
  font-weight: bold;
  padding-top: 1.4em;
  padding-bottom: 1.6em;
}
@media (min-width: 768px) {
  #block-views-video-tutorials-block-1 {
    padding-left: 3.7em;
    padding-right: 3.7em;
  }
}

#block-views-video-tutorials-block-1 .views-field {
  /*max-width: 640px;*/
  margin: 0 auto;
}

#block-views-video-tutorials-block-1 .views-field-nothing-1 {
  color: #1ba0db;
  font-size: 1.3333em;
  text-transform: uppercase;
  margin-bottom: 0.3em;
}
@media (min-width: 768px) {
  #block-views-video-tutorials-block-1 .views-field-nothing-1 {
    font-size: 1.6667em;
  }
}

#block-views-video-tutorials-block-1 .views-field-field-video-thumbnail-url2 {
  background: rgba(0, 0, 0, 0.75);
  margin-bottom: 2.4em;
}

#block-views-video-tutorials-block-1 .views-field-field-video-thumbnail-url2 img {
  max-height: 396px;
}
@media (max-width: 767px) {
  #block-views-video-tutorials-block-1 .views-field-field-video-thumbnail-url2 img {
    max-width: 80%;
  }
}

#block-views-video-tutorials-block-1 .views-field-title {
  font-size: 1.3333em;
  margin-bottom: 0.3em;
}

/*----------  Page - All Videos  ----------*/
.view-id-video_tutorials.view-display-id-page_1 {

}

/* Header Text */
.view-id-video_tutorials.view-display-id-page_1 .view-header {
  text-align: center;
  font-weight: bold;
  font-size: 1.66667em;
  text-transform: uppercase;
  color: #4b5250;
  margin: 1.6em 0 0.6em;
}

/* Video Listing */
.library-video-thumbnail-img {
  margin: 0 auto;
  display: block;
}

.view-id-video_tutorials.view-display-id-page_1 .views-field-nothing.row {
  padding-left: 1.85em;
  padding-right: 1.85em;
  padding-bottom: 2em;
  margin-bottom: 2em;
}
@media(max-width: 1249px) {
  .view-id-video_tutorials.view-display-id-page_1 .views-field-nothing.row {
    border-bottom: 1px solid #c7cbca;
  }
}

.view-id-video_tutorials.view-display-id-page_1 .library-video-thumbnail-img {
  margin-bottom: 2.8em;
  height: 235px;
  border: 1px solid #a6b2af;
}
@media(max-width: 1249px) {
  .view-id-video_tutorials.view-display-id-page_1 .library-video-thumbnail-img {
    height: auto;
    width: auto;
    max-width: 100%;
  }
}

.view-id-video_tutorials.view-display-id-page_1 .views-field-title {
  color: #4b5250;
}

.view-id-video_tutorials.view-display-id-page_1 .views-field-field-video-description {
  line-height: 1.6667em;
}
@media(max-width: 767px) {
  .view-id-video_tutorials.view-display-id-page_1 .views-field-field-video-description {
    font-size: 0.85em;
  }
}
/*=====  End of Video Library  ======*/