/* 
    QC Registry
    Website CSS - Paragraph
    By: Glimsol Web & Digital Solutions (PH)
*/

/* Global CSS  */
/* Base title style */
.title,
.bebas-title { font-family: "BebasNeue"; font-size: 3.3rem; text-transform: uppercase; color: var(--qcregistry-dark-blue); }
/* White variants */
.title-white,
.bebas-title-white { font-family: "BebasNeue"; font-size: 3.3rem; text-transform: uppercase; color: white; }
/* h4 specific title styles */
h4.title,
h4.bebas-title { font-size: 2.75rem; }
h4.title-white,
h4.bebas-title-white { font-size: 2.75rem; }
.title-pill { padding: 5px 15px; background-color: var(--qcregistry-red); display: inline; color: white; text-transform: uppercase; border-radius: 50px; }
.paragraph-section { padding-block: 30px;}
.small-title { font-weight: 500; display: block; margin-bottom: 5px; text-transform: uppercase;}
.yellow{ color: var(--qcregistry-yellow);}
.view .view-content > div > ul { list-style: none; padding: 0; margin-bottom: 0;}
.bottom-border{border-bottom: 1px solid rgba(75, 75, 75, 0.3);}
.viewsreference--view-title { display: none;}

/* QC Database Search  */
.qc-database-search {position: relative; overflow: hidden;}
.qc-database-search h3.title { color: var(--qcregistry-white); font-size: 3rem;}
.qc-database-search > img { position: absolute; z-index: -1;}
.qc-database-search > .container { padding-top: 60px; padding-bottom: 60px; text-align: center; color: var(--qcregistry-white); position: relative; z-index: 2;}
.qc-database-search::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ''; background: var(--qcregistry-mid-blue); opacity: 0.8; z-index: 1;}
.qc-database-input { max-width: 500px; display: flex; margin-inline: auto; background: var(--qcregistry-white); border-radius: 6px; padding: 3px 10px;}
.qc-database-input input { flex-grow: 1; border: none; color: var(--qcregistry-blue); padding-left: 10px;}
.qc-database-input input:focus-visible{border: none; outline: none;}
.qc-database-input:has(input:focus-visible){outline: 2px solid var(--qcregistry-blue);}
.qc-database-input input::placeholder{color: var(--qcregistry-blue);}
.qc-database-input button { border: none; background: transparent; color: var(--qcregistry-blue);}

/* Film Making details */
/* .film-making-community.paragraph-section { padding-block: 60px;} */
/* .film-making-details { max-width: 500px; padding-block: 30px;} */
.film-making-details { padding-block: 30px;}
.col-12.col-md-6:has(.film-making-details) { display: grid; place-self: center;}
/* .registration-cards ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;} */
.registration-card {background-color: var(--qcregistry-blue); transition: all 300ms;  padding-top: 20px; height: 100%; display: flex; flex-direction: column; border-radius: 5px; overflow: hidden;}
.registration-cards ul { display: flex; justify-content: space-between; gap: 20px;}
.registration-cards ul li { flex: 1 0 33%;}
.registration-gcards > .row { row-gap: 15px;}
.registration-card a { text-decoration: none; color: var(--qcregistry-dark-blue); display: flex; height: 100%; flex-direction: column;}
.registry-gcard {border-radius: 5px;}
.registry-gcard:not(.signup-to):hover,
.node-3 .registry-gcard:not(.signup-to).active-3,
.node-14 .registry-gcard:not(.signup-to).active-14,
.node-2 .registry-gcard:not(.signup-to).active-2{ cursor: pointer; background: var(--qcregistry-blue);}
.registry-gcard:not(.signup-to):hover a,
.node-3 .registry-gcard.active-3:not(.signup-to) a:not(.rg-signup),
.node-14 .registry-gcard.active-14:not(.signup-to) a:not(.rg-signup),
.node-2 .registry-gcard.active-2:not(.signup-to) a:not(.rg-signup) { color: var(--qcregistry-white);}
.registry-gcard:not(.signup-to):hover p:not(.rg-signup),
.node-3 .registry-gcard:not(.signup-to).active-3 p:not(.rg-signup),
.node-14 .registry-gcard:not(.signup-to).active-14 p:not(.rg-signup),
.node-2 .registry-gcard:not(.signup-to).active-2 p:not(.rg-signup) { color: var(--qcregistry-dirty-white);}

.node-3 .registry-gcard:not(.signup-to).active-3 .rg-signup,
.node-14 .registry-gcard:not(.signup-to).active-14 .rg-signup,
.node-2 .registry-gcard:not(.signup-to).active-2 .rg-signup{ text-decoration: underline; padding: 5px 20px;}
.registry-gcard:not(.signup-to):hover .rg-signup { padding: 5px 20px;}
.registry-gcard:not(.signup-to) .rg-signup:hover { text-decoration: underline;}
.registry-gcard .rg-signup svg { margin-left: 5px;}

/* registration-card (as seen in the homepage)*/
.registration-cards li > div,
.registration-cards li > div > span{ display: block; height: 100%;}
.registration-card a > *:not(span):not(img) { padding-inline: 20px;}
.registration-card span { transition: background-color 0.5s ease; display: block; margin-top: auto; background: var(--qcregistry-red); color: var(--qcregistry-white); text-align: center; padding: 5px 3px 3px; font-size: 1.1rem;}
.registration-card h5 { line-height: 1;}
.registration-card:hover span{background-color: var(--qcregistry-darker-red);}
.registration-card img { margin-left: 20px; width: 45px; height: auto; margin: 0 auto; margin-bottom: 15px;}
.registration-card p { font-size: 0.85rem; margin-bottom: 20px;}
.registry-gcard.signup-to h3 {
    font-size: 1.2rem;
    text-wrap: auto;
    color: var(--qcregistry-blue);
}
.registry-gcard.signup-to > div {
    display: flex;
    margin-top: auto;
    column-gap: 20px;
}
.registry-gcard.signup-to > div .rg-signup{ 
    padding: 0;
}
.registry-gcard.signup-to > div a:not(:last-child) {
    /* margin-right: 10px;
    padding-right: 10px;
    border-right: 1px solid var(--qcregistry-blue); */
}
.registry-gcard.signup-to > div a {
    padding-block: 0;
}
.registry-gcard.signup-to{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.film-making-community.paragraph-section .registration-cards{ row-gap: 1.1em;}

/* Content: Views with Title  */
.content-homepage .content-view-title.paragraph-section { padding-block: 60px;}
.content-view-title .title { text-align: center;}

/* Social Services */
.social-services-cards.container { max-width: 800px; margin-top: 40px;}
.social-services-card { text-align: center;}
.social-services-card a { text-decoration: none; color: var(--qcregistry-gray); font-size: 0.83rem; transition: all 300ms;}
.social-services-card a:hover{ color: var(--qcregistry-yellow);}
.social-services-card a svg { margin-left: 5px;}
.social-services-card h5{ font-size: 1rem;}
.ss-card-img { background: var(--qcregistry-blue); padding: 30px; aspect-ratio: 210/130; text-align: center; border-radius: 6px; margin: 0 35px 10px;}
.ss-card-img img { width: auto; height: 100%; aspect-ratio: 210 / 130; object-fit: contain;}

/* Qualify to apply  */
.content-qualify-to-apply { background: var(--qcregistry-dirty-white);}
/* REMOVE THIS COMMENT IF COMMITTED NA SA CHANGES FOR  QUALIFICATION-ITEM */
/* .qualification-item img { width: 70px;}
.qualification-item { display: flex; align-items: center; gap: 20px; margin-bottom: 30px; border-bottom: 1px solid rgba(75, 75, 75, 0.5); padding-bottom: 30px;}
.qualification-item h6 { margin-bottom: 2px; color: var(--qcregistry-blue);}
.qualification-item > div > p:last-child { margin-bottom: 0;} */
.qualification-item img { width: 50px;}
.qualification-item { display: flex; align-items: center; gap: 15px; margin-bottom: 10px;  padding-bottom: 15px;}

/* .qualification-item h6 { margin-bottom: 2px; color: var(--qcregistry-blue);} */
.qualification-item > div > p:last-child { margin-bottom: 0;}

.qualification-item-check { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 7px;}
.qualification-item-check img { width: 25px;}
.qualification-item-check h6 { margin-bottom: 0;}
.qualification-wrapper-check { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); column-gap: 10px; margin-top: 1em;}
.qualification-item-check > div { margin-top: 2px;}

/* Application process */
.row:has(.application-step) { counter-reset: application-step; row-gap: 25px;}
.application-step-outer::before { counter-increment: application-step; content: "STEP " counter(application-step); display: grid; height: 50px; background: var(--qcregistry-red); color: var(--qcregistry-white); place-content: center; font-size: 1.5rem; font-weight: 500; position: absolute; top: -5px; left: 0; right: 0; margin: 0 auto; border-top-left-radius: 5px; border-top-right-radius: 5px;}
.application-step-outer{ position: relative; height: 100%;}
.application-step { background: var(--qcregistry-blue); color: var(--qcregistry-white); font-weight: bold; font-size: 0.9rem; height: 100%; border-radius: 5px; padding: 60px 20px 10px 20px;}
.application-step h5 {text-align: center; font-size: 1.5rem;}
.application-step a { font-size: 0.8rem; text-decoration: none; color: var(--qcregistry-white); font-weight: 500; transition: all 300ms;}
.application-step .img-wrapper { display: flex ; margin-bottom: 1.2em;}
.application-step .img-wrapper img { margin: 0 auto; filter: invert(1); width: 80px; height: 80px;}
.content-application-process .row > div:last-of-type .img-wrapper img { filter: none;}
/* Application Requirement  */
.content-application-requirements { position: relative; overflow: hidden;}
/* .content-application-requirements img { position: absolute; bottom: 0; left: 0; z-index: -1; width: 100%;} */
.content-application-requirements ol:not(.normal) li::marker { font-weight: bold;}
.content-application-description { margin-top: 30px; color: var(--qcregistry-dark-blue); line-height: 1.8;}
.content-application-description li a { text-decoration: none; color: var(--qcregistry-dark-blue);}

.content-application-requirements .grid-basic-cards { display: grid ; justify-content: center; text-align: center; gap: 15px; grid-template-columns: repeat(5, 1fr); }/*grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));*/
.node-14 .content-application-requirements .grid-basic-cards { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));}
.content-application-requirements .grid-basic-cards .content-basic-card { background-color: var(--qcregistry-blue); padding: 20px 10px; border-radius: 10px; color: white; }
.content-application-requirements .grid-basic-cards .content-basic-card h3 { font-family: 'BebasNeue'; margin-bottom: 0; font-size: 1.55rem;}
.content-application-requirements .grid-basic-cards .content-basic-card p { font-size: 0.8rem; margin-bottom: 0; }

.content-registration{margin-bottom: 0;}

/* Follow Step  */
.row:has(.follow-step) {
    counter-reset: follow-step;
    row-gap: 25px;
}
.follow-step::before {
    counter-increment: follow-step;
    content: counter(follow-step);
    display: grid;
    width: 35px;
    height: 35px;
    background: var(--qcregistry-blue);
    color: var(--qcregistry-white);
    place-content: center;
    border-radius: 50%;
    font-size: 1.5rem;
    font-weight: 500;
    box-shadow: 0 0 0px 2px var(--qcregistry-white), 0 0 0 5px var(--qcregistry-blue);
    margin: 0 0 20px 7px;
}
.follow-step {
    box-shadow: 0px 2px 12px #5B5B5B26;
    padding: 30px;
    height: 100%;
}
.follow-step h6 {
    font-weight: 600;
}
.follow-step > div * {
    color: var(--qcregistry-gray);
}
.follow-step > div li::marker {
    color: var(--qcregistry-blue);
    font-size: 1.5rem;
    line-height: 0;
}
.follow-step > div ul {
    list-style: circle;
    padding-left: 22px;
    margin-block: 0;
}
.follow-steps-cta {
    display: grid;
    place-content: center;
    padding: 30px 30px 0px;
}
.follow-step > div li:not(:last-child) {
    margin-bottom: 8px;
}

/* Content: Section Header */
.content-section-header { /*empty muna */ }

/* Layout: Alternating Strip */
.layout-alternate-strip .container-fluid { padding-left: 0; padding-right: 0;}
.layout-alternate-strip .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));}
.layout-alternate-strip .cards .content-basic-card { padding: 2em 2.5em; display: flex; justify-content: space-between; flex-direction: column; align-items: center; text-align: center;}
.layout-alternate-strip .cards > * h3 { font-size: 2rem;}
.layout-alternate-strip .cards > *:nth-child(odd){ background-color: var(--qcregistry-blue); color: white;}
.layout-alternate-strip .cards > *:nth-child(even){ background-color: var(--qcregistry-lavender); color: var(--qcregistry-blue);}
.layout-alternate-strip .title { text-align: center; }

/* Content: Basic Card */
.content-basic-card img { margin-bottom: 1em; width: 50px; height: 50px; object-fit: contain;}

/* Layout: Two Column w/ Image */
.layout-two-column .text-column{ padding: 1.5em; background-color: var(--qcregistry-blue); color: white; display: flex; justify-content: center; flex-direction: column; height: 100%;}
.layout-two-column .cta-btn { transition: background-color 0.5s; background-color: var(--qcregistry-red); color: white; border: unset; }
.layout-two-column .cta-btn:hover { background-color: var(--qcregistry-darker-red) }
.layout-two-column .text-column h3.title { font-size: 2.5rem; letter-spacing: 1px; color: white;}
.layout-two-column .small-title { color: white; background-color: var(--qcregistry-red); display: inline-block; margin-bottom: 5px; padding: 3px 12px; border-radius: 20px;}
.layout-two-column .row > * { padding-left: 0; padding-right: 0; }
.content-about-page .layout-two-column .texts-w-cta:first-child { margin-bottom: 20px;} 
.layout-two-column img { height: 100%;}
.content-about-page .layout-two-column img{ aspect-ratio: 660 / 380; object-fit: cover; } /* can be changed to default if the aspect ratio is okay for all */

/* Basic registration card and wrapper (about us page) */
.registration-cards-basic { display: flex; justify-content: center; align-items: center; text-align: center; gap: 10px;}
.registration-card-basic { text-decoration: none; flex: 1 0 33%; background-color: var(--qcregistry-blue); color: white; padding: 20px 10px; border-radius: 10px; display: flex; flex-direction: column; justify-content: space-around; align-items: center; row-gap: 20px;}
.registration-card-basic:hover { background-color: var(--qcregistry-mid-blue);}
.registration-card-basic h5 { text-decoration: none; color: white; font-size: 1.2rem; display: -webkit-box; max-width: 200px; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
.registration-card-basic img { width: 40px;}

/* Layout: Accordion with Title */
.layout-accordion-wrapper { background-color: var(--qcregistry-blue); padding-top: 40px; padding-bottom: 40px; color: white;}
.layout-accordion-wrapper .accordion { --bs-accordion-bg: var(--qcregistry-blue); --bs-accordion-color: white;}
.layout-accordion-wrapper .accordion-item { --bs-accordion-border-color: white; margin-bottom: 1em; border-radius: var(--bs-accordion-border-radius); border-top: 1px solid white; overflow: hidden;}
.layout-accordion-wrapper .accordion-button { color: white;}

/* Content: Large Text w/ button */
.large-text-w-button { background-color: var(--qcregistry-red); color: white;}
.large-text-w-button .cta-btn { text-transform: uppercase; margin: 0 auto; background-color: var(--qcregistry-blue); color: white; border: unset;}
.large-text-w-button .cta-btn:hover { background-color: var(--qcregistry-mid-blue);}

/* Content: Description Section */
.description-section > .row p { margin-bottom: 0;}
.description-section > .row .row > * { padding-right: 0;}
.description-section .description-list { display: flex; flex-wrap: wrap; gap: 8px;}
.description-section .description-list .logo-item { display: flex ; align-items: center; column-gap: 8px; flex: 1 0 100%;}
.description-section .description-list .logo-item img { width: 36px;}
/* Layout: Grid w/ Title and Button */
.layout-grid-w-title-btn .grid-layout { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));}
.layout-grid-w-title-btn .vertical-logo-text { padding: 0 50px;}
.layout-grid-w-title-btn .vertical-logo-text .title { font-size: 1.7rem; font-family: Neue Haas;}
.layout-grid-w-title-btn .logo img { aspect-ratio: 181 / 178;}
/* .layout-grid-w-title-btn .cta-btn { display: inline; text-transform: uppercase; background-color: var(--qcregistry-red); color: white; padding: 10px 30px;}
.layout-grid-w-title-btn .cta-btn:hover { background-color: var(--qcregistry-darker-red); border: unset;} */

/* Layout: Need support Section */

.horizontal-flex img { margin-right: 5px; }
.layout-need-support { background-color: var(--qcregistry-blue); color: white;}
.layout-need-support .horizontal-flex { margin-bottom: 5px;}
.layout-need-support .container { display: flex; justify-content: space-between; }
.layout-need-support .container .right-col { text-align: end;}
.layout-need-support .titles h3 { line-height: 0.9;}
.layout-need-support .titles .title { font-weight: bold; color: white; font-size: clamp(3.3rem, 6vw + 1rem, 5rem);}
.layout-need-support .titles .subtitle { font-family: "BebasNeue"; color: white; font-size: clamp(3rem, 6vw + 1rem, 4.8rem);}